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

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

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

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

Вы можете указать 'today' как ярлык для settings.range.min и/или 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',
    }
  },
});

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

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

Вы можете указать 'today' как ярлык для settings.range.min и/или 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,
    }
  },
});

Этот параметр позволяет получить только начальную и конечную выбранную пользователем дату, игнорируя промежуточные даты. Этот параметр работает только в том случае, если для settings.selection.day установлено значение 'multiple-ranged'.

Важно отметить, что при использовании этой настройки отключение дат в пределах диапазона дат не будет иметь никакого эффекта. Поэтому обязательно используйте этот параметр, если вас интересуют только начальная и конечная выбранная пользователем дата.

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

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

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

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

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

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

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.selection.cancelableDay

Type: Number

Default: true

Options: boolean

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

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

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

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

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

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

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

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

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

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

positionToInput принимает строку со значением 'left', 'center' или 'right', либо массив значений [ось Y, ось X], где ось Y может быть 'bottom' или 'top', а ось X может быть 'left', 'center' или 'right'. Если ось Y не указана, то используется значение по умолчанию - 'bottom'.

Вы можете использовать значение positionToInput: 'auto' для автоматического определения наилучшей позиции в зависимости от доступного места в области просмотра. Опция позволяет рассчитать доступное пространство со всех 4 сторон и сначала попытается отобразить календарь внизу относительно input, это позиция по умолчанию. Если внизу недостаточно места, он оценит другую лучшую доступную позицию.