Demos Dark Theme

Component

• calendar

  Date and Time picker.

  dates: [], time: 03:15 PM

  Attributes

  type	TYPES OF CALENDARS: 1. The calendar type 'default' displays a single month, allows you to select days, navigate between months using arrows, and choose a month and year from the respective headers. This is the standard calendar display mode. 2. The calendar type 'multiple' displays multiple months, allowing you to select days in each of them. 3. The calendar type 'month' displays a list of months and allows the user to select months and years from the respective headers. 4. The calendar type 'year' displays a list of years, allowing the user to choose a year from the list and select a month from the respective header.
  theme	'dark' or 'light'.
  today	The calendar allows you to specify which day should be considered as today. The date should be in this format: 'YYYY-MM-DD'.
  popups	You can add pop-ups with information for any day, which will be displayed when hovering over that day. The value is an array of objects where each object needs to have date, modifier, and html keys. Date key values accept strings in the following format: 'YYYY-MM-DD'. Modifier key values accept a CSS class to style the popup. Few classes are built-in and already styled: 'bg-red', 'bg-green', 'bg-orange', 'bg-pink'. Html key values accept strings or HTML for the content of the popups.
  date-min and date-max.	The date range in the calendar can be set using the date-min and date-max attributes. These parameters specify the permissible date range in the calendar. By default, the minimum date is '1970-01-01', which corresponds to the beginning of UNIX time. The default maximum date is set to '2470-12-31', and it is chosen arbitrarily. If you need to set a specific date range, replace the values of the date-min and date-max attributes with the dates you require. Note that the calendar will not process dates outside the specified range.
  jump-months	The attribute controls the number of months to jump when clicking on arrows. The default jump is '1'.
  week-starts	This attribute sets the start of the week in accordance with the international standard ISO 8601. If set to 'sunday', the week will start on Sunday; otherwise, it starts on Monday.
  localization	This attribute sets the language localization of the calendar. You can specify a language label according to BCP 47. For list of languages visit the following link: Link
  month-to-show	This attribute specifies the number of displayed months when the calendar type is set to 'multiple'. Default: '2'.
  Advanced Settings Attributes
  settings-range	Object as a value. It accepts the following keys: rangeMin, rangeMax, disablePast, disableGaps, disableAllDays, disableWeekday, disabled, enabled.
  settings-selected	Object as a value. It accepts the following keys: dates, month, year, holidays, time.
  settings-selection	Object as a value. It accepts the following keys: day, month, year, time, controlTime, stepHours, stepMinutes, cancelableDay.
  settings-visibility	Object as a value. It accepts the following keys: themeDetect, monthStart, weekNumbers, weekend. today, disabled, daysOutside.

  Events

  clickDay	Emitted when user click on a day. Please note that the output is represented as an array because the user can select not only one day but also a range of dates if allowed by the calendar parameters.
  clickMonth	Emitted when user click on a month in the list of all months, you can handle this event and obtain information about the selected item and its ordinal number. It's important to note that months are numbered starting from zero, where January corresponds to the zeroth month, and December is the eleventh.
  clickYear	Emitted when user click on a year header in the calendar. The output is year number.
  changeTime	To enable time: settings-selection.time, set to True. Then the event is emitted when the user changes the time. The output is the selected time.
  clickArrow	Emitted after clicking the arrow in the calendar. The output is reference to the initialized calendar. (Object)

  Advanced Settings Details

  Settings Range Object

  rangeMin	Sets the minimum date that the user can choose. Dates earlier than the specified date will be disabled and not available for selection. Default Value: '1970-01-01'
  rangeMax	Sets the maximum date that the user can choose. Dates later than the specified date will be disabled and not available for selection. Default Value: '2470-12-31'
  disablePast	Boolean value. Disables all past days. Default Value: false
  disableGaps	Boolean value. Disables the selection of days within a range with disabled dates. It only works when settings-selection.day is set to 'multiple-ranged'. Default Value: false
  disableAllDays	Boolean value. Disables all days and can be useful when using settings-range.enabled. Default Value: false
  disableWeekday	Allows you to disable specified weekdays. Specify an array with numbers, where each number represents a day of the week. For example, 0 is Sunday. Default Value: []
  disabled	Array value. Allows you to disable specific dates regardless of the specified range. To specify a range dates, use any delimiter between dates within a single string. Example value: ['2022-08-10:2022-08-15', '2022-08-20']. Default Value: null
  enabled	Array value. Allows you to enable specific dates regardless of the range and disabled dates. To specify a range dates, use any delimiter between dates within a single string. Example value: ['2022-08-10:2022-08-15', '2022-08-20']. Default Value: null

  Settings Selected Object

  dates	Array value. Allows you to specify a list of dates that will be selected when the calendar is initialized. To specify a range dates, use any delimiter between dates within a single string. Example value: ['2022-08-10:2022-08-15', '2022-08-20']. Default Value: null
  month	Determines the month that will be displayed when the calendar is initialized. Months are numbered from 0 to 11. Default Value: null
  year	Determines the year that will be displayed when the calendar is initialized. Default Value: null
  holidays	Array value. Allows you to specify dates that will be considered holidays and will receive additional CSS modifiers. To specify a range dates, use any delimiter between dates within a single string. Example value: ['2022-08-10:2022-08-15', '2022-08-20']. Default Value: null
  time	This parameter allows you to set the time that will be displayed when the calendar is initialized. The time is specified in the 'hh:mm aa' format, where 'aa' is the AM/PM marker. If using the 24-hour format, the 'aa' marker is not required.

  Settings Selection Object

  day	Determines whether it's allowed to select one or multiple days, or if day selection is completely disabled. Options: 'single' | 'multiple' | 'multiple-ranged' | false Default Value: 'single'
  month	Boolean value: Allows you to disable the selection of months, allow switching between months only using arrows, or allow switching between months in any way. Default Value: true Options: true | false | 'only-arrows'
  year	Boolean value: Allows you to disable the selection of years, allow switching between years only using arrows, or allow switching between years in any way. Default Value: true Options: true | false | 'only-arrows'
  time	Enables time selection. You can also specify the time format using a boolean value or a string: 24-hour or 12-hour format. Default Value: false Options: | false (boolean value) | 24 (string value) | 12 (string value)
  controlTime	Determines how time selection is allowed: 'all' (any method) or 'range' (only with the controller). Default Value: 'all'
  stepHours	Sets the step for the hour controller. You can choose any number from 1 to 23. Default Value: 1
  stepMinutes	Sets the step for the minute controller. You can choose any number from 1 to 59. Default Value: 1
  cancelableDay	Boolean value. Allows you to enable/disable cancellation of the selected date by pressing again. Default Value: true

  Settings Visibility Object

  themeDetect	To automatically detect and apply the website's theme to the calendar, you can pass a string value as a CSS selector. By default, it tracks the html tag with the data-theme attribute, but you can customize any other attribute and tag, such as class, if the class name is used to set the theme. If set to false, the theme will be determined by the user's system or the theme attribute. Default Value: 'html[data-theme]'
  monthShort	Boolean value: Allows you to use abbreviated month names when selecting a month. Default Value: true
  weekNumbers	Boolean value: Decide whether to display week numbers in the calendar. Default Value: false
  weekend	Boolean value. Highlight weekends in the calendar. Default Value: false
  today	Boolean value. Highlight the current day in the calendar. Default Value: true.
  disabled	Boolean value. Determine whether all days, including disabled days, will be displayed. Default Value: false
  daysOutside	Boolean value. Decide whether to display days from the previous and next months. Default Value: true

  Short Video Demo

  Popup Demo

  calendar-v2

  Currently, there are two components available in the package: calendar and calendar-v2. Both can be used; the only difference is that with the calendar component, attribute changes will reset the calendar to its default state, while in calendar-v2, you need to use the new action updateVanillaCalendar, where you can reset one or many settings in the calendar. You can use the following keys for reseting main calendar settings: resetTime, resetDates, resetMonth and resetYear. For all other settings, please see the the full list of settings vistit this link: https://vanilla-calendar.pro/docs/reference/additionally/settings#visibility-theme.
  For updating or reseting popups

  To update or reset popups, just add the popups key in the updateOptions object with the updated popups array. This will update or add new popups while preserving the existing ones. If you want to reset and only add new popups, then add an additional key in the updateOptions array called resetPopups and set the value to true.

  Example: