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

Question

如何获得 selected 的时间？

在我的场景中，我有一个 select 可用的日历，用户可以 select 日历的某些单元格，然后如果 selected 时间变得少于 3 小时，它会继续做一些动作，但是如果时差超过3小时，那么它会显示一个警告信息。

here is a sample but I want to do it before select event.

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 !");
      }
    }
  });

});

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

已使用 Fullcalendar v3 和 moments.js！

Answer 1

在@ADyson的指导下我终于可以做到了。

1-为此使用 selectAllow。

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

我尝试在 .fc-highlight 上使用直接更改，但它不起作用，所以我将 class 添加到 #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>

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

Full Calendar callback function on time slots selections

javascript

jquery

events

callback

fullcalendar