Syncfusion.AspNetCore.Schedule
34.1.31
Prefix Reserved
dotnet add package Syncfusion.AspNetCore.Schedule --version 34.1.31
NuGet\Install-Package Syncfusion.AspNetCore.Schedule -Version 34.1.31
<PackageReference Include="Syncfusion.AspNetCore.Schedule" Version="34.1.31" />
<PackageVersion Include="Syncfusion.AspNetCore.Schedule" Version="34.1.31" />
<PackageReference Include="Syncfusion.AspNetCore.Schedule" />
paket add Syncfusion.AspNetCore.Schedule --version 34.1.31
#r "nuget: Syncfusion.AspNetCore.Schedule, 34.1.31"
#:package Syncfusion.AspNetCore.Schedule@34.1.31
#addin nuget:?package=Syncfusion.AspNetCore.Schedule&version=34.1.31
#tool nuget:?package=Syncfusion.AspNetCore.Schedule&version=34.1.31
Syncfusion® ASP.NET Core Scheduler
The Syncfusion® ASP.NET Core Scheduler is a fully-featured calendar and event scheduling component that enables creating, editing, and managing appointments and events across multiple calendar views.
Key Features
- Multiple views: Day, Week, Work Week, Month, Agenda, Month Agenda, Year, and Timeline views
- Recurrence rule support (daily, weekly, monthly, yearly) with exceptions
- Drag-and-drop and resize events across views
- Resource grouping: group events by resources (rooms, people, equipment)
- Virtual scrolling for handling thousands of events
- Customizable event templates and tooltips
- Print and export support
- Timezone conversion and daylight saving support
- Accessibility and keyboard navigation
Common Setup
All Syncfusion ASP.NET Core controls share the same foundational setup steps.
1. Install NuGet Package
Install-Package Syncfusion.AspNetCore.Schedule
2. Register Tag Helper
Add the following to ~/Pages/_ViewImports.cshtml (Razor Pages) or ~/Views/_ViewImports.cshtml (MVC):
@addTagHelper *, Syncfusion.AspNetCore.Schedule
4. Register Script Manager
In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:
<body>
...
<ejs-scripts></ejs-scripts>
</body>
Add Stylesheet and Script References
To use the Syncfusion ASP.NET Core Scheduler component, add the following references to your layout file:
For ASP.NET Core (Razor Pages) App:
Add these to Pages/Shared/_Layout.cshtml.
For ASP.NET Core (MVC) App:
Add these to Views/Shared/_Layout.cshtml.
<head>
<link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
<script src="_content/Syncfusion.AspNetCore.Schedule/scripts/sf-schedule.min.js"></script>
</head>
Quick Start
Step 1: Create a Model
// Models/AppointmentData.cs
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
}
Step 2: Create a PageModel
Create ~/Pages/Index.cshtml.cs:
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.Collections.Generic;
public class IndexModel : PageModel
{
public List<AppointmentData> Appointments { get; set; }
public void OnGet()
{
Appointments = new List<AppointmentData>
{
new AppointmentData
{
Id = 1,
Subject = "Team Stand-up",
StartTime = new DateTime(2024, 6, 10, 9, 30, 0),
EndTime = new DateTime(2024, 6, 10, 10, 30, 0)
},
new AppointmentData
{
Id = 2,
Subject = "Product Review",
StartTime = new DateTime(2024, 6, 11, 11, 0, 0),
EndTime = new DateTime(2024, 6, 11, 13, 0, 0)
},
new AppointmentData
{
Id = 3,
Subject = "Sprint Planning",
StartTime = new DateTime(2024, 6, 12, 14, 0, 0),
EndTime = new DateTime(2024, 6, 12, 16, 0, 0)
},
new AppointmentData
{
Id = 4,
Subject = "Weekly Retrospective",
StartTime = new DateTime(2024, 6, 14, 9, 0, 0),
EndTime = new DateTime(2024, 6, 14, 10, 0, 0),
RecurrenceRule = "FREQ=WEEKLY;BYDAY=FR;INTERVAL=1;COUNT=5"
}
};
}
}
Step 3: Create the View
Create ~/Pages/Index.cshtml:
@page
@model IndexModel
<div class="container-fluid mt-5">
<h2>Scheduler Demo</h2>
<ejs-schedule id="schedule"
height="550px"
selectedDate="new DateTime(2024, 6, 10)"
currentView="Week">
<e-schedule-eventsettings dataSource="@Model.Appointments">
</e-schedule-eventsettings>
<e-schedule-views>
<e-schedule-view option="Day"></e-schedule-view>
<e-schedule-view option="Week"></e-schedule-view>
<e-schedule-view option="WorkWeek"></e-schedule-view>
<e-schedule-view option="Month"></e-schedule-view>
<e-schedule-view option="Agenda"></e-schedule-view>
</e-schedule-views>
</ejs-schedule>
</div>
Step 4: Run the Application
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run. The Scheduler renders in the default web browser with your appointments populated.
Common Configuration Options
| Property | Tag Helper Attribute | Description |
|---|---|---|
| Selected date | selectedDate |
Sets the initially displayed date |
| Current view | currentView |
Day, Week, WorkWeek, Month, Agenda |
| Height | height |
Component height (e.g., "550px") |
| Readonly | readonly |
Disables all editing interactions |
| Time zone | timezone |
Scheduler-level timezone (e.g., "UTC") |
| First day of week | firstDayOfWeek |
0 = Sunday, 1 = Monday |
| Work hours start | workHours (child) |
Highlights working hour range |
| Drag & drop | allowDragAndDrop |
Enables/disables drag-and-drop |
| Resize | allowResizing |
Enables/disables event resizing |
Work Hours Example
<ejs-schedule id="schedule" height="550px" selectedDate="new DateTime(2024, 6, 10)">
<e-schedule-workhours highlight="true" start="09:00" end="18:00"></e-schedule-workhours>
<e-schedule-eventsettings dataSource="@Model.Appointments"></e-schedule-eventsettings>
</ejs-schedule>
Recurring Events
Use the RecurrenceRule field (RRULE standard) on your data model:
// Every Monday for 10 occurrences
RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO;INTERVAL=1;COUNT=10"
Run the Application
Press Ctrl+F5 to run the application in your browser.
Documentation
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA
About Syncfusion®
Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:
Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
sales@syncfusion.com | Toll Free: 1-888-9-DOTNET
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.AspNetCore.Calendars (>= 34.1.31)
- Syncfusion.AspNetCore.DropDowns (>= 34.1.31)
- Syncfusion.AspNetCore.Inputs (>= 34.1.31)
- Syncfusion.AspNetCore.Navigations (>= 34.1.31)
- Syncfusion.AspNetCore.Popups (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
-
net8.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.AspNetCore.Calendars (>= 34.1.31)
- Syncfusion.AspNetCore.DropDowns (>= 34.1.31)
- Syncfusion.AspNetCore.Inputs (>= 34.1.31)
- Syncfusion.AspNetCore.Navigations (>= 34.1.31)
- Syncfusion.AspNetCore.Popups (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
-
net9.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.AspNetCore.Calendars (>= 34.1.31)
- Syncfusion.AspNetCore.DropDowns (>= 34.1.31)
- Syncfusion.AspNetCore.Inputs (>= 34.1.31)
- Syncfusion.AspNetCore.Navigations (>= 34.1.31)
- Syncfusion.AspNetCore.Popups (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.