Calendar JAVASCRIPT UI Component API

Calendar Javascript API

Class

Calendar

Calendar

Calendar allows user to easily select one or more dates. This control supports multi-calendar view, special dates, holidays, weekends, decade views.

Selector

smart-calendar

Properties

AanimationSpecifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects.
AanimationSettingsEnhances the animation behavior by applying new settings when enabled.Properties: startSpeed – Specifies the initial speed at which the animation begins, allowing you to control how quickly the animation starts. easeThreshold – Defines the point during the animation where the "ease effect" starts, meaning the animation begins to slow down for a smoother transition. step – Sets the interval for each frame or update of the animation, effectively controlling how smoothly or incrementally the animation moves. stepEaseSize – A coefficient used to calculate the updated step size once the animation passes the easeThreshold, increasing the ease-in/ease-out effect as the animation decelerates. resetThreshold – Determines the point at which the animation will automatically reset and start from the beginning, allowing for looping or repeated motion.
CcalendarModeSpecifies the configuration and behavior of the date selection controls displayed within the header section of the Calendar component, such as navigation buttons, month and year dropdowns, or other tools that allow users to change the visible date range.
DdayNameFormatSpecifies the display format for the names of the days of the week that appear as headers above the calendar grid. This setting controls whether the day names are shown in full (e.g., "Monday"), as abbreviations (e.g., "Mon"), or as single letters (e.g., "M").
DdateFormatFunctionA callback function that allows you to customize the display format of month names when the calendarMode property is set to 'default'. Use this callback to define how month names should appear (e.g., full name, abbreviation, localization) in the calendar interface.
DdisabledControls whether the Calendar feature is active or inactive. When enabled, the Calendar is accessible to users; when disabled, the Calendar is inactive.
DdisableAutoNavigationPrevents the calendar from automatically navigating to a different month when the user clicks on a date cell that belongs to a month other than the one currently displayed. This ensures that selecting dates outside the visible month will not change the current view.
DdisableMouseWheelConfigures whether the mouse wheel can be used to navigate or change dates in the Calendar component. When enabled, scrolling the mouse wheel will move between calendar views or dates; when disabled, the mouse wheel will have no effect on the calendar.
DdisplayModeSpecifies which date is initially displayed in the calendar when calendarMode is set to 'default'. This property controls the starting visible month or day in the calendar interface, allowing you to set the user's initial view to a specific date.
DdisplayModeViewSpecifies the layout style displayed for the month or year view when calendarMode is set to "Default." This setting controls how dates are visually organized and presented to the user, such as showing days within a month grid or listing months within a year, depending on the selected calendar mode.
DdropDownHeightSpecifies the vertical height, in pixels, of the month selection dropdown within the Calendar component. This setting controls how much space the dropdown occupies when users select a month. Adjusting this value can improve usability and visual consistency with other UI elements.
DdropDownWidthSpecifies the width of the month selection dropdown within the Calendar component. This property controls how wide the dropdown appears, allowing you to adjust its size for better alignment or readability within the Calendar interface.
FfirstDayOfWeekSpecifies which day is considered the start of the week, using a numeric value where 0 represents Sunday, 1 represents Monday, up to 6 for Saturday. For example, setting the value to 1 makes Monday the first day of the week.
FfooterTemplateDefines a custom footer template for the component. You can provide either the ID of an existing '<template>' element in the DOM, or pass a direct reference to an 'HTMLTemplateElement'. The specified template will be used to render the footer section of the component.
HheaderTemplateDefines a custom header template for the component. You can provide either the string ID of an existing HTMLTemplateElement in the DOM or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section.
HhideDayNamesConceals the display of weekday names in the user interface, ensuring that the days of the week (e.g., Monday, Tuesday, etc.) are not visible to users.
HhideOtherMonthDaysPrevents dates that belong to adjacent months from being displayed, ensuring that only the days within the current month are visible in the calendar view.
HhideTooltipArrowDetermines whether the tooltip’s arrow indicator is visible. When enabled, the arrow will be hidden and only the tooltip’s content will be displayed.
IimportantDatesDefines the specific dates that will be visually highlighted or marked as important within the interface. These dates can be used to indicate events, deadlines, holidays, or other noteworthy occasions that should stand out to users when viewing the calendar or date selector component.
IimportantDatesTemplateDefines a template for displaying important dates. This property accepts either the ID of an HTML '<template>' element present in the DOM, or a direct reference to that template element. The specified template will be used to render each important date in the component.
UunlockKeySets or retrieves the unlockKey, a unique identifier or code used to grant access to the product's locked features or content.
LlocaleSpecifies the language used for displaying all calendar elements, such as month names, day labels, and interface text, ensuring the calendar is localized for the selected language.
LlocalizeFormatFunctionCallback function that allows you to define a custom format for messages returned by the Localization Module, enabling you to modify, wrap, or translate message content before it is delivered to the application.
MmaxSpecifies the latest selectable date for the Calendar component. Accepts JavaScript Date objects or valid date string formats (e.g., 'YYYY-MM-DD', ISO 8601). Dates beyond this value will be disabled and cannot be selected by the user.
MmessagesSets or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages and regions. This property is intended for localization and works together with the locale property to support multiple languages in the widget’s user interface.
MminSpecifies the earliest selectable date for the Calendar component. Accepts either JavaScript Date objects or strings in valid date formats (e.g., 'YYYY-MM-DD'). Dates earlier than this value will be disabled and cannot be selected.
MmonthsSpecifies how many months are displayed simultaneously within the calendar interface. You can select any value between 1 and 12, with 12 being the maximum number of months shown at once. If this property is not set, the calendar will display only a single month by default.
MmonthNameFormatSpecifies how month names are displayed in the header when DisplayMode is set to "Default" or when the Months property has a value greater than 1. This setting controls whether month names appear in their full, abbreviated, or custom format within the header section, improving readability and user interface customization.
NnameSets or retrieves the value of the element’s name attribute. This attribute identifies the element when submitting HTML forms, allowing its data to be included with the specified name as part of the form data sent to the server.
RreadonlyWhen the element is set to "readonly," users can see its content but cannot modify or edit its value. While the element remains focusable, all user input and changes are disabled, preventing any interaction that would alter its contents.
RrestrictedDatesDefines a list of restricted dates that the user cannot select, hover over, or focus on within the date picker. These dates will be visually indicated as unavailable or disabled in the interface. Each restricted date can be provided as either a JavaScript Date object or a string in a recognized date format (such as 'YYYY-MM-DD'). Any date included in this list will be unselectable and visually styled to indicate its restricted status.
RrightToLeftSpecifies or retrieves a value that determines whether the element's content alignment supports right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. Enabling this property ensures that text and layout are properly adjusted for locales that require RTL formatting.
SscrollButtonsNavigationModeSpecifies the orientation (horizontal or vertical) of the navigation buttons displayed in the header, and sets the direction in which the accompanying animation plays.
SscrollButtonsPositionSpecifies the alignment and placement of navigation buttons within the header section, controlling whether they appear on the left, center, or right side of the header.
SselectedDatesSpecifies the dates that should appear as selected within the component. These selected dates are visually distinguished from unselected dates using a different style or highlight. You can provide the selected dates either as JavaScript Date objects or as strings formatted in any valid date representation (e.g., 'YYYY-MM-DD').
SselectionModeSpecifies how users can select dates in the component, such as choosing a single date, a range of dates, or multiple individual dates.
SspinButtonsDelaySpecifies the amount of time (in milliseconds) that must pass between consecutive clicks of the calendar's date navigation buttons in the header. This delay helps prevent users from triggering rapid, repeated navigation actions and can be used to control the responsiveness of date changes in the calendar interface.
SspinButtonsInitialDelaySpecifies the initial delay, in milliseconds, before the date navigation buttons in the Calendar header begin to respond when pressed. This delay applies to the first action after a button is engaged, allowing users control over how quickly navigation starts.
TthemeSpecifies the visual theme applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface.
TtitleTemplateSpecifies the template to be used for the calendar's title section. This property accepts either the ID of an HTMLTemplate element present in the DOM or a direct reference to an HTMLTemplate element. The provided template will be rendered in place of the default title section, allowing for custom formatting and content.
TtooltipControls whether tooltips are shown for important dates. When enabled, hovering over an important date will display a tooltip with additional information. When disabled, no tooltip will appear on hover.
TtooltipArrowControls the visibility of the tooltip arrow for important dates. When enabled (default), an arrow is displayed on the tooltip to indicate its reference point. Disabling this option will hide the arrow, resulting in a plain tooltip without a directional indicator.
TtooltipDelaySpecifies the amount of time (in milliseconds) to wait before displaying the tooltip after a user hovers over or focuses on the target element. This controls how quickly the tooltip appears, allowing you to adjust the responsiveness of the tooltip based on user interaction.
TtooltipOffsetSpecifies a custom offset for the tooltip's position. Accepts an array containing two numbers: the first value represents the horizontal (left) offset, and the second value represents the vertical (top) offset. These values determine how many pixels the tooltip is shifted from its default position along the X (left) and Y (top) axes, respectively.
TtooltipPositionSpecifies the placement of the tooltip relative to its target element (e.g., top, right, bottom, or left).
TtooltipTemplateDefines the template used for the tooltip's content. You can provide either the ID of an existing '<template>' element in the DOM or a direct reference to an HTMLTemplateElement. The tooltip will render its content based on the markup and structure defined within the specified template.
UunfocusableWhen set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or programmatic focus methods.
VviewSpecifies the display orientation of the Calendar component (horizontal or vertical), affecting how dates and months are arranged within the calendar view.
VviewSectionsSpecifies which sections of the Calendar component are displayed to the user. Available sections include: 'title', 'header', and 'footer'. You may enable any combination of these sections simultaneously by listing them together. If this setting is not specified, only the 'header' section will be shown by default.
WweekNumbersControls the display of week numbers within the calendar. When enabled, a week number is shown at the start of each week row, allowing users to easily reference and distinguish weeks. If disabled, week numbers are hidden, and only the standard calendar dates are displayed.
WweeksSpecifies how many weeks are displayed in the calendar view. This property accepts integer values from 1 to 6, where 1 displays a single week and 6 displays six weeks, representing a full month view.
YyearFormatSpecifies the format in which the year is displayed in the header when the DisplayMode property is set to "Default" or when the Months property has a value greater than 1. This setting controls how the year appears (e.g., "2024", "24") in the header section of the component.

