javascript - FullCalendar v3 - 在 View 更改时更改事件源

Question

我正在使用带有 PHP 后端的 FullCalendar v3(最新)。

我从后端返回一个 JSON 数组，分成 2 个数组。第一个包含事件详细信息(当天的订单列表，以订单号作为标题)，第二个包含每日摘要(以订单和工作时间的总和作为标题)。该数组如下所示:

{"events":[{"id":709989,"item_no":"ABC123","title":709989,"color":"red","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5},{"id":709990,"title":709990,"item_no":"ABC345","color":"red","start":"2019-05-15","end":"2019-05-15","allDay":true,"total_hours":5.7,"remaining_hours":3.2}],"summary":[{"id":338823,"title":"Orders: 14\rHours:28.33\rRemaining Hours:13.33","start":"2019-05-14","end":"2019-05-14","allDay":true},{"id":338824,"title":"Orders: 3\rHours:14.2\rRemaining Hours: 12.2","start":"2019-05-15","end":"2019-05-15","allDay":true}]}

还有其他属性，但这些是基础。

我想做的是根据选择的 View 更改用作事件源的数组。我已经尝试过自定义事件呈现、自定义 View 呈现、多个事件源(尽管从数据的 Angular 来看它很昂贵，但记录的数量并没有多到对性能有很大影响)。

自定义 View 名称是 customMonth。选择此 View 后，我只想呈现摘要数据(来自摘要数组)。如果选择了任何其他 View (我使用的是 basicWeek、month 和 listWeek)，则呈现事件数组。

let vname;
$("#calendar").fullCalendar({
    defaultDate: new Date(),
    defaultView: 'month',
    eventRender: function(eventObj, $el, view) {
        let n = view.name;
        if(n=='customMonth')
        {
            vname = 'customMonth';
            $el.popover({
                title: eventObj.title,
                content: eventObj.total_hours,
                html: true,
                trigger: 'hover',
                placement: 'auto',
                container: 'body'
            });
        } else {
            vname = n;
            $el.popover({
                title: "Work Order " + eventObj.title,
                content: '<strong>Item#</strong>: ' + eventObj.item_no + '<br />' + '<strong>Total Hours</strong>: ' + eventObj.total_hours + '<br />' + '<strong>Remaining Hours</strong>: ' + eventObj.remaining_hours,
                html: true,
                trigger: 'hover',
                placement: 'auto',
                container: 'body'
            });
        }
    }, 
    events: function(start, end, timezone, callback){
        $.ajax({
            url: '/myendpoint',
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'get-calendar-summary',
                cell: selected_cell
            },
            success: function(data) {
                let events = [];
                if(vname=='customMonth') {
                    obj = data.summary;
                    $(obj).each(function() {
                        events.push({
                            id: $(this).attr('id'),
                            title: $(this).attr('title'),
                            start: $(this).attr('dept_due_dt'),
                            end: $(this).attr('dept_due_dt'),
                            total_hours: $(this).attr('total_hours'),
                            remaining_hours: $(this).attr('remaining_hours'),
                            order_count: $(this).attr('day_order_count'),
                            has_late_order: $(this).attr('has_late_order'),
                            allDay: true,
                            earliest_date: $(this).attr('earliest_date')
                        });
                    });
                } else {
                    obj = data.event_results;
                    $(obj).each(function() {
                        events.push({
                            id: $(this).attr('id'),
                            color: $(this).attr('color'),
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),
                            earliest_date: $(this).attr('earliest_date'),
                            item_no: $(this).attr('item_no'),
                            total_hours: $(this).attr('total_hours'),
                            remaining_hours: $(this).attr('remaining_hours')
                        });
                    });
                }
                callback(events);
            },
            error: function(err) {
                console.log(err);
            }
        });
    },
    views: {
        customMonth: {
            type: 'month',
            buttonText: 'overview'
        }
    },
    viewRender: function(view, el) {
        let lastview;
        if(view.name=='customMonth') {
            if(lastview == 'customMonth') {
                return false;
            } else {
                view.unrenderDates();
                view.renderDates();
                $("#calendar").fullCalendar('rerenderEvents');
            }
            lastview = 'customMonth';
        } else {
            if(lastview=='customMonth') {
                view.unrenderDates();
                view.renderDates();
                $("#calendar").fullCalendar('rerenderEvents');
            }
            lastview = view.name;
        }
    },
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'basicWeek,month,listWeek,customMonth'
    },
    themeSystem: 'bootstrap3',
    timeZone: false,
    weekends: false,
    //tried with and without lazyFetching
    lazyFetching: true
});

如有任何指导，我将不胜感激。我搜索了 StackOverflow(this seems like the closest，但我完全按照它做的，但它没有用(将 viewDisplay 切换为 viewRender))、Github 和我能想到的所有其他来源。

Answer 1

这是您要实现的目标的简化示例(希望我能很好地理解您的问题):

HTML:

 <div id='calendar'></div>

---

Javascript:

$(document).ready(function() {
    var ev1 = {"events":[{"id":709989,"item_no":"ABC123","title":'Event from source 1',"color":"red","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5}]};
    var ev2 = {"events":[{"id":709989,"item_no":"ABC123","title":'Event from source 2',"color":"blue","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5}]};
    $('#calendar').fullCalendar({
        defaultDate: new Date(),
        defaultView: 'month',
        viewRender: function(view) {
          if(view.type === 'basicWeek') {
             $('#calendar').fullCalendar( 'removeEventSource', ev1 );
             $('#calendar').fullCalendar( 'addEventSource', ev2 );
             return; 
           }  
        },
        header: {
           left: 'prev,next',
           center: 'title',
           right: 'basicWeek,month,listWeek,customMonth'
        },

    });
    $('#calendar').fullCalendar( 'addEventSource', ev1 );  
});

和codepen尝试一下。

它使用回调函数 viewRender() 来检测 View 何时更改，并使用 addEventSource()/removeEventSource() 来更改数据.因此，当您将 View 从 month 更改为 week 时，它会更改源事件。