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

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

Support

• Submit a support ticket
• 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