I am using the below code to initialise a jQuery FullCalendar.

However, not all months have any events. I would like the initial month view of the calendar to be the first month with an event.

So as an example. It is currently June, there are no events in the Calendar until August so I would like would like the initial view of the calendar to default to August rather than June.

Likewise, if there ARE events in June, I would like it to default to June.

$('#fullCalendar').fullCalendar({
            selectable: true,
            selectHelper: true,
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            events: function(start, end, callback) {

                $.getJSON(jSONCalendarURL, {
                            token:jSONAPItoken,
                            productID: $('#fullCalendar').attr("data-id"),
                            startDate: $.fullCalendar.formatDate(start, 'yyyy-MM-dd'),
                            endDate: $.fullCalendar.formatDate(end, 'yyyy-MM-dd')
                        }, function(data){
                        var calevents = [];
                        $.each(data.response, function(index,item){
                            calDate = index;
                            child = item.Variations;
                            if (child.length > 0 ){
                                if (!$.isEmptyObject(child)){
                                    calPrice = child[0].Price;
                                    calID = child[0].ID;
                                    calAvailable = child[0].Available;
                                    calevents.push({
                                        'id': calID,
                                        'title': buildEventTitle(calAvailable,calDate.substring(calDate.length,calDate.length-2),child[0].Price, calID, child[0].RRP),
                                        'start': $.fullCalendar.parseDate(calDate),
                                        'end': $.fullCalendar.parseDate(calDate),
                                        'allDay': true
                                    });

                                }
                            }
                        });
                        callback(calevents);
                        highlightExisting();

                    }
                );
            },

            eventRender: function (event, element, view) {
                if (event.start.getMonth() != view.start.getMonth())
                    return false;
            },
            weekMode:'liquid'
        });

Is what I am trying to do achievable?

I am using the below code to initialise a jQuery FullCalendar.

However, not all months have any events. I would like the initial month view of the calendar to be the first month with an event.

So as an example. It is currently June, there are no events in the Calendar until August so I would like would like the initial view of the calendar to default to August rather than June.

Likewise, if there ARE events in June, I would like it to default to June.

$('#fullCalendar').fullCalendar({
            selectable: true,
            selectHelper: true,
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            events: function(start, end, callback) {

                $.getJSON(jSONCalendarURL, {
                            token:jSONAPItoken,
                            productID: $('#fullCalendar').attr("data-id"),
                            startDate: $.fullCalendar.formatDate(start, 'yyyy-MM-dd'),
                            endDate: $.fullCalendar.formatDate(end, 'yyyy-MM-dd')
                        }, function(data){
                        var calevents = [];
                        $.each(data.response, function(index,item){
                            calDate = index;
                            child = item.Variations;
                            if (child.length > 0 ){
                                if (!$.isEmptyObject(child)){
                                    calPrice = child[0].Price;
                                    calID = child[0].ID;
                                    calAvailable = child[0].Available;
                                    calevents.push({
                                        'id': calID,
                                        'title': buildEventTitle(calAvailable,calDate.substring(calDate.length,calDate.length-2),child[0].Price, calID, child[0].RRP),
                                        'start': $.fullCalendar.parseDate(calDate),
                                        'end': $.fullCalendar.parseDate(calDate),
                                        'allDay': true
                                    });

                                }
                            }
                        });
                        callback(calevents);
                        highlightExisting();

                    }
                );
            },

            eventRender: function (event, element, view) {
                if (event.start.getMonth() != view.start.getMonth())
                    return false;
            },
            weekMode:'liquid'
        });

Is what I am trying to do achievable?

• javascript
• jquery
• fullcalendar

1 Answer 1

Definitely achievable! You will need to first start with sorting your events array and finding the next registered event object. Then you can use the .fullCalendar('gotoDate') method to jump to that date.

Something like this:

function custom_sort(a, b) {
    return new Date(a.start).getTime() - new Date(b.start).getTime();
}

events_array.sort(custom_sort);

$('#calendar').fullCalendar('gotoDate', events_array[0].start);

Please refer this FIDDLE for a working static example.

Hope this helps!