0

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

1 回答 1

1

感谢您的演示。我不确定这里到底发生了什么，但这有点奇怪。但是，在将事件添加到 DOM之后eventDidMount运行。这可能会影响行为。

如果您想更改事件本身的属性（而不是直接操作生成的 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

于 2020-10-20T09:13:37.640 回答