如何根据办公室工作日程更改非事件网格单元格的背景颜色

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

FullCalendar 提供了一个名为 eventContent 的回调函数,开发人员基本上可以劫持 HTML 生成并将其返回给 FC。

但是,我找不到任何方法可以对非事件网格单元执行相同的操作。我需要根据办公室的工作时间表更改非事件网格单元的背景颜色。有谁知道这是否可能?


更清楚一点。办公室可以进行约会,用 FC 术语来说,这些约会就是活动。事件将根据事件的开始和结束时间在时间网格内呈现。因此,“非事件”网格单元是时间网格内不包含任何约会/事件的单元。办公室有工作时间表。可能是周一至周五上午 9 点至下午 5 点。我需要能够根据办公室的日程安排绘制其中没有事件的时间网格单元格的背景。办公室日程表之外没有事件的网格单元将是一种颜色,而办公室日程表内同样没有事件的网格单元将是不同的颜色。其中包含约会/事件的时间网格单元格将包含该事件,并且已经绘制了该事件的颜色。我不担心这些。这有帮助吗?

javascript angular fullcalendar fullcalendar-6
1个回答
0
投票

您可以使用 fullCalendar 的 businessHours 功能来执行此操作。

要设置周一至周五上午 9 点至下午 5 点,您只需添加

businessHours: true

您的日历选项,因为这些是默认时间。

要设置任何其他计划,请提供一个使用文档中列出的选项的对象。例如:

businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
  daysOfWeek: [ 1, 2, 3, 4 ], // Monday - Thursday

  startTime: '10:00', // a start time (10am in this example)
  endTime: '18:00', // an end time (6pm in this example)
}

如果一周中的不同日子有不同的时间表,您甚至可以提供包含多组不同规则的数组。例如:

businessHours: [ // specify an array instead
  {
    daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    startTime: '08:00', // 8am
    endTime: '18:00' // 6pm
  },
  {
    daysOfWeek: [ 4, 5 ], // Thursday, Friday
    startTime: '10:00', // 10am
    endTime: '16:00' // 4pm
  }
]
© www.soinside.com 2019 - 2024. All rights reserved.