javascript - FullCalendar 5 - eventDrop 第一次无法编辑事件道具？

Question

我有一个弹出框，当我将鼠标悬停在日历上的某个事件上时会显示它，我试图让它显示“未保存的更改”，每当我将事件移动到另一个日期时，为了做到这一点，我添加了一个额外的道具我的事件被调用unsavedChanges并默认false为true

eventDrop: function (info) {
                info.event.setExtendedProp('unsavedChanges', true);
            }

如果 unsavedChanges 为真，弹出框会像我想要的那样在标题上有一个额外的字符串。

这有点工作，我第一次拖放事件时没有任何变化，但是当我再次这样做时它工作，我不知道为什么，似乎当 eventDrop 第一次因为某种原因被恢复时将 unsavedChanges 设置为 true ，但是第二次起作用了，我做错了什么？

这是我的整个脚本

 <script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        editable: true,
        eventClick: function (info) {
            var endDate = new Date();
            endDate.setDate(info.event.end.getDate() - 1);
            alert('Doodle Id: ' + info.event.id);
            alert('Event: ' + info.event.start.toLocaleDateString("en-GB") + ' - ' + endDate.toLocaleDateString("en-GB"));
        },
        eventMouseEnter: function (info) {
            info.el.style.borderColor = 'black';
        },
        eventMouseLeave: function (info) {
            info.el.style.borderColor = null;
        },
        eventDidMount: function (info) {
            info.el.style.borderWidth = '2px';
            $(info.el).popover({
                title: function () {
                    if (info.event.extendedProps.unsavedChanges == true) return (info.event.title + ' *Unsaved Changes*');
                    return info.event.title;
                },
                placement: 'top',
                trigger: 'hover',
                html:true,
                content: function () {
                    var endDate = new Date();
                    endDate.setDate(info.event.end.getDate() - 1);
                    var imageHtml = '<div class="img-thumbnail"> <img src="data:image/png;base64,' + info.event.extendedProps.imageB64 + '" class="img-thumbnail"/></div>';
                    var dateHtml = '<div> Data:' + info.event.start.toLocaleDateString("en-GB") + ' - ' + endDate.toLocaleDateString("en-GB") + '</div>';
                    var infoHtml = '<div> Publico: ' + info.event.extendedProps.target +'</div>';
                    popoverHtml = dateHtml+infoHtml+ imageHtml;
                    return popoverHtml; 
                },
                container: 'body'
            });
        },
        eventDrop: function (info) {
            info.event.setExtendedProp('unsavedChanges', true);
        }
      });

      @foreach (var doodle in Model.List)
      {
   <text>
      calendar.addEvent({
          id:'@doodle.BannerId',
          title: '@doodle.Name',
          imageB64: '@doodle.Base64File',
          target: '@doodle.TbTargets.First().Name',
          start: '@doodle.DateStart.ToString("yyyy-MM-dd")',
          end: '@doodle.DateEnd.AddDays(1).ToString("yyyy-MM-dd")',
          unsavedChanges:false,
          allDay:true
      });
   </text>
      }
      calendar.render();

    });



</script>

标签： javascriptfullcalendar