Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 830 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Using React with the FullCalendar jQuery plugin

2:55 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Tim

Good stuff :) It would be nice to see some further videos on 'handling events' (clicks etc... ) coming from jQuery plugins.

In reply to egghead.io
Avatar
Iheanyi

Hmm, not a bad idea. I'm guessing for FullCalendar, you'd probably want a sample of how to handle clicking coming from within like calendar events and all that, and probably hooking into things like addEvent and removeEvent, right?

In reply to Tim
Avatar
Eric

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!

Avatar
Iheanyi

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!

In reply to Eric
Avatar
Tim

Hi Iheanyi

Correct.

(I didn't get a notification of your reply so late response).

In reply to Iheanyi

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.

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.

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.

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.

Now, let's go into our "Hello World" component or our app component and do calendar, and, boom, we have a calendar. Awesome.

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."

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.

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.

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.

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.

Let's do "calendar.fullcalendar.destroy," and we've cleaned up after ourselves.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?