时隙选择的完整日历回调函数答案

【问题标题】：Full Calendar callback function on time slots selections时隙选择的完整日历回调函数
【发布时间】：2019-10-19 06:57:18
【问题描述】：

如何获得选择的时间？

在我的场景中，我有一个可选择的日历，用户可以选择日历的某些单元格，然后如果选择的时间小于 3 小时，它将继续执行一些操作，但如果时间差更大超过 3 小时，则会显示警告消息。

这是一个示例，但我想在 select 事件之前进行。

https://codepen.io/nasser-ali-karimi/pen/KKKNzRB?editors=0010

$(function() {
  $('#calendar').fullCalendar({
    selectable: true,
    defaultView: 'agendaDay',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay'
    },
    select: function(startDate, endDate) {
      // Find the time diff for checking the druation.
      var fromTime = parseInt(new Date(startDate.format()).getTime()/1000); 
      var toTime = parseInt(new Date(endDate.format()).getTime()/1000);
      var timeDiff = (toTime - fromTime)/3600;  // will give difference in hrs

      // Check if user selected time more than 3 hours then, show the warning.
      if (timeDiff > 3) {
        $('.fc-highlight').css('background', 'red');
      }
      else {
        alert("continue !");
      }
    }
  });

});

为了更好的用户体验，我想将所选部分的颜色更改为黄色或红色以警告用户。但我不知道有没有内置功能。

使用Fullcalendar v3 和moments.js！

【问题讨论】：

使用Fullcalendar v3和moments.js！
是的，但是应该是在选择过程中，所以当颜色变红时，用户会知道并可以减少它。
是的，它与 Drupal 8 集成，但我认为它在这里无济于事，因为我只是提到了一个警报操作。
我想你可以使用selectAllow 来做这个。我不认为它可以突出显示，但它确实会改变鼠标光标符号并在鼠标移动到无效区域时阻止选择。我现在不能轻松地进行演示（我只能使用移动设备），但我相当确定这会奏效。
文档说函数必须返回真或假。

标签： javascript jquery events callback fullcalendar

【解决方案1】：

根据@ADyson 的指导，我终于可以做到了。

1-为此使用selectAllow。

2-根据条件改变背景颜色

我尝试在.fc-highlight 上使用直接更改，但它不起作用，所以我向#calendar 添加一个类并让它回来接地red 并且有效。

#calendar.invalid-choice .fc-highlight {
  background: red;
}

这是我所做的简要说明，但如果您愿意，可以查看完整的代码。

selectAllow: function(date) {
  if (timeDiff > 3) {
    $('#calendar').addClass('invalid-choice');
  }
  else {
    $('#calendar').removeClass('invalid-choice');      
  }
},

演示https://codepen.io/nasser-ali-karimi/pen/ExxNbMW

            
jQuery(document).ready(function($) {
  $('body').append(`<div class="popover fade right in" role="tooltip" id="selected-hours" style="top: 670px; left: 670px; display: none;">
    <div class="popover-data">
    </div>
  </div>`);

  $('#calendar').fullCalendar({
     selectable: true,
    defaultView: 'agendaDay',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay'
    },

    selectAllow: function(date) {
      // Find the time diff for checking the druation.
      var fromTime = new Date(date.start.format()).getTime()/1000; 
      var toTime = new Date(date.end.format()).getTime()/1000;
      var timeDiff = (toTime - fromTime)/3600;  // will give difference in hrs

      var offset = $('body').offset();
      var left = event.pageX;
      var top = event.pageY;
      var theHeight = $('#selected-hours').height();
      $('#selected-hours').show();
      $('#selected-hours .popover-data').html(timeDiff).css({
        'min-width': "20px",
        'text-align': 'center',
      });
      if (timeDiff > 3) {
        $('#calendar').addClass('invalid-choice');
      }
      else {
        $('#calendar').removeClass('invalid-choice');      
      }
      $('#selected-hours').css('left', (left + 'px'));
      $('#selected-hours').css('top', (top - (theHeight / 2)) + 'px');
      $('#selected-hours').css({
        'z-index': '9999',
        'position': 'absolute',
        'display': 'block',
      });
      },
    select: function(startDate, endDate, jsEvent, view, resource) {
       $('#selected-hours').hide();
    }
  });

});

html, body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

#calendar.invalid-choice .fc-highlight {
  background: red;
}

<script src="https://unpkg.com/moment@2.24.0/min/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.css" crossorigin="anonymous">
    <title>Page Title</title>
  </head>
  <body>
    <h1>Full calendar change highlight background during selections</h1>
    <div id='calendar'></div>
  </body>
</html>

【讨论】：