DateRangePopupComponent

Specifies the initial view that the MultiViewCalendar displays when it loads (see example). By default, the active view is month.

You have to set activeView within the topView-bottomView range.

Determines whether the component uses adaptive rendering for different screen sizes. By default, adaptive rendering is disabled.

Specifies the subtitle text displayed in the header of the action sheet. Applies only when AdaptiveMode is set to auto.

Specifies the title text for the input element and the header of the action sheet. Applies only when AdaptiveMode is set to auto.

Determines whether users can select dates in reverse order. When you set allowReverse to true, the component does not validate if the start date comes after the end date.

Specifies the element that serves as an anchor for the popup. The popup opens next to this element. For more information, refer to the section on aligning to specific components.

Specifies the alignment point for the anchor element. For more information, refer to the section on positioning.

Controls the popup animations. When you set animate to true, the popup displays opening and closing animations. For more information about controlling the popup animations, refer to the article on animations.

Determines whether to animate transitions when users navigate between views.

Specifies where to render the popup container. By default, the popup renders in the root component.

Specifies the lowest view level that users can navigate to (see example).

Configures how the popup behaves when it encounters viewport boundaries. For more information, refer to the article on viewport boundary detection.

Determines whether the MultiViewCalendar is interactive (see example). When you set disabled to true, users cannot interact with the component.

Specifies the dates in the MultiViewCalendar that you want to disable (see example).

Specifies the focused date of the MultiViewCalendar component. Defines which date receives focus when the component loads (see example).

If the MultiViewCalendar is out of the min or max range, it normalizes the defined focusedDate.

Specifies the margin around the popup in pixels. Creates empty space between the popup and its anchor element.

Specifies the maximum date that users can select (see example).

Specifies the minimum date that users can select (see example).

Specifies the alignment point for the popup element. For more information, refer to the section on positioning.

Determines whether to display days from adjacent months in the current month view (see example).

Determines whether to display a header for each view (see example). For example, displays the month name in the month view.

Specifies the highest view level that users can navigate to (see example).

Specifies the number of calendar views to display side by side.

Determines whether to display week numbers in the month view (see example).

Gets the active calendar that displays in the popup.

When the popup is closed, the property returns null.

Gets the active state of the component. Returns true when the opened calendar is active.

Gets or sets the visibility state of the component.

Fires when the calendar element loses focus (see example).

Fires when the popup closes due to an ESC keypress or when it leaves the viewport (see example).

Fires when the popup is about to close (see example). You can prevent this event to keep the popup open.

Fires when the calendar element receives focus (see example).

Fires when the popup is about to open (see example). You can prevent this event to keep the popup closed.

Opens the popup component and focuses the calendar.

Focuses the calendar if it is available.

Checks if a focused element is inside the popup.

Toggles the visibility of the popup or action sheet. When you use the toggle method to show or hide the popup or action sheet, the open and close events do not fire.