我想显示每个资源和每个时段的动态价格如何做到这一点,而且我也使用了这个钩子dayCellDidMount但没有

问题描述 投票:0回答:1

我想在这个完整日历中为每个资源和每个时段间隔使用动态价格:

img1

这是第二张图片,仅将价格显示在带有 dayCellDidMount 挂钩的两行中,如果您有任何建议,请帮助我:

img2

reactjs fullcalendar
1个回答
0
投票

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

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

来实现您的想法

例如:

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

© www.soinside.com 2019 - 2024. All rights reserved.