10

我一直在使用 FullCalendar v1.5.3 来替换 MS SharePoint。

我正在尝试重新呈现日历事件的源。例如,当页面默认加载时,这是 ajax 调用

/日历/事件/feedTasks?start=1338094800&end=1341118800&_=1339103302326

我们使用选择框将事件源更改为仅显示任务(从不同的表中提取),因此在选择后,ajax 调用更改为:

/日历/事件/feedEvents?start=1338094800&end=1341118800&_=1339103302326

这行得通。但是,它不仅会更改当前日历事件源,还会创建一个重复的日历表(div class="fc-content" div在当前表的基础上创建一个新表)。

这是我到目前为止所拥有的:

$("#TaskSelector").change(onSelectChange);   
    function onSelectChange(){
        $('#calendar').fullCalendar({
            events: '/calendar/events/' + $('#TaskSelector').val()
        });
    }
});

我错过了什么?

4

4 回答 4

20

有一些方法被调用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 对象,并使用removeEventSourceandaddEventSource方法交换它。

还要注意使用refetchEvents()- 这是确保正确重新渲染显示所必需的。

于 2012-06-08T00:09:49.040 回答
3

谢谢你的例子:)

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

这是我的逻辑:

我的主要事件来源是这个(这是来自 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 ;)           
        } 
于 2013-05-02T14:22:03.707 回答
2

这是一个老问题,但我遇到了类似的问题,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;
   }
}
于 2015-09-07T02:00:27.083 回答
2

两天后我得到它,这是我的代码:

    $("#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 值(事件)。(对不起我糟糕的英语)

于 2017-08-11T14:04:56.623 回答