FullCalender In Django

In this article i will demonstrate the use of FullCalendar in Django with its events.

<div id="calendar">

</div>

<div id='eventDialog' class='modal hide'>

       <div class="modal-header">

              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>

              <h3 id="eventDialogLabel">Create Appointment</h3>

       </div>

       <div class="modal-body">

      

       </div>

        <div class="modal-footer">

              <button type="submit" class="btn btn-primary" id="submitButton">Save</button>

              <button class="btn btn-primary hide" id="deleteButton">Delete</button>

              <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>

       </div>

</div>

<script type="text/javascript">

var startDate;

       var endDate;

       // allDay or not

       var appointmentType;

       var sourceFullView = { url: '/appointments/getappointments/' };

       var calendar=$('#calendar').fullCalendar({

              events: sourceFullView,

              defaultView:'agendaWeek',

              header: {

                     left: 'prev,next today',

                     center: 'title',

                 right: 'agendaWeek,agendaDay'

              },

              firstDay:1,

              slotDuration:'00:15:00',

              scrollTime:'07:00:00',

              selectable: true,

              selectHelper: true,

              editable: true,

              ignoreTimezone: false,

              lazyFetching:true,

              timezone:'UTC',

              select: function(start, end, allDay) {

                     eventType="";

                     $("#eventDialogLabel").html("New Appointment")

                     $("#eventID").val('')

                     $('#eventDialog').modal('show');

                     startDate=start;

                     endDate=end;

                     if(start._ambigTime) {

                           appointmentType=true;

                     }

                     else  

                           appointmentType=false;

                     $("#deleteButton").hide();

                      

              },

      

              eventClick: function(calEvent, jsEvent, view) {

                     eventType="";

                     $("#eventDialogLabel").html("Update Appointment");

                     $("#eventID").val(calEvent.id);

                     $("#deleteButton").show();

                     $('#eventDialog').modal('show');

                     startDate=calEvent.start;

                     endDate=calEvent.end;

                     if(calEvent.start._ambigTime) {

                           appointmentType=true;

                     }

                     else  

                           appointmentType=false;

                          

              },

              eventDragStart:function( event, jsEvent, ui, view ) {

                     eventType="eventDragStart";

                     startDate=event.start

              },

              eventDrop: function(event, delta, revertFunc) {

                     endDate=event.start;

                     EventDropOrResize(event);

              },       

              eventResize: function(event, delta, revertFunc) {

                     eventType="";

                     EventDropOrResize(event);

                    

              },

       });

       $("#deleteButton").on('click',function(){

              doPOST('DELETE');

              return false;

       });

       function EventDropOrResize(event)

       {

              $("#eventID").val(event.id);

              endDate=event.start;

              startDate=event.end;

              appointmentType=event.allDay

             

              doPOST("PUT");      

       }

       function doPOST(methodType)

       {

             

              $("#eventDialog").modal('hide');

              url="/appointments/getappointments/"

              if($("#eventID").val()!='')

              {

                     url+="?id="+$("#eventID").val();

              }

              var appointment={

            title_id: $("#id_title").val(),

            end:new Date(endDate),

            start:new Date(startDate),

                     type:$('#id_type').val(),

                     allDay:appointmentType

        }

              $.ajax({

                     type:methodType,

                     url:url,

                     datatype:'JSON',

                     data:JSON.stringify(appointment),

                     contentType: 'application/json; charset=utf-8',

                     async: false,

                     success:function(data){   

                           if(methodType=='DELETE')

                           {

                                  if($("#eventID").val()!='')

                                         $('#calendar').fullCalendar( 'removeEvents', [$("#eventID").val()] );

                           }

                           else if(data.id)

                           {

                                  if(data.id == $("#eventID").val())

                                         $('#calendar').fullCalendar( 'removeEvents', [data.id] );

                                  $('#calendar').fullCalendar( 'renderEvent', {id:data.id , title: data.title, start:  appointment.start,end:  appointment.end,allDay:appointment.allDay}, false);

                           }

                           else

                                  $('#calendar').fullCalendar('refetchEvents')

                     }     

              });

              return false;

       }

</script>

In views.py

def getappointments(request):

       try:

              if request.is_ajax():

                     id=request.GET.get('id')

                     if  request.method == "PUT":

                           # used to edit/delete appointments             

                           json_data=request.read()

                           data=json.loads(json_data)

                           if id:

                                  #logic to edit an appointment

                                  return JSONResponse({'id': appointment.id, 'title': appointment.title,'start':data['start'],'end':data['end'],'allDay': data['allDay']})

                           return JSONResponse("")

                     elif  request.method == "GET":

                           # used to get appointments

                           appointments=None

                                                             appointments=appointment.objects.filter().order_by('start')

                           return JSONResponse([{'id': o.id, 'title': o.title,'start':(o.start.isoformat()),'end':(o.end.isoformat()),'allDay':IsFullDayAppointment(o.start,o.end)} for o in appointments])

                     elif  request.method == "POST":

                           #used to save new appointments

                          

                           json_data=request.read()

                           data=json.loads(json_data)

                                  appointment=Appointment.objects.create(your fields……)

                           appointment.save()

                           return JSONResponse({'id':appointment.id, 'title': appointment.title,'start':data['start'],'end':data['end'],'allDay': data['allDay']})

                     elif request.method == "DELETE":

                           #used to delete appointments

                           if id:

                                  Appointment.objects.get(pk=id).delete()

                                  return JSONResponse("")

       except Exception, e:

              return JSONResponse(e.message)

def IsFullDayAppointment(startDate,endDate):

      

       d = endDate - startDate

       if d.days < 1 :

              return False

       else:

              return True

Now you can see the output

I hope this will help you.