如何在fullCalendar中为每个资源和时段显示唯一动态价格？

核心思路 #

dayCellDidMount仅作用于日历顶部的日期表头单元格，无法覆盖资源对应的时段单元格。要实现每个资源+时段的价格展示，需使用resourceTimeline视图专属的slotDidMount钩子，该钩子会遍历每个资源的每一个时段单元格，适合插入自定义价格内容。

具体实现步骤 #

1. 准备价格数据结构 #

构建以资源ID_时段起始时间为唯一键的价格映射表，确保每个资源+时段组合对应唯一价格：

const priceData = {
  'res1_2024-05-20T09:00:00': '$100',
  'res1_2024-05-20T10:00:00': '$120',
  'res2_2024-05-20T09:00:00': '$90',
  // 按需扩展更多资源+时段的价格
};

2. 使用slotDidMount钩子插入价格 #

以React版本为例：

import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

const Calendar = () => {
  const handleSlotDidMount = (info) => {
    const { el, resource, start } = info;
    // 生成唯一匹配键：资源ID + 精确到分钟的时段起始时间
    const priceKey = `${resource.id}_${start.toISOString().slice(0, 16)}`;
    const targetPrice = priceData[priceKey];

    if (targetPrice) {
      // 创建价格元素并设置样式
      const priceEl = document.createElement('div');
      priceEl.style.cssText = `
        position: absolute;
        bottom: 4px;
        right: 4px;
        font-size: 12px;
        color: #555;
        background: #f5f5f5;
        padding: 2px 4px;
        border-radius: 3px;
      `;
      priceEl.textContent = targetPrice;
      el.appendChild(priceEl);
    }
  };

  return (
    <FullCalendar
      plugins={[resourceTimelinePlugin]}
      initialView="resourceTimelineDay"
      resources={[
        { id: 'res1', title: '资源1' },
        { id: 'res2', title: '资源2' }
      ]}
      slotDidMount={handleSlotDidMount}
      // 其他日历配置（如时段间隔、日期范围等）
    />
  );
};

export default Calendar;

纯JS版本实现：

document.addEventListener('DOMContentLoaded', () => {
  const calendarEl = document.getElementById('calendar');
  const priceData = {
    'res1_2024-05-20T09:00:00': '$100',
    'res1_2024-05-20T10:00:00': '$120',
    'res2_2024-05-20T09:00:00': '$90',
  };

  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['resourceTimeline'],
    initialView: 'resourceTimelineDay',
    resources: [
      { id: 'res1', title: '资源1' },
      { id: 'res2', title: '资源2' }
    ],
    slotDidMount: (info) => {
      const priceKey = `${info.resource.id}_${info.start.toISOString().slice(0, 16)}`;
      const targetPrice = priceData[priceKey];
      if (targetPrice) {
        const priceEl = document.createElement('div');
        priceEl.style.cssText = 'position: absolute; bottom: 4px; right: 4px; font-size: 12px; color: #555; background: #f5f5f5; padding: 2px 4px; border-radius: 3px;';
        priceEl.textContent = targetPrice;
        info.el.appendChild(priceEl);
      }
    }
  });

  calendar.render();
});

3. 样式与动态数据适配 #

• 可根据需求调整价格元素的位置、字体、背景色等样式，避免遮挡日历原有内容
• 若价格需动态获取，可在组件初始化时异步请求数据，更新priceData后调用日历的refetchEvents()方法触发重新渲染

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