Full Calendar JS wrap time from end of business day to start of next business day

Question

I am using Full Calendar JS in the AgendaWeek view and I have limited the visible hours to 8am-5pm instead of the full 12 hours per day it shows by default, however when I try to expand an event's time and drag it past the end of the visible hours, it doesn't wrap to the next day. Instead it keeps going until it reaches midnight before wrapping.

Is there an easy way to prevent this? Basically I only want it to show the event between 8am and 5pm during the week.

Here is my code:

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  allDaySlot: false,
  minTime: '8:00am',
  maxTime: '6:00pm',
  weekends: false,
  header: {
    left: 'prev,next',
    center: 'title',
    right: ''
  },
  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar !!!
  events: "{{URL::to('schedule/fetch')}}"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>

My events are stored in the database with only a start time and a duration, both in UTC format. To get the end time I simply add the start and duration times before passing it back via AJAX. I assume I need to have Full Calendar simply add to the duration if it overflows into the next day but I'm just not sure how to accomplish this.

Answer 1

I solved with the following solution inside the select of full Calendar:

select: function(start, end) {

     if(start.format() > minTime && start.format() <  maxTime){

       eventId++;               
       var event = {
          id : eventId,
          start:  moment(start.format()),
          end:   moment(end.format())
       };
       $('#calendar').fullCalendar('renderEvent', event, true); 
    }

}