Using React with the FullCalendar jQuery plugin
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.
[00:00] Full Calendar is a jQuery plugin that allows you to create drag-and-drop event calendars. It also comes with a variety of views, whether it's per month, by week or per year, so let's use React to build a basic calendar component.
[00:14] First, let's get started defining our calendar component here. So just extending the default React.component class. Then we want to call the render method, and we want to return a div with the ref of calendar inside of it. This ref will be used later for locating this div node.
[00:36] Now, let's call component didMount. When using jQuery plugins, they're dependent on the DOM node, so we need to use the component didMount to tell our React component, "Hey, it's finished rendering and mounted inside the DOM," so we can access it.
[00:52] So within this DOM node, we can do "const calendar equals const calendarj.refs," which is that ref that we defined down there in our render method, and then we can use a jQuery selector to wrap around it and then do full calendar.
[01:07] Now, let's go into our "Hello World" component or our app component and do calendar, and, boom, we have a calendar. Awesome.
[01:20] But now what if we want an event within our calendar? So for this, I'm going to modify it and just say, "let event equal an array." It's going to be an array of JSON objects or JavaScript objects. We'll give it a title of "Egghead Recording." Give it a date of "date.now," and let's say, "all day equal to true."
[01:54] Now, we can pass this events array into our calendar component. We have to go back up into our component didMount call and see how we have this full calendar instantiation here.
[02:11] We can then disinstantiate that events array by calling dis.props.events. As you can see here, we have the component with the "Egghead Recording" event.
[02:24] So we've got one key detail with the calendar component. Whenever we want the component to be destroyed or re-rendered, we have to clean up the plugin or all the remnants of the plugin.
[02:35] Now let's make a call to component willUnmount within the calendar component. We want to find that same calendar reference that we defined and didMount up there.
[02:48] Let's do "calendar.fullcalendar.destroy," and we've cleaned up after ourselves.
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!
Should we be using Portals in this case
https://www.youtube.com/watch?v=z5e7kWSHWTg&feature=youtu.be&t=15m17s
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
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!