FullCalendar 6.x如何将start/end的ISO8601格式改为自定义格式？

你可以利用FullCalendar提供的eventDataTransform回调函数，在事件数据被加载到日历前，对start和end字段进行格式转换。具体实现如下：

修改后的代码示例 #

calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    height: "auto",
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: {
        url: "/myurl",  
        extraParams: function() {
            return {
                createId: $("#createId").val()
            };
        }
    },
    // 添加时间格式转换的回调
    eventDataTransform: function(eventData) {
        // 处理start字段
        if (eventData.start) {
            const date = new Date(eventData.start);
            eventData.start = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
        }
        // 处理end字段
        if (eventData.end) {
            const date = new Date(eventData.end);
            eventData.end = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
        }
        return eventData;
    }
});

说明 #

• eventDataTransform会在每个事件数据被解析后、渲染到日历前触发，你可以在这里修改事件的任意字段
• 代码中通过new Date()将原始的ISO格式时间字符串转为Date对象，再通过字符串拼接生成你需要的YYYY-MM-DD HH:mm:ss格式
• 使用String().padStart(2, '0')确保月份、日期、时分秒都是两位数字（比如4月转为"04"，9点转为"09"）

如果项目中引入了日期处理库（比如Day.js、Moment.js），也可以用库的格式化方法简化代码，比如用Day.js的话：

// 假设已引入Day.js
eventDataTransform: function(eventData) {
    if (eventData.start) eventData.start = dayjs(eventData.start).format('YYYY-MM-DD HH:mm:ss');
    if (eventData.end) eventData.end = dayjs(eventData.end).format('YYYY-MM-DD HH:mm:ss');
    return eventData;
}

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