【问题标题】:How to load different Event source (json) for each View?如何为每个视图加载不同的事件源(json)?
【发布时间】:2011-07-31 08:41:16
【问题描述】:

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

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

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

感谢您的帮助

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

【问题讨论】:

  • 肯定有人处理过这个问题?我想根据日/周/月加载的视图加载不同的 json 提要

标签: fullcalendar


【解决方案1】:

感谢您提供此示例 :)

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

这是我的逻辑:

我的主要事件来源是这个(这是来自 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】:

    有趣的是,我只是 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>
    

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

      • 如果有人还在寻找 - viewDisplay 已被弃用,取而代之的是 viewRender
      猜你喜欢
      • 2021-10-30
      • 1970-01-01
      • 2011-09-14
      • 1970-01-01
      • 2011-08-10
      • 2014-07-25
      • 2021-10-07
      • 1970-01-01
      • 2011-06-01
      相关资源
      最近更新 更多