syncfusion-javascript-scheduler

Implementing Syncfusion TypeScript Scheduler

A comprehensive skill for implementing the Syncfusion EJ2 TypeScript Schedule (Scheduler) component — a full-featured calendar and appointment management UI supporting multiple views, recurring events, resource grouping, drag-and-drop, inline editing, and data export.

When to Use This Skill

• Setting up and initializing the Scheduler in a TypeScript project
• Configuring calendar views (Day, Week, WorkWeek, Month, Year, Agenda, Timeline variants)
• Binding local or remote appointment data to the Scheduler
• Implementing CRUD (create, read, update, delete) for events
• Working with recurring events and the RecurrenceEditor
• Configuring multiple resources and grouped views
• Customizing the event editor popup or quick info templates
• Exporting Scheduler data to Excel, CSV, or iCalendar (.ics)
• Handling timezones for global user bases
• Styling, theming, and accessibility compliance

---

Documentation and Navigation Guide

Getting Started & Module Injection

📄 Read: references/getting-started.md

• Package dependencies and npm installation
• CSS imports and theme configuration
• Module injection with Schedule.Inject()
• Initializing the Scheduler and appending to DOM
• Populating appointments with eventSettings.dataSource
• Setting selectedDate and currentView
• Individual per-view configuration with views array

Views Configuration

📄 Read: references/views.md

• All 12 view types and their module requirements
• Per-view options (startHour, endHour, timeScale, showWeekend, etc.)
• Extended views using interval and displayName
• Timeline view orientations and Agenda view options

Appointments & Recurring Events

📄 Read: references/appointments.md

• Normal, spanned, all-day, and recurring event types
• iCal RecurrenceRule string syntax (FREQ, BYDAY, COUNT, UNTIL, etc.)
• Recurrence exceptions and editing individual/following occurrences
• Built-in event fields reference table
• Custom field mapping via eventSettings.fields
• Preventing overlaps with allowOverlap, custom ordering with sortComparer

Data Binding

📄 Read: references/data-binding.md

• Local JSON array binding via eventSettings.dataSource
• Remote binding with DataManager and ODataV4Adaptor
• AJAX loading pattern using ej2-base Ajax
• Server-side date range filtering with includeFiltersInQuery
• Passing query parameters with eventSettings.query
• Google Calendar API integration via dataBinding event

CRUD Actions

📄 Read: references/crud-actions.md

• Creating events via editor, quick popup, or addEvent() method
• Updating and deleting with saveEvent() and deleteEvent()
• Server-side CRUD using UrlAdaptor + crudUrl
• Field validation with validation property (required, regex)
• actionBegin / actionComplete lifecycle events
• Enabling read-only mode

Editor Template & Quick Info

📄 Read: references/editor-template.md

• Customizing default editor fields via popupOpen
• Full editor replacement with editorTemplate
• editorHeaderTemplate and editorFooterTemplate
• Custom quick info popups with quickInfoTemplates
• showQuickInfo toggle and closeEditor() method
• Custom timezone dropdown via timezoneDataSource

Resources & Grouping

📄 Read: references/resources.md

• Defining resources with resources property and field mappings
• Single and multi-level grouping via group.resources
• Date-based grouping with group.byDate
• allowMultiple for multi-resource event assignment
• Resource-specific working hours, colors, and CSS classes
• Expandable resource rows in Timeline views

Working Days, Hours & Timescale

📄 Read: references/working-days-timescale.md

• workDays, showWeekend, showWeekNumber, firstDayOfWeek
• workHours highlight, start, and end configuration
• startHour / endHour for visible time range
• timeScale with interval and slotCount
• Major/minor slot templates
• scrollTo() for programmatic time scroll

Cell, Header & View Customization

📄 Read: references/cell-header-customization.md

• cellTemplate with elementType conditions
• renderCell event for targeted cell modifications
• cellHeaderTemplate for Month view date headers
• Header bar: showHeaderBar, toolbarItems, dateHeaderTemplate
• Timeline headerRows property for Year/Month/Week/Date/Hour rows
• minDate / maxDate for date range restrictions

Exporting & Printing

📄 Read: references/exporting.md

• exportToExcel() with ExportOptions (fileName, fields, customData, etc.)
• CSV export via exportType: 'csv'
• excelExport event for pre-export customization
• exportToICalendar() to .ics format
• importICalendar() from a file Blob
• print() method with beforePrint event

Timezone Handling

📄 Read: references/timezone.md

