Hello Dev.
A full-sized calendar is a great way to display events, simplify conferences scheduling, or prepare get right of entry to to shared resources. In this article we can see how to add a full-sized calendar to a React project with FullCalendar. we can see a way to add the FullCalendar to a project, configure, localize and style it.
FullCalendar is a popular JavaScript full-sized calendar. It provides a React component that makes it smooth to use in React projects. using the calendar component we can show events in a month, week, day, or a custom view.
For this article, we assume that you're familiar with React components and how to use props and state to control them.
So let's start the lesson...
Adding FullCalendar
Let's start by adding FullCalendar to our project:
# add with npm
npm install @fullcalendar/core
npm install @fullcalendar/react @fullcalendar/daygrid
# or with yarn
yarn add @fullcalendar/core
yarn add @fullcalendar/react @fullcalendar/daygrid
The core functionality for the FullCalendar is in the @fullcalendar/core package. You will always need to add it.
All additional features are implemented as separate packages. We add @fullcalendar/react for a React calendar component and @fullcalendar/daygrid for a Month view.
Now, we're ready to display a full-size calendar in our React application:
import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
export default function App() {
const events = [{ title: "today's event", date: new Date() }];
return (
<div className="App">
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin]}
events={events}
/>
</div>
);
}
We start by importing the FullCalendar React component. We also import the dayGridPlugin that provides a Month view for a calendar. Next, we import CSS files with standard calendar styles.
Finally, we use FullReact component to display a list of events. We specify a month view as a plugin in the plugins property. The list of events is specified in the events property.
Configuring Calendar
The FullReact component provides a list of properties that allow configuring a calendar. You can change the header and footer, override rendering for calendar elements, process click and dragging events, configure different views, and provide a data source for events. You can check the API documentation on the official web site to learn about available configuration options.
Let's display a calendar with month, week and day views:
import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
import events from "./events";
export default function App() {
return (
<div className="App">
<FullCalendar
defaultView="dayGridMonth"
header={{
left: "prev,next",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay"
}}
plugins={[dayGridPlugin, timeGridPlugin]}
events={events}
/>
</div>
);
}
For this example, we've added the @fullcalendar/timegrid package to the project. This package implements week and day views. Next, we import the timeGridPlugin plugin that will provide week and day views. We also import @fullcalendar/timegrid/main.css CSS file that provides styles for views.
After that, we configure FullCalendar to display events. We specify plugins to use with the plugins property. We'll be using a month view from the dayGridPlugin, and week and day views from the timeGridPlugin. We specify the header configuration with the header property. The header will contain next and previous buttons on the left, title in the center, and buttons to switch between month, week, and day view on the right.
In this example, we provide events list as an array of objects. We can also use a JSON file and addEvent function. All the data sources got parsed into an Event object used by all FullCalendar functions. For an event, we can specify a title, start and end dates, whether it's a recurrent event or an all-day event.
Localization of Calendar
The FullReact component provides the locale property that we can use to specify the calendar's locale:
export default function App() {
const events = [{ title: "today's event", date: new Date() }];
return (
<div className="App">
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin]}
events={events}
locale="es"
/>
</div>
);
}
In this example, we've specified a Spanish locale for the calendar using the locale property.
Styling FullCalendar
When it comes to styling, there are two options available. First, you can use the Bootstrap theme for a calendar. Second, you can customize standard styles up to your requirements.
The following example displays a calendar with a modified color for day numbers and day titles:
import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "./custom.css";
export default function App() {
const events = [{ title: "today's event", date: new Date() }];
return (
<div className="App">
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin]}
events={events}
/>
</div>
);
}
In addition to standard CSS styles we import the custom.css file that overrides specific styles of the calendar:
/* override day number color and size */
.fc-day-number {
font-size: 1.5em;
color: #5c005c;
}
/* override day title color and size */
.fc-day-header {
font-size: 1.5em;
color: #00b294;
}
FullCalendar provides a flexible React component that displays a full-sized calendar. It supports month, week, day, and custom views. We can configure a calendar, localize it and apply custom styling.
I hope it assists you, thanks for visiting my article if you like my article then share it with your friends on the social media platform.
Happy Coding.....
