英文:
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. [
英文:
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.[
<!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>
答案1
得分: 0
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 the 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 the general accurate rendering of the events by fullCalendar - e.g., on refresh, or resize of the calendar, etc.
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论