syncfusion-blazor-toolkit-calendars

name	syncfusion-blazor-toolkit-calendars
description	Build and customize calendar-based components in Syncfusion Blazor Toolkit. Covers Calendar, DatePicker, DateTimePicker, and TimePicker. Use when implementing date/time selection features, handling date range restriction, formatting dates, managing calendar events, validating dates, or customizing calendar appearance. Trigger for date picker UI implementation, time selection logic, date range functionality, calendar styling, or date validation workflows.
metadata	{"author":"Syncfusion Inc","version":"1.0.0"}

Syncfusion Blazor Toolkit - Calendar Components

The Syncfusion Blazor Toolkit provides a comprehensive suite of calendar and date/time selection components for building intuitive date input experiences.

Table of Contents

• Getting Started
• Core Features
• Component-Specific Guides
• Event Handling & Data Binding
• API Reference
• Troubleshooting
• Quick Start
• Common Patterns

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Component overview, installation, basic setup, component types

Core Features

📄 Read: references/features.md

• Date selection, time selection, date formatting, validation

Component-Specific Guides

📄 Read: references/calendar.md - Calendar component with selection modes 📄 Read: references/datepicker.md - Single date selection with popup 📄 Read: references/datetimepicker.md - Combined date and time selection 📄 Read: references/timepicker.md - Time-only selection

Event Handling & Data Binding

📄 Read: references/events-binding.md

• Change events, selection callbacks, value binding

API Reference

📄 Read: references/api-reference.md

• Properties, events, methods, enums, parameters

Troubleshooting

📄 Read: references/troubleshooting.md

• Common issues, date format problems, validation edge cases, browser compatibility

Quick Start

Calendar Component

<SfCalendar TValue="DateTime" Value="@selectedDate"></SfCalendar>

@code {
    private DateTime selectedDate = new DateTime(2026, 5, 13);
}

DatePicker Component

<SfDatePicker TValue="DateTime?" Placeholder="Select a date"></SfDatePicker>

DateTimePicker Component

<SfDateTimePicker TValue="DateTime?" Placeholder="Select date and time"></SfDateTimePicker>

TimePicker Component

<SfTimePicker TValue="DateTime?" Placeholder="Select time"></SfTimePicker>

Common Patterns

Pattern 1: Two-Way Date Binding

<SfDatePicker TValue="DateTime?" @bind-Value="selectedDate"></SfDatePicker>

@code {
    private DateTime? selectedDate;
}

Pattern 2: Date Selection with Change Event

<SfCalendar TValue="DateTime" ValueChange="@OnDateChanged"></SfCalendar>

@code {
    private void OnDateChanged(ChangedEventArgs<DateTime> args)
    {
        Console.WriteLine($"Selected date: {args.Value}");
    }
}

Pattern 3: Multi-Date Selection

Enable multiple date selection with the IsMultiSelection property:

<SfCalendar TValue="DateTime" 
    IsMultiSelection="true"
    Values="@selectedDates">
</SfCalendar>

@code {
    private DateTime[] selectedDates = new DateTime[] { DateTime.Now, DateTime.Now.AddDays(7) };
}

Pattern 4: Disable Specific Dates

Use the DayCellRendering event to customize cell appearance and disable dates:

@using Syncfusion.Blazor.Toolkit.Calendars

<SfCalendar TValue="DateTime" DayCellRendering="@OnDayCellRendering"></SfCalendar>

@code {
    private void OnDayCellRendering(RenderDayCellEventArgs args)
    {
        // Disable weekends
        if (args.Date.DayOfWeek == DayOfWeek.Saturday || args.Date.DayOfWeek == DayOfWeek.Sunday)
        {
            args.IsDisabled = true;
        }
        // Disable specific days (e.g., 13th of every month)
        if (args.Date.Day == 13)
        {
            args.IsDisabled = true;
        }
    }
}

Pattern 5: Custom Date Format

<SfDatePicker TValue="DateTime?" Format="dd/MM/yyyy"></SfDatePicker>