Есть ли способ отобразить день в заголовке временной шкалы ресурса при использовании полного календаря в режиме одного дня?


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>Это пример в демо: fullcalendar.io/docs/timeline-standard-view-demo , я настраиваю свое представление, используя это: resourcesTimelineDay: { type: 'resourceTimeline', продолжительность: {часы: 24} }



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


С помощью slotLabelFormat вы можете установить значение 1-й и 2-й строки отдельно для каждого типа.
Чтобы настроить это, вам необходимо применить предопределенные правила, которые вы можете найти в Форматирование даты (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
],
},
},
Поскольку вы сказали, что хотите, чтобы оно выглядело как представление resourceTimelineWeek, я настроил аналогичную первую строку для представления resourceTimelineDay. Еще мне пришлось настроить вторую строку (так как если бы мы ее не указали, то появилась бы только первая).
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/[email protected]/index.global.min.js"></script>
<div id='calendar'></div>
Не могли бы вы поделиться воспроизводимым примером?