Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fullCalendar multi-day event spans 1 day too short

When users add an event to the calendar, they choose start: 2014-09-17 end: 2014-09-18. Simple enough, they expect the event to extend across both the 17th and 18th boxes on the calendar, but it only appears in Sept 17th, making it appear a 1-day event.

In the events manager database 9-17 and 9-18 are entered correctly. I tried changing the nextDayThreshold option of the fullCalendar plugin, but the event still only spans across sept. 17th. I could add a day on the back end, but this causes other issues, I'd rather do it client-side, for display purposes only.

Any way to change this behavior?

thanks.

$("#cal").fullCalendar({
    events:[
        {
            'title':'test2',
            'start':'2014-09-17',
            'end':'2014-09-18'
        }
    ],
    nextDayThreshold: "00:00:00"
});
like image 202
dan Avatar asked Sep 19 '14 19:09

dan


People also ask

How do I select multiple dates in fullCalendar?

Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device. Allows a user to highlight multiple days or timeslots by clicking and dragging.

How do I change the date on fullCalendar?

The calendar's dates can change any time the user does the following: click the prev/next buttons, change the view, click a navlink. The dates can also change when the current-date is manipulated via the API, such as when gotoDate is called. datesSet is called after the new date range has been rendered.

How do I start and end date in fullCalendar?

We can get start date by getView event with intervalStart. We can get end date by getView event with intervalEnd. var month = $('#calendar'). fullCalendar('getView').

How do I set events in fullCalendar?

Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });


4 Answers

There is no fullDayThreshold, I think you are referring to nextDayThreshold, check documentation here:

http://fullcalendar.io/docs/event_rendering/nextDayThreshold/

That should do it. Regards.

Edit: You should add time to your dates for that option to work. Example:

            {
                'title':'test2',
                'start':'2014-09-17T00:00:00',
                'end':'2014-09-18T01:00:00'
            },
like image 117
JuanCarlosV Avatar answered Oct 11 '22 16:10

JuanCarlosV


Try using nextDayThreshold parameter:

$('#calendar').fullCalendar({
     **nextDayThreshold**: '00:00:00', // 9am

nextDayThreshold set the minimum time it must be in order for it to render as if it were on that day.

like image 28
Joel Estramil Avatar answered Oct 11 '22 14:10

Joel Estramil


Using parameter
nextDayThreshold: "00:00:00",

like image 40
Jerson Romero Avatar answered Oct 11 '22 16:10

Jerson Romero


I know this is old but it still gets a lot of views and is high up on web searches. so please see detailed answer here of my solution FullCalendar end date is not inclusive

like image 32
Alex M Avatar answered Oct 11 '22 15:10

Alex M