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