41

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).

0

8 Answers 8

33

Bill,

I know this question is pretty much ancient, but I needed a solution and figured I'd post it here for others. I solved the problem myself by attaching the viewDisplay event to my calendar (this event was removed in v2 of FullCalendar, viewRender may be used instead).

$("#calendar").fullCalendar({
    viewDisplay: function (element) {

    }
});

Once you have access to the element parameter, you can get the date by using element.start or element.visStart. If you're in the month view, start will provide you with the first day of the month that you're viewing, visStart will give you the first visible day of the month

0
16

This is how I did it:

$("#calendar").fullCalendar({

viewRender: function(view, element){
        var currentdate = view.intervalStart;
        $('#datepicker').datepicker().datepicker('setDate', new Date(currentdate));
    }

    });

In month view, intervalStart will return the first day of the month being displayed on the FullCalendar, rather than the first visible day, which is usually a day near the end of the previous month.

1
  • 3
    I used the eventAfterAllRender callback, which is called at the end of rendering the calendar. Then from the view object which is passed... eventAfterAllRender: function(view){ doMyStuff(view.intervalStart.format('YYYY-MM-DD')); }
    – Yorick
    Sep 1, 2015 at 15:22
9

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.

2
  • datesRender is what worked for me when the user was navigating between months and I wanted to load that month's events
    – CodeMonkey
    Jul 17, 2020 at 14:55
  • how can i get active view of calendar in datesRender function in full calendar 4? Please suggest. Thanks.
    – Kamlesh
    Sep 13, 2020 at 11:00
8

In V5 you have to use datesSet instead of datesRender.

0
5

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 first date on display is: " + info.view.activeStart);
    }
});
1
  • ha, yeah I haven't used anything jQuery related in ages, but good to see this question is still helping people! :-)
    – Bill Dami
    May 21, 2020 at 17:44
1

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();
        }
    }            
});

       
1
  • Thanks! This is the only answer that worked for me as intended. Aug 10, 2022 at 8:50
0

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);
    })
  };
-2

For Fullcalendar V4,

document.getElementById('my-button').addEventListener('click', function() {
  var date = calendar.getDate();
  alert("The current date of the calendar is " + date.toISOString());
});
1
  • Attaching a click event handler to a single button doesn't go anywhere near answering this question. You'd need to hook the listener up to the Previous, Next and Today buttons as well as the date picker, and you would still not be handling instances where the calendar's date was changed by calling one of its methods like calendar.prev(). Furthermore, I'd be vary wary of fetching the newly-displayed date, as your example attempts to do, before you're sure the new date(s) have loaded. Respectfully, my answer is better. May 20, 2020 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.