渲染后更改Fullcalendar事件源
我一直在使用FullCalendar v1.5.3进行MS SharePoint替换。
我正在尝试重新渲染日历事件的来源。 例如，当页面默认加载时，这是ajax调用
/日历/事件/ feedTasks？开始= 1338094800＆结束= 1341118800＆_ = 1339103302326
我们使用选择框将事件源更改为仅显示任务（从不同的表中提取），因此在选择之后，ajax调用将更改为：
/日历/事件/ feedEvents？开始= 1338094800＆结束= 1341118800＆_ = 1339103302326
这很有效。 但是，它不是仅仅更改当前日历事件源，而是创建一个重复的日历表（在当前日历表之上创建一个新的div class="fc-content" div ）。
这是我到目前为止：
$("#TaskSelector").change(onSelectChange); function onSelectChange(){ $('#calendar').fullCalendar({ events: '/calendar/events/' + $('#TaskSelector').val() }); } });
我错过了什么？
有一些名为removeEventSource()和addEventSource()允许您调整源列表。 我有类似的情况，我需要在月视图中隐藏其中一个源，但在其他上下文中显示它，我发现在eventSources数组中删除和重新添加元素是实现此目的最干净的方法。
var fcSources = { courses: { url: base+'accessfm/calendar/courses', type: 'GET', cache: true, error: function() { alert('something broke with courses...'); }, color: 'purple', textColor: 'white', className: 'course' }, requests: { url: base+'accessfm/calendar/requests', type: 'GET', cache: true, error: function() { alert('something broke with requests...'); }, textColor: 'white', className: 'requests' }, loads: { url: base+'accessfm/calendar/loads', type: 'GET', cache: true, error: function() { alert('something broke with loads...'); }, color: 'blue', textColor: 'white', className: 'loads' } }; $('#fullcalendar').fullCalendar({ header: { left: 'title', center: 'agendaDay,agendaWeek,month', right: 'today prev,next' }, defaultView: 'agendaWeek', firstDay: 1, theme: true, eventSources: [ fcSources.courses, fcSources.requests, fcSources.loads ], viewDisplay: function(view) { if (lastView != view.name){ // view has been changed, tweak settings if (view.name == 'month'){ $('#fullcalendar').fullCalendar( 'removeEventSource', fcSources.loads ) .fullCalendar( 'refetchEvents' );; } if (view.name != 'month' && lastView == 'month'){ $('#fullcalendar').fullCalendar( 'addEventSource', fcSources.loads ); } } lastView = view.name; } });
不要只是复制/粘贴此代码，因为它不能完全解决您的问题。 但是你应该能够从中获取一些想法。 调整fcSources哈希以适合您的源，然后仅使用其中一个源实例化您的fullCalendar对象，并使用removeEventSource和addEventSource方法交换它。
还要注意refetchEvents()的使用 – 这是确保正确重新呈现显示所必需的。
谢谢你这个例子:)
我无法使这个（在上面的代码中的事件数组）为我工作，但我想出了另一种方法来使用您提供的一些代码添加事件源。
这是我的逻辑：
我的主要事件来源是这（这是来自Fullcalendar的默认示例的事件源）：
events: function(start, end, callback) { $.ajax({ type: 'POST', url: 'myurl', dataType:'xml', crossDomain: true, data: { // our hypothetical feed requires UNIX timestamps start: Math.round(start.getTime() / 1000), end: Math.round(end.getTime() / 1000), 'acc':'2', }, success: function(doc) { var events = []; var allday = null; //Workaround var Editable = null; //Workaround $(doc).find('event').each(function() { if($(this).attr('allDay') == "false") //Workaround allday = false; //Workaround if($(this).attr('allDay') == "true") //Workaround allday = true; //Workaround if($(this).attr('editable') == "false") //Workaround Editable = false; //Workaround if($(this).attr('editable') == "true") //Workaround Editable = true; //Workaround events.push({ id: $(this).attr('id'), title: $(this).attr('title'), start: $(this).attr('start'), end: $(this).attr('end'), allDay: allday, editable: Editable }); }); //calendar.fullCalendar( 'addEventSource', othersources.folgas ); //calendar.fullCalendar( 'addEventSource', othersources.ferias ); //calendar.fullCalendar('refetchEvents'); callback(events); } }); }
现在我需要它来添加更多的源并在日历中执行此操作（在fullcalendar示例的日期变量旁边）我创建了一个变量，如上面的代码，但是ajax调用类似于我的主要：）
var othersources = { anothersource: { events: function(start, end, callback) { $.ajax({ type: 'POST', url: 'myurl', data: { // our hypothetical feed requires UNIX timestamps start: Math.round(start.getTime() / 1000), end: Math.round(end.getTime() / 1000), 'acc':'7', }, success: function(doc) { var events = []; var allday = null; //Workaround var Editable = null; //Workaround $(doc).find('event').each(function() { if($(this).attr('allDay') == "false") //Workaround allday = false; //Workaround if($(this).attr('allDay') == "true") //Workaround allday = true; //Workaround if($(this).attr('editable') == "false") //Workaround Editable = false; //Workaround if($(this).attr('editable') == "true") //Workaround Editable = true; //Workaround events.push({ id: $(this).attr('id'), title: $(this).attr('title'), start: $(this).attr('start'), end: $(this).attr('end'), allDay: allday, editable: Editable }); }); callback(events); //notice this } }); }, cache: true, //error: function() { alert('something broke with courses...'); }, color: 'green', //events color and stuff textColor: 'white', //className: 'course' } }
以下代码与上面的代码类似，是日历proprietys的一部分（内部日历变量）：
eventSources: [ othersources.anothersource ], viewDisplay: function(view) { if (view.name == 'month'){ // alert(view.name); //calendar.fullCalendar( 'addEventSource', othersources.folgas ); calendar.fullCalendar( 'addEventSource', othersources.anothersource ); //calendar.fullCalendar('refetchEvents'); //Notice i'm not doing the refetch events. And its working for me. but i'm calling thi elsewhere, every time i make an action. So you must figure it out ;) }
这是一个老问题，但我遇到了类似的问题，RET的答案确实有所帮助，基于我用一个计数器修补它，重置以确保它不会添加重复的事件源
count = 0; fcSources = [wholePlan, allActivities]; //calendar initialization { viewRender: function(view) { if (view.name == 'agendaWeek' || view.name == 'month') { $('#fullcal').fullCalendar('removeEventSource', fcSources.allActivities); if (count > 0) { $('#fullcal').fullCalendar('addEventSource', fcSources.wholePlan); } count = 0; } if (view.name == 'agendaDay' && count == 0) { $('#fullcal').fullCalendar( 'addEventSource', fcSources.allActivities ); $('#fullcal').fullCalendar('removeEventSource', fcSources.wholePlan); count += 1; } }
两天后我得到它，这是我的代码：
$("#search").on("keypress", function(evt){ if(evt.keyCode == 13) { var term = $(this).val(); $.post(route_search, { term: term, async: false }, function(data) { var parsed = $.parseJSON(data); $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar( 'addEventSource', parsed ); } ); } });
有一个搜索输入，当用户按下回车键时，ajax发送给控制器，后者返回一个数组os json值（事件）。 （抱歉我的英语不好）