jQuery完整日历 - 如何防止用户在非工作时间添加事件？

Posted 2021-04-07

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' }
    });
}

任何帮助将不胜感激。

提前致谢。

答案

为了使它工作，你可以在你的函数中添加规则“if”，在日历script.js文件中选择Date。

在我的例子中，我将工作时间设置为周一至周五上午9点至下午5点。

所以首先你检查一天“start.format（”ddd“）”是不是星期六或星期日，如果是真的话转到下一个if else show message。

然后检查开始时间“start.format（”HH“）”是否小于09“9AM”或大于16“4PM”如果为真显示消息，如果为false则转到下一个如果要检查结束时间。

如果结束时间“end.format（”HH“）”大于17“5PM”显示消息，否则转到最后一个if检查它是否在下午5点结束。

所以在最后，如果你检查结束时间是17“5PM”并且分钟不大，那么00打开对话框，否则显示消息。

只需使用下面的代码替换calendarscript.js文件中的代码函数selectDate，并且工作时间为上午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");
}
}

另一答案

我知道为时已晚，但我没有看到正确的答案，所以这可能会有所帮助，使用selectConstraint和eventConstraint选项非常简单，以防止在非工作时间点击事件（从完整的日历2.2版本）。在我的情况下，我使用selectConstraint: "businessHours" https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/

另一答案

使用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)
    }

Working fiddle与fullCalendar的ver 2.3.2

详情请参阅here和here，最后是moment.js

另一答案

您可以检查它包含营业时间类的位置，或者不是这样：

// 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
}

希望它会工作:)