如何在 fullCalendar 中显示每个单独资源和每个时间段中的内容

Question

我想在完整日历中显示每个资源和每个时段的独特动态价格。

我使用了

dayCellDidMount

挂钩，但正如您在下图中看到的，它仅在前 2 行中显示价格。

你能建议我应该如何实现这一目标吗？

Answer 1

没有可以使用的挂钩来针对特定资源中的特定时间段。

但是您可以通过使用背景事件

来实现您的想法

例如：

eventSources: [
  {
    id: "prices",
    backgroundColor: "#ffffff",
    events: [
      {
        start: "2024-01-01 07:00",
        end: "2024-01-01 08:00",
        title: "$10",
        display: "background",
        resourceId: 1
      },
      {
        start: "2024-01-01 08:00",
        end: "2024-01-01 09:00",
        title: "$20",
        display: "background",
        resourceId: 1
      },
      {
        start: "2024-01-01 07:00",
        end: "2024-01-01 08:00",
        title: "$15",
        display: "background",
        resourceId: 2
      },
      {
        start: "2024-01-01 08:00",
        end: "2024-01-01 09:00",
        title: "$35",
        display: "background",
        resourceId: 2
      }
    ]
  }
],

显然这只是证明这个概念的简单示例数据。对于实际使用，您可以根据您的情况应用技术来生成事件列表 - 例如从后端自动生成 fullCalendar 当前显示的日期范围的提要，和/或使用重复事件功能。

现场演示：https://codepen.io/ADyson82/pen/jORozjP