Back to Devexpress

Calendar

aspnet-11649-components-data-editors-calendar.md

latest6.9 KB
Original Source

Calendar

  • Feb 06, 2023
  • 3 minutes to read

The ASPxCalendar control allows end users to select dates and navigate through months and years.

Run Demo: ASPxCalendar

Main Features

Multiple Date Selection

End users can work in single or multiple date selection mode (the EnableMultiSelect property). In multiple date selection mode, users can select individual dates or a range of dates. To choose a range of dates, select the initial date and hold the left mouse button (or the Shift key) down while moving the mouse to the final date. Hold down the Ctrl key to add a date to or remove it from the selection. Click a week number to select the entire week.

Highlight Dates

The HighlightToday and HighlightWeekends properties allow you to highlight today’s date and weekend days.

Customizable Appearance

The following table lists API members you can use to customize the Calendar’s appearance:

ElementVisibilityAppearance
Today ButtonShowTodayButtonButtonStyle
Clear ButtonShowClearButtonButtonStyle
Week NumbersShowWeekNumbersWeekNumberStyle
Day HeadersShowDayHeadersDayHeaderStyle
HeaderShowHeaderHeaderStyle
Month Navigation ButtonsEnablePeriodNavigationNextPeriodImage, PrevPeriodImage
Year Navigation ButtonsEnableLargePeriodNavigationNextLargePeriodImage, PrevLargePeriodImage

Multi-Month View

The Calendar control can display multiple months and organize them in several rows and columns. The Columns and Rows properties allow you to define the number of columns and rows.

Run Demo: Multi-Month View

Month-Year Picker Mode

The Month-year Picker mode allows you to specify which date component an end user can select: a day, a month or a year. You can click the header to change the calendar view (fast navigation). Use the following settings to specify how users select dates and restrict the available calendar views:

PropertyDescription
PickerTypeSpecifies a date component an end user can select (a day, month or year).
InitialViewSpecifies the initial Calendar view.
MaxViewSpecifies the earliest available Calendar view. For example, if the MaxView property is set to Months, the picker displays the months of a particular year and January is the earliest available Calendar view item.

Inline Navigation

The Calendar can display the fast navigation panel in the editor or popup window (the DisplayMode property).

Render Custom Days

You can customize each calendar day’s appearance before the browser renders a page.

Run Demo: Custom Day Rendering

Built-in Validation

The Calendar control allows you to validate data on the client and server sides. Refer to the following topic for more information: Validation.

Client-Side APIs

The ASPxClientCalendar object is the client-side equivalent of the ASPxCalendar control. This object exposes the control’s comprehensive client-side API.

MethodDescription
ClearSelectionDeselects all selected dates.
DeselectDate(date)Deselects the specified date.
DeselectRange(start, end)Deselects the range of dates.
GetMaxDateGets the earliest date a user can select.
GetMinDateGets the furthest date a user can select.
GetSelectedDateReturns the selected date.
SetSelectedDate(date)Sets the calendar’s selected date.
GetSelectedDatesGets a list of selected dates.
GetVisibleDateGets the date (day, month, year) that the calendar displays.
IsDateSelected(date)Specifies whether the specified date is selected.
SelectDate(date)Selects the specified date.
SelectRange(start, end)Selects the specified range of dates.
SetMaxDate(date)Sets the calendar’s furthest date an end user can select.
SetMinDate(date)Sets the calendar’s earliest date an end user can select.
SetSelectedDate(date)Sets the calendar’s selected date.
SetVisibleDate(date)Sets the date (day, month, year) the calendar displays.