syncfusion-wpf-calendar

Q: How do I install syncfusion-wpf-calendar?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-calendar in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-wpf-calendar/ (personal) or .claude/skills/syncfusion-wpf-calendar/ (project).

by syncfusionProductivity & Automation

Guide to using the Syncfusion WPF CalendarEdit control for date selection and navigation. Use this skill whenever the user needs to implement calendar functionality, select dates, restrict date ranges, customize calendar appearance, or work with multi-date selection. Essential for building date picker interfaces, booking systems, scheduling applications, and any WPF project requiring calendar controls.

Installs: 155
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-calendar

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-wpf-calendar automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

FAQ

What does the syncfusion-wpf-calendar skill do?

How do I install syncfusion-wpf-calendar?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-calendar in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-wpf-calendar/ (personal) or .claude/skills/syncfusion-wpf-calendar/ (project).

Which AI agents can use syncfusion-wpf-calendar?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-wpf-calendar safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-wpf-calendar?

It is published by syncfusion in syncfusion/wpf-ui-components-skills. It has 155 recorded installs.