Calendar
- 4 minutes to read
The Calendar extension allows end-users to select dates and navigate through months and years.
#Implementation Details
Calendar is realized by the CalendarExtension class. Its instance can be accessed via the ExtensionsFactory.Calendar helper method, which is used to add a Calendar extension to a view. This method’s parameter provides access to the Calendar‘s settings, implemented by the CalendarSettings class, allowing you to fully customize the extension.
Calendar‘s client counterpart is represented by the MVCxClientCalendar object.
#Declaration
Calendar can be added to a view in the following manner.
@Html.DevExpress().Calendar(settings => {
settings.Name = "calendar1";
settings.SelectedDate = new DateTime(2010, 11, 22);
}).GetHtml()
Note
The Partial View should contain only the extension’s code.
The code result is demonstrated in the image below.
#Main Features
Multiple Date Selection
The Calendar allows end-users to work in a single or multiple date selection mode. This can be defined with the CalendarSettings.Properties.EnableMultiSelect (CalendarProperties.EnableMultiSelect) property.
Date Highlighting
Weekends and today can be highlighted in standard or custom ways.
Fully Customizable Appearance
You can customize the look-and-feel of all elements.
Element Visibility Appearance Today Button Calendar Properties. Show Today Button Calendar Properties. Button Style Clear Button Calendar Properties. Show Clear Button Calendar Properties. Button Style Week Numbers Calendar Properties. Show Week Numbers Calendar Properties. Week Number Style Day Headers Calendar Properties. Show Day Headers Calendar Properties. Day Header Style Header Calendar Properties. Show Header Calendar Properties. Header Style Month Navigation Buttons Calendar Properties. Enable Period Navigation Calendar Properties. , CalendarNext Period Image Properties. Prev Period Image Year Navigation Buttons Calendar Properties. Enable Large Period Navigation Calendar Properties. , CalendarNext Large Period Image Properties. Prev Large Period Image You can customize the extension appearance using predefined built-in visual themes. See this topic to learn more: Applying Themes.
Multi-Month View
The Calendar editor is able to display multiple months at the same time, organizing them in several rows and columns. You can define the number of columns via the CalendarSettings.Properties.Columns (CalendarProperties.Columns) property and a number of rows via the CalendarSettings.Properties.Rows (CalendarProperties.Rows) property.
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 the date selection and restrict the available calendar views:
Property Description Date Edit Properties. Picker Type Specifies a date component an end user can select (a day, month or year). Calendar Fast Nav Properties. Initial View Specifies the initial calendar view. Calendar Fast Nav Properties. Max View Specifies the earliest available calendar view. For example, if the Calendar Fast property is set to “Months”, the picker displays the months of a particular year and January is the earliest available calendar view item.Nav Properties. Max View Custom Day Rendering
The Calendar editor allows you to conditionally change the manner with which you render calendar days.
Built-in Validation
The Calendar extension allows you to perform data validation both on the client and server side. See the Built-in Validation topic to learn more.
Full-Featured Client-Side API
The Calendar provides you with a comprehensive client-side API. This API is implemented using JavaScript and is exposed via the MVCxClientCalendar object. The MVCxClientCalendar object serves as a client-side equivalent of the Calendar extension.
You can modify editor behavior using the following methods.
Method Description ASPx Client Calendar. Clear Selection Deselects all the selected dates within the calendar. ASPx Client Calendar. Deselect Date Deselects the specified date within the calendar. ASPx Client Calendar. Deselect Range Deselects the specified range of dates within the calendar. ASPx Client Calendar. Get Max Date Gets the maximum date on the calendar. ASPx Client Calendar. Get Min Date Gets the minimum date on the calendar. ASPx Client Calendar. Get Selected Date Returns the calendar’s selected date. ASPx Client Calendar. Get Selected Dates Returns a list of dates which are selected within the calendar. ASPx Client Calendar. Get Visible Date Gets the date that determines the month and year that are currently displayed in the calendar. ASPx Client Calendar. Is Date Selected Tests whether the specified date is selected. ASPx Client Calendar. Select Date Selects the specified date within the calendar. ASPx Client Calendar. Select Range Selects the specified range of dates within the calendar. ASPx Client Calendar. Set Max Date Sets the maximum date of the calendar. ASPx Client Calendar. Set Min Date Sets the minimum date of the calendar. ASPx Client Calendar. Set Selected Date Sets the calendar’s selected date. ASPx Client Calendar. Set Visible Date Sets the date that specifies the month and year to be displayed in the calendar.