Fullcalendar 如何为每个视图加载不同的事件源（json）？

嗨，我有一个日历，它必须为每个视图加载不同的JSON事件源。也就是说，“月”是一个简短的来源（每天单元格最多只有3个项目），然后是“日”和“周”的更详细的数据来源

我想我可以捕获视图加载的时间，并基于哪个视图，调用

removeEventSource（）

删除以前的事件源，然后

addEventSource（）

添加当前视图的相关数据并刷新。 这是做这种事情的唯一方法吗？如果是的话。。。如何检测视图已完成加载，以便调用

getView（）

来加载相应的事件源

我看到有

加载（）

回调，但我不认为这是我需要的，我想知道整个日历何时完成加载，而不仅仅是当前数据

谢谢你的帮助

---

编辑：我唯一能想到的另一种方法是删除DAY/WEEK/MONTH fullcalendar按钮，并替换为我自己的按钮，用附加的变量重新加载php屏幕，比如说

&calLoad=MONTH或&calLoad=DAY

，然后我可以用不同的json提要加载，但这显然是一种不太理想的方式。

viewDisplay视图更改时触发

然后你就可以查看view.name atribute了，有趣的是，这恰好是解决这个问题的方法。我使用了

addEventSource

（）和

removeEventSource（）

方法，正如OP所考虑的那样

<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>

变量fcSources={
课程：{
url:base+'accessfm/calendar/courses'，
键入：“GET”，
是的，
错误：函数（）{alert（'something breaked with cours…'）；}，
颜色：'紫色'，
textColor:'白色'，
类名：“课程”
},
要求：{
url:base+'accessfm/calendar/requests'，
键入：“GET”，
是的，
错误：函数（）{alert（'something breaked with requests…'）；}，
textColor:'白色'，
类名：“请求”
},
负载：{
url:base+'accessfm/calendar/loads'，
键入：“GET”，
是的，
错误：函数（）{alert（'something breaked with loads…'）；}，
颜色：“蓝色”，
textColor:'白色'，
类名：“加载”
}
};
$（'#fullcalendar'）。fullcalendar({
标题：{
左：'标题'，
中心：'agendaDay，agendaWeek，month'，
右图：“今天上一个，下一个”
},
defaultView:'agendaWeek'，
第一天：1，
主题：真的，
eventSources:[fcSources.courses，fcSources.requests，fcSources.loads]，
视图显示：功能（视图）{
如果（lastView！=view.name）{//view已更改，请调整设置
如果（view.name='month'）{
$（'#fullcalendar'）.fullcalendar（'removeEventSource'，fcSources.loads）
.fullCalendar（'refetchEvents'）；；
}
if（view.name！=“month”&&lastView==“month”）{
$（'#fullcalendar'）.fullcalendar（'addEventSource'，fcSources.loads）；
}
}
lastView=view.name；
}
});

谢谢您的示例：）

我无法让这个（在上面的代码中是事件数组）为我工作，但我找到了另一种方法，使用您提供的一些代码添加事件源

这是我的逻辑：

我的主要事件源如下（这是Fullcalendar默认示例中的事件源）：

现在，我需要它来添加更多的源代码，并将日历（在fullcalendar示例中的日期变量旁边）排除在外。我创建了一个类似于上面代码的变量，但使用了与我的主日历类似的ajax调用：）

以下代码与上述代码类似，是calendar property的一部分（内部calendar变量）：

---

肯定有人处理过这个问题？我想加载一个不同的json提要，这取决于加载的视图是哪一天/星期/月。如果有人仍在查看，则viewDisplay已被弃用，取而代之的是

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);
                }
            });     
        }

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 ;)           
        }