在时间线全日历中显示日期标题

Question

在单日模式下使用fullcalendar时，有没有办法在资源时间线的标题中显示日期？

星期显示（没关系。）

天数显示（此处缺少标题。）

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/[email protected]/index.global.min.js"></script>

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

Answer 1

使用

slotLabelFormat

，您可以为每种类型分别设置第一行和第二行的值。

views: {
  resourceTimelineDay:{
    slotLabelFormat: [
      {
        weekday: 'short',
        month: '2-digit',
        day: '2-digit',
      }, // top level of text
      {
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: true,
        meridiem: 'short'
      } // lower level of text
    ],
  },
},

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',
          }, // 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/[email protected]/index.global.min.js"></script>

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