如何自定义fullcalendar的事件渲染方式-乐工具技术知识

要自定义 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，请查阅相应版本的文档以获取更多信息。