Listener for "date change" in FullCalendar?

user_192694 0
Viewed 40566

Is there any way to attach a listener to FullCalendar that will be fired whenever the currently viewed date is changed, i.e. if you are in Month view, going to the next month would fire the event passing the Date for the first day of the month, and the same for changing weeks in Week view, day in Day view etc.

The only exposed listener that would be close to this is the dayClick callback, but that's no good because it only fires when a user clicks in an actual day's cell, not for example when the Next/prev/today controls are pressed in the header bar.

I want this functionality to be able to sync the currently viewed month in FullCalendar with a ExtJS datepicker component, so if the viewed month is changed in FullCalendar, then the Datepicker is updated to show that same month. (think Google Calendar's UI with its "mini calendar" in the top left being the datepicker).

fullcalendar dom-events date extjs javascript
8 Answers

For FullCalendar v4 (the latest version at the time of writing ) the right callbacks are:

viewSkeletonRender (docs)

function( info )

This callback will get triggered when the initial view renders or when the user changes the view, but before the datesRender callback fires, which is a callback for when all date/time cells have been rendered.

datesRender (docs)

function( info )

This triggers after viewSkeletonRender callback but before the eventRender callbacks.

user_32986370

In V5 you have to use datesSet instead of datesRender.

user_3573200

Truly ancient question now but in FullCalendar 4 the datesRender callback is probably what you want. Per the docs, this is triggered "when a new set of dates has been rendered" which, in practice, would be whenever you navigated to the previous/next day/week/month or used the date picker or "Today" button to do so.

Example usage:

$("#calendar").fullCalendar({
    datesRender: function (info) {
        alert("The fist date on display is: " + info.view.activeStart);
    }
});
user_14831900

eventDrop function is used to get the data on date change.The below example worked fine for me.I am using fullcalendar version(3.8.0)

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today, prevYear,nextYear',
        center: 'title',
        right: 'month'
    },
    buttonText: {
        month: 'month',
        week: 'week',
        day: 'day'
    },
    navLinks: true,
    editable: true,
    droppable: true,
    events: [
        {
            title: 'All Day Event',
            start: '2022-06-01',
            color: '#257e4a'
        },
        {
            title: 'Long Event',
            start: '2022-06-07',
            end: '2022-06-10'
        }
    ],
    eventDrop: function (event, delta, revertFunc) {
        alert(event.title + " was dropped on " + event.start.format());

        if (!confirm("Are you sure about this change?")) {
            revertFunc();
        }
    }            
});
user_57058200

I am using this library in angular with proper angular wrapper: @fullcalendar/angular": "^5.8.0".

In this version CalendarOptions object contains callback method 'datesSet' which is called every time current month view is changed and send all proper information about current month view. Method is also called on initial month view rendering.

example of view component:

<full-calendar #calendar [options]="calendarOptions"></full-calendar>

proper ts object:

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    datesSet: (data => {
      console.log('datesSet: ' , data);
    })
  };
user_15715800

For Fullcalendar V4, 

document.getElementById('my-button').addEventListener('click', function() {
  var date = calendar.getDate();
  alert("The current date of the calendar is " + date.toISOString());
});
user_31194670
Related