syncfusion-aspnetcore-scheduler

Implementing ASP.NET Core Scheduler

The Syncfusion ASP.NET Core Scheduler is a comprehensive component for managing appointments, events, and schedules. It provides rich functionality for creating calendar-based applications with support for multiple views, resources, recurring events, and extensive customization options.

When to Use This Skill

• Appointment Management: Creating, editing, and deleting calendar appointments
• Multi-User Scheduling: Implementing resource scheduling for multiple users or resources
• Calendar Views: Displaying events in day, week, month, timeline, or agenda formats
• Recurring Events: Managing repeating appointments with complex recurrence rules
• Data Integration: Binding local or remote data sources to the Scheduler
• Custom Templates: Customizing event appearance and templates
• Working Hours: Configuring business hours, working days, and timezones
• Event Operations: Drag-and-drop rescheduling, resizing, and inline editing

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and NuGet package setup
• Adding Tag Helper and script resources
• Registering Script Manager
• Basic Scheduler initialization
• Populating appointments and setting default date/view

Appointment Management

📄 Read: references/appointments.md

• Appointment data structure and field mapping
• Creating normal, all-day, spanned, and recurring events
• Appointment properties (Id, Subject, StartTime, EndTime, Location, Description)
• Recurring appointments and recurrence rules
• Exception handling for recurring events
• Drag-and-drop and inline editing

CRUD Operations

📄 Read: references/crud-operations.md

• Adding appointments (editor window, addEvent method, server-side insertion)
• Editing appointments (saveEvent method, normal and recurring events)
• Deleting appointments (deleteEvent method, handling series vs occurrences)
• Handling conflicts and validation
• Server-side database operations
• Batch operations for multiple changes

Clipboard Actions

📄 Read: references/clipboard-actions.md

• Enabling clipboard support with allowClipboard property
• Cut, copy, and paste operations using Scheduler methods
• Cross-view and cross-Scheduler clipboard operations

Virtual Scrolling

📄 Read: references/virtual-scrolling.md

• Enabling allowVirtualScrolling on Month and TimelineMonth views
• Generating large event and resource datasets for performance testing

Print, Excel Export, and iCalendar (ICS)

📄 Read: references/export-print.md

• Printing the Scheduler with default or custom height, width, and selected date
• Exporting appointments to Excel with customized field mappings
• Exporting appointments to an iCalendar (.ics) file
• Importing appointments from an iCalendar (.ics) file via the Uploader

Views and Configuration

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

• Available view types (Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, Timeline views)
• Setting currentView and switching between views
• View-specific configurations using e-schedule-views
• Customizing start/end hours, working days, timescales
• Date format and weekend display settings
• Max event stack configuration to limit visible events per cell

Scheduling Features

📄 Read: references/scheduling-features.md

• Timescale configuration (interval and slot count)
• Working days and business hours setup
• Timezone support (IANA timezones)
• Recurrence patterns (RFC 5545 format)
• Resource configuration and grouping
• Row auto height for timeline and month views
• Adaptive UI for responsive layouts
• Complete scheduling configuration example

Data Binding

📄 Read: references/data-binding.md

• Local data binding with DataSource
• Remote data binding with ODataV4Adaptor
• Custom adaptor creation
• Query parameters and filters
• AJAX data loading
• CRUD action configuration with UrlAdaptor
• Google Calendar integration

Resources and Grouping

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

• Overview of resource scheduling patterns
• Single and multi-resource scheduling
• Resource grouping, color metadata, and working hours
• Timeline views and remote resource binding

Customization and Templates

📄 Read: references/customization.md

• Event templates and cell templates
• Event customization using eventRendered event
• Date Header templates
• Quick Info templates
• CSS class customization
• Tooltip templates and display options
• Custom editor window configuration
• Overlapping event prevention

Advanced Features

📄 Read: references/advanced-features.md

• Resource grouping and multi-resource scheduling
• Timezone support and conversion
• State persistence
• Localization and accessibility
• Inline appointment editing
• Read-only mode and appointment blocking
• Rate Limiting Guidance
• Timezone Validation
• Role-based Authorization Examples

Quick Start Example

<!-- _Layout.cshtml -->
<head>
    <!-- refer syncfusion theme -->
    <!-- refer syncfusion script -->
</head>
<body>
    <!-- Scheduler will render here -->
    <ejs-scripts></ejs-scripts>
</body>

<!-- Index.cshtml -->
@addTagHelper *, Syncfusion.EJ2

<ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2024, 3, 28)" currentView="Week">
    <e-schedule-eventsettings dataSource="ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

// Controller
public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewBag.datasource = new List<AppointmentData>
        {
            new AppointmentData { 
                Id = 1, 
                Subject = "Meeting", 
                StartTime = new DateTime(2024, 3, 28, 9, 0, 0),
                EndTime = new DateTime(2024, 3, 28, 10, 0, 0)
            }
        };
        return View();
    }
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

Common Patterns

Adding Events Programmatically

