Getting Started with Blazor Scheduler in Blazor Server App

This section briefly explains how to include the Blazor Scheduler component in your Blazor Server App using Visual Studio, Visual Studio Code, and the .NET CLI.

Ready to streamline your Blazor development?
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. Explore AI Coding Assistants

Using .NET CLI Templates

Quickly set up a Blazor application using the preconfigured Syncfusion Web App Template.

First, install the template using the .NET CLI.

.NET CLI

dotnet new install Syncfusion.Blazor.WebApp.Templates

Next, create a new project with following command.

Server

dotnet new syncfusionblazorwebapp --name MyApp --interactivity Server

After creating the project, navigate to the main project folder (for example, MyApp) and run the following command.

.NET CLI

cd MyApp
dotnet run

Manually creating a new Blazor Server App

• Visual Studio
• Visual Studio Code

Create a Blazor Server App using Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor Server App Getting Started documentation.

Run the following command to create a new Blazor Server App.

Terminal

dotnet new blazor -o BlazorServerApp --interactivity Server
cd BlazorServerApp

Alternatively, create a Blazor Server App using Visual Studio Code via Microsoft Templates, the Syncfusion® Blazor Extension, or the C# Dev Kit extension.

Configure the appropriate Interactive render mode and Interactivity location while creating a Blazor Server App. For detailed information, refer to the interactive render mode documentation.

Install the required Blazor packages

Install the Syncfusion.Blazor.Schedule and Syncfusion.Blazor.Themes NuGet packages. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.

• Visual Studio
• Visual Studio Code

1. Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
2. Search the required NuGet packages (Syncfusion.Blazor.Schedule and Syncfusion.Blazor.Themes) and install them.

Alternatively, you can install the same packages using the Package Manager Console with the following commands.

Package Manager Console

Install-Package Syncfusion.Blazor.Schedule -Version 35.1.37
Install-Package Syncfusion.Blazor.Themes -Version 35.1.37

Open the terminal and run the following commands.

Terminal

dotnet add package Syncfusion.Blazor.Schedule -v 35.1.37
dotnet add package Syncfusion.Blazor.Themes -v 35.1.37

Add import namespaces

After the packages are installed, open the ~/Components/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Schedule namespaces.

~/_Imports.razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Schedule

Register the Blazor service

Open the Program.cs file in Blazor Server App and register the Blazor service and include the required namespace reference using Syncfusion.Blazor; at the top.

Program.cs

builder.Services.AddSyncfusionBlazor();

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet at the end of the <head> section in the App.razor file.

App.razor

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />

Include the required script references at the end of the <body> section in the App.razor file to enable Blazor Scheduler functionality.

App.razor

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Add Blazor Scheduler component

Open a Razor file located in the ~/Components/Pages/*.razor (for example, Home.razor) and add the Blazor Scheduler component inside the razor file.

If the interactivity location is set to Per page/component in the Server App, define a render mode at the top of the razor file. (For example, InteractiveServer, InteractiveWebAssembly or InteractiveAuto). If the Interactivity is set to Global with Auto or WebAssembly, the render mode is automatically configured in the App.razor file by default.

Home.razor

@rendermode InteractiveServer

<SfSchedule TValue=AppointmentData>
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
        <ScheduleView Option="View.Agenda"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

@code {
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}

Run the application

• Visual Studio
• Visual Studio Code

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Scheduler component will render in your default web browser.

Open the terminal and run the following command.

Terminal

dotnet run

Populating appointments

To populate the Blazor Scheduler with appointments, bind the event data to it by assigning the DataSource property under ScheduleEventSettings.

Home.razor

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

@code {
    DateTime CurrentDate = new DateTime(2025, 2, 14);
    List<AppointmentData> DataSource = new List<AppointmentData>
    {
        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2025, 2, 13, 10, 0, 0) , EndTime = new DateTime(2025, 2, 13, 12, 0, 0) },
        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2025, 2, 15, 10, 0, 0) , EndTime = new DateTime(2025, 2, 15, 12, 0, 0) }
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}

Setting date

The Blazor Scheduler usually displays the system date as its current date. To change the current date of Blazor Scheduler with specific date, define the two-way binding for SelectedDate property.

Home.razor

<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
        <ScheduleView Option="View.Agenda"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

@code {
    DateTime CurrentDate = new DateTime(2020, 1, 10);
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}

Setting view

The Blazor Scheduler displays Week view by default. To change the current view, define the applicable view name to the two-way binding of CurrentView property.

Available Views

The Blazor Scheduler supports the following built-in views:

• Day
• Week
• WorkWeek
• Month
• Agenda
• MonthAgenda
• TimelineDay
• TimelineWeek
• TimelineWorkWeek
• TimelineMonth
• TimelineYear
• Year

You can configure only the required views as needed, and include additional views based on your application requirements.

Home.razor

<SfSchedule TValue="AppointmentData" Height="650px" @bind-CurrentView="@CurrentView">
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
        <ScheduleView Option="View.Agenda"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

@code {
    View CurrentView = View.Month;
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}

View sample in GitHub.

See also

1. Getting Started with Blazor Web App
2. Getting Started with Blazor Server App
3. Getting Started with Blazor WebAssembly App
4. Scheduler Interactions