dimanche 15 février 2015

Redrawing a FullCalendar so that the dayRender callback is called


I have a FullCalendar inside a Bootstrap modal. Originally, I created the calendar on load and simply called render (ie, with $("#calendar").fullCalendar("render")) to make it appear. This correctly calls the dayRender callback, which I need to be able to do some custom rendering to the calendar.


The rendering done by dayRender is dynamic, so I need to be able to redo the rendering. I thought that calling render (as described above) would do this, but that doesn't seem to be the case (subsequent calls don't call dayRender).


The only solution I've found is to completely destroy and recreate the calendar, but this creates a very noticeable flicker (from the calendar being destroyed before it's recreated). ~~Switching between months is calling dayRender correctly and doesn't have this annoying flicker, so there must be some way to get the calendar to render without having to destroy and recreate it.~~


How can I force dayRender to be called on all days of the month?


EDIT: I've created a demo showing the problem. Note that when the modal is opened, there's a pause before the calendar appears. Every time we reopen the modal, a different day is given the "foo" text, to show the calendar being updated via dayRender. This works, but the pause before the calendar is ugly and we can see that switching between months isn't calling dayRender, as I previously thought.


Here's a version that works almost the way I want it to. Note that we call render instead. However, it apparently doesn't force dayRender to be called on every day. But now there's no long delay in showing the calendar. Strangely, if I change the month, then change back, the day is update (implying that dayRender was called).





Aucun commentaire:

Enregistrer un commentaire