Fullcalendar 检测dayclick事件的营业时间

Fullcalendar 检测dayclick事件的营业时间,fullcalendar,Fullcalendar,如何检测dayclick事件是在工作时间内触发的,还是在工作时间之外触发的? 我需要做一些行动,只有当点击事件是在营业时间 现在,我可以设置营业时间,并使用css将其样式设置为以红色背景和不同的光标显示,但我不知道如何在dayclick事件中检测到:( 我的代码是: $('#calendar').fullCalendar({ theme: true, defaultView: 'agendaWeek', allDaySlot: false, header: {

如何检测dayclick事件是在工作时间内触发的,还是在工作时间之外触发的? 我需要做一些行动,只有当点击事件是在营业时间

现在,我可以设置营业时间,并使用css将其样式设置为以红色背景和不同的光标显示,但我不知道如何在dayclick事件中检测到:(

我的代码是:

$('#calendar').fullCalendar({
    theme: true,
    defaultView: 'agendaWeek',
    allDaySlot: false,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaWeek,agendaDay,listMonth'
    },
    contentHeight: 'auto',
    defaultDate: '2017-02-17',
    navLinks: true,
    editable: false,
    eventLimit: true,
    minTime: "09:00:00",
    maxTime: "19:00:00",
    slotMinutes: 30,
    slotDuration: "00:30:00",
    slotLabelInterval: 30,
    slotLabelFormat: 'h(:mm)a',
    defaultTimedEventDuration: "00:29:00",
    forceEventDuration: true,
    businessHours: {
        dow: [1,2,3,4,5,6], // NOT SUNDAY
        start: '09:00:00',
        end: '19:00:00'
    },
    dayClick: function(fechaElegida, todoElDia, jsEvento, vista) {
        // HERE DO THINGS
        // I want some like
        // if( IS BUSINESS HOURS ){
        //    DO SOMETHING
        // }else{
        //    DO OTHER THINGS
        // }
    },
    eventClick: function(calEvento, jsEvento, vista) {
        // MORE CODE. NOT RELEVANT
    },
    viewRender: function(view,element) { //restricting available dates to 2 moths in future
        var now = new Date();
        var end = new Date();
        end.setMonth(now.getMonth() + 1); //Adjust as needed
        if ( end < view.end) {
            $("#calendar .fc-next-button").hide();
            return false;
        }else {
            $("#calendar .fc-next-button").show();
        }
        if ( view.start < now) {
            $("#calendar .fc-prev-button").hide();
            return false;
        }else {
            $("#calendar .fc-prev-button").show();
        }
    },
    events: [
        {
            title: 'Test event',
            start: '2017-02-17 09:00:00',
            id: '14',
            skey: 'rra7r15pm8',
            color: '#10A834'
        }
    ]
});
$(“#日历”).fullCalendar({
主题:真的,
defaultView:'agendaWeek',
全天时段:错,
标题:{
左:“上一个,下一个今天”,
中心:'标题',
右图:“agendaWeek、agendaDay、listMonth”
},
contentHeight:“自动”,
默认日期:“2017-02-17”,
导航链接:是的,
可编辑:false,
eventLimit:对,
minTime:“09:00:00”,
maxTime:“19:00:00”,
慢分钟:30,
慢速持续时间:“00:30:00”,
slotLabelInterval:30,
slotLabelFormat:'h(:mm)a',
defaultTimedEventDuration:“00:29:00”,
forceEventDuration:对,
营业时间:{
道指:[1,2,3,4,5,6],//不是周日
开始:“09:00:00”,
完:"19时00分"
},
dayClick:函数(fechaElegida、todoElDia、jsEvento、vista){
//在这里做事
//我想要一些类似的
//如果(是营业时间){
//做点什么
//}其他{
//做其他事情
// }
},
eventClick:函数(calEvento、jsEvento、vista){
//更多代码。不相关
},
viewRender:函数(视图,元素){//将可用日期限制为未来2个月
var now=新日期();
var end=新日期();
end.setMonth(now.getMonth()+1);//根据需要进行调整
如果(结束<视图结束){
$(“#calendar.fc下一步按钮”).hide();
返回false;
}否则{
$(“#calendar.fc下一步按钮”).show();
}
if(view.start

谢谢。

您的dayclick事件应该作为函数调用的一部分接收当前日期,因此您需要做的就是对照您的工作时间检查所选的时间是否在工作时间内。下面您将看到一个小函数,它传递了一个日期对象,如果传递的日期在工作时间内,它将返回一个日期对象如果不是,则为零。函数的工作方式是,它首先检查一周中的某一天,以确保所选的日期不是星期日,然后它将检查所选的小时,并查看它是否介于9和18之间。我在函数中使用18而不是19,因为使用18作为小时参数意味着您将包括18:59:59的时间离你关门还有一秒钟

function checkIfBusinessHours(date) {
  if (date.getDay() == 0) {
    return 0;
  } else {
    if (date.getHours() <= 18 && date.getHours() >= 9) {
      return 1;
    } else {
      return 0;
    }
  }
}

可以找到代码的实时演示:

最后,答案是使用一个函数“not in fullcalendar”,将所选日期与与数组相同的数组进行比较:{dow:[1,2,3,4,5,6]}

在调用fullCalendar之前,我创建了一个包含可用天数的数组(与工作时间相同)

然后,在dayClick事件中:

dayClick: function(mydate, allDay, jsEvent, view) {
  var mydateObj = new Date(mydate);
  var chosenDay = mydateObj.getUTCDay();
  if( daysOK.indexOf(chosenDay) >= 0 ){
    // DAY OK
  else{
    // DAY NOT AVALAIBLE
  }
}

测试和工作正常。

我们可以看一些示例代码吗?好的。后期编辑以添加我的代码。谢谢。你的日程安排是9到9周一到周六吗?周一到周六,9:00到19:00,我用红色背景和“不允许”显示周日光标,但只是化妆。如果我在周日单击,仍然激活dayclick事件。我已在下面添加了我的答案,请查看itOk。我将在一段时间内测试它。那么,在完整日历功能中不是“内部”解决方案吗?无法获取“工作时间”从fullcalendar中的某个对象开始,并使用它进行比较,而不是直接写入“18”或“9”或“0”天在函数中?谢谢如果您只需从函数中复制代码并将其放入dayclick中,它也会做同样的事情,我将研究重写代码以从fullcalandary中的变量中获取营业时间您的原始函数在我的情况下不起作用。我必须做一些更改。首先,我必须Covenrt“fechaElegida”进入一个日期对象,然后使用getDay函数。但主要思想是可行的。谢谢。@Lesterfilla没问题,如果你能将这个答案标记为正确的,那将非常感激。这如何检查它是否发生在一天的正确时间上午9点到晚上7点?在这种情况下,我不需要检查de时间,因为视图限制了你的时间你可以选择,但永远不能选择非营业时间。哦,好吧。你还能把我的答案标记为正确吗?这样我就可以得到几分来帮助你了?
var DaysOK = [1,2,3,4,5,6];
dayClick: function(mydate, allDay, jsEvent, view) {
  var mydateObj = new Date(mydate);
  var chosenDay = mydateObj.getUTCDay();
  if( daysOK.indexOf(chosenDay) >= 0 ){
    // DAY OK
  else{
    // DAY NOT AVALAIBLE
  }
}