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

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

Answer 2

为此，我认为我来得很晚，但是您应该看看这个主题Mutliple business hours in full calendar with two shifts each day（@ Evandro P. Alves的回答）

Answer 3

只需添加以下属性：

selectConstraint: "businessHours",

Answer 4

任何不想使用选择的人：

function inBusinessHours(date, businessHours) {
  let dateDay = date.getDay();
  for (var i = 0; i < businessHours.length; i++) {
    // check if date should conform to this dict's start and end times
    if (businessHours[i].daysOfWeek.includes(dateDay)) {
      // toLocaleTimeString with arg it-IT will return 24hr time
      let timeStr = date.toLocaleTimeString('it-IT')

      // if time after or equal to business hour start for day
      if (businessHours[i].startTime <= timeStr) {
        // if time before or equal to business hour end for day
        if (businessHours[i].endTime >= timeStr) {
          return true
        }
      }
      //  if the day matches, but any of the times do not, dont check any more
      //    days and just return false immediately
      return false
    }
  }
  // if date clicked's weekday is not in businessHours at all
  return false;
}

我用它来单击日历，传递从dateClick的点击信息创建的Date对象，并返回支票未通过的情况。

这假设您的营业时间在用户的当地时间（应该是当地时间）。如果不是，则事件禁用功能将通过其时区偏移量与您的营业时间时区偏移量进行抵消。

完整的日历营业时间约束日点击事件

4 个答案: