我一直在使用FullCalendar v1.5.3作为MS SharePoint的替代品。
我正在尝试重新呈现日历事件的源。例如，当页面默认加载时，这是 ajax 调用
/calendar/events/feedTasks？start=1338094800&end=1341118800&_=1339103302326
我们使用选择框将事件源更改为仅显示任务（从不同的表中提取），因此在选择后，ajax 调用将更改为：
/calendar/events/feedEvents？start=1338094800&end=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'
}
};
<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()的使用 - 这是确保正确重新渲染显示所必需的。
谢谢你举这个例子:)
我无法使它（在上面的代码中事件数组）为我工作，但我找到了另一种使用您提供的一些代码添加事件源的方法。
这是我的逻辑：
我的主要事件来源是这个（这是来自全日历默认示例的事件源）：
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);
}
});
}
现在我需要它来添加更多源并在日历之外执行此操作（在完整日历示例中的日期变量旁边），我创建了一个类似于上述代码的变量，但使用 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 ;)
}
这是一个老问题，但我遇到了类似的问题，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 值（事件）的控制器。（对不起，我的英语不好）