在eventDrop功能的jQuery FullCalendar +重装事件 [英] Jquery FullCalendar + reload events in eventDrop function
问题描述
我需要重新加载Jquery的我与Fullcalendar Ajax调用，但不知道如何重新绑定再次日历无需重新创建一个又一个，基本上我在做什么下面是我的GetSchedule方法获取的日期来初始化我的日历事件。
当一个eventDrop发生时，我需要从我的GetSchedule方法获取新的数据集，并再次刷新fullcalendar，原因是一些事件不会假设是在某些日期。
当eventDrop发生以下code将重新创建另一fullcalendar。可有人请您指教。谢谢你。
VAR SDATE;
VAR buildingEvents; 函数初始化（loadevents）{
$阿贾克斯（{
键入：POST，
网址：../Account/WebServices/WebServices.asmx/GetSchedule
数据：{'CUSTID'：'+ $（'＃＆LT;％= hdnCustId.ClientID％GT;'）。VAL（）+'}，
的contentType：应用/ JSON的;字符集= UTF-8，
异步：假的，
数据类型：JSON
成功：函数（结果）{SDATE = result.d; }
}）; 变种allEvent =;
buildingEvents = $ .MAP（SDATE，函数（项目）{
allEvent + = +项目＆放大器;; 变种SplitResult = item.split（||）;
VAR eventInfo =新的Array（）;
对于（VAR I = 0; I＆LT; SplitResult.length;我++）{
eventInfo [I] = SplitResult [I]
} VAR SplitResult_0 = eventInfo [0] .split（|）; $（'＃＆下;％= hdnAllCalendarEvents.ClientID％GT;'）。VAL（allEvent）; 返回{
ID：eventInfo [0]
启动：eventInfo [1]，
标题：eventInfo [2] +'+（++ SplitResult_0 [4] +''+'）'
};
}）; 如果（loadevents）{
$（'＃日历'）。fullCalendar（{
事件：buildingEvents，
}）;
}
}
$（文件）。就绪（函数（）{ 初始化（假）; $（'＃日历'）。fullCalendar（{
编辑：真的，
eventDragStart：函数（事件，jsEvent，UI，视图）{
变种D =新的日期（）;
D = event.start;
$（'＃＆LT;％= hdnSwapDayFrm.ClientID％GT;'）。VAL（d.toString（'MM / DD / YYYY'））;
}，
eventDrop：函数（事件，dayDelta，minuteDelta，allDay，revertFunc）{
$（'＃＆下;％= hdnOrderNpkSchSetDailyNameId.ClientID％GT;'）。VAL（event.id）;
$（'＃＆下;％= hdnAddDays.ClientID％GT;'）。VAL（dayDelta）; $阿贾克斯（{
键入：POST，
网址：../Account/WebServices/WebServices.asmx/SwapDay
数据：{'hdnOrderNpkSchSetDailyNameId'：'+ $（'＃＆LT;％= hdnOrderNpkSchSetDailyNameId.ClientID％GT;'）。VAL（）+'，'hdnAddDays'：'+ $（'＃＆LT;％= hdnAddDays.ClientID％GT;'）VAL（）+。，hdnAllCalendarEvents'：'+ $（'＃＆LT;％= hdnAllCalendarEvents.ClientID％GT;'）。VAL（）+'，'hdnAddDays ：'+ $（'＃＆LT;％= hdnAddDays.ClientID％GT;'）。VAL（）+'，'hdnSwapDayFrm'：'+ $（'＃＆LT;％= hdnSwapDayFrm.ClientID％GT;' ）.VAL（）+'}，
的contentType：应用/ JSON的;字符集= UTF-8，
异步：假的，
数据类型：JSON
成功：函数（结果）{ }
}）; 初始化（真）;
}，
事件：buildingEvents
}）;
}）;
您可以提供事件函数调用您的终点：
$（'＃日历'）。fullCalendar（{
事件：功能（开始，结束，回调）{
$阿贾克斯（{
网址：'...'，
成功：功能（数据）{
变种事件= parseEvents（数据）;
回调（事件）;
}
}）;
}
}）;
和则 eventDrop 函数中你可以调用 refetchEvents ，所以FullCalendar将调用事件功能再次重新呈现日历：
$（'＃日历'）fullCalendar（'refetchEvents'）。
您可以在这里查看相关文件：事件（如函数）和 refetchEvents 。
I need to reload my Jquery Fullcalendar with an ajax call but ain't sure how to rebind the calendar again without recreating another one, basically what I am doing below is to initialize my calendar events by fetching the dates with my GetSchedule method.
When an eventDrop occurs, I will need to fetch the new set of data from my GetSchedule method and reload the fullcalendar again, reason being some events aren't suppose to be in some dates.
The below code will recreate another fullcalendar when an eventDrop occurs. Can someone 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();
for (var i = 0; i < 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 could provide a function to events that calls your end point:
$('#calendar').fullCalendar({
events: function(start, end, callback) {
$.ajax({
url: '...',
success: function(data) {
var events = parseEvents(data);
callback(events);
}
});
}
});
And then inside the eventDrop function you could call refetchEvents, so FullCalendar will call the events function again and rerender the calendar:
$('#calendar').fullCalendar('refetchEvents');
You can check out the relevant documentation here: events (as a function) and refetchEvents.
这篇关于在eventDrop功能的jQuery FullCalendar +重装事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
