Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Using React with the FullCalendar jQuery plugin

    Iheanyi EkechukwuIheanyi Ekechukwu

    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.

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss