This tutorial has been updated for React v18, Next.js v13, and FullCalendar v6. If you are looking for the older version of this tutorial, you can access it here.
In this tutorial, we would be learning on how to use FullCalendar in Next.js.
You might have been able to come here because you have encountered an error Element is not defined
when you are trying to use FullCalendar in Next.js project.
Cause of the error
Next.js renders the page on the server side. Since it was on the server side, window
is not available as it is only available on the client side. If the window
is not available, then the element
is also not available.
Now that we understand the problem, let’s proceed with the solution.
Step 1: Initialize a Next.js project
Let’s start with initializing our Next.js project by running the following commands in the terminal.
1
2
$ yarn create next-app nextjs-fullcalendar --js --no-eslint
$ cd nextjs-fullcalendar
Step 2: Install FullCalendar
Now, let’s install FullCalendar to our project. Run the following command in the terminal.
1
$ yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid
Step 3: Create your own FullCalendar component
Let’s start by creating a directory for our components. Run the following commands in the terminal.
1
2
$ mkdir components
$ touch components/fullcalendar.js
In the file components/fullcalendar.js
, paste the following.
1
2
3
4
5
6
7
import Calendar from '@fullcalendar/react';
import dayGrid from '@fullcalendar/daygrid';
import timeGrid from '@fullcalendar/timegrid';
export default function FullCalendar(props) {
return <Calendar plugins={[dayGrid, timeGrid]} {...props} />;
}
That seems easy. Yes, it’s easy now with React v18, Next.js v13, and FullCalendar v6. In the past, we have to jump on different hoops setting this up.
If you’re interested on how to set this up on the previous versions you may read it here.
Step 4: Use our own FullCalendar component
In the file pages/index.js
, paste the following.
1
2
3
4
5
6
7
8
9
10
import FullCalendar from '../components/fullcalendar';
export default function Home() {
return (
<div>
<FullCalendar initialView='dayGridMonth' />
<FullCalendar initialView='timeGridWeek' />
</div>
);
}
Now if you run yarn dev
in the terminal and navigate to http://localhost:3000 in your browser, you should be able to see the two (2) calendars, one in month view and one in week view rendered properly without any errors.
That’s it, we have learned on how to use FullCalendar in Next.js project.