syncfusion-wpf-calendar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WPF Calendar (CalendarEdit) Implementation Guide

WPF日历（CalendarEdit）实现指南

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.

CalendarEdit控件为WPF应用提供了一套全面的日历UI，用于选择和管理日期。它支持单日期和多日期选择、日期范围限制、自定义外观，以及从日视图到十年视图的强大导航模式。

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

日期选择： 需要用户选择单个或多个日期时
日历UI： 构建带有月/年导航的日历控件
日期限制： 实现日期范围约束或阻止特定日期
日程安排： 创建预订、预约或事件选择界面
日期操作： 使用日历方法进行日期运算（添加天数、月份等）
外观自定义： 设置日历的颜色、画刷和视觉属性
多语言支持： 支持RTL（从右到左）布局和不同文化区域

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

核心特性：

支持从公元0年到9999年的日期
单日期和多日期选择模式
日、月、年、十年视图的导航
最小/最大日期约束和禁用日期设置
可自定义颜色、画刷和动画
RTL和文化区域支持
内置平滑过渡动画

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

📄 阅读： references/getting-started.md

安装和程序集配置
通过设计器、XAML和C#添加CalendarEdit
基本控件结构与初始设置

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

📄 阅读： references/date-selection.md

选择单个日期（鼠标点击和编程方式）
选择多个日期（拖拽和Ctrl+点击）
处理Date和SelectedDates属性

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

📄 阅读： references/navigation.md

在日、月、年、十年视图间切换
标题导航、键盘快捷键和动画控制
自定义标题外观和动画时长

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

📄 阅读： references/restrict-dates.md

设置日期范围约束（MinDate和MaxDate）
隐藏或显示范围外的禁用日期
禁用所有日期选择或阻止特定日期范围

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

📄 阅读： references/appearance.md

自定义前景色、背景色和画刷
RTL布局支持与流向设置
使用日历对象方法进行日期运算

Quick Start

快速开始

Basic XAML Setup

基本XAML配置

xaml

<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>

xaml

<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

基本C#配置

csharp

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);

csharp

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

模式1：带范围限制的单日期选择

csharp

// 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;

csharp

// 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

模式2：多日期选择

csharp

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

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

csharp

// 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)

模式3：阻止特定日期（禁用日期）

csharp

// 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);

csharp

// 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

模式4：自定义日历外观

csharp

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;

csharp

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.

属性	类型	说明
`Date`	DateTime	获取或设置当前选中的日期
`SelectedDates`	Collection	获取多选择模式下所有选中的日期
`AllowMultiplySelection`	bool	启用或禁用多日期选择
`MinDate`	DateTime	设置最早可选择的日期
`MaxDate`	DateTime	设置最晚可选择的日期
`BlackoutDates`	Collection	包含不可选择的日期
`DisableDateSelection`	bool	禁用日期选择（仍可选择月/年）
`MinMaxHidden`	bool	隐藏MinDate/MaxDate范围外的日期
`HeaderBackground`	Brush	自定义标题背景色
`HeaderForeground`	Brush	自定义标题文字颜色
`ChangeModeTime`	int	视图切换的动画时长（毫秒）
`FrameMovingTime`	int	月份切换的动画时长（毫秒）

下一步： 根据你需要实现的功能选择上述参考文档。如果是首次设置CalendarEdit，请从《入门指南》开始。