Skip to content

This sample explains how to configure and add Blazor Scheduler component in the Blazor Server Application.

Notifications You must be signed in to change notification settings

SyncfusionExamples/getting-started-with-blazor-scheduler

Repository files navigation

How to Add a Blazor Scheduler to the Blazor Server App?

The Blazor Scheduler is a fully-featured event calendar component that helps users manage their time efficiently with features similar to those of the Outlook calendar. This quick-start Blazor server app project will help you to learn how to configure and add the Blazor Scheduler to it. You will also learn how to bind a list of appointment data to the Scheduler data source and bind data from a remote service URL.

Prerequisites

  • Visual Studio 2022

How to run the project

  • Checkout this project to a location in your disk.
  • Open the solution file using the Visual Studio 2022.
  • Restore the NuGet packages by rebuilding the solution.
  • Run the project.

Features and Benefits

Different view modes

The Blazor Scheduler offers a wide variety of view modes: day, week, workweek, month, agenda, month-agenda, and timeline. It allows you to easily configure each view with different, view-specific options. You can also display multiple days, weeks, and months by extending each view mode based on the interval count.

Data binding

Data binds seamlessly with various local and remote data sources: JSON, RESTful services, OData services, and WCF services.

Event handling

There is built-in support for better event handling, such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. Configure recurring events to repeat on a daily, weekly, monthly, or yearly basis. Change the look and feel of events by customizing their default appearance using templates.

Drag and drop events

Reschedule appointments easily by dragging them onto the required time slots. You can also see the live time updates on the dragged appointments.

Event resizing

Extend a Scheduler event’s time by resizing either its start or end handlers. You can also see the live time updates on the resized appointments.

Resource grouping

Assign resources to events and schedule them. Group appointments based on resources or dates. Group resources by date to provide a quick overview of each resource’s availability. You can also set different working days for each resource. A new compact layout for displaying resources on mobile screens brings clear visibility of the events of each resource.

Timeline scheduling

Timeline scheduling plays a major role in the Blazor Scheduler, as it displays resources in rows in a hierarchical tree-like structure with expand and collapse options. Its feature-rich calendar options, compact resource scheduling, and clear event representation allow you to employ it in various real-time applications. You can also display the year, month, and week number text labels on each header row of timeline views with out-of-the-box templates.

Responsive and touch-friendly

The Blazor Scheduler has a highly responsive layout and a finely optimized design for desktops, touch screens, and smart phones.

Customizable UI

The Blazor Scheduler inherits almost all the calendar-specific features, such as the first day of the week and timescale. You can customize the appearance of any part of the Scheduler interface using HTML and CSS.

User-friendly interactions

The modern and trendy UI design of the Blazor Scheduler makes user interactions simpler and more efficient. It includes a quick overview of event information, smooth date navigation, view navigation, and easier selection of cells and events.

Real-time data synchronization

The real-time appointment data of Outlook and Google Calendar accurately synchronizes with our Blazor Scheduler. Scheduler also supports bidirectional data communication through SignalR.

Not sure how to create your first Blazor Scheduler? Our documentation can help.

Related links

Learn More about Blazor Scheduler

Download Free Trial

Pricing

Documentation

Online Examples

Community Forums

Suggest a feature

About Syncfusion Blazor Components

Syncfusion's Blazor components library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Scheduler, we provide popular Blazor components such as DataGrid, Charts, Diagram, and Word Processor.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1600+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (Windows Forms, WPF, WinUI(Preview) and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.


sales@syncfusion.com | www.syncfusion.com | 1-888-9 DOTNET

About

This sample explains how to configure and add Blazor Scheduler component in the Blazor Server Application.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published