fullCalendar - include end date

Question

I'm working on a events cms and using fullCalendar.io to show the events. My events are only dates without time and I'm storing the informations in a mySQL database. I have no way to change the mySQL column format nor the event insertion method to add a time to the date, although I need to show the end date included while showing the calendar. I'll paste my code to show how it works.

$('#calendar').fullCalendar({           
    header: {
        left: 'prev,next,today',
        center: 'title'
    },
    defaultView: 'month', 
    eventSources: [{
        url: 'getJsonEvents',
        type: 'POST',
        success: function(data) {
        },
        error: function() {
        },
        color: '#2D4047',
        textColor: 'white',
    }]
});

the column that store the date is a simple DATE mysql column.

EDIT: To be clear, the problem is that my event end (eg.) the 19th but on the calendar view it seems to end the 18th.

Attached image

so what exactly is your question? It's not clear what your issue is or what you want to achieve. You've shown your code (which looks incomplete, BTW) but not said what doesn't work. — ADyson
As I said, I need to show the end date INCLUDED in the calendar view, which currently is not (EG: my event start July the 16th and end July the 19th, but on the calendar the event seems to end the 18th) Attached image: prntscr.com/fg4s5r — Kevin

ADyson ADyson · Accepted Answer · 2017-06-05T14:48:39

From https://fullcalendar.io/docs/event_data/Event_Object/ :

"end"...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!

So if you have an all-day event you simply need to increase the value of the "end" parameter you're sending to fullCalendar by 1 day. This is a pretty common approach - Google Calendar's API does it the same way, for example.

fullCalendar - include end date

2 Answers