---
title: "React Scheduler Component — Daily, Weekly & Monthly Views | Mobiscroll"
component: "Scheduler"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/scheduler"
---

# Serious React scheduler with configurable daily, weekly & monthly views

Build daily, weekly, and monthly schedule views with React — multiple resource support, drag-and-drop, and customizable event templates. For React and Next.JS. Last update: Oct 16, 2026

Flexible, configurable for **mobile & desktop web apps** and **Ionic React projects**

## Description

The scheduler features a time grid - **vertically scrollable daily, weekly, monthly and custom views** with built-in resource support, templating and drag & drop.

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, responsiveness and multiple timezones** are supported by all views.

## Setting up the scheduler

- [Mobile Day View](https://demo.mobiscroll.com/react/scheduler/mobile-day-view.md) - View daily schedules in a mobile layout using the React Scheduler — fixed week strip, all-day event row, and a scrollable hourly time grid.
- [Daily View](https://demo.mobiscroll.com/react/scheduler/desktop-day-view.md) - Build a daily scheduler with the React Scheduler — all-day events pinned above a scrollable hourly time grid.
- [Week View on Mobile](https://demo.mobiscroll.com/react/scheduler/mobile-week-view.md) - Show a full week on mobile with the React Scheduler — weekly schedule with all-day and timed events, scrollable time grid, and fixed header.
- [Week View](https://demo.mobiscroll.com/react/scheduler/desktop-week-view.md) - Display a full week in React Scheduler — fixed week header, scrollable time grid, current-time indicator, and event drag & resize.
- [Responsive Day and Week Views](https://demo.mobiscroll.com/react/scheduler/responsive-day-week-schedule.md) - Build a responsive React Scheduler with daily view on small screens, weekly on larger ones — use named breakpoints to control layout at every screen size.
- [Custom Column Widths](https://demo.mobiscroll.com/react/scheduler/customize-scheduler-column-width.md) - Control column widths in a React Scheduler — set fixed or dynamic widths for resource columns or day columns to fit your layout.
- [Print and PDF Export](https://demo.mobiscroll.com/react/scheduler/printing-the-view.md) - Add print support to the React Scheduler — use the print add-on to print the scheduler view or export to PDF via the browser print dialog.

## Common use cases

- [Work Week](https://demo.mobiscroll.com/react/scheduler/work-week-hours.md) - Configure the React Scheduler with blocked break times — set up a business-hours scheduler in one view.
- [Appointment Scheduling](https://demo.mobiscroll.com/react/scheduler/doctors-appointment.md) - Build a React appointment scheduler — assign doctors or dentists, drag from an unscheduled queue, and prevent double-booking.
- [Doctors Availability](https://demo.mobiscroll.com/react/scheduler/doctors-availability-calendar-planner.md) - Display per-doctor availability in React Scheduler — color-coded tracks mark open slots per doctor, automatically respecting working hours.
- [24-Hour Rotating Crew Shift Rota](https://demo.mobiscroll.com/react/scheduler/24-hour-manufacturing-shift-rota-planning.md) - Build a 24-hour rotating crew rota with the React Scheduler — three crews, three shifts, and automatic conflict resolution when shifts move.
- [Drop Assignee on Event](https://demo.mobiscroll.com/react/scheduler/drop-assignee-on-event-from-list.md) - Drag team members from an external list onto existing meetings in the React Scheduler — with visual drop feedback and conflict validation.

## Configuring the view

- [Custom Range View](https://demo.mobiscroll.com/react/scheduler/custom-range-view.md) - Configure the React Scheduler with a custom date range view — let users pick any date span from a header range picker instead of fixed day.
- [Limit Overlapping Events](https://demo.mobiscroll.com/react/scheduler/control-number-of-concurrently-shown-events.md) - Set a max count or auto-fit overlapping events to available space in the React Scheduler — useful for appointment-heavy views.
- [Custom Date Range View](https://demo.mobiscroll.com/react/scheduler/display-multiple-days-weeks.md) - Configure the React Scheduler with a custom range size — set a reference date to control rolling or fixed multi-period paging.
- [Hide All-Day Section](https://demo.mobiscroll.com/react/scheduler/disable-all-day-events.md) - Hide the all-day row in the React Scheduler to show only timed events — ideal for appointment booking, service scheduling, or shift-based views.
- [Color-Coded Time Blocks](https://demo.mobiscroll.com/react/scheduler/colored-cell-background.md) - Highlight recurring time blocks in a React Scheduler — mark lunch breaks, working hours, or special dates, date range, or recurring schedule.
- [Switch Between Calendar and Scheduler Views](https://demo.mobiscroll.com/react/scheduler/switching-calendar-scheduler-agenda.md) - Let users switch between month, week, day, and agenda views within a single React event calendar — via header control or programmatically.
- [Visible hours and days](https://demo.mobiscroll.com/react/scheduler/show-hide-hours-days.md) - Keep your calendar focused. Trim your view. In React, you can show only weekdays and business hours, making schedules cleaner and faster.
- [Multi-Timezone Configuration](https://demo.mobiscroll.com/react/scheduler/setting-the-timezone.md) - Set separate data and display timezones in the React Scheduler — let users switch visible timezones without changing event data.
- [Event Buffer](https://demo.mobiscroll.com/react/scheduler/event-buffer.md) - Add buffer time before or after events in the React Scheduler to visualize travel time, check-in/check-out, loading, or cleanup in the schedule grid.
- [Multiple Timezone Support](https://demo.mobiscroll.com/react/scheduler/multiple-timezone-support.md) - Show the same events in different timezones in the React Scheduler — add a header dropdown to let users switch the display timezone at runtime.
- [Custom Event Order](https://demo.mobiscroll.com/react/scheduler/custom-event-sort.md) - Control the event display order in a React Scheduler — set per-event priorities or a custom sort function to override the default ordering rules.
- [Multi-Timezone](https://demo.mobiscroll.com/react/scheduler/show-multiple-timezones.md) - Show multiple timezone panels side by side in the React Scheduler — set custom labels per track and compare event times across regions.
- [Event Search Sidebar](https://demo.mobiscroll.com/react/scheduler/searching-events-in-sidebar.md) - Add a real-time event search sidebar to the React Scheduler — filter events as you type, with matching results grouped by date in an inline agenda list.
- [External Date Navigation](https://demo.mobiscroll.com/react/scheduler/navigate-view-from-external-calendar.md) - Use a two-pane layout to sync a date picker and React Scheduler — selecting a date navigates the scheduler automatically.

## Templating

- [Custom Event Tooltip](https://demo.mobiscroll.com/react/scheduler/custom-event-tooltip.md) - Show native, custom, or third-party tooltips on React Scheduler event hover — with appointment details and inline actions.
- [Event Rendering](https://demo.mobiscroll.com/react/scheduler/customizing-events.md) - Render custom event cards in the React Scheduler — add color stripes, labels, avatars, action buttons, and travel-time buffers.
- [Custom Date Header](https://demo.mobiscroll.com/react/scheduler/date-header-template.md) - Customize the date headers of the React Scheduler — add custom layouts, labels, and milestone badges to day columns.
- [Resource Headers](https://demo.mobiscroll.com/react/scheduler/custom-resource-header-template.md) - Build a React resource scheduler where each column shows a custom header — add avatar, name, and job title to identify resources at a glance.
- [Cell Content Template](https://demo.mobiscroll.com/react/scheduler/cell-content-template.md) - Add custom content to React Scheduler cells — show icons, badges, colored backgrounds, or status markers based on date, resource, and event data.
- [Custom Header](https://demo.mobiscroll.com/react/scheduler/customizing-header.md) - Customize the React Scheduler header — rearrange navigation controls, add a view-switcher for scheduler/calendar views, and set per-theme control order.

## Drag & drop

- [Drag, Resize and Create Events](https://demo.mobiscroll.com/react/scheduler/move-resize-drag-drop-to-create-events.md) - Control drag-to-create, move, resize, and delete independently in the React Scheduler — set snap interval and mark events as read-only.
- [Drag, Resize & Move Restrictions](https://demo.mobiscroll.com/react/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Restrict drag, resize, and moves per event, per resource, or globally in the React Scheduler — fix length, lock time, or block cross-resource moves.
- [Instance Event Transfer](https://demo.mobiscroll.com/react/scheduler/drag-drop-between-calendar-instances.md) - Move events between two React Scheduler instances with drop — reassign appointments, tasks, or shifts across separate weekly scheduling views.
- [Blocked Time Ranges](https://demo.mobiscroll.com/react/scheduler/time-off-blocked-ranges.md) - Block weekends, holidays, and lunch breaks in the React Scheduler using recurring unavailable ranges — choose strict or start-end validation.
- [Prevent Double Booking](https://demo.mobiscroll.com/react/scheduler/prevent-double-booking-events.md) - Use the React Scheduler to block event overlaps per event, per resource, or globally — with toast notifications when a conflict is blocked.
- [External Drag and Drop](https://demo.mobiscroll.com/react/scheduler/external-drag-drop-sortable-dragula.md) - Connect SortableJS or Dragula lists to the React Scheduler — drag items in to schedule events and drag events out to unschedule them.
- [External Task Presets](https://demo.mobiscroll.com/react/scheduler/external-event-presets.md) - Drag task templates from an external list onto the React Scheduler — schedule, assign a technician in a popup, and block drops on restricted slots.

## Resources

- [Multi-Resource View](https://demo.mobiscroll.com/react/scheduler/resource-view.md) - Show multiple resources — people, rooms, or equipment — side by side in a React Scheduler weekly view.
- [Group by Resource or Date](https://demo.mobiscroll.com/react/scheduler/group-by-resource-by-day.md) - Show resources as the primary group in a React Scheduler and toggle between resource and date grouping using the built-in segmented control.
- [Multi-Resource Shared Events](https://demo.mobiscroll.com/react/scheduler/shared-events-across-resources.md) - Schedule event across multiple resources in the React Scheduler — for shared work calendars, mixed resource types like instructor and aircraft.
- [Dynamic Resource Filtering](https://demo.mobiscroll.com/react/scheduler/dynamic-add-remove-resources-filter.md) - Show or hide resources in a React Scheduler at runtime using a checklist — filter people, teams, or rooms without changing event data.
- [Dynamic Resource Widths](https://demo.mobiscroll.com/react/scheduler/dynamic-content-based-resource-width.md) - Adapt React Scheduler resource column widths dynamically — assign per-resource CSS classes so each column fits its header content.
- [Multi-Resource Configuration](https://demo.mobiscroll.com/react/scheduler/resource-data-structure.md) - Configure multiple resources in a React Scheduler — assign ID, name, and color, and set per-resource rules for event drag, resize, and overlap.
- [Hide Resources](https://demo.mobiscroll.com/react/scheduler/hide-non-working-resources.md) - Show only available staff in a React Scheduler — hide resource columns for days when staff are off, with support for recurring.

## Event data structure

- [Event Data Structure](https://demo.mobiscroll.com/react/scheduler/event-data-structure.md) - Define event data in the React Scheduler — set base fields, recurring rules, resource links, drag/resize controls, and buffer times.
- [Date Input Formats](https://demo.mobiscroll.com/react/scheduler/date-object-ISO-8601-moment.md) - Use JS date objects, ISO 8601 strings, or Moment.js objects as date input in the React Scheduler for events, colors, and labels.
- [Recurring Events](https://demo.mobiscroll.com/react/scheduler/recurring-events.md) - Add recurring events to the React Scheduler — configure daily, weekly, monthly, or yearly rules with RRULE string support.

## Loading events & data sources

- [Inline Data](https://demo.mobiscroll.com/react/scheduler/load-inline-data.md) - Pass a static event array to the React Scheduler to see how event data is structured — before connecting a live or on-demand data source.
- [Load Events from Remote API](https://demo.mobiscroll.com/react/scheduler/load-events-from-remote-api.md) - Populate a React Scheduler from a remote API — fetch from your backend or third-party source and pass data in the format the scheduler expects.
- [Load Events on Demand](https://demo.mobiscroll.com/react/scheduler/load-events-on-demand.md) - Fetch React scheduler events as users navigate between dates — use a lifecycle callback to load only the visible date range from a remote or local source.
- [Lazy Load Events on Scroll](https://demo.mobiscroll.com/react/scheduler/load-events-on-scroll.md) - Load React scheduler events on demand as users scroll — fetch only the visible date range to keep performance fast with large event counts.
- [Large Dataset Performance](https://demo.mobiscroll.com/react/scheduler/loading-big-data-sets.md) - See how the React Scheduler handles large data sets— virtual scrolling keeps 20 resources and 2,000 events smooth on mobile and desktop.

## Third party calendar integrations

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

## CRUD operations

- [Create, Edit and Delete Events](https://demo.mobiscroll.com/react/scheduler/create-read-update-delete-CRUD.md) - Implement full event CRUD in a React Scheduler — drag or click to create events, confirm via a custom dialog, then drag to move, resize, or delete.
- [Bulk Event Actions](https://demo.mobiscroll.com/react/scheduler/event-bulk-actions-edit-delete-update.md) - Add bulk event actions to React Scheduler — select multiple events via shortcuts or select-all, apply bulk actions, and use right-click for per-event actions.
- [Recurring Event Add & Edit](https://demo.mobiscroll.com/react/scheduler/recurring-event-add-edit-dialog.md) - Add a recurrence editor to a React Scheduler add/edit dialog — with daily, weekly, monthly, and custom presets plus an RRULE builder.
- [Prevent Past Event Creation](https://demo.mobiscroll.com/react/scheduler/disallow-past-event-creation.md) - Block event creation and editing on past dates in the React Scheduler — past dates are blocked, past events are locked, and failed attempts show a toast.

## Customizing the look & feel

- [CSS Classes for Cell Colors and Blocked Times](https://demo.mobiscroll.com/react/scheduler/colors-invalids-css-class.md) - Apply custom CSS classes to color-code React Scheduler cells and style blocked times - add patterns or backgrounds for days or periods.
- [Resource Filtering in Header](https://demo.mobiscroll.com/react/scheduler/resource-filtering-in-header.md) - Add a segmented resource filter to the React Scheduler header — place it between navigation buttons to let users switch resources inline.
- [Themes — iOS, Material & Windows](https://demo.mobiscroll.com/react/scheduler/themes-ios-material-windows.md) - Preview iOS, Material, and Windows themes on the React Scheduler — toggle light/dark mode, customize colors with the theme builder, or use CSS overrides.
- [Resource Background Styling](https://demo.mobiscroll.com/react/scheduler/resource-background.md) - Color-code resources in a React Scheduler with custom backgrounds and CSS classes — style headers, all-day areas, and grid columns per resource.
- [Cell Hover Summary Tooltip](https://demo.mobiscroll.com/react/scheduler/show-cell-summary-on-hover.md) - Show a per-cell summary tooltip in the React Scheduler — hover over any schedule cell to display event count, invalid slots, and color ranges.

## Localization & tapping into the lifecycle

- [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/react/scheduler/gregorian-jalali-hijri.md) - Switch the React Scheduler between Gregorian, Jalali, and Hijri calendar systems — locale and language packs load automatically.
- [Event Hooks](https://demo.mobiscroll.com/react/scheduler/event-hooks.md) - Explore React Scheduler lifecycle hooks — see which callbacks fire on event click, init, or date change in the live event log.
- [Localization](https://demo.mobiscroll.com/react/scheduler/localization.md) - Add multi-language support to the React Scheduler — 37 locales, RTL layout, and localized date/time formats, with all settings manually overridable.