Question

我正在使用jQuery fullCalendar。客户希望仅查看日历中的营业时间。那可能吗？怎么样？

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

Answer 1

minTime和maxTime选项可让您设置第一个和最后一个小时。我不认为你可以在middel打破日历。

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

Answer 2

fullcalendar上有一个更新，允许您应用营业时间

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

但是，我不认为它会让你在一天内休息一下。在这里

Apply different timeslots and ranges for each day on Fullcalendar

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

Answer 3

在当前 fullcallendar 版本 (5.x) 上，maxTime 和 minTime 选项 where renamed 到 slotMaxTime 和 slotMinTime。

隐藏大部分营业时间 - 即晚上和/或非工作日：

直接根据您的 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))

对相关属性使用计算值 - 即对于 @fullcalendar/react：

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

<块引用>

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

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) {...}

你可以在里面添加一个if子句，或者甚至更多的工作来输入一个配置参数来在迭代时检查它。

Answer 5

如我所知，

隐藏休息时间仍然是不可能的但版本2现在具有可用于隐藏非营业时间的人员minTime和maxTime。

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

Answer 6

使用selectConstraint和eventConstraint选项来阻止非工作时间的点击事件（来自完整日历2.2version）。在我的情况下，我使用selectConstraint：“businessHours”https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/

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

6 个答案: