FullCalendar在updateEvents之后不重新呈现
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FullCalendar在updateEvents之后不重新呈现相关的知识,希望对你有一定的参考价值。
我的目标是让2个不同的FullCalendar元素保持同步。我现在没有进行任何网络调用,只是客户端数组。
当我添加一个事件时(例如通过点击或在它构建之后),日历实际上不会像文档声明的那样重新呈现。
我也试图使用“renderEvents”和“renderEvent”风格,但这似乎是不必要的,因为“updateEvents”会/应该更新这些事件的呈现。我遇到的问题是日历列表版本上的“renderEvent”没有显示我正在添加的事件,如果它超出该日历的范围。
const events = [{
title: 'All Day Event',
start: TODAY
},
{
title: 'Long Event',
start: TODAY,
end: NEXTDAY
}
]
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
events
})
$("#events").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'listMonth',
events
})
// Now add a new one
events.push([{
title: 'Event added',
start: YESTERDAY
}])
$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)
这是一个重新解决问题的方法:
https://jsfiddle.net/Kikketer/7d92utp5/
用例非常简单:将新事件添加到事件列表中,在日历上呈现事件。
答案
首先将推送事件从数组更改为对象。
events.push({
title: 'Event added',
start: YESTERDAY
});
现在,你有很多选择。我会为你写2路。
一个。
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
https://jsfiddle.net/7d92utp5/49/
湾1)将事件参数更改为功能
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
// at here
events: function (start, end, timezone, callback) {
callback(events);
}
});
2)使用refetchEvents而不是updateEvents
$('#calendar').fullCalendar('refetchEvents');
https://jsfiddle.net/7d92utp5/53/
以上是关于FullCalendar在updateEvents之后不重新呈现的主要内容,如果未能解决你的问题,请参考以下文章
fullcalendar.io可以在.net core Blazor中使用吗?
Fullcalendar:即使 fullcalendar 接受 drop,可拖动对象也将 fullcalendar 拒绝为 droppable