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

Share Improve this question Follow asked Jun 26, 2012 at 3:32 FraserFraser 14.3k2222 gold badges7676 silver badges119119 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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!