Javascript FullCalendar v3-视图更改时更改事件源

我正在使用带有PHP后端的FullCalendar v3（最新版本）

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

{"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}]}

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

我试图做的是根据选择的视图更改用作事件源的数组。我已经尝试过自定义事件渲染、自定义视图渲染、多个事件源（尽管从数据角度看这很昂贵，但记录的数量并不会太多，从而对性能产生很大影响）

自定义视图名称为customMonth。选择此视图后，我只想渲染摘要数据（来自摘要数组）。如果选择了任何其他视图（我使用的是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
});

让vname；
$（“#日历”）.fullCalendar({
defaultDate:新日期（），
defaultView:'月份'，
eventRender:函数（eventObj$el，视图）{
设n=view.name；
如果（n=='customMonth'）
{
vname='customMonth'；
$el.popover({
标题：eventObj.title，
内容：eventObj.total_小时，
是的，
触发器：“悬停”，
位置：'自动'，
容器：“主体”
});
}否则{
vname=n；
$el.popover({
标题：“工单”+eventObj.title，
内容：“项目”：“+eventObj.Item\u no+”
“+”总小时数：“+eventObj.Total\u小时数+”
“+”剩余小时数：“+eventObj.剩余小时数，
是的，
触发器：“悬停”，
位置：'自动'，
容器：“主体”
});
}
}, 
事件：函数（开始、结束、时区、回调）{
$.ajax({
url:“/myendpoint”，
键入：“POST”，
数据类型：“json”，
数据：{
操作：“获取日历摘要”，
单元格：选定的\u单元格
},
成功：功能（数据）{
让事件=[]；
如果（vname=='customMonth'）{
obj=数据汇总；
$（对象）。每个（函数（）{
事件。推({
id:$（this.attr（'id'），
标题：$（this.attr（'title'），
开始：$（this）.attr（'dept\u due\u dt'），
结束：$（this）.attr（'dept_due_dt'），
总小时数：$（this）.attr（“总小时数”），
剩余工时：$（this）.attr（“剩余工时”），
订单数量：$（this）.attr（'day\u order\u count'），
has_late_order:$（this.attr（'has_late_order'），
全天：没错，
最早日期：$（this）.attr（'最早日期'）
});
});
}否则{
obj=数据、事件和结果；
$（对象）。每个（函数（）{
事件。推({
id:$（this.attr（'id'），
颜色：$（this.attr（'color'），
标题：$（this.attr（'title'），
start:$（this.attr（'start'），
end:$（this.attr（'end'），
最早日期：$（this）.attr（“最早日期”），
物料编号：$（此）.attr（'物料编号'），
总小时数：$（this）.attr（“总小时数”），
剩余工时：$（this）.attr（'剩余工时'）
});
});
}
回调（事件）；
},
错误：函数（err）{
控制台日志（err）；
}
});
},
观点：{
海关月份：{
键入：“月”，
buttonText:“概述”
}
},
viewRender:函数（视图，el）{
让我们来看一看；
如果（view.name=='customMonth'）{
如果（lastview=='customMonth'）{
返回false；
}否则{
view.Underderdates（）；
view.renderDates（）；
$（“#日历”）.fullCalendar（'rerenderEvents'）；
}
lastview='customMonth'；
}否则{
如果（lastview=='customMonth'）{
view.Underderdates（）；
view.renderDates（）；
$（“#日历”）.fullCalendar（'rerenderEvents'）；
}
lastview=view.name；
}
},
标题：{
左：“上一个，下一个”，
中心：'标题'，
右图：“基本周、月、列表周、自定义月”
},
主题系统：“bootstrap3”，
时区：假，
周末：错，
//试过了也试过了
懒散：真的
});

---

我希望得到任何指导。我已经搜索了StackOverflow（，但我完全遵循了它，但它不起作用（将viewDisplay切换为viewRender））、Github以及我能想到的所有其他源代码。

这里是一个简单的示例，说明了您试图实现的目标（我希望我能很好地理解您的问题）：

HTML:

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

和用户尝试它。

---

它使用回调函数

viewRender（）

检测视图何时更改，并

addEventSource（）

/

removeventsource（）

更改数据。因此，当您将视图从

month

更改为

week

时，它将更改源事件。

我已经为此争论了两天，因为我没有在viewRender函数中包含返回？！？我

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