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

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

Основное

Основные настройки

Основные параметры предоставляют наиболее важные опции для настройки календаря.

input

Type: Boolean

Default: false

Options: true | false

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

Параметр input указывает, что HTMLElement, переданный как первый параметр, представляет собой поле ввода, а не обертку для календаря.

type

Type: String

Default: 'default'

Options: 'default' | 'multiple' | 'month' | 'year'

js
new VanillaCalendar('#calendar', {
  type: 'default',
});
js
new VanillaCalendar('#calendar', {
  type: 'default',
});

Параметр type определяет тип отображаемого календаря.

months

Type: Number

Default: 2

Options: от 2 до 12

js
new VanillaCalendar('#calendar', {
  months: 2,
});
js
new VanillaCalendar('#calendar', {
  months: 2,
});

Параметр months определяет количество отображаемых месяцев, если тип календаря установлен как 'multiple'.

jumpMonths

Type: Number

Default: 1

Options: от 1 до ∞

js
new VanillaCalendar('#calendar', {
  jumpMonths: 1,
});
js
new VanillaCalendar('#calendar', {
  jumpMonths: 1,
});

Параметр jumpMonths управляет количеством переключаемых месяцев.

jumpToSelectedDate

Type: Boolean

Default: false

Options: true | false

js
new VanillaCalendar('#calendar', {
  jumpToSelectedDate: true,
  settings: {
    selected: {
      dates: ['2018-05-02'],
    }
  },
});
js
new VanillaCalendar('#calendar', {
  jumpToSelectedDate: true,
  settings: {
    selected: {
      dates: ['2018-05-02'],
    }
  },
});

Если эта опция включена и указаны одна или несколько выбранных дат, но без указания selected.month и selected.year, календарь перейдет к первой выбранной дате. Если установлено значение false, календарь всегда будет открываться для текущего месяца и года.

Эта опция не имеет эффекта, если указаны selected.month и selected.year.

sanitizer

Type: Function

Default: (html) => html

js
import DOMPurify from 'dompurify';
 
new VanillaCalendar('#calendar', {
  sanitizer: (html) => DOMPurify.sanitize(html),
});
js
import DOMPurify from 'dompurify';
 
new VanillaCalendar('#calendar', {
  sanitizer: (html) => DOMPurify.sanitize(html),
});

sanitizer будет очищать HTML-шаблоны, чтобы они были безопасными для CSP.

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

toggleSelected

Type: Boolean | Function

Default: true

Options: true | false | () => false

js
new VanillaCalendar('#calendar', {
  toggleSelected: false,
  // or with a callback
  toggleSelected: (self) => (new Date(self.selectedDates[0]) < new Date()),
});
js
new VanillaCalendar('#calendar', {
  toggleSelected: false,
  // or with a callback
  toggleSelected: (self) => (new Date(self.selectedDates[0]) < new Date()),
});

Если параметр toggleSelected имеет значение true или обратный вызов возвращает true, то повторный клик на выбранную дату отменяет выбор.

date.min

Type: String

Default: '1970-01-01'

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

js
new VanillaCalendar('#calendar', {
  date: {
    min: '1970-01-01',
    // or
    min: 'today',
  },
});
js
new VanillaCalendar('#calendar', {
  date: {
    min: '1970-01-01',
    // or
    min: 'today',
  },
});

Параметр date.min устанавливает минимально допустимую дату, которую календарь будет учитывать, и которая не может быть меньше этой даты.

date.max

Type: String

Default: '2470-12-31'

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

js
new VanillaCalendar('#calendar', {
  date: {
    max: '2470-12-31',
    // or
    max: 'today',
  },
});
js
new VanillaCalendar('#calendar', {
  date: {
    max: '2470-12-31',
    // or
    max: 'today',
  },
});

Параметр date.max устанавливает максимально допустимую дату, которую календарь будет учитывать, и которая не может быть больше этой даты.

date.today

Type: Date object

Default: new Date()

Options: new Date()

js
new VanillaCalendar('#calendar', {
  date: {
    today: new Date('2022-01-07T00:00:00.000Z'),
  },
});
js
new VanillaCalendar('#calendar', {
  date: {
    today: new Date('2022-01-07T00:00:00.000Z'),
  },
});

Параметр date.today определяет, какой день будет считаться сегодняшним для календаря. T00:00:00.000Z - Необходимо, чтобы дата не имела проблем с часовым поясом клиента.