@fullcalendar/react eventSources 时间渲染格式HH:MM

@fullcalendar/react 中 eventSources 的时间渲染格式 HH:MM 可以通过配置事件源的时间显示属性来实现。
在 FullCalendar 组件中，如果你希望将来自 eventSources 的事件按照 HH:MM 格式（例如：14:30、09:15 等等）展示，可以参考下面的做法：
设置 TimeGrid 视图插件
首先确认已经加载了适合的视图插件如 dayGridPlugin 或者 timeGridPlugin，并启用了它们。对于带有小时和分钟的格式来说，timeGrid 更加合适因为它专门用于带时刻表的日程安排视图。
import '@fullcalendar/common/main.css';
import '@fullcalendar/daygrid/main.css'; // 如果需要dayGrid视图的话也需要引入样式文件
import '@fullcalenda/timegrid/main.css';

import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";

// 初始化日历实例的时候注册相应的插件...
登录后复制
配置 EventSource 和 Formatter
接着，在设置 eventSources 属性时指定如何解析和呈现每个单独事件的时间字段。你可以利用 moment.js 或 luxon 库来进行更复杂的日期操作；当然如果使用的是 v5版本以上的 fullcalendar 则默认支持 ISO8601 字符串直接作为输入而无需额外库辅助转换。为了仅显示“HH:mm”的形式，可以在 events 数组项里明确写出 start/end 时间点并借助 textContent 来控制最终文本内容:
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin]}
initialView="timeGridWeek" // 设定初始视图为周视图表单，默认有时段划分
eventSources={[
{
url: '/myfeed.php', // 假设这是你获取数据的地方
method: 'GET',
extraParams: {
custom_param_1: 'something'
},
failure: function() {
alert('there was an error while fetching events!');
},
eventDataTransform(eventData) {
return {
...eventData,
startTimeText: formatTime(eventData.start), // 自定义函数formatTime负责把原生ISO时间字符串转成想要的样子
endTimeText: formatTime(eventData.end),
};
}
}
]}
/>
登录后复制
其中自定义的帮助函数 formatTime(dateString) 能够接受一个标准格式化后的字符串并且返回类似于 "17:45" 这样的结果：
function formatTime(isoDateString){
const date = new Date(isoDateString);
let hours = date.getHours().toString().padStart(2,'0');
let minutes = date.getMinutes().toString().padStart(2,'0');

return `${hours}:${minutes}`;
}
登录后复制
最后，要让这些处理过的内容真正地呈现在界面上，则还需要调整下模板部分，确保调用到了之前我们设定好的新属性 .startTimeText,.endTimeText.
请注意实际应用过程中应当根据官方文档及最新 API 文档做出相应修改适配，因为软件更新迭代可能会导致一些细节有所变化。