Events

CchangeThis event is triggered whenever a user selects or deselects a date. It fires each time the selection state of a date changes, allowing you to respond to both new date selections and the removal of existing selections.
DdisplayModeChangingThis event is fired immediately before the displayMode changes, providing an opportunity to intercept the transition. Within the event handler, you can call event.preventDefault() to cancel the displayMode change and prevent the update from occurring. This allows developers to implement custom logic or validation before the displayMode actually switches.
DdisplayModeChangeThis event is triggered whenever the display mode of the application is changed (for example, switching between fullscreen, windowed, or split-screen modes). It allows developers to detect and respond to changes in how content is presented to the user.
NnavigationChangingThis event is triggered whenever the view is about to change, such as during navigation to a different page or section. Developers can intercept this event to perform custom logic before the navigation completes. If necessary, the navigation can be cancelled by calling the preventDefault method within the event handler, stopping the view from changing.
NnavigationChangeThis event is triggered whenever the user navigates to a different view or the current view is updated within the application. It provides an opportunity to execute custom logic in response to view transitions, such as loading new data, updating UI components, or tracking navigation events.
OopenThis event is triggered each time the tooltip associated with an important date becomes visible to the user, such as when they hover over or click on the date. Use this event to execute custom logic or display additional content whenever the important date's tooltip is opened.
CcloseThis event is triggered when a user closes the tooltip associated with an important date. It indicates that the tooltip has been dismissed, either by user interaction (such as clicking outside the tooltip or pressing a close button) or through programmatic means. Use this event to perform actions or update the UI in response to the tooltip being closed.

Methods

CclearSelectionClears the current selection by removing all selected dates from the calendar. This action resets the calendar to its default unselected state, ensuring that no dates remain highlighted or chosen.
NnavigateDetermines the navigation direction based on the provided argument: navigates forward if the argument is positive or "next," and navigates backward if the argument is negative or "previous."
SselectAllows the user to select a date or deselect a previously selected date, updating the selection state accordingly.
TtodaySelects the current date based on the user's system settings.

Properties

animation"none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-calendar animation='none'></smart-calendar>

Set the animation property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.animation = 'simple';

Get the animation property. 

 const calendar = document.querySelector('smart-calendar');
 let animation = calendar.animation;

animationSettingsobject

Enhances the animation behavior by applying new settings when enabled.


Properties:



  • startSpeed – Specifies the initial speed at which the animation begins, allowing you to control how quickly the animation starts.


  • easeThreshold – Defines the point during the animation where the "ease effect" starts, meaning the animation begins to slow down for a smoother transition.


  • step – Sets the interval for each frame or update of the animation, effectively controlling how smoothly or incrementally the animation moves.


  • stepEaseSize – A coefficient used to calculate the updated step size once the animation passes the easeThreshold, increasing the ease-in/ease-out effect as the animation decelerates.


  • resetThreshold – Determines the point at which the animation will automatically reset and start from the beginning, allowing for looping or repeated motion.

Example

Set the animationSettings property. 

 <smart-calendar animation-settings='{ step: 0.5 }'></smart-calendar>

Set the animationSettings property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.animationSettings = { startSpeed: 0.2, easeThreshold : 0.5, step : 0.25, stepEaseSize : 200, resetThreshold : 0.2  };

Get the animationSettings property. 

 const calendar = document.querySelector('smart-calendar');
 let animationSettings = calendar.animationSettings;

calendarMode"default" | "classic"

Specifies the configuration and behavior of the date selection controls displayed within the header section of the Calendar component, such as navigation buttons, month and year dropdowns, or other tools that allow users to change the visible date range.

Allowed Values

  • "default" - Default mode displays different views for the month and year selection when the header label is clicked. The views can be switch via keyboard combination as well ('Control' + ArrowUp/ArrowDown).
  • "classic" - Classic mode consists of a DropDownList for the month selection and an Input for the year selection which are placed inside the header of the element.

Default value

"default"

Example

Set the calendarMode property. 

 <smart-calendar calendar-mode='classic'></smart-calendar>

Set the calendarMode property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.calendarMode = 'default';

Get the calendarMode property. 

 const calendar = document.querySelector('smart-calendar');
 let calendarMode = calendar.calendarMode;

dayNameFormat"narrow" | "firstTwoLetters" | "long" | "short"

Specifies the display format for the names of the days of the week that appear as headers above the calendar grid. This setting controls whether the day names are shown in full (e.g., "Monday"), as abbreviations (e.g., "Mon"), or as single letters (e.g., "M").

Allowed Values

  • "narrow" - Displays a single letter of the day name.
  • "firstTwoLetters" - Displays the first two letters of the day name.
  • "long" - Displays the full day name.
  • "short" - Displays the abbreviation of the day name with upper case letters.

Default value

"firstTwoLetters"

Example

Set the dayNameFormat property. 

 <smart-calendar day-name-format='long'></smart-calendar>

Set the dayNameFormat property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.dayNameFormat = 'short';

Get the dayNameFormat property. 

 const calendar = document.querySelector('smart-calendar');
 let dayNameFormat = calendar.dayNameFormat;

dateFormatFunctionfunction | null

A callback function that allows you to customize the display format of month names when the calendarMode property is set to 'default'. Use this callback to define how month names should appear (e.g., full name, abbreviation, localization) in the calendar interface.

Example

Set the dateFormatFunction property. 

 <smart-calendar date-format-function='null'></smart-calendar>

Set the dateFormatFunction property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.dateFormatFunction = function(date) { return  date.getDate() + " - " + date.getMonth() + " - " + date.getFullYear() };

Get the dateFormatFunction property. 

 const calendar = document.querySelector('smart-calendar');
 let dateFormatFunction = calendar.dateFormatFunction;

disabledboolean

Controls whether the Calendar feature is active or inactive. When enabled, the Calendar is accessible to users; when disabled, the Calendar is inactive.

Default value

false

Example

Set the disabled property. 

 <smart-calendar disabled></smart-calendar>

Set the disabled property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.disabled = false;

Get the disabled property. 

 const calendar = document.querySelector('smart-calendar');
 let disabled = calendar.disabled;

disableAutoNavigationboolean

Prevents the calendar from automatically navigating to a different month when the user clicks on a date cell that belongs to a month other than the one currently displayed. This ensures that selecting dates outside the visible month will not change the current view.

Default value

false

Example

Set the disableAutoNavigation property. 

 <smart-calendar disable-auto-navigation></smart-calendar>

Set the disableAutoNavigation property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.disableAutoNavigation = false;

Get the disableAutoNavigation property. 

 const calendar = document.querySelector('smart-calendar');
 let disableAutoNavigation = calendar.disableAutoNavigation;

disableMouseWheelboolean

Configures whether the mouse wheel can be used to navigate or change dates in the Calendar component. When enabled, scrolling the mouse wheel will move between calendar views or dates; when disabled, the mouse wheel will have no effect on the calendar.

Default value

false

Example

Set the disableMouseWheel property. 

 <smart-calendar disable-mouse-wheel></smart-calendar>

Set the disableMouseWheel property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.disableMouseWheel = false;

Get the disableMouseWheel property. 

 const calendar = document.querySelector('smart-calendar');
 let disableMouseWheel = calendar.disableMouseWheel;

displayMode"month" | "year" | "decade"

Specifies which date is initially displayed in the calendar when calendarMode is set to 'default'. This property controls the starting visible month or day in the calendar interface, allowing you to set the user's initial view to a specific date.

Allowed Values

  • "month" - Displays the days of the month.
  • "year" - Displays the months of the year.
  • "decade" - Displays the years of the decade.

Default value

"month"
Try a demo showcasing the displayMode property.

Example

Set the displayMode property. 

 <smart-calendar display-mode='year'></smart-calendar>

Set the displayMode property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.displayMode = 'decade';

Get the displayMode property. 

 const calendar = document.querySelector('smart-calendar');
 let displayMode = calendar.displayMode;

displayModeView"table" | "list"

Specifies the layout style displayed for the month or year view when calendarMode is set to "Default." This setting controls how dates are visually organized and presented to the user, such as showing days within a month grid or listing months within a year, depending on the selected calendar mode.

Allowed Values

  • "table" - Displays a table of dates to select from.
  • "list" - Displays a list of dates to select from.

Default value

"table"

Example

Set the displayModeView property. 

 <smart-calendar display-mode-view='list'></smart-calendar>

Set the displayModeView property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.displayModeView = 'table';

Get the displayModeView property. 

 const calendar = document.querySelector('smart-calendar');
 let displayModeView = calendar.displayModeView;

dropDownHeightstring | number

Specifies the vertical height, in pixels, of the month selection dropdown within the Calendar component. This setting controls how much space the dropdown occupies when users select a month. Adjusting this value can improve usability and visual consistency with other UI elements.

Default value

200

Example

Set the dropDownHeight property. 

 <smart-calendar drop-down-height='50'></smart-calendar>

Set the dropDownHeight property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.dropDownHeight = 80;

Get the dropDownHeight property. 

 const calendar = document.querySelector('smart-calendar');
 let dropDownHeight = calendar.dropDownHeight;

dropDownWidthstring | number

Specifies the width of the month selection dropdown within the Calendar component. This property controls how wide the dropdown appears, allowing you to adjust its size for better alignment or readability within the Calendar interface.

Default value

""

Example

Set the dropDownWidth property. 

 <smart-calendar drop-down-width='50'></smart-calendar>

Set the dropDownWidth property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.dropDownWidth = 80;

Get the dropDownWidth property. 

 const calendar = document.querySelector('smart-calendar');
 let dropDownWidth = calendar.dropDownWidth;

firstDayOfWeeknumber

Specifies which day is considered the start of the week, using a numeric value where 0 represents Sunday, 1 represents Monday, up to 6 for Saturday. For example, setting the value to 1 makes Monday the first day of the week.

Default value

0
Try a demo showcasing the firstDayOfWeek property.

Example

Set the firstDayOfWeek property. 

 <smart-calendar first-day-of-week='1'></smart-calendar>

Set the firstDayOfWeek property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.firstDayOfWeek = 0;

Get the firstDayOfWeek property. 

 const calendar = document.querySelector('smart-calendar');
 let firstDayOfWeek = calendar.firstDayOfWeek;

footerTemplateany

Defines a custom footer template for the component. You can provide either the ID of an existing '<template>' element in the DOM, or pass a direct reference to an 'HTMLTemplateElement'. The specified template will be used to render the footer section of the component.

Try a demo showcasing the footerTemplate property.

Example

Set the footerTemplate property. 

 <smart-calendar footer-template='footerTemplateId1'></smart-calendar>

Set the footerTemplate property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.footerTemplate = footerTemplate;

Get the footerTemplate property. 

 const calendar = document.querySelector('smart-calendar');
 let footerTemplate = calendar.footerTemplate;

headerTemplateany

Defines a custom header template for the component. You can provide either the string ID of an existing HTMLTemplateElement in the DOM or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section.

Try a demo showcasing the headerTemplate property.

Example

Set the headerTemplate property. 

 <smart-calendar header-template='headerTemplateId1'></smart-calendar>

Set the headerTemplate property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.headerTemplate = headerTemplate;

Get the headerTemplate property. 

 const calendar = document.querySelector('smart-calendar');
 let headerTemplate = calendar.headerTemplate;

hideDayNamesboolean

Conceals the display of weekday names in the user interface, ensuring that the days of the week (e.g., Monday, Tuesday, etc.) are not visible to users.

Default value

false

Example

Set the hideDayNames property. 

 <smart-calendar hide-day-names></smart-calendar>

Set the hideDayNames property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.hideDayNames = false;

Get the hideDayNames property. 

 const calendar = document.querySelector('smart-calendar');
 let hideDayNames = calendar.hideDayNames;

hideOtherMonthDaysboolean

Prevents dates that belong to adjacent months from being displayed, ensuring that only the days within the current month are visible in the calendar view.

Default value

false
Try a demo showcasing the hideOtherMonthDays property.

Example

Set the hideOtherMonthDays property. 

 <smart-calendar hide-other-month-days></smart-calendar>

Set the hideOtherMonthDays property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.hideOtherMonthDays = false;

Get the hideOtherMonthDays property. 

 const calendar = document.querySelector('smart-calendar');
 let hideOtherMonthDays = calendar.hideOtherMonthDays;

hideTooltipArrowboolean

Determines whether the tooltip’s arrow indicator is visible. When enabled, the arrow will be hidden and only the tooltip’s content will be displayed.

Default value

false
Try a demo showcasing the hideTooltipArrow property.

Example

Set the hideTooltipArrow property. 

 <smart-calendar hide-tooltip-arrow></smart-calendar>

Set the hideTooltipArrow property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.hideTooltipArrow = false;

Get the hideTooltipArrow property. 

 const calendar = document.querySelector('smart-calendar');
 let hideTooltipArrow = calendar.hideTooltipArrow;

importantDatesstring[] | Date[]

Defines the specific dates that will be visually highlighted or marked as important within the interface. These dates can be used to indicate events, deadlines, holidays, or other noteworthy occasions that should stand out to users when viewing the calendar or date selector component.

Try a demo showcasing the importantDates property.

Example

Set the importantDates property. 

 <smart-calendar important-dates='["2020, 6, 9", "2020-7-30"]'></smart-calendar>

Set the importantDates property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.importantDates = ["2020-1-2", "2020-2-1"];

Get the importantDates property. 

 const calendar = document.querySelector('smart-calendar');
 let importantDates = calendar.importantDates;

importantDatesTemplateany

Defines a template for displaying important dates. This property accepts either the ID of an HTML '<template>' element present in the DOM, or a direct reference to that template element. The specified template will be used to render each important date in the component.

Example

Set the importantDatesTemplate property. 

 <smart-calendar important-dates-template='importantDatesTemplateId1'></smart-calendar>

Set the importantDatesTemplate property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.importantDatesTemplate = importantDatesTemplateId2;

Get the importantDatesTemplate property. 

 const calendar = document.querySelector('smart-calendar');
 let importantDatesTemplate = calendar.importantDatesTemplate;

unlockKeystring

Sets or retrieves the unlockKey, a unique identifier or code used to grant access to the product's locked features or content.

Default value

""

Example

Set the unlockKey property. 

 <smart-calendar unlock-key=''></smart-calendar>

Set the unlockKey property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

 const calendar = document.querySelector('smart-calendar');
 let unlockKey = calendar.unlockKey;

localestring

Specifies the language used for displaying all calendar elements, such as month names, day labels, and interface text, ensuring the calendar is localized for the selected language.

Default value

"en"
Try a demo showcasing the locale property.

Example

Set the locale property. 

 <smart-calendar locale='de'></smart-calendar>

Set the locale property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.locale = 'en';

Get the locale property. 

 const calendar = document.querySelector('smart-calendar');
 let locale = calendar.locale;

localizeFormatFunctionfunction | null

Callback function that allows you to define a custom format for messages returned by the Localization Module, enabling you to modify, wrap, or translate message content before it is delivered to the application.

Example

Set the localizeFormatFunction property. 

 <smart-calendar localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-calendar>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const calendar = document.querySelector('smart-calendar');
 let localizeFormatFunction = calendar.localizeFormatFunction;

maxstring | date

Specifies the latest selectable date for the Calendar component. Accepts JavaScript Date objects or valid date string formats (e.g., 'YYYY-MM-DD', ISO 8601). Dates beyond this value will be disabled and cannot be selected by the user.

Default value

new Date(2100, 1, 1)
Try a demo showcasing the max property.

Example

Set the max property. 

 <smart-calendar max='2100, 1, 2'></smart-calendar>

Set the max property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.max = new Date(2025, 0, 1);

Get the max property. 

 const calendar = document.querySelector('smart-calendar');
 let max = calendar.max;

messagesobject

Sets or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages and regions. This property is intended for localization and works together with the locale property to support multiple languages in the widget’s user interface.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property. 

 <smart-calendar messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-calendar>

Set the messages property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property. 

 const calendar = document.querySelector('smart-calendar');
 let messages = calendar.messages;

minstring | date

Specifies the earliest selectable date for the Calendar component. Accepts either JavaScript Date objects or strings in valid date formats (e.g., 'YYYY-MM-DD'). Dates earlier than this value will be disabled and cannot be selected.

Default value

new Date(1900, 1, 1)
Try a demo showcasing the min property.

Example

Set the min property. 

 <smart-calendar min='1900, 1, 2'></smart-calendar>

Set the min property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.min = new Date(2000, 1, 2);

Get the min property. 

 const calendar = document.querySelector('smart-calendar');
 let min = calendar.min;

monthsnumber

Specifies how many months are displayed simultaneously within the calendar interface. You can select any value between 1 and 12, with 12 being the maximum number of months shown at once. If this property is not set, the calendar will display only a single month by default.

Default value

1
Try a demo showcasing the months property.

Example

Set the months property. 

 <smart-calendar months='2'></smart-calendar>

Set the months property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.months = 3;

Get the months property. 

 const calendar = document.querySelector('smart-calendar');
 let months = calendar.months;

monthNameFormat"narrow" | "firstTwoLetters" | "long" | "short" | "2-digit" | "numeric"

Specifies how month names are displayed in the header when DisplayMode is set to "Default" or when the Months property has a value greater than 1. This setting controls whether month names appear in their full, abbreviated, or custom format within the header section, improving readability and user interface customization.

Allowed Values

  • "narrow" - Displays the first letter of the month name.
  • "firstTwoLetters" - Displays the first two letters of the month name.
  • "long" - Displays the full name of the month.
  • "short" - Displays the abbreviation of the month name.
  • "2-digit" - Displays the number of the month with a leading zero if necessary. From 01 to 12.
  • "numeric" - Displays the number of the month. From 1 to 12.

Default value

"long"

Example

Set the monthNameFormat property. 

 <smart-calendar month-name-format='long'></smart-calendar>

Set the monthNameFormat property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.monthNameFormat = 'short';

Get the monthNameFormat property. 

 const calendar = document.querySelector('smart-calendar');
 let monthNameFormat = calendar.monthNameFormat;

namestring

Sets or retrieves the value of the element’s name attribute. This attribute identifies the element when submitting HTML forms, allowing its data to be included with the specified name as part of the form data sent to the server.

Default value

""

Example

Set the name property. 

 <smart-calendar name='calendar1'></smart-calendar>

Set the name property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.name = 'calendar2';

Get the name property. 

 const calendar = document.querySelector('smart-calendar');
 let name = calendar.name;

readonlyboolean

When the element is set to "readonly," users can see its content but cannot modify or edit its value. While the element remains focusable, all user input and changes are disabled, preventing any interaction that would alter its contents.

Default value

false

Example

Set the readonly property. 

 <smart-calendar readonly></smart-calendar>

Set the readonly property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.readonly = true;

Get the readonly property. 

 const calendar = document.querySelector('smart-calendar');
 let readonly = calendar.readonly;

restrictedDatesstring[] | Date[]

Defines a list of restricted dates that the user cannot select, hover over, or focus on within the date picker. These dates will be visually indicated as unavailable or disabled in the interface. Each restricted date can be provided as either a JavaScript Date object or a string in a recognized date format (such as 'YYYY-MM-DD'). Any date included in this list will be unselectable and visually styled to indicate its restricted status.

Try a demo showcasing the restrictedDates property.

Example

Set the restrictedDates property. 

 <smart-calendar restricted-dates='["2020-7-25", "2020, 7, 15"]'></smart-calendar>

Set the restrictedDates property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.restrictedDates = ["2020, 2, 10", "2020, 2, 11", "2020, 2, 13"];

Get the restrictedDates property. 

 const calendar = document.querySelector('smart-calendar');
 let restrictedDates = calendar.restrictedDates;

rightToLeftboolean

Specifies or retrieves a value that determines whether the element's content alignment supports right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. Enabling this property ensures that text and layout are properly adjusted for locales that require RTL formatting.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-calendar right-to-left></smart-calendar>

Set the rightToLeft property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.rightToLeft = true;

Get the rightToLeft property. 

 const calendar = document.querySelector('smart-calendar');
 let rightToLeft = calendar.rightToLeft;

scrollButtonsNavigationMode"portrait" | "landscape"

Specifies the orientation (horizontal or vertical) of the navigation buttons displayed in the header, and sets the direction in which the accompanying animation plays.

Allowed Values

  • "portrait" - The arrows for date navigation point up and down and the animations works from top to bottom and vice versa.
  • "landscape" - The arrows for date navigation point left and right and the animation works from left to right or vice versa.

Default value

"landscape"
Try a demo showcasing the scrollButtonsNavigationMode property.

Example

Set the scrollButtonsNavigationMode property. 

 <smart-calendar scroll-buttons-navigation-mode='portrait'></smart-calendar>

Set the scrollButtonsNavigationMode property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.scrollButtonsNavigationMode = 'landscape';

Get the scrollButtonsNavigationMode property. 

 const calendar = document.querySelector('smart-calendar');
 let scrollButtonsNavigationMode = calendar.scrollButtonsNavigationMode;

scrollButtonsPosition"near" | "far" | "both"

Specifies the alignment and placement of navigation buttons within the header section, controlling whether they appear on the left, center, or right side of the header.

Allowed Values

  • "near" - Positions the date navigation arrows on the nearest position.
  • "far" - Positions the date navigation arrows on the farthest positions.
  • "both" - Positions the date navigation arrows on both sides of the header.

Default value

"both"
Try a demo showcasing the scrollButtonsPosition property.

Example

Set the scrollButtonsPosition property. 

 <smart-calendar scroll-buttons-position='far'></smart-calendar>

Set the scrollButtonsPosition property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.scrollButtonsPosition = 'both';

Get the scrollButtonsPosition property. 

 const calendar = document.querySelector('smart-calendar');
 let scrollButtonsPosition = calendar.scrollButtonsPosition;

selectedDatesstring[] | Date[]

Specifies the dates that should appear as selected within the component. These selected dates are visually distinguished from unselected dates using a different style or highlight. You can provide the selected dates either as JavaScript Date objects or as strings formatted in any valid date representation (e.g., 'YYYY-MM-DD').

Example

Set the selectedDates property. 

 <smart-calendar selected-dates='["2020-7-24", "2020-7-27"]'></smart-calendar>

Set the selectedDates property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.selectedDates = ["2020-7-24","2020-7-27", "2020-2-1", "2020-5-20"];

Get the selectedDates property. 

 const calendar = document.querySelector('smart-calendar');
 let selectedDates = calendar.selectedDates;

selectionMode"none" | "default" | "many" | "one" | "oneExtended" | "oneOrMany" | "range" | "week" | "zeroOrMany" | "zeroOrOne"

Specifies how users can select dates in the component, such as choosing a single date, a range of dates, or multiple individual dates.

Allowed Values

  • "none" - Disables date selection.
  • "default" - Allows single date selection via keyboard/mouse and multiple date selection when 'Control' or 'Shift' keyboard key is pressed.
  • "many" - Allows multiple dates selection. The first selected date determines the begining of a date selection range. Last selected date sets the end of the range. All hovered dates in between will also be selected when the end date is decided. They will appear as hovered until the end date is selected
  • "one" - Only one date can be selected.
  • "oneExtended" - Only one date can be selected. Allows keyboard selection on 'Enter/Space' key press.
  • "oneOrMany" - Allows one or more dates to be selected. Doesn't allow zero selection.
  • "range" - Selectes a range of dates between two dates. The first selected date marks the beginning of the range and the second selected date marks the end. Every date between the first and second date selection will also be selected. The next selected date will clear all previously selected and set the start for a new date range. If the keyboard key 'Control' is pressed it is possible to start a second range selection by keeping the previous. All dates that are about to be selected are marked as hovered.
  • "week" - Selects 7 days in a row from the selected date. The selected date marks the beginning of a date range and the next 6 days are also selected to form a week of 7 days in a row.
  • "zeroOrMany" - Positions the date navigation arrows on both sides of the header.
  • "zeroOrOne" - Zero or one date can be selected.

Default value

"default"
Try a demo showcasing the selectionMode property.

Example

Set the selectionMode property. 

 <smart-calendar selection-mode='one'></smart-calendar>

Set the selectionMode property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.selectionMode = 'zeroOrMany';

Get the selectionMode property. 

 const calendar = document.querySelector('smart-calendar');
 let selectionMode = calendar.selectionMode;

spinButtonsDelaynumber

Specifies the amount of time (in milliseconds) that must pass between consecutive clicks of the calendar's date navigation buttons in the header. This delay helps prevent users from triggering rapid, repeated navigation actions and can be used to control the responsiveness of date changes in the calendar interface.

Default value

80

Example

Set the spinButtonsDelay property. 

 <smart-calendar spin-buttons-delay='100'></smart-calendar>

Set the spinButtonsDelay property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.spinButtonsDelay = 200;

Get the spinButtonsDelay property. 

 const calendar = document.querySelector('smart-calendar');
 let spinButtonsDelay = calendar.spinButtonsDelay;

spinButtonsInitialDelaynumber

Specifies the initial delay, in milliseconds, before the date navigation buttons in the Calendar header begin to respond when pressed. This delay applies to the first action after a button is engaged, allowing users control over how quickly navigation starts.

Default value

0

Example

Set the spinButtonsInitialDelay property. 

 <smart-calendar spin-buttons-initial-delay='500'></smart-calendar>

Set the spinButtonsInitialDelay property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.spinButtonsInitialDelay = 1000;

Get the spinButtonsInitialDelay property. 

 const calendar = document.querySelector('smart-calendar');
 let spinButtonsInitialDelay = calendar.spinButtonsInitialDelay;

themestring

Specifies the visual theme applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface.

Default value

""

Example

Set the theme property. 

 <smart-calendar theme='blue'></smart-calendar>

Set the theme property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.theme = 'red';

Get the theme property. 

 const calendar = document.querySelector('smart-calendar');
 let theme = calendar.theme;

titleTemplateany

Specifies the template to be used for the calendar's title section. This property accepts either the ID of an HTMLTemplate element present in the DOM or a direct reference to an HTMLTemplate element. The provided template will be rendered in place of the default title section, allowing for custom formatting and content.

Example

Set the titleTemplate property. 

 <smart-calendar title-template='titleTemplateId1'></smart-calendar>

Set the titleTemplate property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.titleTemplate = titleTemplateId2;

Get the titleTemplate property. 

 const calendar = document.querySelector('smart-calendar');
 let titleTemplate = calendar.titleTemplate;

tooltipboolean

Controls whether tooltips are shown for important dates. When enabled, hovering over an important date will display a tooltip with additional information. When disabled, no tooltip will appear on hover.

Default value

false

Example

Set the tooltip property. 

 <smart-calendar tooltip></smart-calendar>

Set the tooltip property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.tooltip = false;

Get the tooltip property. 

 const calendar = document.querySelector('smart-calendar');
 let tooltip = calendar.tooltip;

tooltipArrowboolean

Controls the visibility of the tooltip arrow for important dates. When enabled (default), an arrow is displayed on the tooltip to indicate its reference point. Disabling this option will hide the arrow, resulting in a plain tooltip without a directional indicator.

Default value

true
Try a demo showcasing the tooltipArrow property.

Example

Set the tooltipArrow property. 

 <smart-calendar tooltip-arrow></smart-calendar>

Set the tooltipArrow property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.tooltipArrow = false;

Get the tooltipArrow property. 

 const calendar = document.querySelector('smart-calendar');
 let tooltipArrow = calendar.tooltipArrow;

tooltipDelaynumber

Specifies the amount of time (in milliseconds) to wait before displaying the tooltip after a user hovers over or focuses on the target element. This controls how quickly the tooltip appears, allowing you to adjust the responsiveness of the tooltip based on user interaction.

Default value

100

Example

Set the tooltipDelay property. 

 <smart-calendar tooltip-delay='500'></smart-calendar>

Set the tooltipDelay property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.tooltipDelay = 300;

Get the tooltipDelay property. 

 const calendar = document.querySelector('smart-calendar');
 let tooltipDelay = calendar.tooltipDelay;

tooltipOffsetnumber[][]

Specifies a custom offset for the tooltip's position. Accepts an array containing two numbers: the first value represents the horizontal (left) offset, and the second value represents the vertical (top) offset. These values determine how many pixels the tooltip is shifted from its default position along the X (left) and Y (top) axes, respectively.

Example

Set the tooltipOffset property. 

 <smart-calendar tooltip-offset='[5, 5]'></smart-calendar>

Set the tooltipOffset property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.tooltipOffset = [0, 10];

Get the tooltipOffset property. 

 const calendar = document.querySelector('smart-calendar');
 let tooltipOffset = calendar.tooltipOffset;

tooltipPosition"auto" | "absolute" | "bottom" | "top" | "left" | "right"

Specifies the placement of the tooltip relative to its target element (e.g., top, right, bottom, or left).

Allowed Values

  • "auto" - The tooltip automatically positions itself in order to be visible.
  • "absolute" - Allows the tooltip to be positioned via custom CSS. By default in this mode the tooltip doesn't have any specific positioning.
  • "bottom" - Positions the tooltip below the important date.
  • "top" - Positions the tooltip above the important date.
  • "left" - Positions the tooltip to the left of the important date.
  • "right" - Positions the tooltip to the right of the important date.

Default value

"top"
Try a demo showcasing the tooltipPosition property.

Example

Set the tooltipPosition property. 

 <smart-calendar tooltip-position='left'></smart-calendar>

Set the tooltipPosition property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.tooltipPosition = 'right';

Get the tooltipPosition property. 

 const calendar = document.querySelector('smart-calendar');
 let tooltipPosition = calendar.tooltipPosition;

tooltipTemplateany

Defines the template used for the tooltip's content. You can provide either the ID of an existing '<template>' element in the DOM or a direct reference to an HTMLTemplateElement. The tooltip will render its content based on the markup and structure defined within the specified template.

Example

Set the tooltipTemplate property. 

 <smart-calendar tooltip-template='tooltipTemplateId1'></smart-calendar>

Set the tooltipTemplate property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.tooltipTemplate = tooltipTemplateId2;

Get the tooltipTemplate property. 

 const calendar = document.querySelector('smart-calendar');
 let tooltipTemplate = calendar.tooltipTemplate;

unfocusableboolean

When set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or programmatic focus methods.

Default value

false

Example

Set the unfocusable property. 

 <smart-calendar unfocusable></smart-calendar>

Set the unfocusable property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.unfocusable = false;

Get the unfocusable property. 

 const calendar = document.querySelector('smart-calendar');
 let unfocusable = calendar.unfocusable;

view"landscape" | "portrait"

Specifies the display orientation of the Calendar component (horizontal or vertical), affecting how dates and months are arranged within the calendar view.

Allowed Values

  • "landscape" - Horizontal orientation. Positions the Header at the left of the Calendar and the footer at the right.
  • "portrait" - Vertical orientation. Positions the Header at the top of the Calendar and the footer at the bottom.

Default value

"portrait"
Try a demo showcasing the view property.

Example

Set the view property. 

 <smart-calendar view='portrait'></smart-calendar>

Set the view property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.view = 'landscape';

Get the view property. 

 const calendar = document.querySelector('smart-calendar');
 let view = calendar.view;

viewSectionsstring[]

Specifies which sections of the Calendar component are displayed to the user. Available sections include: 'title', 'header', and 'footer'. You may enable any combination of these sections simultaneously by listing them together. If this setting is not specified, only the 'header' section will be shown by default.

Try a demo showcasing the viewSections property.

Example

Set the viewSections property. 

 <smart-calendar view-sections='["title", "header"]'></smart-calendar>

Set the viewSections property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.viewSections = ["header", "footer"];

Get the viewSections property. 

 const calendar = document.querySelector('smart-calendar');
 let viewSections = calendar.viewSections;

weekNumbersboolean

Controls the display of week numbers within the calendar. When enabled, a week number is shown at the start of each week row, allowing users to easily reference and distinguish weeks. If disabled, week numbers are hidden, and only the standard calendar dates are displayed.

Default value

false
Try a demo showcasing the weekNumbers property.

Example

Set the weekNumbers property. 

 <smart-calendar week-numbers></smart-calendar>

Set the weekNumbers property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.weekNumbers = false;

Get the weekNumbers property. 

 const calendar = document.querySelector('smart-calendar');
 let weekNumbers = calendar.weekNumbers;

weeksnumber

Specifies how many weeks are displayed in the calendar view. This property accepts integer values from 1 to 6, where 1 displays a single week and 6 displays six weeks, representing a full month view.

Default value

6
Try a demo showcasing the weeks property.

Example

Set the weeks property. 

 <smart-calendar weeks='2'></smart-calendar>

Set the weeks property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.weeks = 1;

Get the weeks property. 

 const calendar = document.querySelector('smart-calendar');
 let weeks = calendar.weeks;

yearFormat"2-digit" | "numeric"

Specifies the format in which the year is displayed in the header when the DisplayMode property is set to "Default" or when the Months property has a value greater than 1. This setting controls how the year appears (e.g., "2024", "24") in the header section of the component.

Allowed Values

  • "2-digit" - The year is displayed as two digits, e.g. 19.
  • "numeric" - The year is displayed as a number, e.g. 2020

Default value

"numeric"

Example

Set the yearFormat property. 

 <smart-calendar year-format='long'></smart-calendar>

Set the yearFormat property by using the HTML Element's instance. 

 const calendar = document.querySelector('smart-calendar');
 calendar.yearFormat = 'short';

Get the yearFormat property. 

 const calendar = document.querySelector('smart-calendar');
 let yearFormat = calendar.yearFormat;

Events

changeCustomEvent

This event is triggered whenever a user selects or deselects a date. It fires each time the selection state of a date changes, allowing you to respond to both new date selections and the removal of existing selections.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.value [] - An array of all currently selected dates.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the change event.

Example

Set up the event handler of change event. 

const calendar = document.querySelector('smart-calendar');
calendar.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value;

	// event handling code goes here.
})

displayModeChangingCustomEvent

This event is fired immediately before the displayMode changes, providing an opportunity to intercept the transition. Within the event handler, you can call event.preventDefault() to cancel the displayMode change and prevent the update from occurring. This allows developers to implement custom logic or validation before the displayMode actually switches.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDisplayModeChanging

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldDisplayMode - The previous display mode.
ev.detail.newDisplayMode - The new display mode.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of displayModeChanging event. 

const calendar = document.querySelector('smart-calendar');
calendar.addEventListener('displayModeChanging', function (event) {
    const detail = event.detail,
        oldDisplayMode = detail.oldDisplayMode,
        newDisplayMode = detail.newDisplayMode;

	// event handling code goes here.
})

displayModeChangeCustomEvent

This event is triggered whenever the display mode of the application is changed (for example, switching between fullscreen, windowed, or split-screen modes). It allows developers to detect and respond to changes in how content is presented to the user.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onDisplayModeChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the displayModeChange event.

Example

Set up the event handler of displayModeChange event. 

const calendar = document.querySelector('smart-calendar');
calendar.addEventListener('displayModeChange', function (event) {
	// event handling code goes here.
})

navigationChangingCustomEvent

This event is triggered whenever the view is about to change, such as during navigation to a different page or section. Developers can intercept this event to perform custom logic before the navigation completes. If necessary, the navigation can be cancelled by calling the preventDefault method within the event handler, stopping the view from changing.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onNavigationChanging

Arguments

evCustomEvent
ev.detailObject
ev.detail.value date - The view's date.
ev.detail.type string - The view type - 'month', 'decade' or 'year'.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of navigationChanging event. 

const calendar = document.querySelector('smart-calendar');
calendar.addEventListener('navigationChanging', function (event) {
    const detail = event.detail,
        value = detail.value,
        type = detail.type;

	// event handling code goes here.
})

navigationChangeCustomEvent

This event is triggered whenever the user navigates to a different view or the current view is updated within the application. It provides an opportunity to execute custom logic in response to view transitions, such as loading new data, updating UI components, or tracking navigation events.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onNavigationChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.value date - The view's date.
ev.detail.type string - The view type - 'month', 'decade' or 'year'.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of navigationChange event. 

const calendar = document.querySelector('smart-calendar');
calendar.addEventListener('navigationChange', function (event) {
    const detail = event.detail,
        value = detail.value,
        type = detail.type;

	// event handling code goes here.
})

openCustomEvent

This event is triggered each time the tooltip associated with an important date becomes visible to the user, such as when they hover over or click on the date. Use this event to execute custom logic or display additional content whenever the important date's tooltip is opened.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent
ev.detailObject
ev.detail.target - The event target - tooltip.
ev.detail.value - The important date of the hovered cell.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of open event. 

const calendar = document.querySelector('smart-calendar');
calendar.addEventListener('open', function (event) {
    const detail = event.detail,
        target = detail.target,
        value = detail.value;

	// event handling code goes here.
})

closeCustomEvent

This event is triggered when a user closes the tooltip associated with an important date. It indicates that the tooltip has been dismissed, either by user interaction (such as clicking outside the tooltip or pressing a close button) or through programmatic means. Use this event to perform actions or update the UI in response to the tooltip being closed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent
ev.detailObject
ev.detail.target - The event target - tooltip.
ev.detail.value - The important date of the hovered cell.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event. 

const calendar = document.querySelector('smart-calendar');
calendar.addEventListener('close', function (event) {
    const detail = event.detail,
        target = detail.target,
        value = detail.value;

	// event handling code goes here.
})

Methods

clearSelection(): void

Clears the current selection by removing all selected dates from the calendar. This action resets the calendar to its default unselected state, ensuring that no dates remain highlighted or chosen.


Invoke the clearSelection method.

const calendar = document.querySelector('smart-calendar');
calendar.clearSelection();

Try a demo showcasing the clearSelection method.

navigate( step: number | Date | string): boolean

Determines the navigation direction based on the provided argument: navigates forward if the argument is positive or "next," and navigates backward if the argument is negative or "previous."

Arguments

stepnumber | Date | string

The argument can be the following:

  • number - representing the number of months to scroll. Can be negavtive. If negative it will scroll backwards.
  • Date - a date object representing the Date to navigate to.
  • string - a string representing a valid Date, e.g. "2020-10-1"

Returnsboolean

Invoke the navigate method.

const calendar = document.querySelector('smart-calendar');
const result = calendar.navigate("\"2020-10-1\"");

Try a demo showcasing the navigate method.

select( date: Date | string): void

Allows the user to select a date or deselect a previously selected date, updating the selection state accordingly.

Arguments

dateDate | string

The date to be selected or unselected. The date can be a Date object or a string in valid date format.


Invoke the select method.

const calendar = document.querySelector('smart-calendar');
calendar.select("\"2020-7-24\"");

Try a demo showcasing the select method.

today(): Date

Selects the current date based on the user's system settings.

ReturnsDate

Invoke the today method.

const calendar = document.querySelector('smart-calendar');
const result = calendar.today();

Try a demo showcasing the today method.

CSS Variables

--smart-calendar-header-heightvar()

Default value

"calc(0.75 * var(--smart-bar-height))"

Default height for smartCalendar's header section

--smart-calendar-footer-heightvar()

Default value

"calc(0.75 * var(--smart-bar-height))"

Default height for smartCalendar's footer section

--smart-calendar-title-heightvar()

Default value

"calc(1.25 * var(--smart-bar-height))"

Default height for calendar's title.

--smart-calendar-cell-sizevar()

Default value

"30px"

Default size of calendar's cell.

--smart-calendar-cell-spacingvar()

Default value

"4px"

Defines calendar's cell spacing.

--smart-calendar-default-widthvar()

Default value

"calc(50px + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)))"

smartCalendar default width

--smart-calendar-default-heightvar()

Default value

"calc(var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))"

smartCalendar default height

--smart-calendar-title-text-transformvar()

Default value

"initial"

Controls the capitalization of the title text.

--smart-calendar-week-title-text-transformvar()

Default value

"uppercase"

Controls the capitalization of the week title.

--smart-calendar-header-text-transformvar()

Default value

"uppercase"

Controls the capitalization of the header text.

--smart-calendar-footer-text-transformvar()

Default value

"uppercase"

Controls the capitalization of the footer text.

--smart-calendar-cell-border-top-right-radiusvar()

Default value

"15px"

Defines cell's top-right border radius.

--smart-calendar-cell-border-top-left-radiusvar()

Default value

"15px"

Defines cell's top-left border radius.

--smart-calendar-cell-border-bottom-left-radiusvar()

Default value

"15px"

Defines cell's bottom-left border radius.

--smart-calendar-cell-border-bottom-right-radiusvar()

Default value

"15px"

Defines cell's bottom-right border radius.

--smart-calendar-title-paddingvar()

Default value

"10px"

Defines title's padding

--smart-calendar-important-date-backgroundvar()

Default value

"#ebebeb"

Defines the background for the important dates.

--smart-calendar-important-date-colorvar()

Default value

"#333"

Defines the text color for the important dates.

--smart-calendar-important-date-border-colorvar()

Default value

"#ebebeb"

Defines the border color for the important dates.