CODEWITHSUNDEEP
javascriptfullcalendar
Cássio Godinho
Cássio Godinho

Reputation: 596

Fullcalendar end date wrong by one day

I am making a fullCalendar backed car reservation functionality. This is the coffescript file.

    updateEvent = (event, delta, revertFunc) ->
      $.ajax
        type: "PUT"
        dataType: "json"
        success: (data) ->
            alert "Success"
        error: (data) ->
            revertFunc()
            errors = data.responseJSON.reservations[0][1]
            for message of errors
                alert errors[message]
        url: event.updateUrl
        data:
          reservation:
            reservation_start: event.start.format('DD-MM-YYYY')
            reservation_end: event.end.format('DD-MM-YYYY')
            transport_id: event.transport_id
            user_id: event.user_id

$(document).ready ->
  $(".calendar").fullCalendar
    events: gon.path
    eventDrop: updateEvent
    eventResize: updateEvent

And this is JSON feed with the events.

[{"start":"2014-12-17T00:00:00.000Z","end":"2014-12-21T00:00:00.000Z","title":"Cassio Godinho","url":"/reservas/44/edit","allDay":true,"editable":true,"updateUrl":"/reservation/44","transport_id":1,"user_id":1}]

The end date is 2014-12-21 but this is what I have on the calendar enter image description here

The documentation says something about this (I think):

endParam
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!

But im not quite sure what to do with this information...

Upvotes: 34

Views: 48116

Answers (14)

kylee
kylee

Reputation: 1

got it working on my laravel 10 project. using inertia

Resource Class

class EventResource extends JsonResource
{
    public function toArray(Request $request): array
    {
        return [
            'id' => $this->id,
            'start' => $this->start_at->format("Y-m-d\TH:i:s"),
            'end' => $this->end_at->format("Y-m-d\TH:i:s"),
            'allDay' => $this->all_day,
        ];
    }
}

Migration

$table->timestamp('start_at');
$table->timestamp('end_at');

Model Cast

protected $casts = [
        'start_at' => 'datetime',
        'end_at' => 'datetime',
    ];

Saving on the Database

 Event::create([
     'start' => Carbon::parse($data['start_at']),
     'end' => Carbon::parse($data['end_at'])->format('Y-m-d').'T23:59:59'
  ]);

Controller

 return Inertia::render('Calendar/Index/Page',[
      'events' => new EventCollection($events)
 ]);

Upvotes: 0

Roberto Lyra
Roberto Lyra

Reputation: 61

I had the same problem I resolved by doing the following :

  1. Set the field on the migration and the database as dateTime.
  2. When inputing the date on the database input with the format including hours and/or minutes (ex.: YYYY-MM-DD hh:mm).
  3. On the Calendar set allDay as false.

Upvotes: 0

Emin Doğu
Emin Doğu

Reputation: 1

I'm using Laravel 8. I changed the timezone according to my country. I started getting this "fullcalendar end date wrong by one day" error. So I rollback timezone to UTC in my app.php, that's work for me!

config->app.php:

'timezone' => 'UTC',

or try:

 var calendar = $('#calendar').fullCalendar({
 timeZone: 'UTC',
 ...

Upvotes: 0

Jesse Ebbett
Jesse Ebbett

Reputation: 41

Problem

Full calendar processes all day events ending with 00:00:00 as complete before the expected result. In my case the client wanted everything to display as all day events and no times shown.

Solution

  • First, I added the nextDayThreshold: '00:00' option as suggested above. Reading up on this, allDay events ignore this variable.

  • Next I did a check to see if an event spanned multiple days and if it did, I set allDay: false for that.

  • Finally I added displayEventTime: false to the calendar.

This appears to be a complete solution without modifying the original date data.

    $string .= "{ 
        id: ".$event['ID'].", 
        title: '".str_replace('\'', '"', $event['Name'])."', 
        start: new Date('".(substr($event['Start_Date'], 0, 4) != '0000' ? date('Y-m-d\TH:i:s', strtotime($event['Start_Date'])) : date('Y-m-d', strtotime('- 1 year')))."'), 
        allDay:".(date('Y-m-d', strtotime($event['Start_Date'])) == date('Y-m-d', strtotime($event['End_Date'])) ? 'true' : 'false').", 
        end: new Date('".(substr($event['End_Date'], 0, 4) != '0000' ? date('Y-m-d\TH:i:s', strtotime($event['End_Date'])) : date('Y-m-d', strtotime('- 1 year')))."'), 
        className: '$class' 
    },";

