javascripthtmlcssfullcalendarfullcalendar-6

Getting FullCalendar to render proportional event start and end times in 'dayGridMonth' mode

I am trying to get FullCalendar to display events honouring the start and end times. The calendar is read-only in 'dayGridMonth' mode and currently the events take up the whole day and overlap when, for example, the first event ends at 11:00 and the next event starts at 15:00 on the same day. My events may also run over two or more rows. I have tried various solutions using "slotEventOverlap: false" and "slotDuration: '01:00:00'" as well as using functions "eventDidMount" and "eventPositioned" but I can't get the display I need.

Codepen here: text

I don't need to display the start and end times as labels, it is just the event rendering I am trying to modify, for example if the event start at 15:00 it will begin at 62.5% of the width of the day cell, something like this attached image.[sample of style I am trying to recreate

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.5/index.global.min.js'></script>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' />
    <style>
      /* Set the width and height of the calendar */
      #calendar {
        width: 60vw;
        height: 70vh;
        margin: auto;
      }
    </style>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: ''
          },
          slotDuration: '01:00:00',
          eventStartEditable: false,
          eventDurationEditable: false,
          defaultAllDay: false,
          displayEventTime: false,
          displayEventEnd: false,
          slotEventOverlap: false,
          events: [
            {
              start: '2023-04-16T15:00:00',
              end:   '2023-04-19T11:00:00'
            },
            {
              start: '2023-04-19T15:00:00',
              end:   '2023-04-22T11:00:00'
            },
            {
              start: '2023-04-22T15:00:00',
              end:   '2023-04-25T11:00:00'
            },
            {
              start: '2023-04-25T15:00:00',
              end:   '2023-05-10T11:00:00'
            }
        ]});
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>
Solution

  • The dayGridMonth view is not a time-aware view. The smallest unit of date/time it gives consideration to is 1 day.

    Therefore there's no way, via the fullCalendar settings, to achieve what you're asking for. This is by design. It's meant to be an overview day by day. More detail can be achieved by enabling the timeGrid view, and allowing user to drill down into these - either via adding buttons in the header and/or the date navigation links within the calendar view.

    P.S. You could try to use CSS/JS to modify the rendered HTML and shorten the bars, but this might be difficult to do accurately and I wouldn't recommend it as it might interfere with general accurate rendering of the events by fullCalendar - e.g. on refresh, or resize of the calendar etc.