FullCalendar v6.15：点击事件获取ID及描述添加换行的问题

问题描述 #

我在查找相关资料后仍未解决以下两个问题：

• 添加事件后，HTML中找不到事件ID，需要该ID用于后台操作
• 尝试用<br>或\n在事件标题中添加换行，均未生效

以下是我当前的HTML和JS代码：

<div id='calendar'></div>

document.addEventListener('DOMContentLoaded', function () {
    createCalendar();
});

function createCalendar() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        selectable: true,
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'timeGridWeek,dayGridMonth'  // 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        dateClick: function (info) {
            console.log(info);
        },
        eventClick: function (start, end, jsEvent, view, resource) {
            console.log(
                'select',
                resource ? resource.id : '(no resource)'
            );
        },
        initialView: 'timeGridWeek', 
        allDaySlot: false,
        slotMinTime: "08:00:00",
        slotMaxTime: "21:00:00",
        height: 1000,
        expandRows: true,
        eventRender: function (event, element) {
            element.find('.fc-sticky').attr("id", event.id);
        }
    });

    var event1 = {
        id: "aabbcc", title: 'Sam Smith, \nJohn Doe',
        startTime: "12:00:00", endTime: "14:00:00",
        startRecur: new Date(2023, 3, 4, 12), endRecur: new Date(2023, 5, 4, 12),
        daysOfWeek: [2]
    };

    calendar.addEvent(event1);

    calendar.render();
}

解决方案 #

1. 事件ID添加到DOM/获取事件ID #

你的代码中eventRender和eventClick的写法是旧版FullCalendar（v3及以前）的语法，v5+版本参数结构已更新：

• 修正eventRender：v5+的eventRender回调接收info对象，包含event（事件数据）和el（事件DOM元素）。可以直接给元素添加自定义属性：

  eventRender: function(info) {
      // 添加自定义data属性，规范且避免ID冲突
      info.el.setAttribute('data-event-id', info.event.id);
      // 或者直接设置元素ID（注意避免重复ID）
      // info.el.id = 'event-' + info.event.id;
  }
  

• 修正eventClick：直接通过info.event.id获取事件ID，无需从DOM提取，更高效：

  eventClick: function(info) {
      console.log('事件ID:', info.event.id);
      // 此处可直接将ID传入后台接口
  }
  

2. 事件标题换行 #

FullCalendar默认会转义HTML内容，所以<br>和\n无法直接生效，需要通过eventContent自定义渲染：

eventContent: function(info) {
    // 将标题中的\n替换为<br>，实现换行
    return {
        html: info.event.title.replace(/\n/g, '<br>')
    };
}

如果需要直接使用HTML标签作为标题，也可以在事件对象中写<br>，然后通过eventContent返回HTML内容：

// 修改事件对象
var event1 = {
    id: "aabbcc", 
    title: 'Sam Smith, <br>John Doe',
    // 其他属性不变
};

// 对应的eventContent
eventContent: function(info) {
    return { html: info.event.title };
}

完整修改后的JS代码 #

document.addEventListener('DOMContentLoaded', function () {
    createCalendar();
});

function createCalendar() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        selectable: true,
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'timeGridWeek,dayGridMonth'
        },
        dateClick: function (info) {
            console.log(info);
        },
        eventClick: function (info) {
            console.log('事件ID:', info.event.id);
            // 直接调用后台接口
        },
        initialView: 'timeGridWeek', 
        allDaySlot: false,
        slotMinTime: "08:00:00",
        slotMaxTime: "21:00:00",
        height: 1000,
        expandRows: true,
        eventRender: function(info) {
            info.el.setAttribute('data-event-id', info.event.id);
        },
        eventContent: function(info) {
            return {
                html: info.event.title.replace(/\n/g, '<br>')
            };
        }
    });

    var event1 = {
        id: "aabbcc", 
        title: 'Sam Smith, \nJohn Doe',
        startTime: "12:00:00", 
        endTime: "14:00:00",
        startRecur: new Date(2023, 3, 4, 12), 
        endRecur: new Date(2023, 5, 4, 12),
        daysOfWeek: [2]
    };

    calendar.addEvent(event1);
    calendar.render();
}

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