javascriptfullcalendarfullcalendar-schedulerfullcalendar-6

Show day header in timeline fullcalendar

Is there a way to display the day in the header of the resource timeline when using fullcalendar in single day mode?

Week display (Thats OK.)

place of header

Days display (The header is missing from here.)

where is my header

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
  });

  calendar.render();
});
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js"></script>

<div id='calendar'></div>

Solution

  • With slotLabelFormat, you can set the value of the 1st and 2nd row separately for each type.

    To set this up, you need to apply predefined rules, which you can find in Date Formatting (fullcalendar.io).

    views: {
  resourceTimelineDay:{
    slotLabelFormat: [
      {
        weekday: 'short',
        month: '2-digit',
        day: '2-digit',
        omitCommas: true, // it removes the comma after the "day" (as there is no comma by default with the week view)
      }, // top level of text
      {
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: true,
        meridiem: 'short'
      } // lower level of text
    ],
  },
},

    result

    Since you said you wanted it to look like resourceTimelineWeek view, I set up a similar first row for the resourceTimelineDay view. I also had to set up the second row (since if we didn't specify it, only the first would appear).

    document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline',
    views: {
      resourceTimelineDay:{
        slotLabelFormat: [
          {
            weekday: 'short',
            month: '2-digit',
            day: '2-digit',
            omitCommas: true,
          }, // top level of text
          {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: true,
            meridiem: 'short'
          } // lower level of text
        ]
      }
    },
  });

  calendar.render();
});
    html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js"></script>

<div id='calendar'></div>