Using React with the FullCalendar jQuery plugin

Share this video with your friends

Send Tweet

In this lesson, we use React and the FullCalendar.js JQuery plugin to demonstrate how you can use complex JQuery plugins to create dynamic React components.

Eric
Eric
~ 5 years ago

Great article. Since componentDidMount is called only once, how would you change the calendar once rendered? For example, what if the events array needs to come from somewhere in the application (e.g. a Reflux Store or other central spot). Where do you "re-render" the fullCalendar events? Thanks!

Iheanyi Ekechukwu
Iheanyi Ekechukwuinstructor
~ 5 years ago

Hey there Eric, in terms of re-rendering the component, you'd insert a componentDidUpdate() call into the calendar component. From that, you'd then be able to calendar.fullCalendar('rerenderEvents') (the calendar DOM node). You'd be able to pass the data from a Store in the parent component (connected to the store), if you so choose. Hope this was helpful!

sk29110
sk29110
~ 5 years ago

Should we be using Portals in this case

https://www.youtube.com/watch?v=z5e7kWSHWTg&feature=youtu.be&t=15m17s

Koen
Koen
~ 4 years ago

Very helpfull. Could you advise as well on using things like drag and drop events onto the component? Something like this example? How would that be achievable? Thanks! Something like this for meteor? https://themeteorchef.com/tutorials/reactive-calendars-with-fullcalendar