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



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

任何帮助将不胜感激。

提前谢谢。

我知道为

时已晚,但我还没有看到正确的答案,所以这可能会有所帮助,使用selectConstrainteventConstraint选项来防止非工作时间的点击事件非常简单(从完整的日历 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

相关内容

  • 没有找到相关文章

最新更新