This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
events: [
{
title: 'Event 1',
start: '2023-04-17T04:00:00',
end: '2023-04-17T08:00:00',
backgroundColor: 'red' // Set background color for Event 1
},
{
title: 'Event 2',
start: '2023-04-18T02:30:00',
end: '2023-04-18T10:00:00',
backgroundColor: 'green' // Set background color for Event 2
},
{
title: 'Event 3',
start: '2023-04-17T09:00:00',
end: '2023-04-17T11:30:00',
backgroundColor: 'blue' // Set background color for Event 3
}
]
});
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
This is the output
I notice that “Event 3” is plotted incorrectly. It is plotted at the date 4/18 and the start time is 2:30AM.
If you check my events data, “Event 3” should be ploitted at 04/17 and start time should be 09:00AM.
Why is that? I’ve been banging my head about this issue.
Your help is greatly appreciated! Thanks.