fullcalendar v5 - event.setProp() 用于多个选项答案

【问题标题】：fullcalendar v5 - event.setProp() for multiple optionsfullcalendar v5 - event.setProp() 用于多个选项
【发布时间】：2020-09-22 19:40:57
【问题描述】：

你好，世界。我正在使用 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>

【问题讨论】：

抱歉，我无法重现您的问题。演示：codepen.io/ADyson82/pen/mdPaGvN。它工作正常。如果还有问题，可以提供minimal, reproducible example吗？然后我们可以尝试了解这究竟是如何发生的。正如我所展示的，使用标准的 fullCalendar 5 设置没有问题。
抱歉，评论延迟了很长时间，在查看您的评论后，我附上代码来显示问题。
"我不知道如何通过 codpen 运行 fullCalendar"...你可以 fork 我给你的那个，然后它已经设置好了，你所要做的就是把你更新的代码在那里。
谢谢！明天会玩它，看看我是否可以让我的代码也在那里运行！
codepen 示例已添加 :)

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

感谢演示。我不确定这里到底发生了什么，但这有点奇怪。但是，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;   
}

演示：https://codepen.io/ADyson82/pen/LYZRGeE

【讨论】：