WPF Calendar (CalendarEdit) Implementation Guide

The CalendarEdit control provides a comprehensive calendar UI for selecting and managing dates in WPF applications. It supports single and multiple date selection, date range restrictions, customizable appearance, and powerful navigation modes from day to decade views.

When to Use This Skill

Date Selection: When you need users to select single or multiple dates
Calendar UI: Building calendar controls with month/year navigation
Date Restrictions: Implementing date range constraints or blocking specific dates
Scheduling: Creating booking, appointment, or event selection interfaces
Date Manipulation: Using calendar methods for date arithmetic (add days, months, etc.)
Appearance Customization: Styling calendar colors, brushes, and visual properties
Multi-language Support: Supporting RTL (right-to-left) layouts and different cultures

Component Overview

Key Features:

Support for dates from year 0 to year 9999
Single and multiple date selection modes
Day, month, year, and decade navigation views
Min/max date constraints and blackout date blocking
Customizable colors, brushes, and animations
RTL and culture support
Built-in animation for smooth transitions

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and assembly setup
Adding CalendarEdit via designer, XAML, and C#
Basic control structure and initial setup

Date Selection

📄 Read: references/date-selection.md

Select single dates (mouse click and programmatically)
Select multiple dates (drag selection and Ctrl+click)
Working with Date and SelectedDates properties

Navigation Features

📄 Read: references/navigation.md

Navigate between day, month, year, and decade modes
Header navigation, keyboard shortcuts, and animation controls
Customizing header appearance and animation timing

Restrict Date Selection

📄 Read: references/restrict-dates.md

Set date range constraints (MinDate and MaxDate)
Hide or show disabled dates outside the range
Disable all date selection or block specific date ranges

Appearance & Customization

📄 Read: references/appearance.md

Customize foreground, background, and brush colors
RTL layout support and flow direction
Calendar object methods for date arithmetic operations

Quick Start

Basic XAML Setup

<Window x:Class="CalendarDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="Calendar Demo" Height="450" Width="500">
    <Grid>
        <!-- Basic calendar control -->
        <syncfusion:CalendarEdit Name="calendarEdit"
                                 Height="250"
                                 Width="300"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center"/>
    </Grid>
</Window>

Basic C# Setup

using Syncfusion.Windows.Shared;

CalendarEdit calendarEdit = new CalendarEdit();
calendarEdit.Height = 250;
calendarEdit.Width = 300;

// Get selected date
DateTime selectedDate = calendarEdit.Date;

// Set selected date programmatically
calendarEdit.Date = new DateTime(2024, 3, 15);

Common Patterns

Pattern 1: Single Date Selection with Range Restriction

// Allow only dates in March 2024
calendarEdit.MinDate = new DateTime(2024, 3, 1);
calendarEdit.MaxDate = new DateTime(2024, 3, 31);
calendarEdit.Date = new DateTime(2024, 3, 15);

// Get the selected date
DateTime selectedDate = calendarEdit.Date;

Pattern 2: Multiple Date Selection

// Enable multiple date selection
calendarEdit.AllowMultiplySelection = true;

// Select multiple dates by dragging or Ctrl+clicking
// Retrieve all selected dates
var selectedDates = calendarEdit.SelectedDates;

Pattern 3: Block Specific Dates (Blackout Dates)

// Block specific date ranges
calendarEdit.BlackoutDates.Add(new DateTime(2024, 3, 5));
calendarEdit.BlackoutDates.Add(new DateTime(2024, 3, 20));

// Users cannot select these dates
calendarEdit.Date = new DateTime(2024, 3, 15);

Pattern 4: Customize Calendar Appearance

using System.Windows.Media;

// Customize colors
calendarEdit.Foreground = Brushes.Blue;
calendarEdit.Background = Brushes.White;
calendarEdit.MouseOverForeground = Brushes.Red;
calendarEdit.MouseOverBackground = Brushes.Lavender;

// Customize header
calendarEdit.HeaderBackground = Brushes.Green;
calendarEdit.HeaderForeground = Brushes.Yellow;

Key Properties Reference

Property	Type	Description
`Date`	DateTime	Gets or sets the currently selected date
`SelectedDates`	Collection	Gets all selected dates in multi-selection mode
`AllowMultiplySelection`	bool	Enables or disables multiple date selection
`MinDate`	DateTime	Sets the earliest selectable date
`MaxDate`	DateTime	Sets the latest selectable date
`BlackoutDates`	Collection	Contains dates that cannot be selected
`DisableDateSelection`	bool	Disables date selection (month/year still selectable)
`MinMaxHidden`	bool	Hides dates outside MinDate/MaxDate range
`HeaderBackground`	Brush	Customizes the header background color
`HeaderForeground`	Brush	Customizes the header text color
`ChangeModeTime`	int	Animation duration for mode changes (ms)
`FrameMovingTime`	int	Animation duration for month transitions (ms)

Next Steps: Choose a reference file above based on what you need to implement. Start with "Getting Started" if setting up CalendarEdit for the first time.

syncfusion-wpf-calendar