v2.8.4
💢 Пример использования

biletiki.store — пример сайта для поиска авиабилетов и отелей с помощью vanilla-calendar.

Дополнительно

Настройки

В ключе верхнего уровня settings содержится набор параметров, которые определяют конфигурацию календаря.

settings.lang

Type: String

Default: 'en'

Options: Language label | 'define'

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

Этот параметр задает языковую локализацию календаря. Вы можете указать метку языка согласно BCP 47 или использовать 'define', чтобы настроить собственные названия месяцев и дней недели, подробнее см. locale.


settings.iso8601

Type: Boolean

Default: true

Options: true | false

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

Этот параметр устанавливает начало недели в соответствии с международным стандартом ISO 8601. Если установлено значение 'false', неделя начнется с воскресенья, в противном случае - с понедельника.


settings.range.min

Type: String

Default: '1970-01-01'

Options: 'YYYY-MM-DD'

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

Этот параметр устанавливает минимальную дату, которую пользователь может выбрать. Даты, меньшие указанной, будут отключены и недоступны для выбора.

Важно отметить, что settings.range.min и settings.range.max отключают даты, выходящие за пределы диапазона, в то время как date.min и date.max вообще их не создают.


settings.range.max

Type: String

Default: '2470-12-31'

Options: 'YYYY-MM-DD'

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

Этот параметр устанавливает максимальную дату, которую пользователь может выбрать. Даты, большие указанной, будут отключены и недоступны для выбора.

Важно отметить, что settings.range.min и settings.range.max отключают даты, выходящие за пределы диапазона, в то время как date.min и date.max вообще их не создают.


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,
    }
  },
});

Этот параметр отключает все прошлые дни.


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,
    }
  },
});

Этот параметр отключает выбор дней в диапазоне с отключенными датами. Работает только если для параметра settings.selection.day установлено значение '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,
    }
  },
});

Этот параметр отключает все дни и может быть полезен при использовании 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],
    }
  },
});

Этот параметр позволяет отключить указанные дни недели. Укажите массив с числами, где каждое число представляет собой идентификатор дня недели. Например, 0 - воскресенье.


settings.range.disabled

Type: String[]

Default: null

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

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

Этот параметр позволяет отключить указанные даты, независимо от указанного диапазона.

Чтобы указать диапазон отключенных дат, используйте любой разделитель между датами в пределах одной строки.


settings.range.enabled

Type: String[]

Default: null

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

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

Этот параметр позволяет включить указанные даты, независимо от диапазона и отключенных дат.

Чтобы указать диапазон отключенных дат, используйте любой разделитель между датами в пределах одной строки.


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',
    },
  },
});

Этот параметр определяет, разрешено ли выбирать один или несколько дней, либо выбор дней полностью отключен.


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,
    },
  },
});

Этот параметр позволяет отключить выбор месяца, разрешить переключение месяцев только с помощью стрелок или разрешить переключение месяцев любым способом.


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,
    },
  },
});

Этот параметр позволяет отключить выбор года, разрешить переключение года только с помощью стрелок или разрешить переключение года любым способом.


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,
    },
  },
});

Этот параметр включает выбор времени. Вы также можете указать формат времени, используя булево значение или число: 24-часовой или 12-часовой формат.


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',
    },
  },
});

Этот параметр определяет способ выбора времени: 'all' (любым способом) или 'range' (только с помощью контроллера).


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,
    },
  },
});

Этот параметр устанавливает шаг для контроллера часов. Вы можете выбрать любое число от 1 до 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,
    },
  },
});

Этот параметр устанавливает шаг для контроллера минут. Вы можете выбрать любое число от 1 до 59.


settings.selected.dates

Type: String[]

Default: null

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

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

Этот параметр позволяет указать список дат, которые будут выбраны при инициализации календаря.

Чтобы указать диапазон отключенных дат, используйте любой разделитель между датами в пределах одной строки.


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,
    },
  },
});

Этот параметр определяет месяц, который будет отображаться при инициализации календаря. Месяцы нумеруются с 0 до 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,
    },
  },
});

Этот параметр определяет год, который будет отображаться при инициализации календаря.


settings.selected.holidays

Type: String[]

Default: null

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

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

Этот параметр позволяет указать даты, которые будут считаться праздничными и получат дополнительный CSS-модификатор.

Чтобы указать диапазон отключенных дат, используйте любой разделитель между датами в пределах одной строки.


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',
    },
  },
});

Этот параметр позволяет задать время, которое будет отображаться при инициализации календаря. Время задается в формате 'hh:mm aa', где 'aa' - это маркер AM/PM. Если используется 24-часовой формат, маркер 'aa' указывать не требуется.


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',
    },
  },
});

Этот параметр определяет тему календаря. По умолчанию тема определяется системой пользователя или настройками сайта.


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]',
    },
  },
});

Для того чтобы календарь автоматически отслеживал и применял тему сайта, вы можете передать строковое значение в виде CSS-селектора. Квадратные скобки указывают на атрибут, содержащий название темы. По умолчанию отслеживается тег html с атрибутом data-theme, но вы можете настроить любой другой атрибут и тег, например, class, если имя класса используется для задания темы: 'html[class]'. Если установить значение false, тема будет определяться системой пользователя или параметром settings.visibility.theme.


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,
    },
  },
});

Этот параметр позволяет использовать сокращенные названия месяцев при выборе месяца.


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,
    },
  },
});

С помощью этого параметра вы можете решить, будут ли отображаться номера недель в году.


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,
    },
  },
});

Этот параметр позволяет выделить выходные дни в календаре.


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,
    },
  },
});

С помощью этого параметра вы можете выделить текущий день в календаре.


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,
    },
  },
});

Этот параметр определяет, будут ли отображаться все дни, включая отключенные дни.


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,
    },
  },
});

С помощью этого параметра вы можете решить, будут ли отображаться дни из прошлого и следующего месяца.