Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

very slow loading calendar events, any way to optimize?

Tags:

fullcalendar

I have a calendar that is working successfully, but the load times are very slow. Each event is rendered successfully, but the user has to wait a good 5-10 seconds when switching views or navigating through the months/weeks/days.

I have shown the event loading code below, is there anything I can do to it to make it load faster?

Thanks

<script type='text/javascript'>

$(document).ready(function () {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        //events: [{"title":"My Test Event","start":"Wed, 02 Nov 2011 13:00:00 EST","url":"http://edu","allDay":"false"}],

        events: "JSONcalendarFeed.aspx",

        defaultView: 'month',
        weekends: false,
        allDay: false,
        minTime: 8,
        maxTime: 19,
        allDaySlot: false,
        slotMinutes: 15,
        weekMode: 'liquid',
        defaultEventMinutes: 60,
        firstHour: 8,
        header: {
            left: 'month,agendaWeek,agendaDay',
            center: 'title',
            right: 'prev,next today'
        },
        eventRender: function (event, element) {
            var evtDesc = event.description;
            var evtStart = event.start;
            var evtEnd = event.end;
            if (evtDesc || evtStart) {
                element.qtip(
                    {
                        content: evtStart + ' - ' + evtEnd + '<br/>' + evtDesc,
                        position: {
                            corner: {
                                target: 'bottomMiddle',
                                tooltip: 'topMiddle'
                            }
                        },
                        style: {
                            name: 'light'
                        }
                    }
                );
            }
        },
        selectable: true,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: false,
                        weekends: false
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        editable: true
    });

});

</script>
like image 582
SkyeBoniwell Avatar asked Nov 29 '11 16:11

SkyeBoniwell


1 Answers

To summarize the comments:

Don't send all events from the feed but only the ones that occurs between start and end which are parameters sent by fullCalendar to the feed-page. These are sent as unix timestamps in seconds.

like image 78
3 revs Avatar answered Jan 03 '23 08:01

3 revs