SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillssyncfusion-aspnetcore-scheduler

syncfusion-aspnetcore-scheduler

Office & productivity

View repository

Updated 10-16 01:07

About this skill

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