关于fullcalendar：如何为每个视图加载不同的事件源(json)？


How to load different Event source (json) for each View?

您好，我有一个日历，它必须为每个视图加载不同的 JSON 事件源。即，"月"的简要来源(每天最多只有 3 个单元格)，然后是"日"和"周"的更详细的数据来源。

我在想我可以捕获视图何时加载并基于哪个视图，调用 removeEventSource() 以删除以前的事件源，然后调用 addEventSource() 以添加当前视图的相关数据并刷新。
这是做这样的事情的唯一方法吗？如果是这样...我如何检测视图已完成加载，以便我可以调用 getView() 来加载适当的事件源？

我已经看到有 loading() 回调，但我不认为这是我需要的，我想知道整个日历何时完成加载，而不仅仅是当前数据。

感谢您的帮助

编辑：我能想到的唯一其他方法是删除 DAY/WEEK/MONTH fullcalendar 按钮并替换为我自己的重新加载 php 屏幕并附加一个变量说 &calLoad=month or &calLoad=day 然后我可以加载不同的json 提要，但这显然是一种不太理想的处理方式。

相关讨论

有趣的是，我刚刚发布了一个完全不同的问题的答案，该问题恰好是解决这个问题的方法。正如OP所考虑的那样，我使用了 addEventSource() 和 removeEventSource() 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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;
    }
});

感谢您提供这个示例 :)

我无法使这个(在上面的代码中的事件数组)对我有用，但我想出了另一种方法来使用您提供的一些代码添加事件源。

这是我的逻辑：

我的主要事件来源是这个(这是来自 Fullcalendar 的默认示例的事件来源)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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 调用：)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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'
       }    
 }

以下代码与上面类似，是日历属性的一部分(在日历变量中)：

1
2
3
4
5
6
7
8
9
            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 ;)          
        }

viewDisplay 在视图改变时触发
http://arshaw.com/fullcalendar/docs/display/viewDisplay/

然后你可以检查 view.name 属性

相关讨论