// Use addEvent method to create appointments
<script>
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.addEvent({
    Id: 2,
    Subject: 'New Meeting',
    StartTime: new Date(2024, 2, 28, 10, 0),
    EndTime: new Date(2024, 2, 28, 11, 0)
});
</script>

Handling CRUD Operations

// Server-side in DataManager with CrudUrl
var dataManager = new DataManager() {
    Url = "Home/GetData",
    Adaptor = "UrlAdaptor",
    CrudUrl = "Home/UpdateData",
    // Configure server-side CORS with explicit allowed origins rather than relying on a client-side CrossDomain flag.
};

Creating Recurring Events

// RecurrenceRule follows iCalendar (RFC 5545) format
new AppointmentData {
    Id = 1,
    Subject = "Daily Standup",
    StartTime = new DateTime(2024, 3, 28, 9, 0, 0),
    EndTime = new DateTime(2024, 3, 28, 9, 30, 0),
    RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=10"
}

Configuring Multiple Views

<ejs-schedule id="schedule" currentView="Week">
    <e-schedule-views>
        <e-schedule-view option="Day"></e-schedule-view>
        <e-schedule-view option="Week"></e-schedule-view>
        <e-schedule-view option="Month"></e-schedule-view>
        <e-schedule-view option="TimelineDay"></e-schedule-view>
    </e-schedule-views>
</ejs-schedule>

Key Properties and Events

Core Scheduler Properties

• currentView: Active view type (Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, TimelineYear)
• selectedDate: Current date displayed on Scheduler
• readonly: Disables all CRUD operations when true
• allowDragAndDrop: Enables drag-and-drop (default: true)
• allowResizing: Enables event resizing (default: true)
• allowMultiDrag: Enables dragging multiple events simultaneously
• allowInline: Enables inline editing of event subject
• allowOverlap: Prevents overlapping events when false
• allowClipboard: Enables clipboard support (cut, copy, paste) on the Scheduler (default: false).
• rowAutoHeight: Auto-adjusts work cell height to fit all appointments in the same time range (applies to timeline views and month view)
• enableAdaptiveUI: Enables adaptive (responsive) layout for smaller screens
• height and width: Dimension settings
• cssClass: Custom CSS class for styling

Event Settings Properties

• dataSource: Binds appointment data (array or DataManager)
• template: Custom template for event display
• enableTooltip: Shows tooltip for appointments
• tooltipTemplate: Customizes tooltip content
• enableMaxHeight: Events occupy full cell height
• enableIndicator: Shows more indicator for multiple events
• spannedEventPlacement: AllDayRow or TimeSlot for multi-day events
• sortComparer: Custom sort function for overlapping events
• editFollowingEvents: Allows editing current and following recurring events
• maxEventStack: Per-view maximum number of event labels to display per cell. 0 shows all events; positive values show the count plus a +n more indicator.

Event Field Mapping

• id: Unique appointment identifier (required)
• subject: Appointment title
• startTime: Start date/time (required)
• endTime: End date/time (required)
• isAllDay: All-day event flag
• location: Event location
• description: Event details
• recurrenceRule: Recurrence pattern (iCalendar format)
• recurrenceID: Parent recurring event ID for exceptions
• recurrenceException: Excluded dates from recurrence
• followingID: Parent event ID for "following events" edits
• startTimezone: Start time timezone (IANA timezone names)
• endTimezone: End time timezone
• isReadonly: Individual event read-only flag
• isBlock: Time slot blocking flag

Important Events

• actionBegin: Triggered before CRUD actions
• actionComplete: Triggered after CRUD actions complete
• actionFailure: Triggered on server errors
• eventRendered: Triggered before event rendering (customization)
• dragStart: Triggered when dragging begins
• dragStop: Triggered when dragging ends
• resizeStart: Triggered when resizing begins
• popupOpen: Triggered before editor window opens
• tooltipOpen: Triggered before tooltip displays
• dataBound: Triggered after data binding completes

Public Methods

• addEvent(eventData): Add single or multiple appointments
• saveEvent(eventData, action): Update existing appointments
• deleteEvent(eventData, action): Delete appointments
• getEvents(): Retrieve all appointments
• getCurrentViewEvents(): Get appointments in current view
• getEventDetails(element): Get event data from UI element
• refreshEvents(): Refresh appointments without full reload
• navigateTo(date): Navigate to specific date
• navigatePrevious(): Go to previous time period
• navigateNext(): Go to next time period
• isSlotAvailable(date, endDate, resourceId): Check slot availability
• openOverlapAlert(): Show overlap validation alert
• cut(elements): Cut the specified appointment(s) into the clipboard (requires allowClipboard="true")
• copy(elements): Copy the specified appointment(s) into the clipboard (requires allowClipboard="true")
• paste(targetElement): Paste the clipboard content at the target cell (requires allowClipboard="true")
• closeQuickInfoPopup(): Close the quick info popup (useful when opening the context menu)

Related Skills

• Data Binding Patterns - Connecting data sources
• Custom Event Templates - Styling and presentation
• Resource Scheduling - Multi-user and resource management