Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Events spanning multiple days are not displayed correctly in fullcalendar

Tags:

fullcalendar

My fullcalendar event 'Big Party' starts at monday 10am and ends at wednesday 6am. So the event should span 3 days in the month view. The duration is 44 hours (problem because it is less than 48 hours???).

title: 'Big Party',
start: '2014-09-15T10:00',
end: '2014-09-17T06:00'

The event goes from monday to tuesday in the month view. But why ends the event not at wednesday?

This fiddle shows the problem: http://jsfiddle.net/3E8nk/439/

Thank you Tobi

like image 576
tobigit Avatar asked Sep 17 '14 08:09

tobigit


People also ask

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 } ] });

How do I sync my Google calendar with Fullcalendar?

You must first have a Google Calendar API Key: Go to the Google Developer Console and create a new project (it might take a second). Once in the project, go to APIs & auth > APIs on the sidebar. Find “Calendar API” in the list and turn it ON. On the sidebar, click APIs & auth > Credentials.

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 turn off weekends in Fullcalendar?

Just go from the startDate to the endDate and check if any of those days are weekends. If so, display the alert / popup and return false. select: (start, end, allDay) => { var startDate = moment(start), endDate = moment(end), date = startDate. clone(), isWeekend = false; while (date.


1 Answers

You need to change the nextDayThreshold: '09:00:00', // 9am option

See http://jsfiddle.net/3E8nk/440/

$('#calendar').fullCalendar({


    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-09-15',
    editable: true,
    nextDayThreshold: '00:00:00', // 9am
    events: [
        {
            title: 'Birthday Party',
            start: '2014-09-15T10:00:00',
            end: '2014-09-17T06:00:00'
        }
    ]
});
like image 106
Thomas Lallement Avatar answered Sep 30 '22 16:09

Thomas Lallement