完整的日历营业时间限制了点击事件

Question

我正在尝试在jspx中放入完整的日历，并且如果用户在工作时间之外单击，我不希望启用单击。我可以使它每天工作，但是到了时间，我不确定该怎么做。每天都有一个休息时间，人们无法预定约会。是否可以将营业时间限制应用于每日点击次数？这是我的代码：

$(document).ready(function() {

    $('#calendar').fullCalendar({

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaDay,list',               

        },
        stick:true,
        defaultView: 'agendaDay',
        defaultTimedEventDuration:'00:15:00', 

        //removed business hours from day view
        minTime: "08:00:00",
        maxTime: "17:00:00",


        //shows time in 15 min slot
        slotDuration: '00:15:00',
        slotLabelInterval: 15,
        slotLabelFormat: 'h(:mm)a',

        //set business hours
    businessHours:[{            
        dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
        start: '08:00',
        end: '12:00', 
    },
    {
        dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday (if adding lunch hours)
        start: '13:00',
        end: '17:00', 
    }],


    dayClick: function(date, jsEvent, view) {
        //alert(view.name);

        if(moment(date).day()==0||moment(date).day()==6)
            alert("Cannot book out of business hours");
        //else if()

        if (date.getHours() <= 18 && date.getHours() >= 9)
            alert("Cannot book out of business hours");

        if(view.name == 'agendaDay')    
        {
        if(moment(date).day()==0||moment(date).day()==6)
            alert("Cannot book out of business hours");
        else
            {
                var today=new Date();
                if(moment(date)>=today)
                {

                    var eventTitle = prompt("Provide Event Title");
                    if (eventTitle) {
                    $("#calendar").fullCalendar('renderEvent', {
                    title: eventTitle,
                    start: moment(date).format('YYYY-MM-DD HH:MM:SS'), 
                    stick: true
                    });
                    alert('Appoinment booked on time: '+moment(date).format("hh:mm"));
                    }
                }
                else
                {
                alert('Cannot book appoinments in past dates'); 
                }

            }
        }

    },

    eventClick: function(calEvent, jsEvent, view) {

        alert('Event: ' + calEvent.title);


    },

    })

});

Answer 1

我的建议是不要使用“ dayClick”创建事件（例如，在您的情况下预定约会）。fullCalendar推荐的方法是使用“ select”回调来捕获这种用户输入。

满足您的要求的主要优点（除了遵循建议的方法）是，您可以随后设置selectConstraint与businessHours相关的选项，这将自动阻止用户选择非工作时间的时间。

然后，您唯一需要进行的额外手动验证就是检查约会过去是否发生。我已经修改了您为此编写的代码，以使用momentJS的内置比较方法简化并使其更加可靠。

  $('#calendar').fullCalendar({
    defaultView: 'agendaDay',
    selectable: true,
    defaultTimedEventDuration: '00:15:00',
    minTime: "08:00:00",
    maxTime: "17:00:00",
    slotDuration: '00:15:00',
    slotLabelInterval: 15,
    slotLabelFormat: 'h(:mm)a',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay,agendaWeek,listDay'
    },
    businessHours: [{
      dow: [1, 2, 3, 4, 5], // Monday - Friday
      start: '08:00',
      end: '12:00',
    }, {
      dow: [1, 2, 3, 4, 5], // Monday - Friday (if adding lunch hours)
      start: '13:00',
      end: '17:00',
    }],
    selectConstraint: "businessHours",
    select: function(start, end, jsEvent, view) {
      if (start.isAfter(moment())) {

        var eventTitle = prompt("Provide Event Title");
        if (eventTitle) {
          $("#calendar").fullCalendar('renderEvent', {
            title: eventTitle,
            start: start,
            end: end,
            stick: true
          });
          alert('Appointment booked at: ' + start.format("h(:mm)a"));
        }
      } else {
        alert('Cannot book an appointment in the past');
      }
    },
    eventClick: function(calEvent, jsEvent, view) {
      alert('Event: ' + calEvent.title);
    }
  });

有关有效的演示，请参见http://jsfiddle.net/sbxpv25p/162/。

有关更多详细信息，请参见https://fullcalendar.io/docs/selection/。

注意：当然，这只是客户端验证。用户可以轻松绕过此请求，并将其中包含预订信息的HTTP请求发送到您的服务器，因此您始终需要在请求到达服务器时重新验证该请求。