FullCalendar.io-如何使用工作时间来防止在特定时间点击日期

Question

我正在使用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点之间的营业时间。目前，用户可以在视图中的任何时间点击以弹出模态，但我希望只有在他们点击营业时间时才能打开模态。

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

感谢

Answer 1

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

完成后，您可以将selectConstraint选项设置为"businessHours"，这将自动阻止人们选择指定营业时间之外的时间。

例如：

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

Answer 2

dateClick: (info) => {
info.jsEvent.preventDefault();
if (info.jsEvent.target.classList.contains('fc-non-business')) {
return false;
}
}

试试这个；(