fullcalendar - 如何在 fullCalendar 中仅显示营业时间？

Question

我正在使用 jQuery fullCalendar。客户只想在日历中查看他们的营业时间。那可能吗？如何？

示例：营业时间为上午 9 点至下午 1 点和下午 3 点至晚上 10 点

Answer 1

minTime和maxTime选项可让您设置第一个和最后一个小时。我不认为你可以有一个在中间休息的日历。

也许您可以创建一个称为午餐的重复事件，并将其颜色与您的实际事件不同

Answer 2

在当前的 fullcallendar 版本 ( 5.x) 上，maxTime以及重命名为 和的minTime选项。slotMaxTimeslotMinTime

隐藏大部分工作时间 - 即夜间和/或非工作日：

1. 根据您的businessHours规范计算一些值

const workSpec = [
  {
    daysOfWeek: [1, 2, 3, 4],
    startTime: '08:00',
    endTime: '18:00'
  }
  {
    daysOfWeek: [5],
    startTime: '09:00',
    endTime: '14:00'
  }
]

/*
 * calculate the following:
 * - minimum "opening time"
 * - maximum "opening time"
 * - working days
 * - non-working days
 */
const workMin = workSpec.map(item => item.startTime).sort().shift()
const workMax = workSpec.map(item => item.endTime).sort().pop()
const workDays = [...new Set(workSpec.flatMap(item => item.daysOfWeek))]
const hideDays = [...Array(7).keys()].filter(day => !workDays.includes(day))

2. 在相关属性上使用计算值 - 即@fullcalendar/react：

<FullCalendar
  //...
  businessHours={workSpec}
  slotMinTime={workMin}
  slotMaxTime={workMax}
  hiddenDays={hideDays}
  //...
/>

---

免责声明：这是一个快速n-dirty的过程。可能会进行重构以提高性能

Answer 3

fullcalendar 有更新，可让您申请营业时间

http://fullcalendar.io/docs/display/businessHours/

但是，我认为这不会让您在一天之内休息一下……在这里

在 Fullcalendar 上为每一天应用不同的时间段和范围

您会在类似的问题上找到我的方法，我使用 Javascript 来防止选择特定时期，并且使用 css 我突出显示了我不想被选择的区域..

Answer 4

要完全隐藏所需的行（非营业时间/休息时间），您必须在 fullcalendar.js 中修改以下方法：

// Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
renderSlatRowHtml: function() {...}

然后避免输入添加html代码的while子句：

while (slotTime < this.maxTime) {...}

你可以在那个 while 中添加一个 if 子句，或者甚至更多地输入一个配置参数来检查那个 while 迭代。

Answer 5

据我所知，隐藏休息时间仍然是不可能的，但是第 2 版现在已经有了minTime，maxTime你可以用它来隐藏非工作时间。

此处的文档：http: //fullcalendar.io/docs/agenda/minTime/

Answer 6

使用 selectConstraint 和 eventConstraint 选项来防止在非工作时间发生点击事件（来自完整日历 2.2 版本）。就我而言，我使用了 selectConstraint: "businessHours" https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/