如何解决fullcalendar v5-event.setProp用于多个选项
世界和平。 我正在使用Fullcalendar v5。 在多道具道具上动态设置道具时遇到问题。
附带的是显示问题的代码。
您可以在此处查看它的运行情况: https://codepen.io/roi-werner/pen/vYKXOJp
当多次调用setProp时,过去一周的事件仅受最后一次调用的影响,而忽略之前发生的任何事情。 在此代码中,它假设要更改名称和背景,它仅对最初加载的视图中的事件起作用,而对其他事件不起作用。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='../gse5/fullcalendar-scheduler-5/lib/main.css' rel='stylesheet' />
<script src='../gse5/fullcalendar-scheduler-5/lib/main.js'></script>
<script src='../gse5/fullcalendar-scheduler-5/lib/main.min.js'></script>
</head>
<body>
<div id='calendar'></div>
<script>
var calendarEl = document.getElementById('calendar');
let today = new Date().toISOString().slice(0,10)
var calendarEl = document.getElementById('calendar');
myCalendar = new FullCalendar.Calendar(calendarEl,{
now: today,aspectRatio: 1.8,initialView: 'timeGridWeek',selectMinDistance: 15,events: [
{
//please change date to be in the past - needs to be in the week before!
title: 'TEST1',start: '2020-10-16T10:30:00',end: '2020-10-16T13:30:00',},{
//please change the date to be in the future
title: 'Test2',start: '2020-10-18T10:30:00',end: '2020-10-18T13:30:00',],eventDidMount: function(arg){
console.log("call eventMount from calendar");
eventMount(arg);
},});
myCalendar.render();
function eventMount(arg){
console.log(arg.event.title);
arg.event.setProp('title',"name changed");
arg.event.setProp('backgroundColor','#666666');
}
</script>
</body>
</html>
解决方法
感谢演示。我不确定这到底是怎么回事,但这有点奇怪。但是,eventDidMount
在 事件添加到DOM后运行。那可能会影响行为。
如果您想更改事件本身的属性(而不是直接操作结果HTML元素),则使用eventDataTransform回调会更可靠,因为这总是发生在将事件呈现到日历之前-实际上,它发生在fullCalendar甚至没有对它们本身进行解析之前,因此您可以直接使用提供给日历的原始数据。
代码:
eventDataTransform: function(eventData)
{
console.log("call eventDataTransform from calendar");
return eventTransform(eventData);
},
和:
function eventTransform(eventData)
{
console.log(eventData.title);
eventData.backgroundColor = '#666666';
eventData.title = "name changed";
return eventData;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。