WPF Calendar (CalendarEdit) Implementation Guide

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

• 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

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

Date Selection

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

Navigation Features

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

Restrict Date Selection

• 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

• 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

Date

SelectedDates

AllowMultiplySelection

MinDate

MaxDate

BlackoutDates

DisableDateSelection

MinMaxHidden

HeaderBackground

HeaderForeground

ChangeModeTime

FrameMovingTime