渲染后更改Fullcalendar事件源 [英] Change Fullcalendar event source after render

问题描述

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

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

/ calendar / events / feedTasks？start = 1338094800& end = 1341118800& amp ; _ = 1339103302326

我们使用选择框将事件源更改为仅显示任务（从不同表中提取），因此在选择ajax调用后：

/ calendar / events / feedEvents？start = 1338094800&end = 1341118800& _ = 1339103302326

这有效。但是，它不是仅仅改变当前的日历事件源，而是创建一个重复的日历表（在当前日历表的顶部创建一个新的 div class =fc-contentdiv ）。

这是我到目前为止：
$ b $

  $（ #TaskSelector）发生变化（onSelectChange）。 
 function onSelectChange（）{
 $（'＃calendar'）。fullCalendar（{
 events：'/ calendar / events /'+ $（'＃TaskSelector'）。val（）
}）; 
} 
}）; 
  

我缺少什么？

解决方案有一些方法称为 removeEventSource（）和 addEventSource（），它们允许您调整来源列表。我有类似的情况，需要在月视图中隐藏其中一个源，但在其他上下文中显示它，并且我发现删除并重新添加eventSources数组中的元素是达到此目的最简单的方法。

  var fcSources = {
课程：{
 url：base +'accessfm / calendar / courses'，
 type ：'GET'，
缓存：真，
错误：function（）{alert（'有些东西坏了课程...'）; }，
颜色：'purple'，
 textColor：'white'，
 className：'course'
}，
请求：{
 url：基础+'accessfm /日历/请求'，
类型：'GET'，
缓存：真实，
错误：函数（）{警报（'某事破坏了请求...'）; }，
 textColor：'white'，
 className：'requests'
}，
加载：{
 url：base +'accessfm / calendar / loads'，
类型：'GET'，
缓存：true，
错误：function（）{alert（'有些东西破坏了加载...'）; }，
 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）{//视图已更改，调整设置
 if（ fullCalendar（'removeEventSource'，fcSources.loads）
 .fullCalendar（'refetchEvents'）;; 
} view.name =='month'）{
 $（'＃fullcalendar' 
 if（view.name！='month'&& lastView =='month'）{
 $（'＃fullcalendar'）。fullCalendar（'addEventSource ，fcSources.loads）; 
} 
} 
 lastView = view.name; 
} 
}）; 
  

不要只复制/粘贴这段代码，因为它并不能解决您的问题。但你应该能够从中获得一些想法。调整 fcSources 散列以适应您的源代码，然后仅使用其中一个源实例化fullCalendar对象，然后使用 removeEventSource 和 addEventSource 方法。



还要注意使用 refetchEvents（ ） - 这是确保显示正确显示的必要条件。

I've been using FullCalendar v1.5.3 for a MS SharePoint replacement.

I'm trying to re-render the calendar event's source. For instance, when the page loads by default this is the ajax call

/calendar/events/feedTasks?start=1338094800&end=1341118800&_=1339103302326

We're using a select box to change the events source to only show tasks (pulled from different table), so after a selection the ajax call changes to:

/calendar/events/feedEvents?start=1338094800&end=1341118800&_=1339103302326

This works. However, rather than just changing the current calendar event source, it creates a duplicate calendar table (creates a new div class="fc-content" div on top of the current one).

This is what I have so far:

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

What am I missing?

解决方案

There are some methods called removeEventSource() and addEventSource() that allow you to tweak the sources list. I had a similar situation where I needed to hide one of the sources in month view, but show it in other contexts, and I found removing and re-adding elements in the eventSources array the cleanest way to achieve this.

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

Don't just copy/paste this code, because it's not solving exactly your problem. But you should be able to take some ideas from it. Tweak the fcSources hash to suit your sources, and then instantiate your fullCalendar object with just one of the sources, and swap it around using the removeEventSource and addEventSource methods.

Note also the use of refetchEvents() - that's necessary to make sure the display is rerendered correctly.

这篇关于渲染后更改Fullcalendar事件源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！