如何为FullCalendar v5添加自定义属性字段并在日程标题下展示

FullCalendar v5 日程标题下方添加自定义字段解决方法 #

报错根因 #

• v5版本将事件的自定义字段统一存放在event.extendedProps属性下，无法直接从事件根对象读取自定义字段
• eventDidMount回调返回的元素是原生DOM节点，不是jQuery封装对象，直接调用find()方法会触发报错

修改后的完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js'></script>
<!-- 如果要使用jQuery写法可以额外引入jQuery，不需要的话可以删掉下面这行 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
  <div id='calendar'></div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        initialDate: '2021-08-17',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: [{
          title: 'Event',
          name: 'John',
          start: '2021-08-17'
        }],
        // 替换原eventRender的核心逻辑
        eventDidMount: function(info) {
          // 从extendedProps中读取自定义的name字段
          const userName = info.event.extendedProps.name;
          // 原生JS写法，不需要依赖jQuery
          const titleEl = info.el.querySelector('.fc-event-title');
          if(titleEl && userName) {
            // 在标题下方插入自定义内容，可自行调整样式
            titleEl.insertAdjacentHTML('afterend', `<div style="font-size: 12px; opacity: 0.7; margin-top: 2px;">${userName}</div>`);
          }
          // 如果习惯用jQuery写法，替换上面几行即可：
          // $(info.el).find('.fc-event-title').after(`<div style="font-size: 12px; opacity: 0.7; margin-top: 2px;">${info.event.extendedProps.name}</div>`);
        }
      });
      calendar.render();
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Tomas Landa