Fullcalendar 错误地呈现事件答案

【问题标题】：Fullcalendar falsely renders eventFullcalendar 错误地呈现事件
【发布时间】：2018-02-09 20:20:16
【问题描述】：

我正在我的网页上实现全日历，但遇到了奇怪的错误。事件已正确设置所有内容，但是当加载日历时，它会显示在日历中的错误位置并且持续时间错误。当我拖动事件或刷新日历时，事件放置正确且持续时间也正确。即使事件标题中的时间戳是正确的，只是位置是错误的。问题也只发生在日历中只有一个事件，有多个事件时，一切正常。

_render: function(){
    this._super('_render',arguments);
    this.getCalendar().fullCalendar({
        defaultView: 'agendaWeek',
        editable:true,
        height: 600,

    });
    this.getCalendar().fullCalendar( 'renderEvent', {
        title: "purple",
        start: "2018-02-07T11:30:00+01:00",
        end: "2018-02-07T14:15:00+01:00",
        color: "purple",
    }, true);
    // this.renderMeetings();
},

有人知道如何解决这个问题吗？还要注意“非工作”时间的灰色区域是错位的

编辑：稍微缩小了问题范围 - 即使我只是尝试渲染静态事件也会发生

EDIT2：简化的日历设置，还是一样...

EDIT3：当我在空白页上尝试代码时，它按预期工作，所以日历必须以某种方式干扰我的其他代码......有什么想法吗？

【问题讨论】：

标签： javascript fullcalendar

【解决方案1】：

我不确定，如果将新事件添加到日历的“官方”方法是通过 renderEvent 方法。正如documentation 所述，它可能会导致您的事件在分页时消失。

尝试使用addEventSource 方法添加您的事件，如下所示：

renderMeetings: function(){
    this.getCalendar().fullCalendar( 'removeEvents');
    var dates = this.getCalendarDateRange();
    var userId = this.controls.get('userId') || app.user.id;
    var meetings = app.data.createRelatedCollection(app.data.createBean('Users',{id:userId}), 'meetings');
    var start = moment(dates.start.toISOString()).format("Y-MM-DD HH:mm:ss");
    var end = moment(dates.end.toISOString()).format("Y-MM-DD HH:mm:ss");
    meetings.fetch({
        filter: {
            "date_start" : {"$between" : [start,end]},
        },
        success: _.bind(function(){
            this.getCalendar().fullCalendar( 'addEventSource', 
                meetings.map(function(meeting){
                    return {
                        title:meeting.get('name'),
                        start: meeting.get('date_start'),
                        end: meeting.get('date_end'),
                        color: meeting.get('name'),
                        id: meeting.id,
                        module: meeting.module
                    }
                },this));
        },this),
        limit: -1
    });
}

【讨论】：

【解决方案2】：

我找到了解决方法，但不是解决方法，所以我不会将其标记为答案...

当我在事件渲染后调用this.getCalendar().fullCalendar( 'rerenderEvents' ) 时，事件被正确放置。

【讨论】：