全日历营业时间限制在点击事件 [英] Full calendar business hour constrain on day click event

问题描述

我试图在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'，
 
 //从日视图中删除营业时间
 minTime：08:00:00，
 maxTime：17:00:00，
 
 
 //显示15分钟时间内的时间
 slotDuration：'00：15：00'，
 slotLabelInterval：15，
 slotLabelFormat：'h（：mm）a'， 
 
 //设定营业时间
营业时间：[{
 dow：[1,2,3,4,5]，//星期一至星期五
开始： '08：00'，
结束：'12：00'，
}，
 {
 dow：[1，2， 3，4，5]，//星期一 - 星期五（如果增加午餐时间）
开始：'13：00'，
结束：'17：00'，
}]，
 
 
 dayClick：function（date，jsEvent，view）{
 //alert（view.name）; 
 
 if（moment（date）.day（）== 0 || moment（date）.day（）== 6）
 alert（无法预定营业时间） ; 
 // else if（）
 
 if（date.getHours（）< = 18& amp;& date.getHours（）> = 9）
 alert（无法预定营业时间）; （日期）.day（）== 0 ||时间（日期）.day（日期）.b（$日元） ）== 6）
 alert（无法预定营业时间）; 
 else 
 {
 var today = new Date（）; 
 if（moment（date）> = today）
 {
 
 var eventTitle = prompt（提供事件标题）; 
 if（eventTitle）{
 $（＃calendar）。fullCalendar（'renderEvent'，{
 title：eventTitle，
 start：moment（date）.format（' YYYY-MM-DD HH：MM：SS'），
 stick：true 
}）; 
 alert（'Appoinment on time：'+ moment（date）.format（hh：mm））; 
 
 
其他
 
 alert（'不能在过去的日期预订任命'）; 
 
 $ b} 
} 
 
}，
 
 eventClick：function（calEvent，jsEvent，view）{
 
 alert（'Event：'+ calEvent.title）; 
 
 
}，
 
}）
 
}）; 
  

解决方案

我的建议不会使用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'，
标题：{
left：'prev，next today'，
center：'title'，
right：'agendaDay，agendaWeek，listDay'
}，
businessHours：[{
dow：[1，2，3，4，5]，//星期一至星期五
开始：'08：00'，
结束：'12：00'，
}，{
dow：[1,2,3,4,5]，//星期一至星期五（如果加上午餐时间）
开始：'13：00'，
结束：'17：00'，
}]，
selectConstraint：businessHours，
select：函数（start，end，jsEvent，view）{
if（start.isAfter（moment（）））{

var eventTitle = prompt（提供事件标题）;
if（eventTitle）{
$（＃calendar）。fullCalendar（'renderEvent'，{
title：eventTitle，
start：start，
end：结束，
stick：true
}）;
alert（'预约在：'+ start.format（h（：mm）a））;
}
}其他{
alert（'过去不能预约约会'）;

}，
eventClick：function（calEvent，jsEvent，view）{
alert（'Event：'+ calEvent.title）;
}
}）;

请参阅 http://jsfiddle.net/sbxpv25p/162/ 进行工作演示。 https://fullcalendar.io/docs/selection/ 了解更多详情。

NB当然，这只是客户端验证。用户可以很容易地绕过这一点，并发送一个HTTP请求到您的服务器，其中包含预订信息，因此您总是需要在请求到达服务器时重新验证请求。

I am trying to put in a full calendar in a jspx and I dont want the click to be enabled if the user is clicking outside of business hours. I am able to make it work based on days, but when it comes to the time,I am not sure how to do it. There is a break hour every day during which people cannot book appointments. Is there a way to apply the business hours constrain to day click? This is my code:

$(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);


    },

    })

});

解决方案

My advice would be not to use "dayClick" to create events (i.e. in your case to book appointments). The way recommended by fullCalendar is to use the "select" callback to capture this kind of user input.

The key advantage of this for your requirement (apart from following the recommended approach) is that you can then set the selectConstraint option to correlate with your businessHours, and that will automatically prevent the user from selecting times which fall outside the business hours.

Then the only extra manual validation you need is to check the appointment does not occur in the past. I have amended the code you wrote for that to simplify it and be more reliable, using momentJS's built-in comparison methods.

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

See http://jsfiddle.net/sbxpv25p/162/ for a working demo.

See https://fullcalendar.io/docs/selection/ for more details.

N.B. Of course this is only client-side validation. A user can easily bypass this and send a HTTP request to your server with booking information in it, so you always need to re-validate the request when it reaches your server.

这篇关于全日历营业时间限制在点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！