Syncfusion.Blazor.Schedule

Syncfusion® Blazor Scheduler

Full-featured event calendar component for Blazor applications. Manage appointments and schedules with drag-and-drop, resizing, resource scheduling, and multiple calendar views.

Key Features

• Multiple calendar views (Day, Week, Work Week, Month, Agenda, Month Agenda, and Year)
• Drag-and-drop and resizing of events
• Resource scheduling with grouping
• Time zones and holiday support
• Customizable event templates and tooltips
• Repeat events and recurrence support
• Mobile-friendly with touch gestures
• Keyboard navigation and accessibility
• Export to ICS format

System Requirements

• .NET 8.0 or later (Blazor Server, Blazor Web App, Blazor WebAssembly, Blazor Hybrid)
• See full requirements: System Requirements

Installation

.NET CLI

dotnet add package Syncfusion.Blazor.Schedule

NuGet Package Manager

Install-Package Syncfusion.Blazor.Schedule

Add Stylesheet and Script References

For Blazor Web App / Blazor Server, add these to Components/App.razor or App.razor: For Blazor WebAssembly, add these to wwwroot/index.html:

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

1. Register the Syncfusion® Blazor service in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

1. Add the Scheduler component to your Razor page:

@using Syncfusion.Blazor.Schedule

<SfSchedule TValue="ScheduleData" Height="650px" @bind-SelectedDate="SelectedDate">
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
    <ScheduleEventSettings DataSource="@Events"></ScheduleEventSettings>
</SfSchedule>

@code {
    private DateTime SelectedDate = new DateTime(2023, 7, 5);
    private List<ScheduleData> Events = new List<ScheduleData>
    {
        new ScheduleData { Id = 1, Subject = "Team Standup", StartTime = new DateTime(2023, 7, 5, 10, 0, 0), EndTime = new DateTime(2023, 7, 5, 10, 30, 0) },
        new ScheduleData { Id = 2, Subject = "Project Meeting", StartTime = new DateTime(2023, 7, 5, 14, 0, 0), EndTime = new DateTime(2023, 7, 5, 15, 0, 0) }
    };

    public class ScheduleData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

Documentation

For End Users

• Getting Started with Blazor Web App
• Getting Started with WebAssembly
• API Reference
• Live Demos
• Feature Overview

For Contributors & Developers

New to this repository? Start here:

1. CONTRIBUTING.md — Development workflow and OpenSpec-driven system
2. copilot-instructions.md — Workspace rules and code standards
3. .github/INDEX.md — Extension infrastructure (skills, prompts, agents)

Working on a feature? Use the OpenSpec-driven workflow:

1. Read openspec/README.md — All 11 specs organized by task
2. Use openspec/spec-selector.md — Decision tree to find right spec
3. Implement following patterns in .github/skills/ (component, tests, workflow)

Repository Structure

├── src/                          # Component source (Blazor C#, XAML-style)
│   ├── SfSchedule.razor*         # Main component
│   ├── EventSettings/            # Event field configuration
│   └── ...
│
├── scripts/                      # TypeScript (EJ2 Schedule.js wrapper)
│
├── test/                         # bUnit tests (organized by view type)
│   └── Testcases/
│       ├── Day/, Week/, Month/  # View-specific CRUD tests
│       └── ...
│
├── openspec/                     # OpenSpec specification-driven development
│   ├── specs/
│   │   ├── foundation/           # Core rules (testing, accessibility, lifecycle)
│   │   ├── component/            # Feature specs (CRUD, views, recurrence, resources)
│   │   └── architecture/         # Technical specs (JSInterop, rendering, event flow)
│   ├── README.md                 # Spec index & navigation
│   ├── project.md                # Deep architecture knowledge
│   └── spec-selector.md          # Decision tree: "What should I read?"
│
├── .github/                      # GitHub automation infrastructure
│   ├── skills/                   # Reusable development patterns
│   ├── prompts/                  # Parameterized workflow commands (placeholder)
│   ├── agents/                   # Autonomous task workflows (placeholder)
│   ├── references/               # Documentation for extending the system
│   ├── copilot-instructions.md   # Workspace rules
│   └── INDEX.md                  # Navigation guide
│
├── copilot-instructions.md       # System rules (workspace-level)
├── CONTRIBUTING.md               # Development workflow (NEW)
└── README.md                     # This file

Support

For Users

• Submit a support ticket

For Contributors

• See CONTRIBUTING.md for development guidelines and workflow
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

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

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

[email protected] | Toll Free: 1-888-9-DOTNET