Fullcalendar refetch events callback

jquery angularjs angularjs-directive fullcalendar jquery-callback

17,304

Solution 1

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

Solution 2

try this


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


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

                events: myevents,


            });

Solution 3

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>

17,304

Author by

ove

Updated on June 04, 2022

Comments

ove about 2 years

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?
ove over 9 years

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
ove over 9 years

Also, the method is being called for $('#calendar').fullCalendar( 'updateEvent' );
markthewizard1234 over 6 years

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)
Dragi Postolovski over 5 years

Works, but I wish not to remove the calendar and later reload it again with the filtered evens. Thank you.
Hansaka Sandaruwan over 3 years

calendar.fullCalendar('refetchEvents'); where is this calendar instance come from ? I use ` <FullCalendar id="cal" :options="calendarOptions" />` to render my calendar(vueJs)