jQuery 完整日历 - 如何防止用户在非工作时间添加事件?此外,非营业时间的背景色应灰显或应用任何自定义颜色。
示例:我的营业时间为:上午 9 点至下午 1 点和下午 3 点至晚上 7 点。 [下午 1 点至下午 3 点应有 2 小时的休息时间]
法典:
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
eventClick: updateEvent,
selectable: true,
selectHelper: true,
select: selectDate,
editable: true,
events: "JsonResponse.ashx",
eventDrop: eventDropped,
eventResize: eventResized,
eventRender: function(event, element) {
//alert(event.title);
element.qtip({
content: {
text: qTipText(event.start, event.end, event.description),
title: '<strong>' + event.title + '</strong>'
},
position: {
my: 'bottom left',
at: 'top right'
},
style: { classes: 'qtip-shadow qtip-rounded' }
});
}
任何帮助将不胜感激。
提前谢谢。
时已晚,但我还没有看到正确的答案,所以这可能会有所帮助,使用selectConstraint
和eventConstraint
选项来防止非工作时间的点击事件非常简单(从完整的日历 2.2 版本开始)。就我而言,我使用了selectConstraint: "businessHours"
https://fullcalendar.io/docs/selection/selectConstraint/https://fullcalendar.io/docs/event_ui/eventConstraint/
要使其正常工作,您可以在日历脚本.js文件中将规则 "if" 添加到函数 selectDate 中。
我在我的示例中将工作时间设置为上午 9 点至下午 5 点,周一至周五。
所以首先你检查"start.format("ddd")"这一天是否不是星期六或星期日,如果为真,请转到下一个,否则显示消息。
然后你检查开始时间"start.format("HH")"是否小于09"9AM"或大于16"4PM",如果真显示消息如果假,则去下一个如果检查结束时间.
如果结束时间"end.format("HH")"大于 17 "5PM"显示消息,或者转到最后一个 if 检查它是否在 5PM.
结束
所以最后,如果你检查结束时间是否是17"5PM"并且分钟不大于00打开对话框,否则显示消息。
只需将日历脚本中的代码函数 selectDate 替换为下面的代码.js并且工作时间为上午 9 点至下午 5 点
function selectDate(start, end, allDay) {
if (start.format("ddd") !== "Sat" && start.format("ddd") !== "Sun")
{
if (start.format("HH") < 09 || start.format("HH") > 16) {
alert("We are closed at that time , Please select a other time , 9 to 5");
//alert(start.format("HH"));
}
else if (end.format("HH") > 17) {
alert("We are closed at that time , Please select a other time , 9 to 5");
//alert(start.format("mm"));
}
else if (end.format("HH") == 17 && end.format("mm") > 00) {
alert("We are closed at that time , Please select a other time , 9 to 5");
//alert(start.format("mm"));
}
else {
$('#addDialog').dialog('open');
$("#addEventStartDate").text("" + start.toLocaleString());
$("#addEventEndDate").text("" + end.toLocaleString());
addStartDate = start;
addEndDate = end;
globalAllDay = allDay;
//alert(allDay);
}
}
else
{
alert("We are close on Saturdays and Sundays");
}
}
只需在日历代码中添加这些选项
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",
希望这对你有帮助。
您可以像这样检查它是否包含营业时间类:
// If it is not a business hour
if (jsEvent.target.classList.contains('fc-nonbusiness') ||
jsEvent.target.classList.contains('busy-time')) {
return;
}
else{
// Do something if it is a business hour
}
希望它会:)工作
使用 businessHours 属性在日历上设置某些时间段。默认情况下,周一至周五,上午 9 点至下午 5 点。
$('#calendar').fullCalendar(
businessHours : {
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [ 1, 2, 3, 4 ]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
}
使用完整日历的 2.3.2 版工作小提琴
参考详细信息 这里 和 这里 最后时刻.js