Полная функция обратного вызова в календаре при выборе временных интервалов

Question

Как можно получить выбранное время?

В моем сценарии у меня есть календарь, который можно выбрать, и пользователь может выбрать несколько ячеек календаря, тогда, если выбранное время станет меньше 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 и moment.js!

Answer 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');      
  }
},

DEMO 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>