Fullcalendar V4重新加载事件。 removeEventSource不存在

时间:2019-07-15 10:09:23

标签: fullcalendar fullcalendar-4

我正在尝试在我的网站上添加日历,但是我不知道怎么可能从ajax源重新加载事件。在以前的版本中,您可以删除事件源,添加事件源并重画日历,但是在此版本中,我阅读了文档,其中仅包含addEventSource事件。

我有一个不好的解决方案,在绘制图纸之前将日历销毁(如果存在),但是我丢失了显示的视图和日期。这不是一个好的解决方案。

这是我的代码:

var calendar;
var startDateSelected;  //YYY-MM-DD
var endDateSelected;    //YYY-MM-DD
var evTittleSelected;

//Example data
function getCalendarEvents() {
    return [{
        title: 'example1',
        start: '2019-07-15 12:00:00'
    }, {
        title: 'Example2',
        start: '2019-07-06 12:00:00',
        end: '2019-07-10 18:00:00'
    }];
}

document.addEventListener('DOMContentLoaded', function () {
    drawCalendar();
});

function drawCalendar() {
    var events = getCalendarEvents();
    var calendarEl = document.getElementById('calendar');
    if(calendar != undefined) calendar.destroy();
    calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['interaction', 'dayGrid', 'timeGrid'],
        locale: 'es',
        selectable: true,
        editable: true,
        header: {
            left: 'prevYear,prev,next,nextYear today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        select: function (info) {
            startDateSelected = moment(info.startStr).format("DD-MM-YYYY HH:mm:ss");
            endDateSelected = moment(info.endStr).format("DD-MM-YYYY HH:mm:ss");
            alert('de ' + startDateSelected + ' a ' + endDateSelected);
        },
        eventClick: function(info) {
            evTittleSelected = info.event.title;
            startDateSelected =  moment(info.event.start).format("DD-MM-YYYY HH:mm:ss");
            endDateSelected =  moment(info.event.end).format("DD-MM-YYYY HH:mm:ss");
            alert('de ' + startDateSelected + ' a ' + endDateSelected);
        },
        events: events
    });
    calendar.render();
}

我试图这样更改事件源:

calendar.destroy();
calendar.addEventSource( events );
calendar.refetchEvents();
calendar.render();

但没有removeEventSource方法,它只会向日历中添加新事件。

那么有什么方法可以重新加载事件吗?

新内容以增强答案(并在评论中使用解决方案):

我尝试按照任一方法实施事件供稿 fullcalendar.io/docs/events-json-feed或 fullcalendar.io/docs/events-function

当我将从ajax调用接收到的事件直接放入我的nodejs服务器时,它会完美加载所有这些事件(没有很好的重新加载选项)。因此,我的事件对象的格式似乎还可以。

我使用了这个ajax请求

jQuery.ajax({
    type: 'POST',
    url: '/calendar/getCalendarEvents',
    data: {
        token: localStorage.token
    },
}).then(function success(events) {
    return events;
}, function error(err) {
    console.log(err);
})

以这种格式填写事件

events:  [{ 
    id: 1,
    title: 'others',
    start: '2019-07-12 00:00:00',
    end: '2019-07-15 00:00:00',
    color: '#a6a6a6' 
}, { 
    id: 2,
    title: 'any',
    start: '2019-07-12 00:00:00',
    end: '2019-07-15 00:00:00',
    color: '#4222C3'
}]

当我尝试使用events-function时遇到错误:callback is not a function error

events: function(start, end, timezone, callback) {
    jQuery.ajax({
        type: 'POST',
        url: '/calendar/getCalendarEvents',
        data: {
            token: localStorage.token
        },
        success: function(events) {
            callback(events);
        }
    });
}   

使用metod events-json-feed我遇到了错误Failure parsing JSON,但是格式与第一种方法相同(有效)。

events: "/calendar/main/?token=" + localStorage.token

那我该怎么办?

1 个答案:

答案 0 :(得分:0)

在@ADyson评论中,此方法可以很好地解决此问题:

var eventSources = calendar.getEventSources();
eventSources[0].remove();
calendar.addEventSource(events);
calendar.refetchEvents();

这个想法是要知道eventSources是一个数组

,但使用这些方法可能会更好: fullcalendar.io/docs/events-json-feedfullcalendar.io/docs/events-function

events: function(fetchInfo, successCallback, failureCallback) {
    jQuery.ajax({
        type: 'POST',
        url: '/calendar/getCalendarEvents',
        data: {
            token: localStorage.token
        },
        success: function(events) {
            successCallback(events);
        }
    });
}

使用calendar.refetchEvents();

重新加载事件