Upvotes: 0

Anand
Anand

Reputation: 11

In Angular Change end date time with current time, when end date time greator than 23:59:59 `

this.calendarOptions = {
  editable: false,
  eventLimit: false,
  validRange: {
    start: '',
    end: new Date(new Date().getUTCFullYear(), new Date().getUTCMonth())
  },
  header: {
    left: '',
    center: 'title',
    right: 'prev,next'
  },
  eventSources: [

    // your event source
    {
      events: (start, end, timezone, callback) => {

        var data = [];


        data.push(new Date("2019-04-11T00:19:02"))
        data.push(new Date("2019-04-12T00:19:02"))
        data.push(new Date("2019-04-13T00:19:02"))

        var eventData = [];

        var calendarEvents: CalendarEvents = new CalendarEvents();
        calendarEvents.start = data[0];

        //Change end time, because of when end date time is greator than 23:59:59 then end date not marked
        var m = moment(data[data.length - 1], 'ddd MMM D YYYY HH:mm:ss ZZ');
        m.set({ h: new Date().getHours() });
        calendarEvents.end = m.toDate();

        calendarEvents.allDay = false;
        eventData.push(calendarEvents);

        callback(eventData);
      },
      color: '#f99500',   // an option!
      textColor: 'black', // an option!
      // displayEventTime: false,
    }
    // any other sources...

  ],
  timeFormat: 'HH:mm'
};

`

Upvotes: 0

Sam Pritchard
Sam Pritchard

Reputation: 51

You need to set nextDayThreshold: '00:00' and it will show the last day!

Upvotes: 5

Shafiq
Shafiq

Reputation: 1023

I was also facing the same and resolved it by adding "T23:59:00" to the end date i.e "end" => $end_date."T23:59:00",

Upvotes: -1

Hamza
Hamza

Reputation: 37

I dont know if its still usefull, but you can use this method, add a day to your end date using :

$date = new DateTime('2000-01-01');
$date->add(new DateInterval('P0Y0M1DT0H0M0S'));

this will increment your end date by one day.

Upvotes: 0

user3440787
user3440787

Reputation: 193

I had the same issue and i finally figured out.

I was using full day TRUE, as per the documentation if you use full day true it will behave in time.

so first, I changed full day to FALSE, then

in my end day I added $endDate."T23:59:00";

This worked for me.

Upvotes: 9

Rudresh Ajgaonkar
Rudresh Ajgaonkar

Reputation: 790

The best part is append 20:00:00 to the end date as follow: 

var ed = $("endDate").val();
newVar = ed+" 20:00:00";

Thats all you need.

Upvotes: 3

Cássio Godinho
Cássio Godinho

Reputation: 596

"Fixed" the issue by setting start and end times to the events.

Upvotes: -3

Elvis Hajdar
Elvis Hajdar

Reputation: 19

I had the same problem, but i experimented with the time and that was the resolution :)

2014-12-21T00:00:00 => 2014-12-21T23:59:00 this will solve your problem.

Upvotes: 1

Ryan McArthur
Ryan McArthur

Reputation: 523

If you are setting your end date for 0 hours, min, sec, etc of 12-21-2014 there is no time in that day for an event to show.

You may need to advance your end date to 0 hours of the next day since you have the event setup as an all day event, however uou may also be fine just advancing the time any amount (such as an hour) so that the event falls inside of the desired end date, then being an all day event it should render.

It would be nice if their event object included a duration parameter you could set, at least I didn't see one in their documentation.

Upvotes: 0

Shaded
Shaded

Reputation: 17876

I think the key word in the directions is exclusive so whatever time you specify will not be included in the date range.

So in your case "2014-12-21T00:00:00.000Z" would mean that the event would no longer exists at the very beginning of 12-21. If you want the event to go through 12-21 you'd want to set the end time to "2014-12-22T00:00:00.000" (first possible time in 12-22).

Upvotes: 16

Related Questions