CODEWITHSUNDEEP
fullcalendargetdate
user2268552
user2268552

Reputation: 11

FullCalendar skips back to current date rather than staying on current month

I have FullCalendar installed and working great, pulling in courses from my database.

You can view different courses based on clicking a button that submits the page again but passes different criteria.

The Issue is that on reloading of the page and the new content it skips back to the current date which is rather annoying when when you are looking at courses 3 months into the future!!

Does anybody know how to make the calendar go back to the page you where on after you have refreshed the page???

I have a feeling it might be something to do with getdate as I got the following code to work but can't seem to pass the result back through the URL and into the calendar setup.

$('#my-button').click(function() {
    var d = $('#calendar').fullCalendar('getDate');
    alert("The current date of the calendar is " + d);
});

Upvotes: 1

Views: 4584

Answers (4)

tcanbolat
tcanbolat

Reputation: 411

Here is an updated answer for version 4 and 5 of fullcalendar. since viewRender is no longer an option in these versions. I came up with a different approach using the loading option.

The loading option will give you a boolean argument stating whether the calendar is done loading or not. Inside that function I check if the calendar is done loading and if so, I set the calendar date to localStorage. Next I created an if else statement before the fullcalendar object to check if the localstorage item exists, and if so I set the defaultDate option in the calendar object to to localStorage date; if not, I just set it to today's date.

Example:

let viewDate;
const savedDate = localStorage.getItem("calDate");
if (savedDate !== null) {
  viewDate = new Date(savedDate);
} else {
  viewDate = today();
}

const calendarElement = document.getElementById('your_calendar');

const calendar = new FullCalendar.Calendar(calendarElement, {
  defaultDate: viewDate,
  loading: function(stillLoading) {
    if (stillLoading === false) {
      // When Calendar is done loading....
      localStorage.setItem("calDate", calendar.getDate());
    }
  },
});

Upvotes: 0

npayne
npayne

Reputation: 119

I used a combination of the two above. I set the localStorage value for the start date when creating, moving, or resizing an event as well as viewRender and then assigned that value to the defaultDate.

defaultDate: localStorage.getItem('Default_FullCalendar_Date'),    
viewRender: function(view) {
        localStorage.setItem('Default_FullCalendar_View', view.name);
        ...
    },

    select: function(start, due){
        localStorage.setItem('Default_FullCalendar_View', start);
        ...
    },

    eventDrop: function(event, delta, revertFunc, jsEvent, ui, view){
        localStorage.setItem('Default_FullCalendar_View', event._start._d);
        ...
    },


    eventResize: function(event, delta, revertFunc, jsEvent, ui, view){
        localStorage.setItem('Default_FullCalendar_View', event._start._d);
        ...
    }

Works like a charm.

Upvotes: 2

Brendon Muir
Brendon Muir

Reputation: 4612

If you use jquery.cookie you can store the currently viewed date in a cookie for the page being viewed and use that value to set the defaultDate when the page reloads. Pass these in as options when you initialise your calendar:

defaultView: Cookies.get('fullCalendarCurrentView') || 'month',
defaultDate: Cookies.get('fullCalendarCurrentDate') || null,
viewRender: function(view) {
  Cookies.set('fullCalendarCurrentView', view.name, {path: ''});
  Cookies.set('fullCalendarCurrentDate', view.intervalStart.format(), {path: ''});
}

This code also saves the current view (e.g. month, day etc...)

Upvotes: 3

Lukasz Koziara
Lukasz Koziara

Reputation: 4320

You can use gotoDate method:

var d = $('#calendar').fullCalendar('getDate');
$('#calencar').fullCalendar( 'gotoDate', d.getFullYear(), d.getMonth(), d.getDate() )

Upvotes: 0

Related Questions