I am looking at the debug page of the official FullCalendar site. I want to schedule an event from 22/09/2015 to 30/09/2015 (dd/mm/yyyy). But it only shows up for dates from 22/09/2015 to 29/09/2015 - 30/09/2015 is missing.
Here is the code:
$(function() { // document ready
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-11-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2015-09-22',
end: '2015-09-30'
}
]
});
});
Here is an image of the output:
What is the problem with this code?
I am looking at the debug page of the official FullCalendar site. I want to schedule an event from 22/09/2015 to 30/09/2015 (dd/mm/yyyy). But it only shows up for dates from 22/09/2015 to 29/09/2015 - 30/09/2015 is missing.
Here is the code:
$(function() { // document ready
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-11-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Meeting',
start: '2015-09-22',
end: '2015-09-30'
}
]
});
});
Here is an image of the output:
What is the problem with this code?
Share Improve this question edited Mar 20, 2021 at 11:29 ADyson 62k16 gold badges75 silver badges89 bronze badges asked Sep 21, 2015 at 21:56 DushyDushy 4154 silver badges14 bronze badges 1- It is the moment immediately after the event has ended. For example, if the last full day of an event is Thursday, the exclusive end of the event will be 00:00:00 on Friday! – D4V1D Commented Sep 21, 2015 at 21:59
7 Answers
Reset to default 2Don't think of the dates as discrete days, but as a continium in time. The date 2015-09-30 is implicitly given the time 00:00:00, i.e. midnight. This means that the event will not actually extend to the 30th, but en just when that day starts.
This gives you a simple solution. Just end the event one day later:
end: '2015-10-01'
Or, take it from the documentation:
It is the moment immediately after the event has ended. For example, if the last full day of an event is Thursday, the exclusive end of the event will be 00:00:00 on Friday!
OK to show the correct end time do this:
For all day like: from 23-09-2015 till 30-09-2015 (dd-mm-yyyy)
Add a day to the "end"
$('#calendar').fullCalendar({
events: [
{
title: 'Meeting',
start: '2015-23-09',
end: '2015-01-10'
}
]
}
For mySql query add a day like this:
DATE_ADD(end_date, INTERVAL 1 DAY)
For part of a day like: from 23-09-2015 12:00:00 till 30-09-2015 15:30:00 (dd-mm-yyyy hh:mm:ss)
You need to set the fullcalendar "nextDayThreshold" paremeter so it will start the day from 00:00
$('#calendar').fullCalendar({
nextDayThreshold:'00:00:00',
events: [
{
title: 'Meeting',
start: '2015-23-09T12:00:00',
end: '2015-30-09T15:30:00'
}
]
}
You can try using date_add().
$date=date_create("2013-03-15");
date_add($date,date_interval_create_from_date_string("1 day"));
Then apply the php to echo out the new date.
end: '<?php echo date_format($date,"Y-m-d"); ?>'
Try
$('#calendar').fullCalendar({
nextDayThreshold:'00:00', // not 00:00:00
[...]
enter image description herejust add time range 12:00:00 to 24:00:00
events: [
{
title: 'Anniversary',
start: '2018-01-21T12:00:00',
end: '2018-01-23T24:00:00'
}
]
It is as per library specification that it exclude last day from the event docs for reference are https://github./fullcalendar/fullcalendar/issues/2653 https://github./fullcalendar/fullcalendar/issues/3679
my work around to include end date is by adding one more day to it using moment as
moment(new Date())
.add(1, 'day')
.startOf('day')
.toDate(),
It will take the date object and add one day to it
var date = new Date(); new Date(date.setDate(date.getDate() + 1))
You can add day for end date for example in laravel
events : [
@foreach($reservations as $reservation)
{
title :'{{ $reservation->name }},
start :'{{ $reservation->start }}',
end : '{{ $reservation->end->addDays() }}',
allDay:true,
},
@endforeach
],
because in Docs fullcalendar
end : As defined above, this is the date when an event finishes. In other words, the event continues up to this cut-off point in time. This value specifies the exclusive end of the event. Since the event is not expected to continue beyond the given end date it may also be described as non-inclusive
Again, if allDay is not explicitly set to true and end is 2018-09-07, internally this is recognised as 2018-09-07T00:00:00. It is that point in time, at the final part of 2018-09-06 and beginning of 2018-09-07. Also, this may be interpreted as 2018-09-06T23:59:59 or 2018-09-07T00:00:00.
Fullcalender Documentation link