Syncfusion React Scheduler

The Syncfusion React Scheduler is a comprehensive event calendar component for displaying and managing appointments across multiple views (Day, Week, Month, Timeline, Agenda, Year). It supports drag-and-drop, resize, recurring events, resource grouping, timezone handling, and extensive customization options for building booking systems, schedule managers, and time-tracking applications.

When to Use This Skill

Use this skill when you need to:

Build calendar/scheduling applications - Event management, booking systems, appointment schedulers
Display time-based events - Conferences, meetings, tasks, deadlines across various time intervals
Manage appointments with CRUD operations - Create, read, update, delete events through UI or programmatically
Handle recurring events - Daily, weekly, monthly, yearly patterns with exception dates
Implement resource scheduling - Assign events to multiple resources (rooms, staff, equipment) with grouping
Support multiple views - Day, Week, Work Week, Month, Year, Agenda, Timeline variations
Enable drag-drop scheduling - Intuitive event creation, rescheduling, and time adjustment
Work with timezones - Display events in different timezones for global scheduling
Customize event display - Templates for events, cells, editor, tooltips, and styling
Export/print schedules - Excel export, ICS calendar format, print functionality
Implement accessibility - WCAG-compliant keyboard navigation and screen reader support

Component Overview

The Scheduler component renders a calendar interface with configurable views, appointment management, and rich interaction capabilities. It handles local and remote data sources, supports hierarchical resource grouping, provides customizable event editors, and includes performance optimizations like virtual scrolling for large datasets.

Key Capabilities:

12+ built-in view types (calendar and timeline orientations)
Full CRUD operations with drag-drop and resize
Recurrence patterns with RRULE support
Multi-level resource grouping with color coding
Timezone conversion and localization
Template-based customization for all UI elements
RESTful data binding with DataManager
State persistence and export functionality

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and package dependencies
Basic Scheduler setup with required modules
CSS theme imports and configuration
View injection (Day, Week, Month, Agenda, Timeline)
Initial render with sample appointments
Data source binding basics

Appointments and Events

📄 Read: references/appointments-and-events.md

Normal events (single time period)
Spanned events (multi-day appointments)
All-day events
Recurring events (daily, weekly, monthly, yearly patterns)
CRUD operations (create, update, delete via editor or API)
Event templates and rendering customization
Drag-and-drop event rescheduling
Resize events to adjust duration
Quick popups for rapid event creation

Views and Navigation

📄 Read: references/views-and-navigation.md

Day, Week, Work Week views
Month and Year views
Agenda view (list format)
Timeline views (Day, Week, Month, Year)
Switching between views programmatically
Setting default/current view
View-specific configurations
Custom view intervals and settings
Navigation between dates

Data Binding

📄 Read: references/data-binding.md

Local JSON data array binding
Remote data with DataManager
RESTful service integration
OData and Web API adaptors
Event field mapping
Custom data structure handling
Lazy loading for performance
Data CRUD synchronization

Resources and Grouping

📄 Read: references/resources-and-grouping.md

Resource fields configuration (idField, textField, colorField)
Single and multiple resource assignment
Hierarchical resource grouping (parent-child relationships)
Grouping by resources (vertical columns)
Grouping by dates (horizontal timeline)
Resource color coding for visual distinction
Custom work hours per resource
Expandable/collapsible groups in timeline
Multiple resource selection in event editor

Customization

📄 Read: references/customization.md

Event editor template customization
Cell template customization
Event rendering templates
Quick info popup templates
Tooltip customization
Adding custom fields to editor
Custom validation rules
Context menu customization

Time Configuration

📄 Read: references/time-configuration.md

Timescale intervals and slot configuration
Major/minor slot customization
Timezone support (single and multiple zones)
Working days configuration (weekdays filter)
Working hours (startHour, endHour)
Calendar modes (Gregorian, Islamic)
First day of week setting
Time format (12-hour vs 24-hour)
Date header format customization

Recurrence Editor

📄 Read: references/recurrence.md

