Calendar 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.

Selector

smart-calendar

Properties

Events

Methods

Properties

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

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

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

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.

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.

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'

Default value

"month"

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.

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

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

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

0

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.

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.

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

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

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

Sets the dates that will be displayed as important.

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"

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;

maxany

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

Default value

new Date(2100, 1, 1)

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;

minany

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

Default value

new Date(1900, 1, 1)

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

1

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.

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

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.

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

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.

Default value

"landscape"

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.

Default value

"both"

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

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"null" | "default" | "many" | "one" | "oneOrMany" | "range" | "week" | "zeroOrMany" | "zeroOrOne"

Determines the date selection mode.

Default value

"default"

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

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

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

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

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;

tooltipboolean

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

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.

Default value

"top"

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.

Default value

"portrait"

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.

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

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

6

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.

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.

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.

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.
}

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.

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