re-draw fullCalendar on the fly

Question

I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.

Scenario: I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.

have you managed to achieve this? I am using a different fork and I don't seem to be able to change the resources and reload the view, when I change a date. Does this version allow you to do this? — Miguel Mesquita Alfaiate, Jun 05 '15 at 20:11
Ok Thank you. I tried that option but it doesn't seem to work with the fork I am using... — Miguel Mesquita Alfaiate, Jun 11 '15 at 08:01

score 26 · Accepted Answer · answered Apr 26 '12 at 01:39

26

You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.

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

If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:

$('#calendar').fullCalendar('rerenderEvents');

Hopefully this helps!

answered Apr 26 '12 at 01:39

ganeshk

5,583
3
27
31

I was looking to do the same thing as the OP and destroying/recreating the calendar was the only way that seemed to work. – cOle2 Aug 10 '12 at 14:32
Strangely, the rerenderEvents is not working for me. Will report back when I figure out why... – Greg Blass Nov 10 '16 at 14:31
Seems very old post but giving it a try, this solution works but in IE 11 with fullcalender version 2.x , the entire screen flickers or blinks so I am in a need of another solution to re-render the calendar. Until now tried many options which are provided against this question as well on other blogs but none working, can somebody help or having the same problem ? – Nirav31 May 14 '19 at 14:02

score 2 · Answer 2 · edited Nov 11 '16 at 15:22

2

Use refetchResources: .fullCalendar( 'refetchResources' )

This will fetch and freshly re-render the resource data, per the FullCalendar documentation.

edited Nov 11 '16 at 15:22

TylerH

20,799
66
75
101

answered Nov 11 '16 at 15:16

Rasti

21
1

score 1 · Answer 3 · edited May 23 '17 at 11:54

The problem:

"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here

In my opinion, destroy is not needed in this case, only with render you can see the calendar.

My solution:

<script type="text/javascript">
    $('#objectname').show(0,onObjectShow);
    function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>

You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.

Solution Based on this reference.

score 0 · Answer 4 · answered Jul 12 '19 at 07:37

0

You can also redraw calendar on the fly using below command- $(window).trigger("resize");

answered Jul 12 '19 at 07:37

deeksha gupta

151
1
6

re-draw fullCalendar on the fly

4 Answers4

Linked