Fullcalendar refetch events callback

Asked 23/12, 2014 at 14:22 Answered 6/10, 2015 at 12:59

Solved jquery angularjs angularjs-directive fullcalendar jquery-callback

Currently using fullcalendar.io

In the documentation, it has calendar.fullCalendar('refetchEvents') that refetch all the events from the server.

In short, I want calendar.fullCalendar('refetchEvents') request to be completed and send me back a callback to let me know. I want all the events to be downloaded before i proceed with certain tasks.

How can i do that?

Abaddon answered 23/12, 2014 at 14:22 Comment(2)

Have you tried to listen eventAfterAllRender fullcalendar.io/docs/event_rendering/eventAfterAllRender? – Eupepsia 23/12, 2014 at 15:21

@kostya is there an example how to use it? – Abaddon 23/12, 2014 at 15:32

Solved it by doing refetch events after a successful http post as below

  Service.insert(event).
            success(function (data, status, headers, config) {

                calendar.fullCalendar('refetchEvents');

            }).
            error(function(data, status, headers, config) {
                alert('error');
            });

Abaddon answered 28/12, 2014 at 8:36 Comment(1)

calendar.fullCalendar('refetchEvents'); where is this calendar instance come from ? I use ` <FullCalendar id="cal" :options="calendarOptions" />` to render my calendar(vueJs) – Roadbed 7/10, 2020 at 8:20

try this


 $('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({


                defaultView: 'month',
                editable: true,
                //eventLimit: true, // allow "more" link when too many events

                events: myevents,


            });

Tennilletennis answered 6/10, 2015 at 12:59 Comment(1)

Works, but I wish not to remove the calendar and later reload it again with the filtered evens. Thank you. – Accipiter 16/11, 2018 at 13:50

I have changed basic-views.html from demos folder of FullCalendar. I added

        ,
        eventAfterAllRender: function (view) {
            console.log('eventAfterAllRender');
            console.log(view);
        }

To calendar options list. It fires after initial events load and after each $('#calendar').fullCalendar( 'refetchEvents' );

Full demo code:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultDate: '2014-11-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'All Day Event',
                    start: '2014-11-01'
                },
                {
                    title: 'Long Event',
                    start: '2014-11-07',
                    end: '2014-11-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2014-11-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2014-11-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2014-11-11',
                    end: '2014-11-13'
                },
                {
                    title: 'Meeting',
                    start: '2014-11-12T10:30:00',
                    end: '2014-11-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2014-11-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2014-11-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2014-11-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2014-11-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2014-11-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2014-11-28'
                }
            ],
            eventAfterAllRender: function (view) {
                console.log('eventAfterAllRender');
                console.log(view);
            }
        });
        $('#calendar').fullCalendar( 'refetchEvents' );
    });

</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

</style>
</head>
<body>

    <div id='calendar'></div>

</body>
</html>

Eupepsia answered 23/12, 2014 at 17:33 Comment(3)

This is partly doing what i wanted. This method is being called everytime. I only want it to be called after $('#calendar').fullCalendar( 'refetchEvents' ); Wondering whether there is a better way – Abaddon 24/12, 2014 at 1:5

Also, the method is being called for $('#calendar').fullCalendar( 'updateEvent' ); – Abaddon 24/12, 2014 at 1:28

This IS the correct answer. This works even if the data set is empty and nothing gets rendered (as opposed to eventAfterRender, which triggers on each item). You could use boolean checks in the function you call (and set these if you want to change something) – Dislike 2/10, 2017 at 13:35

Recommended topics

Hot tags