asp.net - Jquery FullCalendar + reload events in eventDrop function -
i need reload jquery fullcalendar ajax call ain't sure how rebind calendar again without recreating one, doing below initialize calendar events fetching dates getschedule method.
when eventdrop occurs, need fetch new set of data getschedule method , reload fullcalendar again, reason being events aren't suppose in dates.
the below code recreate fullcalendar when eventdrop occurs. can please kindly advice. thanks.
var sdate; var buildingevents; function initialize(loadevents) { $.ajax({ type: "post", url: "../account/webservices/webservices.asmx/getschedule", data: "{'custid': '" + $('#<%= hdncustid.clientid %>').val() + "' }", contenttype: "application/json; charset=utf-8", async: false, datatype: "json", success: function(result) { sdate = result.d; } }); var allevent = ""; buildingevents = $.map(sdate, function(item) { allevent += item + "&"; var splitresult = item.split("||"); var eventinfo = new array(); (var = 0; < splitresult.length; i++) { eventinfo[i] = splitresult[i]; } var splitresult_0 = eventinfo[0].split("|"); $('#<%= hdnallcalendarevents.clientid %>').val(allevent); return { id: eventinfo[0], start: eventinfo[1], title: eventinfo[2] + ' ' + '(' + ' ' + splitresult_0[4] + ' ' + ')' }; }); if (loadevents) { $('#calendar').fullcalendar({ events: buildingevents, }); } } $(document).ready(function () { initialize(false); $('#calendar').fullcalendar({ editable: true, eventdragstart: function (event, jsevent, ui, view) { var d = new date(); d = event.start; $('#<%= hdnswapdayfrm.clientid %>').val(d.tostring('mm/dd/yyyy')); }, eventdrop: function (event, daydelta, minutedelta, allday, revertfunc) { $('#<%= hdnordernpkschsetdailynameid.clientid %>').val(event.id); $('#<%= hdnadddays.clientid %>').val(daydelta); $.ajax({ type: "post", url: "../account/webservices/webservices.asmx/swapday", data: "{'hdnordernpkschsetdailynameid': '" + $('#<%= hdnordernpkschsetdailynameid.clientid %>').val() + "', 'hdnadddays': '" + $('#<%= hdnadddays.clientid %>').val() + "', 'hdnallcalendarevents': '" + $('#<%= hdnallcalendarevents.clientid %>').val() + "', 'hdnadddays': '" + $('#<%= hdnadddays.clientid %>').val() + "', 'hdnswapdayfrm': '" + $('#<%= hdnswapdayfrm.clientid %>').val() + "'}", contenttype: "application/json; charset=utf-8", async: false, datatype: "json", success: function(result) { } }); initialize(true); }, events: buildingevents }); });
you provide function events
calls end point:
$('#calendar').fullcalendar({ events: function(start, end, callback) { $.ajax({ url: '...', success: function(data) { var events = parseevents(data); callback(events); } }); } });
and inside eventdrop
function call refetchevents
, fullcalendar call events
function again , rerender calendar:
$('#calendar').fullcalendar('refetchevents');
you can check out relevant documentation here: events (as function) , refetchevents.
Comments
Post a Comment