Question

如何检测是否在营业时间或其中触发了点击事件？只有在工作时间点击事件时我才需要做一些动作。

现在，我可以设置营业时间并使用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'
        }
    ]
});

感谢。

Answer 1

最后，答案是使用函数＆＃34;而不是在fullcalendar＆＃34;将所选日期与数组 businessHours相同的数组进行比较：{dow：[1,2,3,4,5,6]}

在调用fullCalendar之前，我创建了一个包含可用天数的数组（与商业时间相同）

var DaysOK = [1,2,3,4,5,6];

然后，在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
  }
}

测试并运作良好。

Answer 2

您的日常活动应该在功能调用中收到当前日期，因此您需要做的就是在营业时间内查看是否在营业时间内选择了所选时间。在下面你会看到一个小函数，它传递一个日期对象，如果通过的日期是在工作时间，则返回一个，否则返回零。该功能的工作方式是它首先检查星期几，以确保选定的日期不是星期日，之后它将检查所选的小时，看看它是否在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;
    }
  }
}

以及如何使用此功能的示例如下：

dayClick: function(fechaElegida, todoElDia, jsEvento, vista) {
    // HERE DO THINGS
    // I want some like
   if(checkIfBusinessHours(fechaElegia)==1){
    //    DO SOMETHING
   }else{
    //    DO OTHER THINGS
   }
}

可以找到代码的实时演示：HERE

Answer 3

  if (jsEvent.target.className==("fc-nonbusiness fc-bgevent")) {
                    return false;
                }

这对我有用。

在dayclick事件中检测营业时间

3 个答案: