Calendar Configuration
The DateRange popup displays a MultiViewCalendar component, which you can configure by passing options to the DateRangePopup component.
The DateRangePopup component exposes the following MultiViewCalendar configuration options:
View Settings
The DateRange popup supports hierarchical calendar views (month, year, decade, and century) that allow users to navigate and select dates at different levels of granularity. You can control which views are available and customize the initial display.
activeView—Specifies the initially displayed view when the popup opens. By default, the active view ismonth.bottomView—Specifies the most detailed view level to which users can drill down. The default value ismonth.topView—Specifies the highest view level to which users can navigate. The default value iscentury.
The following example demonstrates how to configure the calendar to start in the year view and restrict users to navigate only between the decade and year view.
Date Constraints
The DateRange popup allows you to restrict the selectable date range by setting minimum and maximum boundaries. Dates outside these constraints are not displayed in the MultiViewCalendar.
min—Specifies the earliest date users can select. The default value is1970-01-01. Use this to prevent selection of past dates or to enforce a valid date range.max—Specifies the furthest date users can select. The default value is2099-12-31. Use this to limit future date selection.focusedDate—Specifies which date receives initial focus when the popup opens, determining which month or year is displayed. If the focused date falls outside theminormaxrange, the component automatically adjusts it to the nearest valid date.
The following example demonstrates how to restrict date selection to a specific range. When you open the popup, you will see how dates outside this range are not displayed in the calendar.
Display Options
The DateRange popup provides several options to customize the visual presentation of the MultiViewCalendar to match your application's design and functional requirements.
showViewHeader—Determines whether to display a header above each calendar view showing the current period (for example, "January 2025"). The default value isfalse.showOtherMonthDays—Controls the visibility of days from adjacent months in the current month's calendar grid. The default value istrue. Set tofalsefor a cleaner look that emphasizes only the current month.weekNumber—Specifies whether to display a column showing week numbers on the left side of the month view. The default value isfalse.
The following example demonstrates how to customize the calendar appearance by enabling view headers and week numbers, while hiding days from adjacent months.
Navigation Options
The DateRange popup provides options to control the MultiViewCalendar's navigation behavior and interaction state.
animateNavigation—Determines whether to enable smooth slide animations when navigating between months, years, or other views. The default value isfalse.disabled—Specifies whether the calendar is disabled, preventing user interaction. The default value isfalse.
The following example demonstrates MultiViewCalendar navigation options. Toggle the checkboxes to enable or disable animations and to control the calendar's interactive state.