Question

我正在使用fullcalendar的v3。当我对日历进行初始化时，我会看到议程视图，但是当我开始一些事件并更改视图时，这些事件就不存在了。

这只是在第一次交互时发生，之后事件就很好呈现了。

我在文档上看到lazyFetching property，但不能解决我的问题。

这是我的日历自定义配置：

$(document).ready(function () {

    var containerEl = $('#calendar');

    containerEl.fullCalendar({
        defaultView: 'agendaWeek',
        hiddenDays: [0],
        locale: 'pt-br',
        slotLabelFormat: 'HH:mm',
        views: {
            week: { columnHeaderFormat: 'ddd D/M' }
        },
        editable: true,
        allDaySlot: false,
        slotDuration: '00:15:00',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        buttonText: {
            month: 'Mês',
            agendaDay: 'Dia',
            agendaWeek: 'Semana',
            today: 'Hoje'
        },
        // Dates outside of the valid range will be grayed-out. The user
        // will not be able to drag or resize events into these areas.
        validRange: {
            start: moment('2018-10-22'),
            end: moment('2018-05-29')
        },
        minTime: "07:00:00",
        maxTime: "23:30:00",
        // Slot do evento de tamanho fixo a horaAula da escola
        eventDurationEditable: false,
        eventStartEditable: true,
        defaultTimedEventDuration: '00:45:00',
        selectable: true,
        // Eventos
        select: function (start, end, jsEvent, view) {
            addEvent(containerEl, start, end, jsEvent, view);
        },
        eventClick: function (event, jsEvent, view) {
           removeEvent(containerEl, event, jsEvent, view);
        },
        dayClick: function(date, allDay, jsEvent, view) {
            // Se a view for de mês mudamos para o dia quando clicável
            if (jsEvent.name === 'month') {
                containerEl.fullCalendar('changeView', 'agendaDay', date);
            }
        }file:///home/italo/Downloads/bug.gif

    });
});

The project code

Answer 1

renderEvent有一个可选参数， stick 。将其设置为true，事件应该停留在视图更改之间。

使用true作为第三个参数更新您的addEvent module。

function addEvent(containerEl, start, end, jsEvent, view) {
    //var allDay = !start.hasTime && !end.hasTime;
    if (view.name !== 'month') {
        var newEvent = new Object();
        newEvent.title = 'Colocar o nome da disciplina aqui';
        newEvent.start = moment(start).format();
        newEvent.allDay = false;
        containerEl.fullCalendar('renderEvent', newEvent, true /* stick */);
    }
}

注意：此更改不会将您的事件保存到数据库之类的资源中。这将需要其他代码。

全日历不保留事件的更改视图

1 个答案: