Syncfusion aspnetcore scheduler

Skill syncfusion/aspnetcore-ui-components-skills/skills/syncfusion-aspnetcore-scheduler

Implement Syncfusion ASP.NET Core Scheduler component for scheduling appointments, events, and resource management. Use this when creating calendar scheduling solutions with appointment management, resource scheduling, multiple calendar views (day, week, month, timeline), recurring events, and CRUD operations. This skill covers data binding, timezone support, event templates, and timescale configuration.From its SKILL.md

Install

npx -y skills add syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-scheduler

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

10.3 KB, ~2.3k tokens by cl100k_base, as published. Nobody here has run it

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 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
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

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