Настройки
type
Type: String
Default: 'default'
Options: 'default' | 'multiple' | 'month' | 'year' | 'week'
new Calendar('#calendar', {
type: 'default',
});Параметр type определяет тип отображаемого календаря. Тип week показывает одну неделю вместо целого месяца. Он работает самостоятельно или вместе с enableCollapse, позволяя посетителю переключаться между месяцем и неделей.
inputMode
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
inputMode: true,
});Параметр inputMode указывает, что mainElement, переданный как первый параметр, представляет собой поле ввода, а не обертку для календаря.
openOnFocus
Type: Boolean | Function
Default: true
Options: true | false | () => false
new Calendar('#calendar', {
openOnFocus: false,
// или с callback
openOnFocus: (self) => !self.context.isShowInInputMode,
});Если параметр openOnFocus равен true или обратный вызов возвращает true, то фокус на input откроет календарь. Используйте false или колбэк, чтобы контролировать это поведение и реализовать свой обработчик фокуса.
positionToInput
Type: String
Default: 'left'
Options: 'auto' | 'center' | 'left' | 'right' | ['bottom' | 'top', 'center' | 'left' | 'right']
new Calendar('#calendar', {
positionToInput: 'auto',
// positionToInput: ['bottom', 'center'],
});Этот параметр определяет положение календаря относительно input, если календарь инициализирован с параметром inputMode.
positionToInput принимает строку со значением 'left', 'center' или 'right', либо массив значений [ось Y, ось X], где ось Y может быть 'bottom' или 'top', а ось X может быть 'left', 'center' или 'right'.
Если ось Y не указана, то используется значение по умолчанию - 'bottom'.
Вы можете использовать значение positionToInput: 'auto' для автоматического определения наилучшей позиции в зависимости от доступного места в области просмотра.
Опция позволяет рассчитать доступное пространство со всех 4 сторон и сначала попытается отобразить календарь внизу относительно input, это позиция по умолчанию.
Если внизу недостаточно места, он оценит другую лучшую доступную позицию.
animationNew
Type: Boolean | Object
Default: false
Options: true | false | { duration?: Number, easing?: String, slide?: Timing, fade?: Timing, collapse?: Timing }
Timing: { duration?: Number, easing?: String }
new Calendar('#calendar', {
animation: true,
// animation: { duration: 400, easing: 'ease-out' },
// animation: { slide: { duration: 400 }, fade: { duration: 120 }, collapse: { duration: 300 } },
});Анимирует переходы между представлениями. Навигация стрелками и enableSwipe используют горизонтальный слайд, пикеры месяца и года — кроссфейд, а enableCollapse анимирует высоту календаря между месяцем и неделей.
Значения по умолчанию разные для разных переходов — 250ms для слайдов, 150ms для кроссфейда и 300ms для сворачивания, все с cubic-bezier(0.4, 0, 0.2, 1). Объект переопределяет любое из значений: duration указывается в миллисекундах, а easing принимает CSS-функцию плавности. Значения верхнего уровня действуют на все переходы; вложите их в slide (стрелки и enableSwipe), fade (пикеры) или collapse (enableCollapse), чтобы задать одну группу. Вложенные значения важнее верхнеуровневых.
Анимация завершения не проигрывается, если посетитель запросил уменьшение движения через prefers-reduced-motion: reduce. Жесты продолжают следовать за
указателем, но после отпускания сразу завершаются или возвращаются назад.
По умолчанию false ради обратной совместимости: опция появилась позже, а её включение меняет то, что видит поиск по DOM во время слайда и кроссфейда. Уходящее содержимое остаётся в DOM внутри слоя [data-vc-ghost] с атрибутом inert, поэтому элементы дат могут на короткое время присутствовать дважды. Исключайте этот слой, если ваш код их ищет; сворачивание слой-призрак не создаёт.
firstWeekday
Type: Number
Default: 1
Options: от 0 до 6
new Calendar('#calendar', {
firstWeekday: 1,
});Этот параметр устанавливает первый день недели. Укажите число от 0 до 6, число представляет собой идентификатор дня недели. По стандартам JS дни недели начинаются с 0 и 0 это воскресенье.
monthsToSwitch
Type: Number
Default: 1
Options: от 1 до 12
new Calendar('#calendar', {
monthsToSwitch: 1,
});Параметр monthsToSwitch управляет количеством переключаемых месяцев.
Если monthsToSwitch больше 1, то в режиме выбора месяца (month picker) будут доступны для выбора только те месяцы, которые достижимы от текущего
выбранного месяца с шагом monthsToSwitch — остальные будут отображаться отключёнными. Это нужно для согласованности навигации с заданным шагом (особенно
актуально вместе с displayMonthsCount при type: 'multiple', где это удерживает несколько видимых месяцев синхронизированными).
themeAttrDetect
Type: String | false
Default: 'html[data-theme]'
Options: string | false
new Calendar('#calendar', {
themeAttrDetect: 'html[data-theme]',
});Для того чтобы календарь автоматически отслеживал и применял тему сайта, вы можете передать строковое значение в виде CSS-селектора.
Квадратные скобки указывают на атрибут, содержащий название темы.
По умолчанию отслеживается тег html с атрибутом data-theme, но вы можете настроить любой другой атрибут и тег, например, class, если имя класса используется для задания темы: 'html[class]'.
Если установить значение false, тема будет определяться системой пользователя или параметром selectedTheme.
locale
Type: String
Default: 'en'
Options: Language label | Array<locale>
new Calendar('#calendar', {
locale: 'en',
// Or specify an object for your labels
// locale: {
// months: {
// long: [],
// short: [],
// },
// weekday: {
// long: [],
// short: [],
// }
// },
});Этот параметр задает языковую локализацию календаря. Вы можете указать метку языка согласно BCP 47 или предоставить массивы названий месяцев и недель, подробнее см. тут.
dateToday
Type: Date object
Default: 'today'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
dateToday: 'today',
});Параметр dateToday определяет, какой день будет считаться сегодняшним для календаря.
dateMin
Type: String
Default: '1970-01-01'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
dateMin: '1970-01-01',
});Параметр dateMin устанавливает минимально допустимую дату, которую календарь будет учитывать, и которая не может быть меньше этой даты.
dateMax
Type: String
Default: '2470-12-31'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
dateMax: '2470-12-31',
});Параметр dateMax устанавливает максимально допустимую дату, которую календарь будет учитывать, и которая не может быть больше этой даты.
displayDateMin
Type: String
Default: '1970-01-01'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
displayDateMin: '2022-07-01',
});Этот параметр устанавливает минимальную дату, которую пользователь может выбрать. Даты, меньшие указанной, будут отключены и недоступны для выбора.
Важно отметить, что displayDateMin и displayDateMax отключают даты, выходящие за пределы диапазона, в то время как dateMin и dateMax вообще их не
создают.
Передача null в displayDateMin через .set() явно сбрасывает значение обратно к дефолтному. Передача undefined (например, отсутствие этого свойства)
оставляет текущее значение без изменений.
displayDateMax
Type: String
Default: '2470-12-31'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
displayDateMax: '2024-07-01',
});Этот параметр устанавливает максимальную дату, которую пользователь может выбрать. Даты, большие указанной, будут отключены и недоступны для выбора.
Важно отметить, что displayDateMin и displayDateMax отключают даты, выходящие за пределы диапазона, в то время как dateMin и dateMax вообще их не
создают.
Передача null в displayDateMax через .set() явно сбрасывает значение обратно к дефолтному. Передача undefined (например, отсутствие этого свойства)
оставляет текущее значение без изменений.
displayDatesOutside
Type: Boolean
Default: true
Options: true | false
new Calendar('#calendar', {
displayDatesOutside: false,
});С помощью этого параметра вы можете решить, будут ли отображаться дни из прошлого и следующего месяца.
displayDisabledDates
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
displayDisabledDates: false,
});Этот параметр определяет, будут ли отображаться все дни, включая отключенные дни.
displayMonthsCount
Type: Number
Default: 2
Options: от 2 до 12
new Calendar('#calendar', {
displayMonthsCount: 2,
});Параметр displayMonthsCount определяет количество отображаемых месяцев, если тип календаря установлен как 'multiple'.
disableDates
Type: String[] | Number[] | Date[]
Default: null
Options: ['YYYY-MM-DD'] | [Number] | [Date] | null
new Calendar('#calendar', {
disableDates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});Этот параметр позволяет отключить указанные даты, независимо от указанного диапазона.
disableAllDates
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
disableAllDates: true,
});Этот параметр отключает все дни и может быть полезен при использовании enableDates.
disableDatesPast
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
disableDatesPast: true,
});Этот параметр отключает все прошедшие дни.
disableDatesGaps
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
disableDatesGaps: true,
});Этот параметр отключает выбор дней в диапазоне с отключенными датами. Работает только если для параметра selectionDatesMode установлено значение 'multiple-ranged'.
disableWeekdays
Type: Number
Default: []
Options: от 0 до 6
new Calendar('#calendar', {
disableWeekdays: [0, 6],
});Этот параметр позволяет отключить указанные дни недели. Укажите массив с числами от 0 до 6, где каждое число представляет собой идентификатор дня недели. По стандартам JS дни недели начинаются с 0 и 0 это воскресенье.
disableToday
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
disableToday: true,
});С помощью этого параметра вы можете отключить выделение сегодняшнего дня в календаре.
enableDates
Type: String[] | Number[] | Date[]
Default: null
Options: ['YYYY-MM-DD'] | [Number] | [Date] | null
new Calendar('#calendar', {
enableDates: ['2022-08-11:2022-08-16', '2022-08-20', 1722152977141, new Date()],
});Этот параметр позволяет включить указанные даты, независимо от диапазона и отключенных дат.
enableEdgeDatesOnly
Type: Boolean
Default: true
Options: true | false
new Calendar('#calendar', {
enableEdgeDatesOnly: true,
});Этот параметр позволяет получить только начальную и конечную выбранную пользователем дату, игнорируя промежуточные даты. Этот параметр работает только в том случае, если для selectionDatesMode установлено значение 'multiple-ranged'.
Важно отметить, что при использовании этого параметра отключенные даты в диапазоне дат не будут иметь никакого эффекта. Поэтому используйте эту опцию только в том случае, если вас интересуют только выбранные пользователем даты начала и окончания.
enableDateToggle
Type: Boolean | Function
Default: true
Options: true | false | () => false
new Calendar('#calendar', {
enableDateToggle: false,
// or with a callback
enableDateToggle: (self) => new Date(self.selectedDates[0]) < new Date(),
});Если параметр enableDateToggle имеет значение true или обратный вызов возвращает true, то повторный клик на выбранную дату отменяет выбор.
enableWeekNumbers
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
enableWeekNumbers: true,
});С помощью этого параметра вы можете решить, будут ли отображаться номера недель в году.
enableMonthChangeOnDayClick
Type: Boolean
Default: true
Options: true | false
new Calendar('#calendar', {
enableMonthChangeOnDayClick: false,
});С помощью этой параметра вы можете решить, будет ли месяц переключаться по клику на день из предыдущего или следующего месяца.
enableJumpToSelectedDate
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
enableJumpToSelectedDate: true,
selectedDates: ['2018-05-02'],
});Если эта опция включена и указаны одна или несколько выбранных дат, но без указания selectedMonth и selectedYear, календарь перейдет к первой выбранной дате. Если установлено значение false, календарь всегда будет открываться для текущего месяца и года.
selectedMonth и selectedYear.enableCollapseNew
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
enableCollapse: true,
});Добавляет под сеткой элемент управления, который сворачивает месяц до одной недели и разворачивает обратно. Неделя выбирается по первой выбранной дате, если она относится к отображаемому месяцу; иначе по сегодняшнему дню, если он относится к этому месяцу; иначе по первому числу отображаемого месяца. На устройствах с мышью элемент выглядит как шеврон, на сенсорных — как черточка, которую можно тянуть вверх и вниз.
enableCollapse не требует enableSwipe или animation. Сворачивание переключает type на 'week', поэтому calendar.type показывает текущее состояние, а set({ type: 'week' }) делает то же самое без перехода. Опцию поддерживают только типы default и week; другие типы вызывают ошибку при init().enableSwipeNew
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
enableSwipe: true,
});Позволяет посетителю тянуть содержимое календаря в сторону, чтобы перейти к следующему или предыдущему периоду, во всех представлениях, где работают стрелки: default, multiple, week и список годов. Соседний период следует за указателем. Расстояние и скорость в момент отпускания определяют, встанет он на место или вернётся назад.
enableSwipe не требует enableCollapse или animation; без анимации отпускание срабатывает мгновенно. Вертикальная прокрутка над календарём остаётся за
страницей, а свайп доступен, только пока видна соответствующая стрелка, поэтому учитывает dateMin, dateMax и ограничения навигации. Дата, на которой
закончилась тяга, не выбирается.
selectionDatesMode
Type: String | false
Default: 'single'
Options: 'single' | 'multiple' | 'multiple-ranged' | false
new Calendar('#calendar', {
selectionDatesMode: 'single',
});Этот параметр определяет, разрешено ли выбирать один или несколько дней, либо выбор дней полностью отключен.
selectionMonthsMode
Type: Boolean
Default: true
Options: true | false | 'only-arrows'
new Calendar('#calendar', {
selectionMonthsMode: false,
});Этот параметр позволяет отключить выбор месяца, разрешить переключение месяцев только с помощью стрелок или разрешить переключение месяцев любым способом.
selectionYearsMode
Type: Boolean
Default: true
Options: true | false | 'only-arrows'
new Calendar('#calendar', {
selectionYearsMode: false,
});Этот параметр позволяет отключить выбор года, разрешить переключение года только с помощью стрелок или разрешить переключение года любым способом.
selectionTimeMode
Type: false | Number
Default: false
Options: false | 24 | 12
new Calendar('#calendar', {
selectionTimeMode: true,
});Этот параметр включает выбор времени. Вы также можете указать формат времени, используя число: 24-часовой или 12-часовой формат.
selectedDates
Type: String[] | Number[] | Date[]
Default: null
Options: ['YYYY-MM-DD'] | [Number] | [Date] | null
new Calendar('#calendar', {
selectedDates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});Этот параметр позволяет указать список дат, которые будут выбраны при инициализации календаря.
selectedMonth
Type: Number
Default: null
Options: от 0 до 11 | null
new Calendar('#calendar', {
selectedMonth: 0,
});Этот параметр определяет месяц, который будет отображаться при инициализации календаря. По стандартам JS месяцы нумеруются с 0 до 11. Смотрите enableJumpToSelectedDate, чтобы установить по умолчанию первую выбранную дату.
selectedYear
Type: Number
Default: null
Options: Number (YYYY) | null
new Calendar('#calendar', {
selectedYear: 2022,
});Этот параметр определяет год, который будет отображаться при инициализации календаря. Смотрите enableJumpToSelectedDate, чтобы установить по умолчанию первую выбранную дату.
selectedHolidays
Type: String[] | Number[] | Date[]
Default: null
Options: ['YYYY-MM-DD'] | [Number] | [Date] | null
new Calendar('#calendar', {
selectedHolidays: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});Этот параметр позволяет указать даты, которые будут считаться праздничными и получат дополнительный атрибут данных для стилизации.
selectedWeekends
Type: Number
Default: [0, 6]
Options: number[0-6]
new Calendar('#calendar', {
selectedWeekends: [0, 6],
});Этот параметр позволяет указать выходные дни недели. Укажите массив с числами от 0 до 6, где каждое число представляет собой идентификатор дня недели. По стандартам JS дни недели начинаются с 0 и 0 это воскресенье.
selectedTime
Type: String
Default: null
Options: 'hh:mm aa' | null
new Calendar('#calendar', {
selectedTime: '03:44 AM',
});Этот параметр позволяет задать время, которое будет отображаться при инициализации календаря. Время задается в формате 'hh:mm aa', где 'aa' - это маркер AM/PM. Если используется 24-часовой формат, маркер 'aa' указывать не требуется.
selectedTheme
Type: String
Default: 'system'
Options: string (custom theme) | 'light' | 'dark' | 'system'
new Calendar('#calendar', {
selectedTheme: 'system',
});Этот параметр определяет тему календаря. По умолчанию тема определяется системой пользователя или настройками сайта.
timeMinHour
Type: Number
Default: 0
Options: от 0 до 23
new Calendar('#calendar', {
timeMinHour: 0,
});Этот параметр указывает, какой час будет минимальным для выбора.
timeMaxHour
Type: Number
Default: 23
Options: от 0 до 23
new Calendar('#calendar', {
timeMaxHour: 23,
});Этот параметр указывает, какой час будет максимальным для выбора.
timeMinMinute
Type: Number
Default: 0
Options: от 0 до 59
new Calendar('#calendar', {
timeMinMinute: 0,
});Этот параметр указывает, какая минута будет минимальной для выбора.
timeMaxMinute
Type: Number
Default: 59
Options: от 0 до 59
new Calendar('#calendar', {
timeMaxMinute: 59,
});Этот параметр указывает, какая минута будет максимальной для выбора.
timeControls
Type: String
Default: 'all'
Options: 'all' | 'range'
new Calendar('#calendar', {
timeControls: 'all',
});Этот параметр определяет способ выбора времени: 'all' (любым способом) или 'range' (только с помощью контроллера).
timeStepHour
Type: Number
Default: 1
Options: от 1 до 23
new Calendar('#calendar', {
timeStepHour: 1,
});Этот параметр устанавливает шаг для контроллера часов.
timeStepMinute
Type: Number
Default: 1
Options: от 1 до 59
new Calendar('#calendar', {
timeStepMinute: 1,
});Этот параметр устанавливает шаг для контроллера минут.
sanitizerHTML
Type: Function
Default: (html) => html
import DOMPurify from 'dompurify';
new Calendar('#calendar', {
sanitizerHTML: (html) => DOMPurify.sanitize(html),
});sanitizerHTML может очищать HTML-шаблоны, чтобы они были безопасными для CSP.
Обратите внимание, что в качестве примера используется сторонняя библиотека
dompurify
. sanitizerHTML не является обязательным для работы календаря.