python - FullCalendar in Django

Question

So, I have an appointment models

class Appointment(models.Model):
    user = models.ForeignKey(User)
    date = models.DateField()
    time = models.TimeField()
    doctorName = models.CharField(max_length=50)`

And I want to implement this in the FullCalendar tool. I'm not sure how to even begin. Any help is appreciated. Thanks.

Answer 1

Since your question shows you haven't tried anything , guessing you know javascript and tried some hands on full calendar js.

Suppose you have model named Event for displaying different events in calendar.

class Events(models.Model):
    even_id = models.AutoField(primary_key=True)
    event_name = models.CharField(max_length=255,null=True,blank=True)
    start_date = models.DateTimeField(null=True,blank=True)
    end_date = models.DateTimeField(null=True,blank=True)
    event_type = models.CharField(max_length=10,null=True,blank=True)

    def __str__(self):
        return self.event_name

In your views.py

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

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

        for i in all_events:
            event_sub_arr = {}
            event_sub_arr['title'] = i.event_name
            start_date = datetime.datetime.strptime(str(i.start_date.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
            end_date = datetime.datetime.strptime(str(i.end_date.date()), "%Y-%m-%d").strftime("%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,'admin/poll/event_management.html',context)

And finally in your template setup full calendar with including necessary CSS,JS Files and HTML code.And then ,

<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            defaultDate: '2016-07-19',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            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>

Dynamically on some event you need to change events for example by changing dropdown you need to filter events ,

$(document).ready(function(){
        $('.event_types').on('change',function(){
            var event_type = $.trim($(this).val());
            $.ajax({
                url: "{% url 'manage-event' %}",
                type: 'GET',
                data:{"event_type":event_type},
                cache: false,
                success: function (response) {
                    var event_arr = $.parseJSON(response);
                    $('#calendar').fullCalendar('removeEvents');
                    $('#calendar').fullCalendar('addEventSource', event_arr);         
                    $('#calendar').fullCalendar('rerenderEvents' );

                },
                error: function () {
                    alert("error");
                }


            })
            })

    })