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
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
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
- 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
Customization and Templates
📄 Read: references/customization.md
- Event templates and cell templates
- Event customization using eventRendered event
- 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
- Virtual scrolling for performance
- State persistence
- Exporting and printing
- Localization and accessibility
- Inline appointment editing
- Read-only mode and appointment blocking
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 Schedulerreadonly: Disables all CRUD operations when trueallowDragAndDrop: Enables drag-and-drop (default: true)allowResizing: Enables event resizing (default: true)allowMultiDrag: Enables dragging multiple events simultaneouslyallowInline: Enables inline editing of event subjectallowOverlap: Prevents overlapping events when falseheightandwidth: Dimension settingscssClass: Custom CSS class for styling
Event Settings Properties
dataSource: Binds appointment data (array or DataManager)template: Custom template for event displayenableTooltip: Shows tooltip for appointmentstooltipTemplate: Customizes tooltip contentenableMaxHeight: Events occupy full cell heightenableIndicator: Shows more indicator for multiple eventsspannedEventPlacement: AllDayRow or TimeSlot for multi-day eventssortComparer: Custom sort function for overlapping eventseditFollowingEvents: Allows editing current and following recurring events
Event Field Mapping
id: Unique appointment identifier (required)subject: Appointment titlestartTime: Start date/time (required)endTime: End date/time (required)isAllDay: All-day event flaglocation: Event locationdescription: Event detailsrecurrenceRule: Recurrence pattern (iCalendar format)recurrenceID: Parent recurring event ID for exceptionsrecurrenceException: Excluded dates from recurrencefollowingID: Parent event ID for "following events" editsstartTimezone: Start time timezone (IANA timezone names)endTimezone: End time timezoneisReadonly: Individual event read-only flagisBlock: Time slot blocking flag
Important Events
actionBegin: Triggered before CRUD actionsactionComplete: Triggered after CRUD actions completeactionFailure: Triggered on server errorseventRendered: Triggered before event rendering (customization)dragStart: Triggered when dragging beginsdragStop: Triggered when dragging endsresizeStart: Triggered when resizing beginspopupOpen: Triggered before editor window openstooltipOpen: Triggered before tooltip displaysdataBound: Triggered after data binding completes
Public Methods
addEvent(eventData): Add single or multiple appointmentssaveEvent(eventData, action): Update existing appointmentsdeleteEvent(eventData, action): Delete appointmentsgetEvents(): Retrieve all appointmentsgetCurrentViewEvents(): Get appointments in current viewgetEventDetails(element): Get event data from UI elementrefreshEvents(): Refresh appointments without full reloadnavigateTo(date): Navigate to specific datenavigatePrevious(): Go to previous time periodnavigateNext(): Go to next time periodisSlotAvailable(date, endDate, resourceId): Check slot availabilityopenOverlapAlert(): Show overlap validation alert
Related Skills
- Data Binding Patterns - Connecting data sources
- Custom Event Templates - Styling and presentation
- Resource Scheduling - Multi-user and resource management
More from syncfusion/aspnetcore-ui-components-skills
syncfusion-aspnetcore-charts
Implements Syncfusion ASP.NET Core Chart (SfChart) for data visualization. Use this when building charts, visualizing time-series or categorical data, or creating dashboards. Covers series configuration (line, bar, pie), axes, tooltips, legends, and customization for ASP.NET Core applications.
11syncfusion-aspnetcore-textbox
Complete guide to implementing the Syncfusion TextBox component in ASP.NET Core applications with tag helpers, validation, floating labels, and adornments for building accessible input forms.
11syncfusion-aspnetcore-list-box
Implement and configure Syncfusion ASP.NET Core ListBox component with selection controls. Use this when building selection interfaces with single/multiple modes, data binding, or advanced features. Covers ListBox implementation, selection state management, appearance customization, and user interaction handling.
10syncfusion-aspnetcore-common
**CONFIGURATION GUIDE** — Assist with Syncfusion ASP.NET Core EJ2 components setup, localization, and version compatibility. Use when: installing Syncfusion packages, configuring globalization/localization, selecting compatible versions.
10syncfusion-aspnetcore-rich-text-editor
Implements the Syncfusion ASP.NET Core Rich Text Editor (ejs-richtexteditor tag helper) supporting HTML (WYSIWYG) and Markdown editing modes. Set editorMode='Markdown' for Markdown; default is HTML. Use this skill for toolbar configuration, image upload, table editing, inline or iframe mode, AI assistant integration, mentions, and form validation with rich text in ASP.NET Core projects.
10syncfusion-aspnetcore-theme
**THEMING & APPEARANCE GUIDE** — Assist with Syncfusion ASP.NET Core EJ2 component theming, customization, size modes, and dynamic theme switching. Use when: applying themes (Bootstrap, Material, Tailwind, Fluent, etc.), customizing theme variables, implementing theme switchers, enabling touch mode, or customizing icons and appearance.
10