The Year Calendar component is a javascript widget that helps you create great calendars!
The component is based on the Year Calendar javascript library and is composed by the YearCalendar block.
A full Year Calendar with stylezable UI and fully responsive to be displayed on the screen.
It receives a list of events and other initialization parameters and exposes events based on the user interaction.
Current implementation has a small scope of events available within ServiceStudio, but the remaining can be customizable as needed.
For advanced options, read the official documentation.
Drag the block into a different block or screen and then create a new action handler for any of the relevant events for your use case.
The DataSource parameter represents the list of events to fill the calendar. The list is not mandatory, it's possible to just display the calendar on it's own. Events have an identifier, name, description, start and end dates and displayed color.
The Language parameter enables the translation of the calendar texts. If it remains empty, the calendar will be defaulted to English. The currently available languages are:
If the translation is needed for a different language, check the full list of suported languages and update the js_year_calendar_locales script file with the needed locale.
When true, the EnableRangeSelection parameter enables the user to select a range of dates. Otherwise, users will only be able to click in a single day at a time.
When true, the HasCustomTooltip parameter will update the calendar by replacing the original event tooltip with the custom Tippy Tooltip.
The StartYear parameter is mandatory and is used to indicate in which year should the calendar be initialized.
The Style parameter defines what style is applied to the event display. It is defaulted to "border" and can also be set to "background" or "custom".
The ClickDay event is triggered when users click in a single calendar date. The event will return the selected date.
The SelectRange event is triggered when users either click in a single calendar date or select a range of dates. The event will return the beginning and the end dates of the selected range. This event will only be triggered when the EnableRangeSelection parameter is set to true.
The YearChanged event is triggered everytime the user changes the year in view.