我一直在使用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()
});
}
});
我错过了什么？
答案 0 :(得分：18)
有一些名为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'
}
};
<snip>
$('#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() - 这是确保正确重新呈现显示所必需的。
答案 1 :(得分：3)
谢谢你这个例子：）
我无法让这个（在上面的代码中为events数组）为我工作，但我想出了另一种使用你提供的代码添加事件源的方法。
这是我的逻辑：
我的主要事件来源是这（这是来自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'
}
}
以下代码与上述代码类似，是日历所有者的一部分（内部日历变量）：
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 ;)
}
答案 2 :(得分：2)
这是一个老问题，但我遇到了类似的问题，RET的答案确实有所帮助，基于我用一个计数器修补它，重置以确保它不会添加重复的事件源
<img src="(insert DB response filepath)">