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
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
animationSettingsany
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.
calendarModeCalendarMode
Determines the date controls inside the header of the Calendar.
Default valuedefault
dayNameFormatDayFormat
Determines the format of the day names located above the days inside the calendar.
Default valuefirstTwoLetters
dateFormatFunctionany
A callback that can be used to customize the format of the month name when calendarMode is set to 'default'.
disabledboolean
Enables or disables the Calendar.
Default valuefalse
disableAutoNavigationboolean
Disables auto navigation when the user clicks on a date that's not from the current month in view.
Default valuefalse
displayModeCalendarDisplayMode
Determines the date view of the calendar when calendarMode is set to 'default'
Default valuemonth
displayModeViewCalendarDisplayModeView
Determines the type of the month/year view when calendarMode is set to Default.
Default valuetable
dropDownHeightstring
Determines the height of the month's drop down inside the Calendar.
Default value"200
dropDownWidthstring
Determines the width of the month's drop down inside the Calendar.
Default value"
firstDayOfWeeknumber
Determines the first day of the week. From 0(Sunday) to 6(Saturday)
Default value0
footerTemplateany
Sets a custom footer template. Accepts the id of an HTMLTemplateElement or a reference ot it.
headerTemplateany
Sets custom header template. Accepts the id of an HTMLTemplateElement or a reference ot it.
hideDayNamesboolean
Hides the names of the weekdays.
Default valuefalse
hideOtherMonthDaysboolean
Hides the dates from other months.
Default valuefalse
hideTooltipArrowboolean
Hides the arrow of the tooltip.
Default valuefalse
importantDatesstring[]
Sets the dates that will be displayed as important.
importantDatesTemplateany
Sets a template for the important dates. Accepts the id of an HTMLTemplate element inside the DOM of or a reference to it.
localestring
Determines the language of the Calendar.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
maxany
Determines the max date for the Calendar. Accepts date objects and valid date string formats.
Default valuenew Date(2100, 1, 1)
messagesany
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."
}
minany
Determines the min date for the Calendar. Accepts date objects and valid date string formats.
Default valuenew Date(1900, 1, 1)
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 value1
monthNameFormatMonthFormat
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 valuelong
namestring
Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
Default value"
readonlyboolean
If the element is readonly, users cannot interact with it.
Default valuefalse
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.
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
scrollButtonsNavigationModeViewLayout
Determines the direction of the navigation buttons located in the header and the animation.
Default valuelandscape
scrollButtonsPositionLayoutPosition
Determines the position of the navigation buttons located inside the header.
Default valueboth
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.
selectionModeCalendarSelectionMode
Determines the date selection mode.
Default valuedefault
spinButtonsDelaynumber
Sets the delay between clicks of the date navigation buttons located in the header of the Calendar.
Default value80
spinButtonsInitialDelaynumber
Determines the initial delay before the action of the date navigation buttons located in the header of the Calendar.
Default value0
themestring
Determines the theme. Theme defines the look of the element
Default value"
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.
tooltipboolean
Enables/Disabled the tooltip for the important dates. If enabled when an important date is hovered a tooltip is displayed.
Default valuefalse
tooltipArrowboolean
Show/Hide the arrow of the the tooltip for the important dates. By default the arrow is visible.
Default valuetrue
tooltipDelaynumber
Sets the delay of the tooltip before it appears.
Default value100
tooltipOffsetnumber[][]
Set's a custom offset to the tooltip's position. Accepts an array of two numbers: the left coordinate and the top coordinate.
tooltipPositionTooltipPosition
Sets the position of the tooltip.
Default valuetop
tooltipTemplateany
Sets a template for the tooltip's content. Accepts the id of an HTMLTEmplate element inside the DOM or it's reference.
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
viewViewLayout
Determines the orientation of the Calendar.
Default valueportrait
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.
weekNumbersboolean
Enables/Disabled week numbering. If enabled week numbers are displayed infront of each week inside the Calendar.
Default valuefalse
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 value6
yearFormatYearFormat
Determines the year format in the header when DisplayMode is set to Default or when Months property is greater than 1.
Default valuenumeric
onchange((this: Window, ev: Event) => any) | null
This event is triggered when a new date has been selected/unselected.
Arguments
evEvent
ev.detailObject
ev.detail.value - An array of all currently selected dates.
ondisplaymodechanging((this: Window, ev: Event) => any) | null
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.
Arguments
evEvent
ev.detailObject
ev.detail.oldDisplayMode - The previous display mode.
ev.detail.newDisplayMode - The new display mode.
ondisplaymodechange((this: Window, ev: Event) => any) | null
This event is triggered when the display mode has changed.
Arguments
evEvent
Methods
clearSelection(): void
Clears the selection. Removes all seleceted dates.
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
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.
today(): Date
Selects today's date.
ReturnsDate