要自定义 FullCalendar 的事件渲染方式,你可以使用 eventContent
和 eventDidMount
这两个回调函数。它们分别用于生成事件的内容和在事件已经挂载到 DOM 后进行操作。
首先,确保你已经安装并引入了 FullCalendar 库。接下来,按照以下步骤进行操作:
- 在你的 HTML 文件中创建一个容器元素,用于存放 FullCalendar:
FullCalendar Custom Event Rendering
- 在你的 JavaScript 文件(例如
app.js
)中初始化 FullCalendar,并设置events
数据源。然后,使用eventContent
和eventDidMount
回调函数自定义事件渲染:
document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', events: [ { id: '1', title: 'My Event', start: '2022-01-01' }, { id: '2', title: 'Another Event', start: '2022-01-02' } ], eventContent: function(args) { // 自定义事件内容 let content = document.createElement('div'); content.innerHTML = `${args.event.title} ${args.event.startStr}`; return { html: content.outerHTML }; }, eventDidMount: function(args) { // 在事件挂载到 DOM 后进行操作 args.el.style.backgroundColor = 'lightblue'; args.el.style.borderRadius = '5px'; } }); calendar.render(); });
在这个示例中,我们为每个事件创建了一个包含标题和日期的自定义 HTML 结构,并在 eventDidMount
回调函数中设置了背景颜色和边框半径。你可以根据需要修改这些值以实现你想要的效果。
注意:这里的代码示例使用了 FullCalendar v5,但是这些回调函数在其他版本中也应该类似。如果你使用的是不同版本的 FullCalendar,请查阅相应版本的文档以获取更多信息。