---
title: "React Event Calendar Component | Mobiscroll"
component: "Event calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/eventcalendar"
---

# Modern React event calendar

A React event calendar component for building calendars with events — week, month & year views, drag & drop, CRUD, and Google Calendar sync. For React and Next.JS. Last update: Oct 16, 2026

Use it in **responsive mobile & desktop web apps** and **Ionic React projects**

## Description

The calendar view supports everything from **single to multiple week views** all the way to **month grids** with **various ways to render events**.

The **four views - scheduler, calendar, timeline, agenda -** can be combined to create the user experience you need on **mobile, desktop and everything in-between**.

Capabilities like **recurring events, all-day and multi-day events, and responsiveness** are supported by all views.

## Setting up the calendar

- [Mobile Month View](https://demo.mobiscroll.com/react/eventcalendar/mobile-month-view.md) - React event calendar month view paired with a synchronized agenda — sticky day headers, tap-to-navigate, and mobile-first layout.
- [Desktop Month View](https://demo.mobiscroll.com/react/eventcalendar/desktop-month-view.md) - Show a full-month React event calendar for desktop — display event labels, show hidden events in an overflow popover, and expand the grid to fill the container.
- [Responsive Month View](https://demo.mobiscroll.com/react/eventcalendar/responsive-month-view.md) - Build a responsive React event calendar — switch from week + agenda on mobile to a full month view on desktop using configurable breakpoints.
- [Printing & PDF Export](https://demo.mobiscroll.com/react/eventcalendar/printing-the-view.md) - Print only the calendar view — not the full page — or export it to PDF with the React event calendar print add-on.

## Common use cases

- [Property Booking Calendar](https://demo.mobiscroll.com/react/eventcalendar/property-booking-calendar.md) - Show property reservations in a monthly React booking calendar — exact check-in/check-out time labels, color-coded by platform (Airbnb, Booking).
- [Day Cell Summary View](https://demo.mobiscroll.com/react/eventcalendar/day-cell-aggregate-information.md) - Display color-coded daily event summaries in a React event calendar — each cell shows meetings and workload density, with drill-down to day and week views.

## Displaying events

- [Event Labels](https://demo.mobiscroll.com/react/eventcalendar/event-labels.md) - Show colour-coded event labels inside each day cell of a React month view event calendar — events that don't fit open in a popover.
- [Event Popover](https://demo.mobiscroll.com/react/eventcalendar/event-popover.md) - Keep the month grid clean in a React event calendar — day cells show a dot or event count, and clicking opens a popover listing that day's events.
- [Custom Event Sort Order](https://demo.mobiscroll.com/react/eventcalendar/custom-event-sort.md) - Control event display order in a React event calendar — assign per-event priority values or supply a custom function to override the default ordering.
- [Timezone Configuration](https://demo.mobiscroll.com/react/eventcalendar/setting-the-timezone.md) - Set independent data and display timezones in a React event calendar — configure how events are stored and let users switch the visible timezone.
- [Multiple Timezones](https://demo.mobiscroll.com/react/eventcalendar/multiple-timezone-support.md) - Show the same events in multiple timezones in a React event calendar — add a header dropdown so users can switch their display timezone on the fly.
- [Event Search Popup](https://demo.mobiscroll.com/react/eventcalendar/searching-events-in-popup.md) - Search events in real time from the React event calendar header — results appear in an agenda-style popup as you type, grouped by date.
- [Search Events in Sidebar](https://demo.mobiscroll.com/react/eventcalendar/searching-events-in-sidebar.md) - Add real-time event search to a React event calendar — display filtered results in a sidebar panel, grouped by date, with click-to-navigate.

## Configuring the view

- [Week and Month View](https://demo.mobiscroll.com/react/eventcalendar/month-week-view.md) - Display events in a React calendar with switchable week and month views — choose 1, 2, or 3 weeks and set a locale-aware or fixed week start day.
- [Quarter and Year View](https://demo.mobiscroll.com/react/eventcalendar/quarter-year-view.md) - Show three months or a full year in the React event calendar — switch between quarter and year views to give users a planning-scale event overview.
- [Show All or Limit Event Labels](https://demo.mobiscroll.com/react/eventcalendar/show-more-all-labels.md) - Show all event labels with dynamic row heights or limit labels per day in a React month-view calendar — hidden events appear in a "show more" popover.
- [Colored Cell Backgrounds](https://demo.mobiscroll.com/react/eventcalendar/colored-cell-background.md) - Color day-cell backgrounds in a React event calendar — mark exact or recuring dates or date ranges as visual highlights for holidays and special days.
- [Switch Day, Week and Month Views](https://demo.mobiscroll.com/react/eventcalendar/switching-day-week-month-view.md) - Switch a React event calendar between day, week, and month views using a header segmented control — each view paired with a matching agenda list.
- [External Date Picker Navigation](https://demo.mobiscroll.com/react/eventcalendar/navigate-from-external-date-picker.md) - Use a React event calendar with an external date picker in two-pane layout — date selection navigates the calendar and keeps both in sync.

## Templating

- [Event Display](https://demo.mobiscroll.com/react/eventcalendar/customize-label-look-and-feel.md) - Control event label appearance in a React event calendar — customize colors, timed-event dots, and custom fields beyond the title.
- [Event Popover](https://demo.mobiscroll.com/react/eventcalendar/customize-event-popover.md) - Customize how events appear in the day popover of a React event calendar — use full custom layouts or add fields like assignee, location, and participants.
- [Custom Header](https://demo.mobiscroll.com/react/eventcalendar/customizing-header.md) - Customize the React event calendar header — rearrange navigation, add a Today button, and switch between calendar and scheduler views.
- [Custom Event Tooltip](https://demo.mobiscroll.com/react/eventcalendar/custom-event-tooltip.md) - Add custom hover tooltips to a React event calendar — show appointment details, status, location, and confirm or delete actions to each event.
- [Add Event on Hover](https://demo.mobiscroll.com/react/eventcalendar/cell-template-on-hover.md) - Show an "Add event" button on day cell hover in a React event calendar — reveal event creation without cluttering the calendar interface.

## Drag & drop

- [Drag and Drop](https://demo.mobiscroll.com/react/eventcalendar/move-resize-drag-drop-to-create-events.md) - Control drag-and-drop in a React event calendar — enable/disable click-to-create, drag-to-create, move, resize, and delete per event or globally.
- [Drag and Drop Permissions](https://demo.mobiscroll.com/react/eventcalendar/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Control move and resize per event or globally in a React event calendar — lock events from moving, prevent resizing, or mix rules by event type or role.
- [Drag and Drop Between Calendars](https://demo.mobiscroll.com/react/eventcalendar/drag-drop-between-calendar-instances.md) - Drag and drop events between two side-by-side React event calendar in month view — move events across separate calendars with cross-calendar drag and drop.
- [Blocked Days and Date Ranges](https://demo.mobiscroll.com/react/eventcalendar/blocked-days-ranges.md) - Disable weekends and date ranges in a React event calendar — block dates and drag-and-drop, and choose between strict or permissive validation modes.
- [Double Booking Prevention](https://demo.mobiscroll.com/react/eventcalendar/prevent-double-booking-events.md) - Prevent overlapping events in a React event calendar — block double bookings per event or across all events with in-calendar conflict alerts.
- [Drag-and-Drop Task Presets](https://demo.mobiscroll.com/react/eventcalendar/external-event-presets.md) - Drag preset task templates from an external list onto a React event calendar — a popup form captures task details and technician at drop time.
- [Drag and Drop from External Lists](https://demo.mobiscroll.com/react/eventcalendar/external-drag-drop-sortable-dragula.md) - Drag items from external SortableJS or Dragula lists onto a React event calendar to schedule events — or drag them out to unschedule.

## Resources

- [Resource Filter in Header](https://demo.mobiscroll.com/react/eventcalendar/resource-filtering-in-header.md) - Filter events by resource in the React event calendar using a segmented control in the header — switch people or resources without a filter panel.

## Event data structure

- [Event Data Structure](https://demo.mobiscroll.com/react/eventcalendar/event-data-structure.md) - Define event objects in a React event calendar — set title, start, end, color, recurring rules, per-event drag and resize, and custom fields.
- [Date Format Inputs](https://demo.mobiscroll.com/react/eventcalendar/date-object-ISO-8601-moment.md) - Pass JavaScript Date objects, ISO strings, or Moment.js dates to a React event calendar — see all three supported input formats for event data.
- [Recurring Events](https://demo.mobiscroll.com/react/eventcalendar/recurring-events.md) - Set up daily, weekly, monthly, and yearly recurring events in a React event calendar — configure repeat patterns, stop conditions, and date exclusions.

## Loading events & data sources

- [Inline Events](https://demo.mobiscroll.com/react/eventcalendar/load-inline-data.md) - Populate a React event calendar with events using an inline data array — month view with event labels and overflow popover.
- [Load Events from API](https://demo.mobiscroll.com/react/eventcalendar/load-events-from-remote-api.md) - Load events into a React event calendar from a remote API — pass event data in the correct format to populate the calendar view.
- [Load Events on Demand](https://demo.mobiscroll.com/react/eventcalendar/load-events-on-demand.md) - Fetch React event calendar events in real time as users navigates — load only the data needed for the visible range for a better performance.

## Third party calendar integrations

- [Google Calendar Sync](https://demo.mobiscroll.com/react/eventcalendar/sync-events-google-calendar.md) - Connect Google Calendar to a React event calendar — authenticate users, load events, and sync create, edit, and delete actions to Google Calendar.
- [Outlook Integration](https://demo.mobiscroll.com/react/eventcalendar/sync-events-outlook-calendar.md) - Connect the React event calendar to Outlook via plugin — sign in users, load calendars, and add, edit, or delete events with optional write-back.
- [Public Google Calendar Integration](https://demo.mobiscroll.com/react/eventcalendar/load-events-from-google-calendar.md) - Load events from a public Google Calendar into a React event calendar using the integration plugin — provide your Calendar ID and API key.

## CRUD operations

- [Add, Edit and Delete Events](https://demo.mobiscroll.com/react/eventcalendar/create-read-update-delete-CRUD.md) - Add full event management to a React event calendar — create events by drag or click, edit them in a custom dialog, and delete with undo.
- [Recurring Events Editor](https://demo.mobiscroll.com/react/eventcalendar/recurring-event-add-edit-dialog.md) - Add recurring event management to a React event calendar — use preset daily, weekly, monthly, and yearly rules or a custom recurrence editor.
- [Block Past Event Creation](https://demo.mobiscroll.com/react/eventcalendar/disallow-past-event-creation.md) - Prevent creating or moving events to past dates in a React event calendar — disable past cells, lock past events read-only, and show toast feedback for blocked actions.
- [Bulk Actions](https://demo.mobiscroll.com/react/eventcalendar/event-bulk-actions-edit-delete-update.md) - Multi-select events by keyboard in a React calendar - bulk delete, update, or run custom actions via action panel or right-click context menu.
- [Cut, Copy, Paste Events](https://demo.mobiscroll.com/react/eventcalendar/cut-copy-paste-events-between-calendars.md) - Move events between two React event calendars using cut, copy, paste, and undo — switch calendars.

## Customizing the look & feel

- [Themes and Dark Mode](https://demo.mobiscroll.com/react/eventcalendar/themes-ios-material-windows.md) - Apply iOS, Material, or Windows themes to a React event calendar — toggle light/dark mode or build a custom brand theme with the theme builder.

## Localization & tapping into the lifecycle

- [Localization](https://demo.mobiscroll.com/react/eventcalendar/localization.md) - Localize a React event calendar — switch locales to update date and time formats, button labels, and RTL layout. All settings overridable.
- [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/react/eventcalendar/gregorian-jalali-hijri.md) - Show events in Gregorian, Jalali, or Hijri with the React event calendar — switch between calendar systems to support Persian.
- [Event Hooks](https://demo.mobiscroll.com/react/eventcalendar/event-hooks.md) - See which lifecycle hooks the React event calendar fires on create, drag, hover, and click — interactions are tracked in a live event log.