Fullcalendar: display multi days event in allDay event?

Question

I'm using fullcalendar version 3.6.2 with some events.

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            navLinks: true,
            nextDayThreshold: '00:00:00', // 9am
            events: [
               {
                    title: 'Tesst tesst',
                    allDay: false,
                    start: '2017-11-12T08:00:00',
        end: '2017-11-13T15:00:00'
                },
                {
        title: 'Birthday Party',
        start: '2017-11-19T10:00:00',
        end: '2017-11-21T06:00:00'
    },
                {
                    title: 'All Day Event',
                    allDay:true,
                    start: TOMORROW,
                    end: TOMORROW
                },
                {
                    title: 'Long Event',
                        start: '2017-11-07T10:00:00',
        end: '2017-11-10T06:00:00'
                },
                {
                    title: 'Conference',
                        start: '2017-11-26T10:00:00',
        end: '2017-11-28T04:00:00'
                },
                {
                    title: 'Meeting',
                    allDay: true,
                    start: TODAY + 'T10:30:00',
                    end: TODAY + 'T12:30:00'
                },
            ]
        });

My plunk: demo

I want to make long events display in all-day event in agendaWeek/agendaDay like Allday event.

Any way to do this?

Thanks so much!

Answer 1

Had a similar problem, try this:

The eventDataTransform Is key here, this allows you to manipulate the data before it's rendered on to the calendar.

In my example, because others that create events on our calendar frequently create multi-day events that then take up most of the screen in agendaDay view, I opted to reclassify these events as all day events which relocates them to the top of the view.

I've chosen to reclassify any event >=5 hours as an all day event. It's important to catch eventData.end == null as well!

Multi day events will need to be identified further as to those which need the end date redefining to midnight the following morning. This is useful where for example as multi-day event finishes at 1500hrs on the last day this will also be moved to the top as an all day event. Without this amendment the last day will be cut off. There's some more info on this here: FullCalendar - Event spanning all day are one day too short

 $('#calendar').fullCalendar({
          header: {
                left: 'prev,next today',
                center: '',
                right: 'month,agendaWeek,agendaDay'
            },
          defaultView: 'month',
          editable: false,
          aspectRatio: 0.77,
        eventDataTransform: function (eventData) {

                var dur = eventData.end - eventData.start; //total event duration

                if(dur >= 18000000 || eventData.end == null){ // 5 hours

                        eventData.allDay = true;


                        //eventData.end needs ammending to 00:00:00 of the next morning
                        if (dur > 86400000) {


                        var m = moment(eventData.end);
                        var roundDown = m.startOf('day');
                        var day2 = moment(roundDown).add(1, 'days')

                        eventData.end = day2.toString();

                        }

                }

            return(eventData);  
        },

    });