React Big Calendar

Introduction

The react-big-calendar is a React.js library that provides a customizable calendar component for displaying events and schedules. The library is built on top of the big calendar library, which is a full-featured calendar component for JavaScript. react-big-calendar makes it easy to integrate a calendar into a React application. The react big calendar library supports a variety of use cases, such as creating a calendar for scheduling appointments, displaying events, or managing resources. It can be easily integrated into any React application, and it can be customized to match the look and feel of your application by passing different props and customizing the styles.

Use and Setup

React-big-calendar is commonly used to display and manage events and schedules in a calendar format within a React application. Here are a few examples of how the library can be used:

1. Appointment Scheduling: A business or organization can use react-big-calendar to create a calendar for scheduling appointments with clients or customers. The calendar can be set up to display available time slots and allow clients to book appointments directly on the calendar.
2. Event Management: An event management company can use react-big-calendar to create a calendar for managing events. The calendar can display upcoming events, and event organizers can use it to create, edit, and delete events, and manage the schedule of events.
3. Resource Management : A company can use react-big-calendar to manage resources such as conference rooms, vehicles, or equipment. The calendar can display the availability of resources and allow employees to book them directly on the calendar.
4. Personal Scheduling : Individuals can use react-big-calendar to create a personal calendar for scheduling appointments, events, or tasks. The calendar can be set up to display different views such as day, week, and month, and allow users to create, edit, and delete events.

In all the above cases, react-big-calendar can be customized to match the look and feel of the application by passing different props and customizing the styles. Additionally, it has a wide range of functionalities and can be integrated with other libraries and APIs to allow for more advanced features such as syncing events with google calendar, outlook or other calendar services.

To install react-big-calendar in our react app :

1. Install the package: You can install react-big-calendar in your project by running one of the following commands: npm install react-big-calendar or yarn add react-big-calendar

2. Import the calendar component: After installation, you can import the calendar component in the file where you want to use it.

3. Provide the data to the calendar: You need to provide the data to the calendar component, in the form of events. The events should have at least a title, start time, and end time.

4. Render the calendar component: Now you can render the calendar component in your JSX and pass the events as a prop.

Explanation:

We created a react-big-calendar to display two events i.e Event 1 and Event 2.

Starters

a) React-Big-Calendar

This is a basic starter template for react big calendar that includes the necessary dependencies and a minimal configuration to get started with react-big-calendar. It includes a simple calendar component with a default view, and it can be easily customized to suit your needs.

Here is a simple example of how you might use the react-big-calendar-starter template to create a calendar in a React application:

1. Install the necessary dependencies by running the following command in your project's root directory:

2. Create a new file MyCalendar.js in your src folder and include the following code:

3. In your App.js file, import the MyCalendar component and render it:

4. Run the application by starting the development server:

Explanation:

We created a react-big-calendar to display two events i.e Event 1 and Event 2.

Explanation:

This will start the development server and open your application in a web browser. You should now see a calendar with two events on it, Event 1 and Event 2. You can add more events to the events array to display them on the calendar.

b) React-Big-Calendar with Drag and Drop

To implement react-big-calendar with drag and drop :

[events.js]

Explaination

In events.js, we have defined those events which we want to show on the calendar.

[index.js]

Explanation:

Here we have implemented the drag and drop feature using onEventDrop and onEventResize.

Explanation:

Here we can see, We have dragged Long Event from the 6th of the month and dropped it to 21st of the month.

c) React-Big-Calendar with TypeScript and React Hooks Bundled with Vite

We can also implement React-big-calendar with TypeScript and React hooks in a Vite project, to do so :

1. First, install React-big-calendar, moment, typescript by running the command npm install react-big-calendar moment typescript or yarn add react-big-calendar moment typescript in your project's root directory.

2. Create a new file called shim.d.ts in the root directory of your project and add the following code to it:

3. In your component file, import the BigCalendar component, dateFnsLocalizer, the moment library, the css file, date-fns

4. Define locales, localizer and events for our calendar.

5. Use the BigCalendar component in your JSX code and pass it the necessary props such as events, startAccessor, endAccessor and onEventDrop, onEventResize:

Explanation:

We have used typescript along with react-big-calendar to generate a calendar as follows :

Run Examples Locally

a) Localization and Date Formatting

Localization refers to the process of adapting a software application or product to meet the language, culture, and other specific requirements of a particular country or region in react big calendar. In the context of the React-big-calendar library, localization refers to the ability to display the calendar's labels, such as month and week names, in different languages.

Date formatting, on the other hand, refers to how date information is presented to the user. This can include things like the order of the day, month, and year, and how the date is separated (e.g. using slashes, dots, or dashes).

In React-big-calendar, localization and date formatting can be achieved by using the moment library. Moment is a popular JavaScript library for working with dates and times, and It allows you to set the locale of the calendar, which in turn affects the way the dates are formatted and displayed. Additionally, the BigCalendar component accepts a localizer prop, which is a function used to format the dates and times in the calendar.

By using the momentLocalizer method provided by react-big-calendar and passing it to the moment library with the set locale, you can set the calendar's language and date formatting. You can also pass the messages prop with the translations of the calendar's labels in the desired language to achieve localization.

[MyCalendar.js]

Explanation:

Here we have created a big chart and done localization on it to make it in Hindi.

Custom Styling

React-big-calendar allows you to customize the look and feel of the calendar by applying custom styles. There are several ways to achieve this:

1. Using CSS: You can import the default CSS file provided by the library and then override the styles by using CSS selectors. To import the default CSS file, you can use the following line:

2. Using the style prop: You can pass a style prop to the BigCalendar component, which accepts an object of CSS styles. These styles will be applied to the root div element of the calendar.

Explanation:

We have given white background colour to our react-big-calendar.

3. Using the className prop: You can pass a className prop to the BigCalendar component, which accepts a string value representing the class name. You can then define your custom styles in a CSS file and apply them to the calendar using this class name.

Explanation:

We have given a class my-custom-calendar to our react-big-calendar, using it will we give some css to our calendar.

It's important to note that when using custom styles, make sure that the styles do not conflict with the default styles and that they are applied correctly.

You can also use a CSS preprocessor with react big calendar (such as SASS or LESS) to write your styles and make the process of customizing the calendar more efficient.

Elevate Your React Journey! Enroll in Scaler's Full Stack Developer Course, Guided by Industry Gurus. Certify Your React Expertise Today!