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

Как это выглядит, когда календарь загружен Как это выглядит, когда я немного перетаскиваю событие (или перезагружаю события календаря) - это правильное время и продолжительность события

Кто-нибудь знает, как это исправить? Также обратите внимание, что серые области «нерабочих» часов расположены не на своем месте.

РЕДАКТИРОВАТЬ: немного сузил проблему - это происходит, даже когда я просто пытаюсь отобразить статическое событие

EDIT2: упрощенная настройка календарей, все та же...

EDIT3: когда я пробовал код на пустой странице, он работал, как и ожидалось, поэтому календарь должен каким-то образом мешать моему другому коду... есть идеи, как это сделать?


javascript fullcalendar
person Charlestone    schedule 09.02.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я не уверен, является ли «официальный» метод добавления новых событий в календарь через метод renderEvent. Как указано в документации, это может привести к исчезновению ваших событий при подкачке.

Попробуйте добавить события с помощью метода 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
    });
}
person Ádám Lambert    schedule 09.02.2018

arrow_upward
0
arrow_downward

Я нашел обходной путь, но не исправление, поэтому не буду отмечать его как ответ...

Когда я вызываю this.getCalendar().fullCalendar( 'rerenderEvents' ) после отображения события, оно размещается правильно.

person Charlestone    schedule 09.02.2018