syncfusion-blazor-toolkit-calendars

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>