• timezone property (IANA timezone string)
• Per-event StartTimezone / EndTimezone fields
• Timezone utility class: offset(), convert(), add(), remove()
• Customizing the timezone dropdown with timezoneData
• UTC mode for global/multi-region teams

Recurrence Editor

📄 Read: references/recurrence-editor.md

• Standalone RecurrenceEditor component setup
• frequencies and endTypes property configuration
• change event for getting generated rule string
• setRecurrenceRule() and getRecurrenceDates() methods

Styling & Theming

📄 Read: references/scheduler-styling.md

• CSS class selector reference for all Scheduler elements
• View-scoped selectors (.e-vertical-view, .e-month-view, etc.)
• State classes: selected cells, selected appointments
• Resource row selectors for Timeline views
• Block and read-only appointment styles

Advanced Features

📄 Read: references/advanced-features.md

• Context menu integration with ContextMenu
• Clipboard: allowClipboard, cut(), copy(), paste(), beforePaste event
• Virtual scrolling with allowVirtualScrolling and enableLazyLoading
• rowAutoHeight for Timeline and Month views
• State persistence with enablePersistence
• Islamic/Hijri calendar via calendarMode: 'Islamic'
• Scheduler dimensions: height and width
• Accessibility, WCAG 2.2, keyboard shortcuts

---

Quick Start

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

// Inject required view modules
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    currentView: 'Week',
    eventSettings: {
        dataSource: [
            {
                Id: 1,
                Subject: 'Team Meeting',
                StartTime: new Date(2018, 1, 15, 10, 0),
                EndTime: new Date(2018, 1, 15, 12, 0)
            }
        ]
    }
});
scheduleObj.appendTo('#Schedule');

/* In styles.css */
@import '../../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-calendars/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-schedule/styles/fluent2.css';

---

Common Patterns

Pattern 1: Switch to Month View with Weekend Hidden

import { Schedule, Month } from '@syncfusion/ej2-schedule';

Schedule.Inject(Month);
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    currentView: 'Month',
    showWeekend: false,
    eventSettings: { dataSource: [...] }
});
scheduleObj.appendTo('#Schedule');

Pattern 2: Custom Field Names

let scheduleObj: Schedule = new Schedule({
    height: '550px',
    eventSettings: {
        dataSource: myData,
        fields: {
            id: 'EventId',
            subject: { name: 'Title' },
            startTime: { name: 'From' },
            endTime: { name: 'To' },
            isAllDay: { name: 'AllDay' }
        }
    }
});
scheduleObj.appendTo('#Schedule');

Pattern 3: Programmatic Event Creation

let eventData: Object = {
    Id: 10,
    Subject: 'New Event',
    StartTime: new Date(2018, 1, 15, 14, 0),
    EndTime: new Date(2018, 1, 15, 16, 0)
};
scheduleObj.addEvent(eventData);

Pattern 4: Resource-Grouped Timeline

import { Schedule, TimelineViews } from '@syncfusion/ej2-schedule';

Schedule.Inject(TimelineViews);
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    currentView: 'TimelineWeek',
    group: { resources: ['Rooms'] },
    resources: [{
        field: 'RoomId',
        title: 'Room',
        name: 'Rooms',
        dataSource: [
            { RoomText: 'Room 1', Id: 1, RoomColor: '#cb6bb2' },
            { RoomText: 'Room 2', Id: 2, RoomColor: '#56ca85' }
        ],
        textField: 'RoomText',
        idField: 'Id',
        colorField: 'RoomColor'
    }],
    eventSettings: { dataSource: [...] }
});
scheduleObj.appendTo('#Schedule');

---

Key Properties Reference

Property	Type	Description
height	string	Scheduler height ('550px', '100%', 'auto')
width	string	Scheduler width
selectedDate	Date	Currently displayed date
currentView	string	Active view name
views	ViewsModel[]	Per-view configuration array
eventSettings	EventSettingsModel	Data source and field mappings
group	GroupModel	Resource grouping configuration
resources	ResourcesModel[]	Resource definitions
workDays	number[]	Days of week to show (0=Sun–6=Sat)
workHours	WorkHoursModel	Work hour highlight and range
showWeekend	boolean	Show/hide Saturday and Sunday
timezone	string	IANA timezone string for display
enablePersistence	boolean	Persist state in localStorage
readonly	boolean	Disable all CRUD interactions
allowClipboard	boolean	Enable cut/copy/paste for events