如何只在fullCalendar中显示开放时间？

Question

我正在使用jQuery fullCalendar.客户希望只在日历中看到他们的商务营业时间.那可能吗？怎么样？

示例:商务营业时间为上午9点至下午1点以及下午3点至晚上10点

Answer 1

该minTime和MAXTIME选项可以让你设置的第一和最后一个小时.我不认为你可以在middel打破日历.

也许你可以创建一个名为午餐的定期活动,并将其与实际活动的颜色区别开来

Answer 2

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

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

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}
  //...
/>

免责声明：这是一次快速而肮脏的尝试。可能会进行重构以提高性能