Calendar JAVASCRIPT UI Component API

Calendar Javascript API

Class

Calendar

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

Properties

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

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

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;

Applies new animation settings when it is enabled.

Properties:
startSpeed - Determines the initial speed of the animation.
easeThreshold - Determines the point at which the animation starts to slow down - the "ease effect".
step - Determines the step ( scrolling interval ) at which the animation will run.
stepEaseSize - Coefficient that is used to calculated the new step once the threshold has been passed.
resetThreshold - Determines the threshold for animation reset. When it's reached the animation will start over.

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"

Determines the date controls inside the header of the Calendar.

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"

Determines the format of the day names located above the days inside the calendar.

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 that can be used to customize the format of the month name when calendarMode is set to 'default'.

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

Enables or disables the Calendar.

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

Disables auto navigation when the user clicks on a date that's not from the current month in 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;

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

Determines the date view of the calendar when calendarMode is set to 'default'

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"

Determines the type of the month/year view when calendarMode is set to Default.

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

Determines the height of the month's drop down inside the Calendar.

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

Determines the width of the month's drop down inside the Calendar.

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

Determines the first day of the week. From 0(Sunday) to 6(Saturday)

Default value

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

Sets a custom footer template. Accepts the id of an HTMLTemplateElement or a reference ot it.

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

Sets custom header template. Accepts the id of an HTMLTemplateElement or a reference ot it.

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

Hides the names of the weekdays.

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

Hides the dates from other months.

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

Hides the arrow of the tooltip.

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[]

Sets the dates that will be displayed as important.

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

Sets a template for the important dates. Accepts the id of an HTMLTemplate element inside the DOM of or a reference to it.

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;

localestring

Determines the language of the Calendar.

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 used to customize the format of the messages that are returned from the Localization Module.

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

Determines the max date for the Calendar. Accepts date objects and valid date string formats.

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 gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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

Determines the min date for the Calendar. Accepts date objects and valid date string formats.

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

Determines the number of months to be displayed inside the calendar. The maximum amount of months that can be shown is 12. By default only 1 month is shown.

Default value

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"

Determines the format of the month names in the header when DisplayMode is set to Default or when Months property is greater than 1.

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 gets the name attribute for the element. Name is used when submiting HTML forms.

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

If the element is readonly, users cannot interact with it.

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[]

Sets restricted dates. Restricted dates are dates that cannot be selected/hovered/focused. They are visualy styled as restricted. The dates can be javascript date objects or strings representing a valid date.

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

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

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"

Determines the direction of the navigation buttons located in the header and the animation.

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"

Determines the position of the navigation buttons located inside 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[]

Sets the dates that will be selected. Selected dates are styled differently than the rest. The dates can be Date objects or strings in a valid date format.

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"

Determines the date selection mode.

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

Sets the delay between clicks of the date navigation buttons located in the header of the Calendar.

Default value

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

Determines the initial delay before the action of the date navigation buttons located in the header of the Calendar.

Default value

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

Determines the theme. Theme defines the look of the element

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

Sets a template for the title section of the Calendar. Accepts the id of an HTMLTemplate element inside the DOM of or a reference it.

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;

Enables/Disabled the tooltip for the important dates. If enabled when an important date is hovered a tooltip is displayed.

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

Show/Hide the arrow of the the tooltip for the important dates. By default the arrow is visible.

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

Sets the delay of the tooltip before it appears.

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[][]

Set's a custom offset to the tooltip's position. Accepts an array of two numbers: the left coordinate and the top coordinate.

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"

Sets the position of the tooltip.

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

Sets a template for the tooltip's content. Accepts the id of an HTMLTEmplate element inside the DOM or it's reference.

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

If is set to true, the element cannot be focused.

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"

Determines the orientation of the Calendar.

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[]

Determines the visible sections of the Calendar. The view sections are : title, header, footer. Multiple sections can be applied at the same time. By default only the 'header' section is visible.

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

Enables/Disabled week numbering. If enabled week numbers are displayed infront of each week inside the Calendar.

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

Determines the number of visible weeks. The value of the property ranges from 1 to 6. Where 1 is one week and 6 is a full month ( 6 weeks ).

Default value

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"

Determines the year format in the header when DisplayMode is set to Default or when Months property is greater than 1.

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 when a new date has been selected/unselected.

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 triggered when the displayMode is about to change. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

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 when the display mode has changed.

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 when the view is changing. This navigation can be cancelled by using the preventDefault method.

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 when the view is changed.

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 when the tooltip for the important date 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 the tooltip for the important date is 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 selection. Removes all seleceted dates.

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

Navigates forwards/backwards depending on the argument.

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

Selects or Unselects a date.

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 today's date.

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

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.

Calendar Javascript API

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

Default value

Example

animationSettingsobject

Example

calendarMode"default" | "classic"

Default value

Example

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

Default value

Example

dateFormatFunctionfunction | null

Example

disabledboolean

Default value

Example

disableAutoNavigationboolean

Default value

Example

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

Default value

Example

displayModeView"table" | "list"

Default value

Example

dropDownHeightstring | number

Default value

Example

dropDownWidthstring | number

Default value

Example

firstDayOfWeeknumber

Default value

Example

footerTemplateany

Example

headerTemplateany

Example

hideDayNamesboolean

Default value

Example

hideOtherMonthDaysboolean

Default value

Example

hideTooltipArrowboolean

Default value

Example

importantDatesstring[] | Date[]

Example

importantDatesTemplateany

Example

localestring

Default value

Example

localizeFormatFunctionfunction | null

Example

maxstring | date

Default value

Example

messagesobject

Default value

Example

minstring | date

Default value

Example

monthsnumber

Default value

Example