Use django filter in FullCalendar.io

Question

I am making a fullcalendar in my Django project, and I want to use django filters to filter the calendar. I have successfully created the calendar and the filters, but I can't get it to work together.

Does anyone have experience with including django filters (or another filtering approach) in a fullcalendar, or have a link to documentation that explains filtering in fullcalendar?

This is my view:

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) 

This is the script and template of the calendar:

<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 %}

UPDATE: I changed the i.event to a string and now it filters the data. It shows the raw data on the page, and not on the calendar, presumably because of the url: http://localhost:8000/Kalender/?event=43&name=1&event_name=. But I am not sure whether this causes it.

Answer 1

You can do something like this:

# 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'

Your JavaScript can look like this:

<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>