您好我有一个日历,必须为每个视图加载不同的JSON事件源。即,“月”的简要来源(每天最多只有3个单元格),然后是“日”和“周”的更详细的数据来源。
我想我可以在加载视图时捕获并基于哪个视图,调用removeEventSource()
删除先前的事件源,然后addEventSource()
添加当前视图的相关数据并刷新。
这是做这样事的唯一方法吗?如果是这样......我如何检测到视图已完成加载,以便我可以调用getView()
来加载相应的事件源?
我看到有loading()
回调,但我不认为这是我需要的,我想知道整个日历何时完成加载不仅仅是当前数据。
感谢您的帮助
编辑:我能想到的唯一另一种方法就是删除DAY / WEEK / MONTH全日历按钮并替换为我自己用自己重新加载php屏幕的变量附加说&calLoad=month or &calLoad=day
我可以加载一个不同的json feed,但这显然是一种不太理想的做事方式。
答案 0 :(得分:6)
有趣的是,我只是posted an answer to an entirely different question恰好是解决这个问题的方法。我考虑了OP,使用了addEventSource
()和removeEventSource()
方法。
<script>
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;
}
});
</script>
答案 1 :(得分:0)
viewDisplay被加载 http://arshaw.com/fullcalendar/docs/display/viewDisplay/
然后你可以查看view.name atribute
答案 2 :(得分:0)
谢谢你这个例子:)
我无法让这个(在上面的代码中为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 ;)
}