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

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

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

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

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

在当前的 fullcallendar 版本（ 5.x ）上，maxTime并minTime重命名为 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}
  //...
/>

<小时 />

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

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

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

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

在全日历上为每天应用不同的时间段和范围

你会发现我在一个

类似问题上的方法，我使用 Javascript 来防止选择特定时期，并且使用 CSS 我突出显示了我不希望被选中的区域。

要完全隐藏所需的行（非业务/休息时间），您必须在 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 子句，甚至可以在迭代时输入配置参数以检查内部。

据我所知

隐藏休息期仍然是不可能的，但是版本 2 现在必须使用minTime和maxTime来隐藏非营业时间。

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

使用 selectConstraint

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

对于任何尝试这个的人。这是删除非业务

<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();

示例输出

检查这个

相关内容

最新更新

热门标签：