v2.9.10
Copyright © 2023 MIT License. | Design and development by Yury Uvarov.
💢 Usage example

biletiki.store — a website example for searching for flight tickets and hotels using vanilla-calendar.

Additionally

Settings

The top-level settings key contains a set of parameters that define the calendar's configuration.

settings.lang

Type: String

Default: 'en'

Options: Language label | 'define'

js
new VanillaCalendar('#calendar', {
  settings: {
    lang: 'en',
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    lang: 'en',
  },
});

This parameter sets the language localization of the calendar. You can specify a language label according to BCP 47 or use 'define' to customize your own month and weekday names, see locale for more details.

settings.iso8601

Type: Boolean

Default: true

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    iso8601: true,
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    iso8601: true,
  },
});

This parameter sets the start of the week in accordance with the international standard ISO 8601. If set to 'false', the week will start on Sunday; otherwise, it starts on Monday.

settings.range.min

Type: String

Default: '1970-01-01'

Options: 'YYYY-MM-DD' | 'today'

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      min: '2022-07-01',
      // or
      min: 'today',
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      min: '2022-07-01',
      // or
      min: 'today',
    }
  },
});

This parameter sets the minimum date that the user can choose. Dates earlier than the specified date will be disabled and not available for selection.

It's important to note that settings.range.min and settings.range.max disable dates outside the range, while date.min and date.max do not even create them.

You can provide 'today' as a shortcut to settings.range.min and/or settings.range.max.

settings.range.max

Type: String

Default: '2470-12-31'

Options: 'YYYY-MM-DD' | 'today'

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      max: '2024-07-01',
      // or
      max: 'today',
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      max: '2024-07-01',
      // or
      max: 'today',
    }
  },
});

This parameter sets the maximum date that the user can choose. Dates later than the specified date will be disabled and not available for selection.

It's important to note that settings.range.min and settings.range.max disable dates outside the range, while date.min and date.max do not even create them.

You can provide 'today' as a shortcut to settings.range.min and/or settings.range.max.

settings.range.edgesOnly

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      edgesOnly: true,
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      edgesOnly: true,
    }
  },
});

This parameter will keep references of the date range edges only, which are the Start and End dates in settings.selected.dates but nothing in between the range. It only works when settings.selection.day is set to 'multiple-ranged'.

It's important to note that with this setting, disabling dates within the date range will have no effect. So make sure to use this parameter when you are interested with only the start and end date but nothing in-between.

settings.range.disablePast

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disablePast: true,
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disablePast: true,
    }
  },
});

This parameter disables all past days.

settings.range.disableGaps

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disableGaps: true,
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disableGaps: true,
    }
  },
});

This parameter disables the selection of days within a range with disabled dates. It only works when settings.selection.day is set to 'multiple-ranged'.

settings.range.disableAllDays

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disableAllDays: true,
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disableAllDays: true,
    }
  },
});

This parameter disables all days and can be useful when using settings.range.enabled.

settings.range.disableWeekday

Type: Number[]

Default: []

Options: number[] | []

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disableWeekday: [0, 6],
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disableWeekday: [0, 6],
    }
  },
});

This parameter 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.

settings.range.disabled

Type: String[] | Number[] | Date[]

Default: null

Options: ['YYYY-MM-DD'] | [Number] | [Date] | null

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disabled: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      disabled: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
    }
  },
});

This parameter 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.

settings.range.enabled

Type: String[] | Number[] | Date[]

Default: null

Options: ['YYYY-MM-DD'] | [Number] | [Date] | null

js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      enabled: ['2022-08-11:2022-08-16', '2022-08-20', 1722152977141, new Date()],
    }
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    range: {
      enabled: ['2022-08-11:2022-08-16', '2022-08-20', 1722152977141, new Date()],
    }
  },
});

This parameter 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.

settings.selection.day

Type: String | false

Default: 'single'

Options: 'single' | 'multiple' | 'multiple-ranged' | false

js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      day: 'single',
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      day: 'single',
    },
  },
});

This parameter determines whether it's allowed to select one or multiple days, or if day selection is completely disabled.

settings.selection.month

Type: Boolean

Default: true

Options: true | false | 'only-arrows'

js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      month: false,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      month: false,
    },
  },
});

This parameter allows you to disable the selection of months, allow switching between months only using arrows, or allow switching between months in any way.

settings.selection.year

Type: Boolean

Default: true

Options: true | false | 'only-arrows'

js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      year: false,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      year: false,
    },
  },
});

This parameter allows you to disable the selection of years, allow switching between years only using arrows, or allow switching between years in any way.

settings.selection.time

Type: Boolean | Number

Default: false

Options: true (it is 12) | false | 24 | 12

js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      time: true,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      time: true,
    },
  },
});

This parameter enables time selection. You can also specify the time format using a boolean value or a number: 24-hour or 12-hour format.

settings.selection.controlTime

Type: String

Default: 'all'

Options: 'all' | 'range'

js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      controlTime: 'all',
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      controlTime: 'all',
    },
  },
});

This parameter determines how time selection is allowed: 'all' (any method) or 'range' (only with the controller).

settings.selection.stepHours

Type: Number

Default: 1

Options: Number (from 1 to 23)

js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      stepHours: 1,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      stepHours: 1,
    },
  },
});

This parameter sets the step for the hour controller. You can choose any number from 1 to 23.

settings.selection.stepMinutes

Type: Number

Default: 1

Options: Number (from 1 to 59)

js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      stepMinutes: 1,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      stepMinutes: 1,
    },
  },
});

This parameter sets the step for the minute controller. You can choose any number from 1 to 59.

settings.selection.cancelableDay

Type: Number

Default: true

Options: boolean

js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      cancelableDay: false,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selection: {
      cancelableDay: false,
    },
  },
});

This option allows you to enable/disable cancellation of the selected date by pressing again.

settings.selected.dates

Type: String[] | Number[] | Date[]

Default: null

Options: ['YYYY-MM-DD'] | [Number] | [Date] | null

js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      dates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      dates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
    },
  },
});

This parameter 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.

settings.selected.month

Type: Number

Default: null

Options: Number (from 0 to 11) | null

js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      month: 0,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      month: 0,
    },
  },
});

This parameter determines the month that will be displayed when the calendar is initialized. Months are numbered from 0 to 11.

settings.selected.year

Type: Number

Default: null

Options: Number (YYYY) | null

js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      year: 2022,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      year: 2022,
    },
  },
});

This parameter determines the year that will be displayed when the calendar is initialized.

settings.selected.holidays

Type: String[] | Number[] | Date[]

Default: null

Options: ['YYYY-MM-DD'] | [Number] | [Date] | null

js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      holidays: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      holidays: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
    },
  },
});

This parameter 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.

settings.selected.time

Type: String

Default: null

Options: 'hh:mm aa' | null

js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      time: '03:44 AM',
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    selected: {
      time: '03:44 AM',
    },
  },
});

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.visibility.theme

Type: String

Default: 'system'

Options: 'light' | 'dark' | 'system'

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      theme: 'system',
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      theme: 'system',
    },
  },
});

This parameter determines the theme of the calendar. By default, the theme is determined by the user's system or website settings.

settings.visibility.themeDetect

Type: String | False

Default: 'html[data-theme]'

Options: 'string | false

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      themeDetect: 'html[data-theme]',
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      themeDetect: 'html[data-theme]',
    },
  },
});

To automatically detect and apply the website's theme to the calendar, you can pass a string value as a CSS selector. Square brackets indicate an attribute containing the theme name. 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: 'html[class]'. If set to false, the theme will be determined by the user's system or the settings.visibility.theme parameter.

settings.visibility.monthShort

Type: Boolean

Default: true

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      monthShort: true,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      monthShort: true,
    },
  },
});

This parameter allows you to use abbreviated month names when selecting a month.

settings.visibility.weekNumbers

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      weekNumbers: false,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      weekNumbers: false,
    },
  },
});

With this parameter, you can decide whether to display week numbers in the calendar.

settings.visibility.weekend

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      weekend: true,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      weekend: true,
    },
  },
});

This parameter allows you to highlight weekends in the calendar.

settings.visibility.today

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      today: true,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      today: true,
    },
  },
});

With this parameter, you can highlight the current day in the calendar.

settings.visibility.disabled

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      disabled: false,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      disabled: false,
    },
  },
});

This parameter determines whether all days, including disabled days, will be displayed.

settings.visibility.daysOutside

Type: Boolean

Default: true

Options: true | false

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      daysOutside: false,
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      daysOutside: false,
    },
  },
});

With this parameter, you can decide whether to display days from the previous and next months.

settings.visibility.positionToInput

Type: String

Default: 'left'

Options: 'auto' | 'center' | 'left' | 'right' | ['bottom' | 'top', 'center' | 'left' | 'right']

js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      positionToInput: 'auto',
      // positionToInput: ['bottom', 'center'],
    },
  },
});
js
new VanillaCalendar('#calendar', {
  settings: {
    visibility: {
      positionToInput: 'auto',
      // positionToInput: ['bottom', 'center'],
    },
  },
});

This parameter specifies the position of the calendar relative to input, if the calendar is initialized with the input parameter.

positionToInput takes a string with a value of 'left', 'center', or 'right', or an array of values [Y-axis, X-axis], where the Y-axis can take the values 'bottom' or 'top', and the X-axis can take the values 'left', 'center', or 'right'. If the Y-axis is not specified, the default is 'bottom'.

You can use the positionToInput: 'auto' value to automatically detect the best position depending on the available space in the viewport.  Behind the scene, it calculates the available space on all 4 sides, and it will first try to display the picker at the bottom of the input which is the default position. If there is not enough space at the bottom, it will evaluate what would be the other best available position.