React Event calendar
Updated on Oct 30, 2026
Build an interactive event calendar in React with recurring events, custom labels, day popovers and event editing. Combine calendar views with your application's event data, components and state.
Loading the live demo...
Use native React components and props to build a calendar experience inside your application.
Mobiscroll Event Calendar displays scheduled events inside a calendar grid, including week, month and year layouts. The Calendar view is one of four views of the Event Calendar component: Calendar, Scheduler, Timeline and Agenda. Each shows the same kinds of event data in a different way. Use the Calendar view when people need a date-based overview; add a Scheduler, horizontal Timeline or Agenda list when the workflow needs a different perspective.
Available for
Show weeks, months, quarters or years, choose how events appear on each date and adapt the calendar between desktop and mobile layouts.
Display scheduled items directly in calendar cells, open a list when a day contains more events than fit, and customize event labels, headers and details.
Enable creation, moving and resizing where the workflow needs it. Connect event interactions and restrictions to your application's rules and data.
Give coding assistants current, framework-specific Event Calendar API context through Mobiscroll's MCP server, agent skills and AI-readable examples.
Install the Mobiscroll CLI once, then configure the React package. The CLI sets up access to the private npm registry and installs Mobiscroll.
npm install -g @mobiscroll/cli
mobiscroll config reactUse the native React Eventcalendar component with a month calendar and event labels:
import { Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
const today = new Date();
const onDay = (day, hour = 9) => new Date(
today.getFullYear(), today.getMonth(), day, hour
);
const view = { calendar: { type: 'month', labels: true } };
const events = [
{ id: 1, title: 'Team planning', start: onDay(5), end: onDay(5, 10) },
{ id: 2, title: 'Customer appointment', start: onDay(12), end: onDay(12, 11) },
{ id: 3, title: 'Training session', start: onDay(19), end: onDay(19, 12) }
];
export default function App() {
return <Eventcalendar view={view} selectedDate={today} data={events}
dragToCreate={true} dragToMove={true} dragToResize={true} />;
}Use React state and callbacks for interactive edits or API updates. See the React installation guide and Calendar view documentation.
The starter example displays a month with event labels that you can create, move and resize by dragging. For responsive calendar-and-agenda combinations or custom event design, explore a demo below and reuse its tested implementation.
An event calendar is useful when users need to understand scheduled activities in the context of dates: which days are busy, what events are coming up and where they can act. Build the experience around your data and workflows rather than treating the calendar as a standalone business application.
The Calendar view brings together date navigation, event display and editing in a configurable grid. Start with a month or week calendar, then add the event rendering, filters, controls and data connections that fit your application. Scheduler, Timeline and Agenda remain available as other views of the same Event Calendar component.
Display a compact week, a full month or broader multi-month and annual overviews. Configure the number of visible weeks or months and provide navigation between ranges (week and month calendar, quarter and year layouts).
Display event labels inside day cells, limit the labels to available space or show all labels with expanding rows. When a day has more events than fit, offer a popover that lists the remaining items (calendar event labels, label limits and more, event popovers).
Represent events with recurrence rules, all-day activities and schedules spanning multiple dates. Add an event editor for recurring series and individual occurrences if your workflow needs it (event recurrence, recurring event editor).
Enable creating, moving, resizing and deleting events where appropriate, and connect those actions to application data. Use a custom edit form for details that the calendar grid alone cannot capture (drag and drop, add, edit and delete).
Restrict changes for particular events, users or date ranges. Mark unavailable days and apply UI checks for overlaps or past dates, while leaving authoritative validation and concurrent-booking checks to your application (editing permissions, blocked dates, past-date restrictions).
Customize the visual content of event labels, day cells, header controls and detail popovers. Highlight dates with colors or show day-level summaries to make the calendar meaningful in your domain (custom labels, colored dates, day summaries).
Use the Calendar view on its own, place an Agenda beneath it for an event list, or switch to the time-grid Scheduler or resource Timeline for detailed planning. The view configuration lets you reuse the Event Calendar component across different screens (combining Event Calendar views, switching calendar views).
Navigate between calendar ranges, connect an external date-selection control, add an event-search interface and filter the displayed events by resource. These patterns help users reach a specific event without scrolling through unrelated dates (date navigation, event search, resource filter).
Pass events directly from your application, load them from a remote API or request additional records as the displayed date range changes. Respond to lifecycle callbacks to keep the UI aligned with your data (inline data, remote API, load on demand).
Display event dates and times in your selected time zone, support localization and use the documented Gregorian, Jalali and Hijri calendar systems where needed (time-zone configuration, localized calendar, calendar systems).
Change the calendar presentation between smaller and larger screens. Use a compact calendar with an event list on mobile and a label-rich month grid on desktop, while keeping touch interaction available (mobile month view, desktop month view, responsive calendar).
Mobiscroll provides keyboard navigation, WAI-ARIA labels and screen-reader support and is largely aligned with WCAG 2.2 A and AA. Full AA compliance is not claimed. Provide an accessible alternative to drag-and-drop actions when they are essential, and consult the Event Calendar accessibility documentation and WCAG support details.
Choose an iOS, Material or Windows theme and adapt visual styles to your application. Printing the calendar or exporting a printable document uses the print module where it is included in the applicable license (printing example, printing documentation).
Mobiscroll provides AI Tooling for teams creating event calendars with coding assistants. The hosted MCP server supplies version-aware API information, while agent skills and AI-readable documentation help assistants choose the right Event Calendar views, event data structure and interaction callbacks. The goal is to make implementation more accurate while leaving your application in control of its requirements.
For React, build with the native Eventcalendar component, props and state rather than a generic widget wrapper. Example request: "Build a React event calendar with week/month switching, recurring bookings and custom event labels. Use the current Mobiscroll API and show how edits update React state."
See the AI Tooling guide for MCP server and coding-agent setup. Give the assistant the Calendar view documentation and an existing demo as implementation context, then test the generated behavior.
Browse React Event Calendar examples for responsive layouts, event editing, recurrence, templates and remote data. Start from the closest live example and connect it to your React state and application APIs.
For a quick start, see desktop calendar labels, drag-and-drop editing or event CRUD.
Mobile Month View React event calendar month view paired with a synchronized agenda - sticky day headers, tap-to-navigate, and mobile-first layout. 
Desktop Month View 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 Behaviour 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 Print only the calendar view - not the full page - or export it to PDF with the React event calendar print add-on. 
Event Labels 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 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 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 Set independent data and display timezones in the React event calendar - configure event storage format. 
Multiple Timezones 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 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 Add real-time event search to a React event calendar - display filtered results in a sidebar panel, grouped by date, with click-to-navigate. 
Week and Month View 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 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 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 Color day-cell backgrounds in a React event calendar - mark exact or recurring dates or date ranges as visual highlights for holidays and special days. 
Switch Day, Week and Month Views 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 Use a React event calendar with an external date picker in two-pane layout - date selection navigates the calendar and keeps both in sync. 
Custom Label Styling Fully customize event labels in the React event calendar - set colors, show timed-event dots, and include custom fields beyond the event title. 
Custom Event Popover 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 Customize the React event calendar header - rearrange navigation controls, toggle calendar/scheduler views or add any custom action. 
Custom Event Tooltip 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 Show an "Add event" button on day cell hover in a React event calendar - reveal event creation without cluttering the calendar interface. 
Drag, Move & Resize Enable or disable move, resize, drag-to-create, and click-to-create independently per event or globally in the React event calendar. 
Drag and Drop Permissions Set move and resize permissions per event or globally in the React event calendar - lock events in time, prevent resizing, or mix rules. 
Drag and Drop Between Calendars 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 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 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 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 Drag items from external SortableJS or Dragula lists onto a React event calendar to schedule events - or drag them out to unschedule. 
Event Data Structure 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 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 Set up daily, weekly, monthly, and yearly recurring events in a React event calendar - configure repeat patterns, stop conditions, and date exclusions. 
Inline Events Populate a React event calendar with events using an inline data array - month view with event labels and overflow popover. 
Load Events from API 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 Fetch React event calendar events in real time as users navigate - load only the data needed for the visible range for better performance. 
Google Calendar Sync Connect Google Calendar to a React event calendar - authenticate users, load events, and sync create, edit, and delete actions to Google Calendar. 
Outlook Integration 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 Load events from a public Google Calendar into a React event calendar using the integration plugin - provide your Calendar ID and API key. 
Add, Edit and Delete Events 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 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 Keep past dates read-only in a React event calendar - block creation and editing on past days and show toast feedback on failed attempts. 
Bulk Actions 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 Transfer events between two React event calendars with cut, copy, paste, and undo - using keyboard shortcuts or a right-click menu. 
Localization Localize a React event calendar - switch locales to update date and time formats, button labels, and RTL layout. 
Gregorian, Jalali & Hijri Show events in Gregorian, Jalali, or Hijri with the React event calendar - switch calendar systems to support Persian, Farsi and Arabic. 
Event Hooks See which lifecycle hooks the React event calendar fires on create, drag, hover, and click - interactions are tracked in a live event log. The Event Calendar works with event records supplied by your own application, whether they come from inline data or a backend API. You can use every calendar view without connecting external calendars.
Need to connect your users' calendars? Mobiscroll Connect is a separate calendar connectivity product for Google Calendar, Outlook, Apple Calendar and CalDAV, with account connection, normalized data and synchronization. Mobiscroll Connect is sold separately and is not required for Event Calendar.
An event calendar displays scheduled items on dates in a calendar grid, typically in week or month layouts. Mobiscroll's Calendar view supports event labels, day popovers, recurrence, custom rendering and event editing inside an application.
They are views of the same Mobiscroll Event Calendar component, but they present information differently. Calendar is the date grid; Scheduler is a vertical time grid; Timeline is a horizontal time axis with resources as rows; Agenda is a chronological event list. Choose the view that fits the task, or combine them (Event Calendar overview).
An event calendar displays and manages scheduled events, while a date-selection input lets people choose dates or times in a form. Mobiscroll provides both types of component for different application tasks.
Yes. Configure view.calendar with type: 'month' and labels: true to display events directly in day cells. Overflowing labels can open a day popover (labels example, more-label behavior).
Yes. Enable drag creation, moving and resizing as appropriate and handle edits using your application's data and validation (drag and drop example).
Yes. Event Calendar supports recurring events, all-day events and events spanning dates, with patterns for editing series and occurrences (recurring events example).
Yes. Calendar and Agenda are views of the same Event Calendar component and can be combined so date selection controls the event list (combined views).
Yes. Supply data from your API to the component, load events as the displayed range changes and use callbacks to send edits back to your application (on-demand event loading).
No. Event Calendar supplies configurable event views and UI restrictions. Your application is responsible for data storage, permissions and authoritative rules for concurrent bookings.
Mobiscroll supports keyboard navigation and screen readers and is largely aligned with WCAG 2.2 A and AA, but not yet fully AA compliant. Your application must also provide accessible alternatives for essential drag-and-drop actions; see accessibility support details.
No. It is commercially licensed, with a free trial for evaluation. Compare Mobiscroll UI licenses.
No. Mobiscroll's framework packages are distributed through a private registry. The public CLI configures the registry and installs the package; see the Getting started instructions above.
Yes. The AI Tooling guide describes Mobiscroll's version-aware MCP server, agent skills and AI-readable references. Always validate generated implementations against the app's requirements.
No. Mobiscroll Connect is separately sold and optional for integrating users' external calendar accounts; Event Calendar can work entirely with your own event data.
Yes. Calendaring for SaaS is offered for software delivered to multiple customers, separately from licenses for internal projects (see pricing).
React 17 through React 19. See the React installation guide.
Yes. The Next.js guide covers setup.
No. Mobiscroll's React components run in React web apps, not React Native.
Event Calendar is part of Mobiscroll UI. Choose an internal-project license for applications used within your organization or Calendaring for SaaS for software delivered to multiple customers. Optional modules, including printing, depend on the license. Compare Mobiscroll UI licenses.
Start with a working calendar example, install Mobiscroll for your framework and customize the views, event labels and interactions for your application's users. Explore the demo gallery or use the AI Tooling guide to help an AI coding assistant adapt a verified example.
A standalone JavaScript library with no framework dependency, for bundled apps and plain web pages.
Every Mobiscroll component is available the jQuery way, initialized on a jQuery selection.
Native Angular components, not wrappers, that use Angular's own rendering and change detection.
Native Vue 3 components, not wrappers, that use Vue's rendering and reactivity model.
You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.
If you need to invite team members, manage seats and accounts you can do it from the licenses page.
We noticed you are logged in on a different machine and have closed your old session.
If you need to invite team members, manage seats and accounts you can do it from the licenses page.
