在 FullCalendar.io 中使用 django 过滤器

Question

我正在我的 Django 项目中制作一个完整的日历，我想使用 django 过滤器来过滤日历。我已经成功地创建了日历和过滤器，但是我不能让它一起工作。

有没有人有在 fullcalendar 中包含 django 过滤器（或其他过滤方法）的经验，或者有解释 fullcalendar 中过滤的文档链接？

这是我的看法：

def kalender2(request):
    all_events = Timing.objects.all()    
    myFilter = CalenderFilter(request.GET, queryset=all_events)
    all_events = myFilter.qs

    if request.GET:  
        event_arr = []
        for i in all_events:
            event_sub_arr = {}
            event_sub_arr['title'] = i.event,i.name 
            start_date = datetime.strptime(str(i.start_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
            end_date = datetime.strptime(str(i.end_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
            event_sub_arr['start'] = start_date
            event_sub_arr['status'] = i.event.status
            event_sub_arr['end'] = end_date
            event_arr.append(event_sub_arr)
        return HttpResponse(json.dumps(event_arr))

    context = {
        "events":all_events,
        "myFilter":myFilter,
    }
    return render(request,'kalender/kalender.html', context) 

这是日历的脚本和模板：

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      initialDate: '2020-10-07',
      locale: 'nl',
      slotMinTime: "08:00:00",
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      buttonText: {
        timeGridDay: 'Dag',
        today:'Vandaag',
        timeGridWeek: 'Week',
        listWeek: 'Lijst',
        dayGridMonth: 'Maand'
      },
      eventDisplay: 'block',
      events: [
                {% for i in events %}
                {
                    title: "{{ i.event}} {{i.name}}",
                    start: '{{ i.start_time|date:"Y-m-d H:i" }}',
                    end: '{{ i.end_time|date:"Y-m-d H:i" }}',
                    status:'{{i.event.status}}',
                    className: ["event","{{i.event.status}}"],
                    allDay: false,
                },
                {% endfor %}


            ],

    eventTimeFormat: { // like '14:30:00'
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false
    }
     
    });

    calendar.render();
  });

</script>

{% extends "base.html" %}
{% block content %}
{% load crispy_forms_tags %}

<div class=flexbox-container-gantt>
  <div class = "flexbox-item-a-gantt">
    <form class ="filterform"method="GET">
      {{myFilter.form|crispy}}
    <button class="zoeken" type="submit"> Zoeken</button>
    </form>
  </div>
</div>


<div class=flexbox-container-gantt>
  <div class = "flexbox-item-a-gantt">
    <h1 class="title-box"> <i class="fas fa-calendar-plus"></i> Kalender </h1> 
    <hr class="box-line">
      <div class = "width_thing">
           <div id='calendar'></div>
      </div>
  </div>
      
</div>

</div>


{% endblock content %}

更新：我将 i.event 更改为字符串，现在它过滤数据。它在页面上显示原始数据，而不是在日历上，大概是因为 url：http://localhost:8000/Kalender/?event=43&name=1&event_name=。但我不确定这是否会导致它。

Answer 1

你可以这样做：

# views.py

def get_events(request):
    all_events = Timing.objects.all()    
    myFilter = CalenderFilter(request.GET, queryset=all_events)
    all_events = myFilter.qs

    event_arr = []
    for i in all_events:
        event_sub_arr = {}
        event_sub_arr['title'] = i.event,i.name 
        start_date = datetime.strptime(str(i.start_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
        end_date = datetime.strptime(str(i.end_time.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
        event_sub_arr['start'] = start_date
        event_sub_arr['status'] = i.event.status
        event_sub_arr['end'] = end_date
        event_arr.append(event_sub_arr)
        
       return JsonResponse(event_arr, safe=False) # safe=False is important, because Json actually
      # does not know about 'arrays'

您的 JavaScript 可能如下所示：

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      initialDate: '2020-10-07',
      locale: 'nl',
      slotMinTime: "08:00:00",
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      buttonText: {
        timeGridDay: 'Dag',
        today:'Vandaag',
        timeGridWeek: 'Week',
        listWeek: 'Lijst',
        dayGridMonth: 'Maand'
      },
      eventDisplay: 'block',
      eventSources: [
         // your event source
         {
             url: {% url 'name_of_your_view' %} // here you specify the url of your view
             color: 'yellow',    // an option!
             textColor: 'black'  // an option!
         }
    ],

    eventTimeFormat: { // like '14:30:00'
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false
    }
     
    });

    calendar.render();
  });

</script>