FullCalendar V5模态框更新事件功能实现求助

问题说明 #

使用FullCalendar V5时，已实现通过模态框添加事件的功能（点击单日或选择多日范围打开模态框，提交后添加事件到日历），但点击现有事件打开模态框编辑的功能未完成——点击事件虽能打开模态框并填充数据，但提交后无法更新事件。

修复方案 #

核心是区分新增事件和编辑事件两种场景，通过全局变量记录当前编辑的事件对象，在提交时执行对应操作：

• 新增场景：调用addEvent添加新事件
• 编辑场景：修改现有事件属性并调用renderEvent刷新显示

具体修改步骤 #

1. 新增全局变量currentEvent，存储当前正在编辑的事件对象
2. 在eventClick回调中，将点击的事件赋值给currentEvent，同时填充模态框表单数据
3. 在提交按钮点击事件中，判断currentEvent是否存在：
   • 存在：更新该事件的标题、开始/结束时间，调用renderEvent刷新
   • 不存在：添加新事件
4. 关闭模态框时，重置currentEvent和表单输入值，避免影响后续操作

修改后的完整代码 #

HTML部分 #

<!-- 引入依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">

<!-- 日历容器 -->
<div id="calendar"></div>

<!-- 模态框结构 -->
<div id="myModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
  <div style="background:white; margin:15% auto; padding:20px; width:300px;">
    <span class="close" style="float:right; cursor:pointer; font-size:28px; font-weight:bold;">&times;</span>
    <h3>编辑事件</h3>
    <input type="text" id="EventT" placeholder="事件标题"><br>
    <input type="text" id="StartD" placeholder="开始日期"><br>
    <input type="text" id="EndD" placeholder="结束日期"><br>
    <button id="submit">提交</button>
  </div>
</div>

JavaScript部分 #

$(document).ready(function() {
  var modal = document.getElementById("myModal");
  var span = document.getElementsByClassName("close")[0];
  let currentEvent = null; // 存储当前编辑的事件

  // 打开模态框
  $("#open").click(function() {
    modal.style.display = "block";
  });

  // 点击关闭按钮关闭模态框
  $("span").click(function() {
    modal.style.display = "none";
    resetModalForm();
  });

  // 点击模态框外部关闭
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
      resetModalForm();
    }
  }

  // 重置模态框表单和currentEvent
  function resetModalForm() {
    $('#EventT').val('');
    $('#StartD').val('');
    $('#EndD').val('');
    currentEvent = null;
  }

  // 默认事件数据
  const myEvents = {
    title: "event5",
    start: '2022-08-21',
    end: '2022-08-29'
  }
  var myEvent = [{
      id: 'eve',
      title: 'event1',
      start: '2022-08-21'
    },
    {
      title: 'event2',
      start: '2010-01-05',
      end: '2010-01-07'
    },
    {
      title: 'event3',
      start: '2010-01-09T12:30:00',
    },
    {
      title: myEvents.title,
      start: myEvents.start,
      end: myEvents.end,
    }
  ];

  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    initialDate: '2020-09-12',
    navLinks: true,
    selectable: true,
    nowIndicator: true,
    selectMirror: true,

    // 选择日期范围打开模态框（新增事件）
    select: function(info) {
      modal.style.display = "block";
      document.getElementById("StartD").value = info.startStr;
      document.getElementById("EndD").value = info.endStr;
      calendar.unselect();
    },

    // 点击单日打开模态框（新增事件）
    dateClick: function(info) {
      modal.style.display = "block";
      document.getElementById("StartD").value = info.dateStr;
      document.getElementById("EndD").value = info.dateStr;
    },

    // 点击事件打开模态框（编辑事件）
    eventClick: function(info) {
      currentEvent = info.event;
      modal.style.display = "block";
      document.getElementById("EventT").value = currentEvent.title;
      document.getElementById("StartD").value = currentEvent.startStr;
      // 处理无结束日期的情况
      document.getElementById("EndD").value = currentEvent.endStr || currentEvent.startStr;
    },

    editable: true,
    dayMaxEvents: true,
    events: myEvent // 直接使用events属性更简洁
  });

  calendar.render();

  // 提交按钮事件：新增或编辑事件
  $("#submit").on("click", function() {
    var title = $("#EventT").val().trim();
    var start = $("#StartD").val();
    var end = $("#EndD").val();

    if (!title) {
      alert("请输入事件标题");
      return;
    }

    modal.style.display = "none";

    if (currentEvent) {
      // 编辑场景：更新现有事件
      currentEvent.setProp('title', title);
      currentEvent.setStart(start);
      currentEvent.setEnd(end || start); // 无结束日期则设为开始日期
      calendar.renderEvent(currentEvent, true); // 第二个参数true表示持久化
    } else {
      // 新增场景：添加新事件
      calendar.addEvent({
        title: title,
        start: start,
        end: end || start
      });
    }

    resetModalForm();
  });
});

关键说明 #

• 使用currentEvent区分新增/编辑状态，避免重复添加事件
• 编辑时调用FullCalendar的setProp、setStart、setEnd方法修改事件属性，再用renderEvent刷新
• 重置函数resetModalForm确保每次打开模态框都是干净的状态
• 修复了原代码中submit事件的语法错误（原代码大括号不匹配）

内容的提问来源于stack exchange，提问作者Reza Mirzaie