Standalone recurrence editor component
Recurrence rules (RRULE format)
Daily recurrence patterns
Weekly recurrence with day selection
Monthly recurrence (by date or day)
Yearly recurrence patterns
Exception dates handling
Edit/delete options for recurring series
Follow events (edit single occurrence vs series)
Recurrence rule validation

Header and Layout

📄 Read: references/header-and-layout.md

Header bar customization (toolbar)
Custom toolbar items and actions
Header rows configuration
Date range display customization
Component dimensions (width, height)
Row auto-height feature
Responsive layout behavior
Mobile-friendly rendering
Cell height configuration

Styling and Theming

📄 Read: references/styling-and-theming.md

Built-in themes (Material, Bootstrap, Tailwind, Fluent, etc.)
CSS customization approaches
Custom CSS classes for events
Cell styling with cssClass
Resource-based styling
Theme Studio integration
Event color customization
Hover and selection states

Accessibility and Localization

📄 Read: references/accessibility-and-localization.md

WCAG 2.0 AA compliance
Keyboard navigation shortcuts
ARIA attributes and roles
Screen reader support
Focus management
High contrast themes
Localization setup (i18n)
RTL (right-to-left) support
Date and time format localization
Custom locale strings and translations

Advanced Features

📄 Read: references/advanced-features.md

State persistence (localStorage/sessionStorage)
Export to Excel (appointments data)
Export to ICS (calendar format)
Print functionality with custom styles
Clipboard operations (cut, copy, paste events)
Virtual scrolling for performance
Read-only mode
Event validation rules
Custom context menu integration
Inline editing capabilities

Quick Start

import * as React from 'react';
import {
  ScheduleComponent,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Inject,
  EventSettingsModel
} from '@syncfusion/ej2-react-schedule';

// Sample appointment data
const appointments: object[] = [
  {
    Id: 1,
    Subject: 'Team Meeting',
    StartTime: new Date(2026, 2, 25, 9, 0),
    EndTime: new Date(2026, 2, 25, 10, 30),
    Location: 'Conference Room A'
  },
  {
    Id: 2,
    Subject: 'Project Review',
    StartTime: new Date(2026, 2, 26, 14, 0),
    EndTime: new Date(2026, 2, 26, 16, 0),
    IsAllDay: false
  }
];

const App = () => {
  const eventSettings: EventSettingsModel = { dataSource: appointments };

  return (
    <ScheduleComponent
      height="550px"
      selectedDate={new Date(2026, 2, 25)}
      eventSettings={eventSettings}
    >
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  );
};

export default App;

Common Patterns

Pattern 1: Resource Scheduling (Multi-Resource Assignment)

import { ScheduleComponent, ResourcesDirective, ResourceDirective, Inject, Day, Week, Month } from '@syncfusion/ej2-react-schedule';

const resources = [
  { text: 'Room A', id: 1, color: '#1aaa55' },
  { text: 'Room B', id: 2, color: '#357cd2' },
  { text: 'Room C', id: 3, color: '#e8115b' }
];

const appointments = [
  {
    Id: 1,
    Subject: 'Conference',
    StartTime: new Date(2026, 2, 25, 10, 0),
    EndTime: new Date(2026, 2, 25, 12, 0),
    RoomId: 1 // Maps to resource
  }
];

const App = () => (
  <ScheduleComponent
    eventSettings={{ dataSource: appointments }}
    group={{ resources: ['Rooms'] }}
  >
    <ResourcesDirective>
      <ResourceDirective
        field="RoomId"
        title="Room"
        name="Rooms"
        dataSource={resources}
        textField="text"
        idField="id"
        colorField="color"
      />
    </ResourcesDirective>
    <Inject services={[Day, Week, Month]} />
  </ScheduleComponent>
);

Pattern 2: Recurring Events with RRULE

