Search code examples
cssfullcalendarhighlight

Fullcalendar's fc-highlight not applied on day change in custom calendar

I have a Fullcalendar scheduler view which runs from 8PM Day 1 to 8PM Day 2

When dragging an event onto the calender, the class .fc-highlight is only applied from Day1 8PM-11.59PM. When hovering the event over Day 2, the class .fc-highlight is not applied

These are my events

<div id='external-events'>
        <div class='fc-event'>
            My Awesome Event
        </div>
        <div class='fc-event'>
            Foo
        </div>
        <div class='fc-event'>
            Bar
        </div>
</div>

This is how I set the time from 8PM to 8PM

minTime: "20:00:00", // this makes the calendar start at 8PM
maxTime: "1.20:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)

I've set up a demo here.

Try picking up an event and drag it to 11PM. The background is grey. Hovering on to the next day, the background disappears.

Here .fc-highlight covers the complete hour

Here .fc-highlight is not applied

I would like the class .fc-highlight to stay active

Solution

  • It looks like the problem is because you're using a "day" view but then mangling it by setting the "maxTime" higher than midnight. Probably somewhere in the fullCalendar code it runs up against a hard limit of midnight where it doesn't add that class to the field beyond that. I haven't studied the code but that's all I can assume, based on the observed behaviour.

    The correct way to define a custom time period like this in your view is to use visibleRange, and optionally combine that with a custom view (especially if you want to use other views in your calendar as well).

    Here's an example of a Visible Range definition which will do what you need. The timeline will always display from 8pm on the currently selected day to 8pm on the next day. You should not specify any other options such as dayCount or minTime/maxTime in conjunction with this, as they will distort the final display:

    visibleRange: function(currentDate) {
  return {
   start: currentDate.clone().startOf("day").add('20', 'h'),
   end: currentDate.clone().startOf("day").add('1', 'd').add('20', 'h')
  }
}

    Here's a full working demo using that range definition as part of a custom timeline view, based on the earlier fiddle you posted: https://jsfiddle.net/Lzuv5kog/1/