如何在完整日历中仅显示营业时间？

Question

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

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

Answer 1

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

也许您可以创建一个名为“午餐”的重复活动，并为其设置与实际活动不同的颜色

Answer 2

在当前的完整版本（

5.x

）上，

maxTime

和

minTime

选项重命名为slotMaxTime

和

slotMinTime

。

隐藏

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

直接根据您的
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}
  //...
/>

---

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

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/

Answer 7

对于任何尝试这个的人。 这个是去掉非业务的

<style>
    .fc .fc-non-business {
        background: var(--fc-non-business-color);
        display: none;
    }
</style>

此一项用于营业时间，以删除您想要禁用的时间

selectConstraint: 'businessHours',
            businessHours: {
            daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
            startTime: '07:00', // a start time (10am in this example)
            endTime: '20:00', // an end time (6pm in this example)
            }

使用内容高度调整日历高度

contentHeight: 680, 这是日历的整体配置

var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        hiddenDays: [0],
        allDaySlot: false,
        selectOverlap:false,
        selectable: true,
        selectConstraint: 'businessHours',
        businessHours: {
        daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
        startTime: '07:00', // a start time (10am in this example)
        endTime: '20:00', // an end time (6pm in this example)
        },
        select: function(data) {
            var start = formatDateToTime(data.start);
            var end = formatDateToTime(data.end);
            var date = data.startStr.substring(0, 10);
            var uid = "add";
            $.ajax({
                type: "POST",
                url: "{{ url('event/getModal')}}",
                data: {
                    uid: uid,
                    start: start,
                    end: end,
                    date: date
                },
                success: function(response) {
                    $("#modal-view").modal('toggle');
                    $("#modal-view").find(".modal-title").text("Add Event");
                    $("#modal-view").find("#modal-display").html(response);
                }
            });
        },
        headerToolbar:{
            start: '', // will normally be on the left. if RTL, will be on the right
            center: '',
            end: '' // will normally be on the right. if RTL, will be on the left
        },
        dayHeaderFormat:{ weekday: 'long' },
        editable: true,
        events: <?php echo $Events?>,
        contentHeight: 680,
        eventClick: function(calEvent, jsEvent, view) {
            console.log(calEvent);    
        },
        viewDidMount: function(event, element) {
            $('td[data-time]').each(function() {
                    var time = $(this).attr("data-time");
                    if(time < "07:00:00"){
                        $(this).parent().remove();
                    }
                    if(time > "19:30:00"){
                        $(this).parent().remove();
                    }
                    console.log($(this).parent());
            });
        },
        eventDidMount: function(event, element) {
            // To append if is assessment
            if(event.event.extendedProps.description != '' && typeof event.event.extendedProps.description  !== "undefined")
            {  
                $(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.description+"</b>");
                $(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.prof+"</b>");
            }
        }
        
    });
    calendar.render();

输出示例