Is there a way to disable cache on FullCalendar? - asp.net

Question

I'm using FullCalendar on asp.net application. I noticed that when FullCalendar receives data from SQL Server via Web-Method > JSON, it creates a cache file (EventList.json) inside browser history/temporary folder.
I have cache:false on every method but I don't know how to apply the same thing on events: calendar.asmx/EventList .
Please refer to my other post that shows how I receive my data via web-method.
So my questions are:
Is there a way to disable cache on events?
How can I use ajax like other methods to get data, because with this method I can disable cache
function runCalendar() {
var $modal = $('#event-modal');
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* Initialize the calendar */
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var form = '';
var today = new Date($.now());
var calendar = $('#calendar').fullCalendar({
slotDuration: '00:15:00',
/* If we want to split day time each 15minutes */
minTime: '08:00:00',
maxTime: '20:00:00',
timeFormat: 'HH(:mm)',
defaultView: 'agendaWeek',
events: "calendar.asmx/EventList",
lazyFetching: false,
allDaySlot: false,
firstDay: 1,
//weekends: false,
handleWindowResize: true,
//columnFormat:'ddd / DD',
selectHelper: true,
height: $(window).height() - 200,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
eventLimit: true, // allow "more" link when too many events
drop: function(date) {
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
var $categoryClass = $(this).attr('data-class');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
if ($categoryClass) copiedEventObject['className'] = [$categoryClass];
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
selectable: true,
eventClick: function(calEvent, jsEvent, view) {
var form = $("<form></form>");
form.append("<label>Change event name</label>");
form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='fa fa-check'></i> Save</button></span></div>");
$modal.modal({
backdrop: 'static'
});
$modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function() {
calendar.fullCalendar('removeEvents', function(ev) {
$.ajax({
type: "POST",
cache: false,
contentType: "application/json; charset=utf-8",
url: "calendar.aspx/DeleteCalendarEvent",
dataType: "json",
data: "{'id':'" + calEvent._id + "'}",
});
return (ev._id == calEvent._id);
});
$modal.modal('hide');
});
$modal.find('form').on('submit', function() {
calEvent.title = form.find("input[type=text]").val();
calendar.fullCalendar('updateEvent', calEvent);
$.ajax({
cache: false,
type: "POST",
contentType: "application/json; charset=utf-8",
url: "calendar.aspx/UpdateCalendarEvent",
dataType: "json",
data: "{'id':'" + calEvent._id + "','title':'" + calEvent.title + "'}",
});
$modal.modal('hide');
return false;
});
},
eventDrop: function(event, ui, jsEvent) {
$.ajax({
type: "POST",
cache: false,
contentType: "application/json; charset=utf-8",
url: "calendar.aspx/MoveEvents",
dataType: "json",
data: "{'id':'" + event._id + "','start':'" + moment(event.start).format("DD MMMM YYYY HH:mm:ss") + "','end':'" + moment(event.end).format("DD MMMM YYYY HH:mm:ss") + "','allDay':'" + event.allDay + "'}",
});
},
eventResize: function(event, allDay) {
var allDay = !event.start.hasTime() && !event.end.hasTime();
$.ajax({
type: "POST",
cache: false,
contentType: "application/json; charset=utf-8",
url: "calendar.aspx/ResizeEvents",
dataType: "json",
data: "{'id':'" + event._id + "','end':'" + event.end.format("DD MMMM YYYY HH:mm:ss") + "','allDay':'" + event.allDay + "'}",
});
},
select: function(start, end, allDay) {
$modal.modal({
backdrop: 'static'
});
form = $("<form></form>");
form.append("<div class='row'></div>");
form.find(".row")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
.find("select[name='category']")
.append("<option value='busy'>Busy</option>")
.append("<option value='e1'>E1</option>")
.append("<option value='e2'>E2</option>")
.append("<option value='bg-blue'>Lunch</option>")
.append("<option value='bg-yellow'>Children</option></div></div>");
inputSelect();
$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function() {
form.submit();
});
$modal.find('form').on('submit', function() {
title = form.find("input[name='title']").val();
beginning = form.find("input[name='beginning']").val();
ending = form.find("input[name='ending']").val();
$categoryClass = form.find("select[name='category'] option:checked").val();
var allDay = !start.hasTime() && !end.hasTime();
if (title !== null && title.length != 0) {
//calendar.fullCalendar('renderEvent', {
// title: title,
// start:start,
// end: end,
// allDay: false,
// className: $categoryClass
//}, true);
$.ajax({
cache: false,
type: "POST",
contentType: "application/json; charset=utf-8",
url: "calendar.aspx/CreateCalendarEvent",
dataType: "json",
data: "{'title':'" + title + "','start':'" + start.format("DD MMMM YYYY HH:mm:ss") + "','end':'" + end.format("DD MMMM YYYY HH:mm:ss") + "','category':'" + $categoryClass + "','allDay':'" + allDay + "'}",
success: function(data) {
var obj = data.d;
if (obj == 'true') {
//$('#txtFirstName').val('');
//$('#txtLastName').val('');
//$('#txtCity').val('');
//$('#txtEmailID').val('');
//$('#lblmsg').html('Data Inserted Successfully');
}
},
error: function(result) {
alert(result);
}
});
calendar.fullCalendar('refetchEvents')
$modal.modal('hide');
} else {
alert('You have to give a title to your event');
}
return false;
});
calendar.fullCalendar('unselect');
}
});
/* Creation of new category */
$('.save-category').on('click', function() {
formCategory = $('#add-category form');
var categoryName = formCategory.find("input[name='category-name']").val();
var categoryColor = formCategory.find("select[name='category-color']").val();
if (categoryName !== null && categoryName.length != 0) {
$('#external-events').append('<div class="external-event bg-' + categoryColor + '" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="fa fa-move"></i>' + categoryName + '</div>')
runCalendar();
}
});
}
$(function() {
runCalendar();
});

Answer 1

Instead of:
events: "calendar.asmx/EventList",
following method can disable the cache
eventSources: [{
url: 'calendar.asmx/EventList',
type: 'POST',
cache: false
}],

Answer 2

According to FullCalendar documentation your call already prevents the browser from caching, and the fact that FullCalendar is a jQuery plugin means that under the hood it probably uses jQuery's $.ajax() method to retrieve the data.

Answer 3

In my case I had to turn off both lazyFetching and events cache:
eventSources: [
{
url: ...,
cache: false,
}
],
lazyFetching: false