FullCalendar 事件 ID 的正确使用方法-js教程-PHP中文网

FullCalendar 事件 ID 的正确使用方法

FullCalendar 中事件的 id 是用于 JavaScript 内部标识和操作（如 getEventById()），并非 HTML 元素的 id 属性；在 eventClick 回调中应访问 event.event.id 而非 event.el.id。

fullcalendar 中事件的 `id` 是用于 javascript 内部标识和操作（如 `geteventbyid()`），并非 html 元素的 `id` 属性；在 `eventclick` 回调中应访问 `event.event.id` 而非 `event.el.id`。

在 FullCalendar v6+ 中，事件对象（EventInput）上设置的 id 字段是一个逻辑标识符，专为程序化事件管理设计——它不会映射为渲染后 DOM 元素的 id 属性，也不会出现在 HTML 源码中。这是开发者常遇到的误解：以为设置 id: '80185814' 后，对应日历单元格的 @#@#@#@#@#@#@#@#@#@0 实例，封装了事件所有元数据（含 <code>id, title, start, end, extendedProps 等）；

el: 渲染该事件的原生 DOM 元素（如 <div class="fc-event">），可用于样式操作或定位，但<strong>不携带 <code>id 属性；

jsEvent: 原生 MouseEvent，可用于阻止默认行为或获取坐标；

view: 当前视图对象，便于条件判断。

? 实用技巧：利用 id 进行事件检索与更新
一旦为事件设置了唯一 id，即可在任意时刻通过 calendar.getEventById(id) 获取其 EventApi 实例，进而执行动态操作：

eventClick: function(info) {
  console.log('事件逻辑 ID:', info.event.id); // ✅ 正确：获取 FullCalendar 事件对象的 id
  console.log('事件标题:', info.event.title);
  console.log('开始时间:', info.event.start);
}

? 小结：

✅ id 是 FullCalendar 事件的内部唯一键，用于 JS 层逻辑关联与操作；
❌ 不会自动同步到 DOM 元素的 id 属性；
✅ 使用 info.event.id 在回调中安全读取；
✅ 结合 calendar.getEventById() 实现事件查找、更新、删除等高级交互；
? 如需自定义 DOM 属性（如 data-event-id），可通过 eventContent 或 eventDidMount 钩子手动注入：

eventClick: function(info) {
  console.log(info.el.id); // ❌ 错误：el 是 DOM 元素，无内置 id 属性
  console.log(info.id);    // ❌ 错误：info 对象本身没有 id 字段
}

这样既保持了 FullCalendar 的设计规范，又满足了前端定制化需求。

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

// 示例：点击后修改事件标题并重新渲染
eventClick: function(info) {
  const eventId = info.event.id;
  const event = calendar.getEventById(eventId);
  if (event) {
    event.setProp('title', '已点击 ✔');
    console.log('更新成功，新标题：', event.title);
  }
}

eventDidMount: function(info) {
  info.el.setAttribute('data-event-id', info.event.id);
}