检测 dayclick 事件的营业时间

Posted 2023-02-19

【中文标题】检测 dayclick 事件的营业时间

【英文标题】：Detect business hours on dayclick event

【发布时间】：2017-07-06 11:36:20

【问题描述】：

如何检测 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'
        
    ]
);

谢谢。

【问题讨论】：

我们可以看看一些示例代码吗？

好的。帖子已编辑以添加我的代码。谢谢。

那么您的日程安排是周一到周六朝九晚九吗？

周一至周六，9:00 至 19:00，我用红色背景和“不允许”光标显示周日，但只是化妆。如果我点击星期天，仍然会激活 dayclick 事件。

我已经在下面添加了我的答案，请看一下

【参考方案1】：

您的 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;
    
  

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

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

可以找到代码的现场演示：HERE

【讨论】：

好的。我会在一段时间内测试它。那么，在 fullcalendar 函数“内部”不是一个解决方案吗？有没有办法从fullcalendar中的某个对象获取“营业时间”并用它来比较，而不是直接在函数中写“18”或“9”或“0”天？谢谢

如果您只是简单地从函数中复制代码并将其放入 dayclick，它将执行相同的操作，我将考虑重写代码以从 fullcalandar 中的变量中获取营业时间

您的原始功能在我的情况下不起作用。我必须做一些改变。首先，我必须将“fechaElegida”转换为日期对象，然后使用 getDay 函数。但主要思想有效。谢谢。

@lesterfibla 没问题，如果您能将此答案标记为正确，将不胜感激

【参考方案2】：

最后，答案是使用“not in fullcalendar”函数将所选日期与与数组 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
  

测试并运行良好。

【讨论】：

如何检查它是否发生在上午 9 点到下午 7 点的正确时间？

在这种情况下，我不需要检查时间，因为视图限制了您可以选择的时间，而且您永远不能选择非工作时间。

哦，好的。你还能将我的答案标记为正确，以便我得到一些帮助吗？

【参考方案3】：

您可以执行以下操作

const isNonBusinessSlot = Boolean((arg.jsEvent.target as htmlDivElement).className === 'fc-non-business');