CODEWITHSUNDEEP
fullcalendar
TheMiddle
TheMiddle

Reputation: 93

FullCalendar redefine a long event as an all day event

I am using FullCalendar and iCalendar2FullCalendar to feed in the .ICS files from our various iCloud accounts. This works great at rendering all the events from our shared calendars.

I’m making a small display and am using the ‘agendaDay’ view. I like that all day events sit at the top and can see any scheduling conflicts below.

However, I have some events that run over a number of days, for example from 1700hrs Friday to 1900hrs Sunday my daughter will be with me. On the agendaDay view this will show as a solid bar throughout all of saturday across each hour, and I’m wondering if there is a way to render events over a certain duration as an all day event instead?

I’ve played with the eventRender callback but whilst I’m able to change the event properties the event still renders as if the changes were never made.

Here’s my code, in this revision i’ve applied a fixed date in the hope it would draw as an all day event but no luck!:

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


            eventRender: function(event, element, view) { 

                var dur = event.end - event.start; //event duration
                var days = dur / 86400000;

                if(days > 1 || event.end == null){ // needs altering to show as all day event.

                    console.log('long event - all day?' + event.allDay);
                    event.allDay = true;
                    console.log(event.title + ' - all day?' + event.allDay);            

                            console.log(event.title + ' - starts:' + EpochToDate(event.start));         
                            console.log(event.title + ' - ends:' + EpochToDate(event.end)); 

                     event.start = '2018-07-23T10:00:00';   
                     event.end = '2018-07-24T10:00:00';
                     console.log (event);
                 }
             }    
            });
        })

Upvotes: 0

Views: 1460

Answers (1)

TheMiddle
TheMiddle

Reputation: 93

Here’s what I used in the end, thanks to @ADyson.

 $('#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);  
        },

    });

Upvotes: 1

Related Questions