时间戳

首页 > 解决方案 > FullCalendar.io - 如何使用营业时间来防止日期点击某些时间

javascript - FullCalendar.io - 如何使用营业时间来防止日期点击某些时间

问题描述

我正在使用https://fullcalendar.io，特别是 dateClick 函数如下

dateClick: function(info) {
                //alert('clicked ' + info.dateStr);
                calendar.changeView('timeGridDay', info.dateStr);
                console.log(info);
                if (info.view.type == 'timeGridDay') {
                    date = info.dateStr;
                    var modal = $('#add-event-modal');
                    modal.modal('show');
                    $(modal).find('input[name=parade_start]').val(info.dateStr.substring(0, 10) + ' ' + info.dateStr.substring(11, 19));
                }
            },

我也在使用上午 9 点到下午 5 点之间的营业时间。目前，用户可以在视图中的任何时间单击以弹出模式，但我希望仅在他们单击营业时间时才打开模式。

请告知 - 不确定这是否可能

谢谢

标签： javascriptfullcalendarfullcalendar-4

解决方案

最好使用选择回调（而不是 dateClick）来检测用户选择。

完成此操作后，您可以将selectConstraint选项设置为“营业时间”，这会自动阻止人们选择规定营业时间以外的时间。

例如：

selectable: true,
select: function(info) {
  alert("selected " + info.startStr + " to " + info.endStr);
},
businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
  daysOfWeek: [1, 2, 3, 4], // Monday - Thursday
  startTime: "10:00", // a start time (10am in this example)
  endTime: "18:00" // an end time (6pm in this example)
},
selectConstraint: "businessHours"

工作演示：https ://codepen.io/ADyson82/pen/xxGpJXG

推荐阅读