如何在Fullcalendar.js资源时间线的资源标题中嵌入HTML标签展示价格？

FullCalendar的Resource Timeline组件可通过resourceRender回调函数自定义资源标签的HTML内容，实现标题下方显示带样式的价格，具体实现如下：

• 在Calendar初始化配置中添加resourceRender回调，该回调接收resource（资源数据）和el（资源对应的DOM元素）两个参数。
• 借助资源对象的regularPrice和salePrice字段，构建包含HTML标签的价格内容，修改默认的标题显示。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    resourceLabelText: 'Shows',
    resources: [
      {  
        id: '17', 
        title: 'Test Show', 
        regularPrice: '$45.45', 
        salePrice: '$39.99' 
      },
      // 可添加更多资源数据
    ],
    initialView: 'resourceTimelineDay',
    // 自定义资源渲染逻辑
    resourceRender: function(info) {
      // 构建带HTML标签的价格内容
      var priceHtml = `
        <br>
        <small style="text-decoration: line-through; color: #999;">${info.resource.extendedProps.regularPrice}</small>
        <span style="color: #e74c3c; font-weight: bold;"> ${info.resource.extendedProps.salePrice}</span>
      `;
      // 将价格追加到标题容器中
      info.el.querySelector('.fc-resource-title').innerHTML += priceHtml;
    }
  });

  calendar.render();
});

关键说明 #

• 资源对象中的自定义字段（如regularPrice、salePrice）需通过resource.extendedProps访问。
• 可直接修改info.el内部的DOM元素，.fc-resource-title是组件默认的标题容器，支持直接追加或替换内容。
• 样式既可以内联写在HTML标签中，也可以通过外部CSS类定义，比如给价格标签添加类名后在样式表中统一设置样式。

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