Javascript fullcalendar v5-event.setProp（）用于多个选项_Javascript_Fullcalendar_Fullcalendar 5

Javascript fullcalendar v5-event.setProp（）用于多个选项

javascript fullcalendar

Javascript fullcalendar v5-event.setProp（）用于多个选项,javascript,fullcalendar,fullcalendar-5,Javascript,Fullcalendar,Fullcalendar 5,地狱世界。我正在使用Fullcalendar v5。在多模块道具上动态设置道具时出现问题附件是显示问题的代码你可以在这里看到它的作用：当一个setProp被多次调用时，过去一周的事件只受最后一次调用的影响，而忽略之前发生的任何事件。在这段代码中，它假设要更改名称和背景，它只会更改最初加载的视图中的事件，而不会更改其他视图中的事件 <!DOCTYPE html> <html lang='en'> <head> <meta

地狱世界。我正在使用Fullcalendar v5。在多模块道具上动态设置道具时出现问题

附件是显示问题的代码

你可以在这里看到它的作用：

当一个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>


var calendarEl=document.getElementById（'calendar'）；
让今天=新日期（）.toISOString（）.slice（0,10）
var calendarEl=document.getElementById（'calendar'）；
myCalendar=新的FullCalendar.Calendar（calendarEl，{
现在:今天,，
方面：1.8，
initialView:“timeGridWeek”，
选择距离：15，
活动：[
{
//请将日期更改为过去-需要在前一周！
标题：“TEST1”，
开始：“2020-10-16T10:30:00”，
完：“2020-10-16T13:30:00”，
},
{
//请将日期更改为将来
标题：“Test2”，
开始：“2020-10-18T10:30:00”，
完：“2020-10-18T13:30:00”，
},
],
eventDidMount:函数（arg）{
log（“从日历调用eventMount”）；
事件量（arg）；
},
});   
myCalendar.render（）；
函数eventMount（arg）{
日志（arg.event.title）；
arg.event.setProp（'title'，'name changed'）；
参数event.setProp（'backgroundColor'，'#666666'）；
}

感谢您的演示。我不确定这里到底发生了什么，但有点奇怪。但是，

eventDidMount

在事件添加到DOM后运行。这可能会影响行为

如果您想更改事件本身的属性（而不是直接操作生成的HTML元素），那么使用回调会更可靠，因为这总是发生在事件呈现到日历之前-事实上，它发生在fullCalendar甚至自己解析事件之前，因此，您直接使用提供给日历的原始数据

代码：

以及：

演示：

很抱歉，我无法重现您的问题。演示：。它很好用。如果您仍然有问题，请提供一个解决方案？然后我们可以试着理解这到底是怎么发生的。使用标准的fullCalendar 5设置，如我所示，没有问题。很抱歉，评论延迟了很长时间，在查看您的评论后，我附加了代码来显示问题。“我不知道如何通过codpen运行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;   
}