CODEWITHSUNDEEP
javascriptjqueryfullcalendarfullcalendar-3
Dushy
Dushy

Reputation: 415

fullCalendar not showing the correct end date

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:

enter image description here

What is the problem with this code?

Upvotes: 10

Views: 8649

Answers (7)

shado
shado

Reputation: 21

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

Upvotes: 0

prashant kumar
prashant kumar

Reputation: 931

It is as per library specification that it exclude last day from the event docs for reference are https://github.com/fullcalendar/fullcalendar/issues/2653 https://github.com/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))

Upvotes: 0

Anders
Anders

Reputation: 8588

Don'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!

Upvotes: 2

Mostafijur Rahman
Mostafijur Rahman

Reputation: 1

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'
     }
    ]

Upvotes: 0

MantasJa
MantasJa

Reputation: 11

Try 

    $('#calendar').fullCalendar({
        nextDayThreshold:'00:00', // not 00:00:00
   [...]

Upvotes: 0

ValhallaSkies
ValhallaSkies

Reputation: 61

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"); ?>'

Upvotes: 0

Dushy
Dushy

Reputation: 415

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'
    }
  ]
}

Upvotes: 0

Related Questions