Fullcalendar nowIndicator位于午夜，除非日历以resourceTimelineDay启动.<

Question

当我尝试使用resourceTimelineDay以外的任何内容初始化日历时，nowIndicator不会显示在正确的位置。如果我用resourcetimelinemonmonth开始，它就固定在午夜。如果我从resourcetimeineweek开始，它会固定在小时的开始。如果我用resourceTimelineDay开始，它就会从正确的时间开始，即使我将视图更改为周视图或月视图，它也会保持不变。

我想从月视图开始，并有nowIndicator显示它应该在哪里。这曾经在V3中工作，但现在，在V5中，它不起作用。

以resourcetimelinemonmonth开头:

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
initialView: 'resourceTimelineMonth',
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@5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

这里以resourcetimeineday开头:

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
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@5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

resourceTimelineWeek和resourceTimelineMonth都不能正常工作，即使切换到日间视图。

Answer 1

在我看来，这不应该是这样做的，但是似乎没有正式的方法来改变nowIndicator的行为。代替，黑客是在resourceTimelineDay视图中开始，并在日历渲染后立即将视图更改为resourceTimelineWeek或resourceTimelineMonth视图。

calendar.render();
calendar.changeView('resourceTimelineMonth');

这是一个hack，希望在未来的版本中会有一个修复。

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/Phoenix',
nowIndicator: true,
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();
calendar.changeView('resourceTimelineMonth');
});

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@5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>