I´m integrating the JavaScript Calendar, called fullcalendar ( fullcalendar page) into my SAPUI5 Webpage. The calendar runs in a specific tab. I now want to change the default date after the calendar was created, to display a specific month.

setCalendar : function () {
    var that = this;
    if(!this.todayDate) {
        this.todayDate = new Date();
    }

    $("#EventBrowserDetail--calendarDiv").fullCalendar({
        header: {
            left: 'today',
            center: 'prev title next',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: that.todayDate,
        editable: false,
        eventLimit: true, // allow "more" link when too many events
        lazyFetching: false,
        eventClick: function(event, jsEvent, view){
            that.campaignSelectHandler(event.id, true, that);
        },
        eventMouseover: function(event, jsEvent, view)
        events: that.eventArray
    });
    [...]
},

I use this.todayDate to change the starting date before the function setCalendar() is called. It works fine for the first time, but if the calendar was already created once it remains with the last displayed month. For example: The month August is displayed, I switch to another tab and change the month to February. After that I rerender the events and call setCalendar() again, but it still remains at the month August.

Any idea and/or help?

Thanks in advance! :)

I´m integrating the JavaScript Calendar, called fullcalendar ( fullcalendar page) into my SAPUI5 Webpage. The calendar runs in a specific tab. I now want to change the default date after the calendar was created, to display a specific month.

setCalendar : function () {
    var that = this;
    if(!this.todayDate) {
        this.todayDate = new Date();
    }

    $("#EventBrowserDetail--calendarDiv").fullCalendar({
        header: {
            left: 'today',
            center: 'prev title next',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: that.todayDate,
        editable: false,
        eventLimit: true, // allow "more" link when too many events
        lazyFetching: false,
        eventClick: function(event, jsEvent, view){
            that.campaignSelectHandler(event.id, true, that);
        },
        eventMouseover: function(event, jsEvent, view)
        events: that.eventArray
    });
    [...]
},

I use this.todayDate to change the starting date before the function setCalendar() is called. It works fine for the first time, but if the calendar was already created once it remains with the last displayed month. For example: The month August is displayed, I switch to another tab and change the month to February. After that I rerender the events and call setCalendar() again, but it still remains at the month August.

Any idea and/or help?

Thanks in advance! :)

• javascript
• jquery
• calendar
• fullcalendar
• sapui5

1 Answer 1

Since the calendar instance already exist you can tell the plugin to go to a specific date using:

$('#EventBrowserDetail--calendarDiv').fullCalendar('gotoDate', that.todayDate);

Ref: http://fullcalendar.io/docs/current_date/gotoDate/