const recurringEvent = {
  Id: 1,
  Subject: 'Weekly Standup',
  StartTime: new Date(2026, 2, 24, 9, 0),
  EndTime: new Date(2026, 2, 24, 9, 30),
  RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,WE,FR;INTERVAL=1;COUNT=10'
  // Occurs every Monday, Wednesday, Friday for 10 occurrences
};

Pattern 3: Remote Data Binding

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

const dataManager = new DataManager({
  url: 'https://api.example.com/appointments',
  adaptor: new WebApiAdaptor(),
  crossDomain: true
});

const eventSettings: EventSettingsModel = {
  dataSource: dataManager
};

// Maps response fields to Scheduler fields
const fieldsMapping = {
  id: 'AppointmentId',
  subject: { name: 'Title' },
  startTime: { name: 'Start' },
  endTime: { name: 'End' },
  description: { name: 'Notes' }
};

Pattern 4: Custom Event Template

const eventTemplate = (props: any) => {
  return (
    <div className="template-wrap">
      <div className="subject">{props.Subject}</div>
      <div className="time">
        {props.StartTime.toLocaleTimeString()} - {props.EndTime.toLocaleTimeString()}
      </div>
      {props.Location && <div className="location">📍 {props.Location}</div>}
    </div>
  );
};

<ScheduleComponent eventSettings={{ dataSource: data, template: eventTemplate }}>
  {/* ... */}
</ScheduleComponent>

Key Props and Configuration

Essential Props

Prop	Type	Description
`eventSettings`	EventSettingsModel	Data source, field mappings, templates for appointments
`selectedDate`	Date	Currently displayed date in the scheduler
`currentView`	View	Active view (Day/Week/Month/Agenda/Timeline)
`views`	View[]	Available views to display in header
`group`	GroupModel	Resource grouping configuration
`resources`	ResourcesModel[]	Resource data for scheduling
`timezone`	string	Scheduler timezone (e.g., 'America/New_York')
`startHour`	string	Work day start time (e.g., '08:00')
`endHour`	string	Work day end time (e.g., '18:00')
`workDays`	number[]	Working weekdays (0=Sunday, 6=Saturday)
`timeScale`	TimeScaleModel	Timescale interval and slot configuration
`readonly`	boolean	Disable all editing operations
`height`	string/number	Component height
`width`	string/number	Component width

Important Methods

Method	Description
`addEvent(data)`	Programmatically add single or multiple appointments
`saveEvent(data)`	Update existing appointment
`deleteEvent(id)`	Remove appointment by ID or object
`getEvents(startDate, endDate)`	Retrieve appointments within date range
`getOccurrencesByID(id)`	Get all occurrences of recurring event
`openEditor(data, action)`	Open event editor programmatically
`closeEditor()`	Close event editor
`refresh()`	Re-render scheduler

Key Events

Event	Description
`actionBegin`	Fired before any scheduler action (create/update/delete)
`actionComplete`	Fired after action completes
`actionFailure`	Fired on action failure
`eventClick`	Fired when event is clicked
`cellClick`	Fired when cell is clicked
`cellDoubleClick`	Fired when cell is double-clicked (opens editor)
`dragStart`	Fired when drag operation starts
`dragStop`	Fired when drag operation completes
`resizeStart`	Fired when resize starts
`resizeStop`	Fired when resize completes
`popupOpen`	Fired before popup/editor opens
`popupClose`	Fired before popup/editor closes

Common Use Cases

Meeting Room Scheduler - Resource-based scheduling with room availability and conflict prevention
Doctor Appointment System - Patient booking with recurring appointments and timezone support
Project Timeline Manager - Task scheduling with dependencies and milestone tracking
Employee Shift Planner - Staff scheduling with multiple resources and custom work hours
Event Management System - Conference scheduling with session tracking and agenda views
Classroom Booking - Educational scheduling with recurring class patterns
Service Booking Platform - Appointment scheduling with service provider resources
Court/Facility Reservation - Resource scheduling with time slot management
Maintenance Scheduler - Equipment maintenance tracking with recurring tasks
Conference Room Calendar - Shared resource scheduling with availability visualization

syncfusion-react-scheduler