Question

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

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

有人知道如何解决这个问题吗？还要注意＆＃34;非工作＆＃34;的灰色区域。小时错位

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

EDIT2：简化的日历设置，仍然相同......

EDIT3：当我在空白页面上尝试代码时，它按预期工作，因此日历必须以某种方式干扰我的其他代码......任何想法如何？

Answer 1

我不确定，如果＆＃34;官方＆＃34;向日历添加新事件的方法是通过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
    });
}

Answer 2

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

在呈现事件后调用this.getCalendar().fullCalendar( 'rerenderEvents' )时，事件正确放置。

Fullcalendar错误地呈现事件

2 个答案: