Syncfusion® Blazor Calendar Components

A comprehensive suite of Blazor date and time picker components for calendar selection, date range picking, and time input. Includes Calendar, DatePicker, DateRangePicker, DateTime Picker, and TimePicker components.

Supported Components

This package includes the following components:

• Blazor Calendar
• Blazor DatePicker
• Blazor DateRangePicker
• Blazor DateTime Picker
• Blazor TimePicker

Blazor Calendar Component

The Blazor Calendar Component displays an interactive calendar with support for month, year, and decade views for quick date navigation.

Key Features:

• Multiple View Modes: Month, year, and decade views for flexible date navigation
• Date Restriction: Minimum/maximum dates and disabled date ranges for validation
• Range Selection: Highlight date ranges with custom styling
• Week Numbers: Display ISO week numbers in calendar grid
• Custom Formats: Flexible date formatting and localization support
• Range Navigation: Efficiently navigate through large date ranges
• Weekend Highlighting: Visual distinction for weekends vs. weekdays
• Accessibility: Full keyboard navigation and ARIA support for screen readers

Documentation:

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

Blazor DatePicker Component

The Blazor DatePicker Component is a lightweight, mobile-friendly component for date selection with text input and calendar popup.

Key Features:

• Text Input with Popup: Type or select dates from interactive calendar popup
• Multiple View Modes: Month, year, and decade views for quick date navigation
• Date Validation: Minimum/maximum dates and disabled date ranges support
• Format Customization: Multiple date format options with localization
• Placeholder Support: Custom placeholder text for better UX
• Input Masking: Supports masked input to enforce consistent and error‑free date/time entry.
• Keyboard Navigation: Arrow keys, Enter, and Tab support for hands-free input
• Mobile Optimization: Touch-friendly interface for mobile and tablet devices
• Accessibility: ARIA labels and screen reader compatibility

Documentation:

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

Blazor DateRangePicker Component

The Blazor DateRangePicker Component allows users to select start and end dates as a continuous range from dual calendars or text input.

Key Features:

• Dual Calendar Display: Side-by-side calendars for intuitive range selection
• Text Input Support: Enter or select dates directly in input fields
• Range Highlight: Visual highlighting of selected date range
• Predefined Ranges: Quick-select options for common ranges (Last 7 days, etc.)
• Date Validation: Enforce minimum/maximum dates and disabled ranges
• Single Calendar Mode: Option to display one calendar for compact layouts
• Format Flexibility: Custom date formatting with localization support
• Accessibility: Full keyboard navigation and screen reader support
• Input Masking: Supports masked input to enforce consistent and error‑free date/time entry.

Documentation:

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

Blazor DateTime Picker Component

The Blazor DateTime Picker Component combines the date and time selection in a single component with calendar popup and time dropdown.

Key Features:

• Combined Selection: Interactive calendar popup for date selection and time picker popup for time selection
• Multiple View Modes: Month, year, and decade views for date navigation
• Time Dropdown: Configurable time intervals (15 min, 30 min, 1 hour, etc.)
• Date/Time Validation: Enforce minimum/maximum datetime ranges
• Format Customization: Custom date-time formatting with localization
• Masked Input: Guided text input with format masking
• Accessibility: Complete keyboard navigation and ARIA support
• Input Masking: Supports masked input to enforce consistent and error‑free date/time entry.

Documentation:

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

Blazor TimePicker Component

The Blazor TimePicker Component is a lightweight component for time selection with text input and dropdown time list.

Key Features:

• Time Dropdown List: Select from predefined time intervals in dropdown
• Text Input Support: Type time directly with format validation
• Interval Control: Configurable time intervals (15 min, 30 min, 1 hour, etc.)
• Format Flexibility: Support for 12-hour and 24-hour time formats
• Time Validation: Enforce minimum/maximum time constraints
• Cascading Support: Coordinate with other time pickers for range selection
• Keyboard Navigation: Arrow keys, Enter, and Tab support for efficient input
• Accessibility: Full ARIA support and screen reader compatibility
• Input Masking: Supports masked input to enforce consistent and error‑free date/time entry.

Documentation:

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

System Requirements

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

Installation

.NET CLI

dotnet add package Syncfusion.Blazor.Calendars

NuGet Package Manager

Install-Package Syncfusion.Blazor.Calendars

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor.
• For Blazor WebAssembly App: 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

Register the Syncfusion® Blazor services in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

Calendar

<SfCalendar TValue="DateTime" Min='@MinDate' Value='@DateValue' Max='@MaxDate'></SfCalendar>

@code{
    public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 05);
    public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
    public DateTime DateValue {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15);
}

DatePicker

<SfDatePicker TValue="DateTime?" Value='@DateValue' Min='@MinDate' Max='@MaxDate'></SfDatePicker>

@code {
    public DateTime? DateValue {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,10);
    public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,05);
    public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
}

DateRangePicker

<SfDateRangePicker TValue="DateTime?" Placeholder="Choose a Range" Min="@MinDate" Max="@MaxDate"></SfDateRangePicker>

@code {
    public DateTime MinDate {get;set;} = new DateTime(2017, 01, 05);
    public DateTime MaxDate {get;set;} = new DateTime(2017, 12, 20);
}

DateTimePicker

<SfDateTimePicker TValue="DateTime?" Value="@DateValue" Min="@MinDate" Max="@MaxDate"></SfDateTimePicker>

@code{
    public DateTime? DateValue {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,10);
    public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,05);
    public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
}

TimePicker

<SfTimePicker TValue="DateTime?" Value="@TimeValue" Step=60 Format="HH:mm"></SfTimePicker>

@code {
    public DateTime TimeValue { get; set; } = DateTime.Now;
}

Support

• Support portal
• 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.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET