Full Calendar in Django show events

Question

I am new to both Django & FullCalendar so any assistance that can be provided is greatly appreciated. My ultimate aim is to display events from an O365 calendar in Django using FullCalendar. Putting aside the O365 integration for now at this stage I am just trying to get FullCalendar to display the current events in my model. I have tried to emulate the solutions posted here FullCalendar in Django and here Fullcalendar Does not display data but unfortunately the events are not displaying.

Here is my code:

models.py from my app called "bookings"

from django.db import models

class Events(models.Model):
    event_id = models.AutoField(primary_key=True)
    exchange_id = models.CharField(max_length=255,null=True,blank=True)
    event_start = models.DateTimeField(null=True,blank=True)
    event_end = models.DateTimeField(null=True,blank=True)
    event_subject = models.CharField(max_length=255,null=True,blank=True)
    event_location = models.CharField(max_length=255,null=True,blank=True)
    event_category = models.CharField(max_length=255,null=True,blank=True)
    event_attendees = models.CharField(max_length=255,null=True,blank=True)

    def __str__(self):
        return self.event_subject

views.py. I've commented out the bits from the other solutions posted that relate to drop selection of category type. I have also tested using the below script in bookings.views.py, without success.

from bookings.models import Events

@method_decorator(login_required, name='dispatch')
class CalendarPage(TemplateView):
    template_name = 'calendar.html'

def event(request):
    all_events = Events.objects.all()
# get_event_types = Events.objects.only('event_category')

# if filters applied then get parameter and filter based on condition else return object
    if request.GET:
        event_arr = []
        # if request.GET.get('event_category') == "all":
        #     all_events = Events.objects.all()
        # else:
        #     all_events = Events.objects.filter(event_category__icontains=request.GET.get('event_category'))

        for i in all_events:
            event_sub_arr = {}
            event_sub_arr['title'] = i.event_subject
            start_date = date(i.event_start.date(), "%Y-%m-%d")
            end_date = date(i.event_end.date(), "%Y-%m-%d")
            event_sub_arr['start'] = start_date
            event_sub_arr['end'] = end_date
            event_arr.append(event_sub_arr)
        return HttpResponse(json.dumps(event_arr))

    context = {
        "events":all_events,
        # "get_event_types":get_event_types,

    }
    return render(request,'calendar',context)

and my template calendar.html:

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          defaultView: 'month',
          editable: true,
          eventLimit: true,
          events: [
                {% for i in events %}
                {
                    title: "{{ i.event_name}}",
                    start: '{{ i.start_date|date:"Y-m-d" }}',
                    end: '{{ i.end_date|date:"Y-m-d" }}',
                },
                {% endfor %}

            ]
        });
    });
</script>

I am using mysql as the backend database. I have created one record for testing purposes. This is the record I expect to see in the calendar:

# event_id, exchange_id, event_start, event_end, event_subject, event_location, event_category
1, , 2017-09-13 08:00:00.000000, 2017-09-13 09:00:00.000000, test, , all

The calendar itself is displaying as expected, just without the event. If I hardcode test data into the template 'calendar.html' script the events display in the calendar.

Has anyone had any experience with FullCalendar and/or Django and can help me identify where I am going wrong?

Answer 1

I ended up using this to get it working:

views.py:

@method_decorator(login_required, name='dispatch')
class CalendarPage(TemplateView):
    template_name = 'calendar.html'
    form_class = EventForm

    def get_context_data(self, **kwargs):
        context = super(CalendarPage, self).get_context_data(**kwargs)
        context['eventlist'] = Event.objects.all()
        return context

and in the template:

events: [
    {% for i in eventlist %}
    {
        title: "{{ i.event_title }}",
        start: '{{ i.event_start }}',
        end: '{{ i.event_end }}',
        location: "{{ i.event_location }}",
    },
    {% endfor %}
],

Answer 2

I think this will work for you.

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          defaultView: 'month',
          editable: true,
          eventLimit: true,
          events: events
        });
    });
</script>