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.