FullCalender In Django
In this article i will demonstrate the use of FullCalendar in Django with its events.
I hope this will help you.
<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.
