Question

jQuery完整日历 - 如何防止用户在非工作时间添加活动？此外，非营业时间的背景颜色应显示为灰色或应用任何自定义颜色。

示例：我的营业时间是：上午9点 - 下午1点＆amp;下午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' }
    });
}

非常感谢任何帮助。

提前致谢。

Answer 1

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

Answer 2

要使其正常运行，您可以在 calendarscript.js 文件中的功能selectDate 中添加规则“if”。

我将工作时间设定为上午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 文件中的代码 function 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");
}
}

Answer 3

使用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与版本2.3.2的fullCalendar

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

Answer 4

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

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

希望它会起作用:)。

Answer 5

只需在日历代码中添加这些选项

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",

希望对您有所帮助。

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

5 个答案: