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.

Main

Main Settings

Main settings provide the most important options for configuring the calendar.

input

Type: Boolean

Default: false

Options: true | false

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

The input parameter specifies that the HTMLElement passed as the first parameter represents an input field rather than a wrapper for the calendar.

type

Type: String

Default: 'default'

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

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

The type parameter determines the type of calendar displayed.

months

Type: Number

Default: 2

Options: from 2 to 12

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

The months parameter specifies the number of displayed months when the calendar type is set to 'multiple'.

jumpMonths

Type: Number

Default: 1

Options: from 1 to ∞

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

The jumpMonths parameter controls the number of months to jump.

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

When the option is enabled and 1 or more selected date(s) are provided but without providing selected.month and selected.year, it will make the calendar jump to the first selected date. If set to false, the calendar will always open to the current month and year.

This option has no effect when selected.month and selected.year are provided.

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

The sanitizer will sanitize HTML templates to be CSP safe.

Please note that the external library dompurify is used as an example. Since sanitizer is not required for the calendar to function, using an external library helps avoid increasing the calendar's code size.

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

If toggleSelected parameter is true, or the callback returns true, then clicking on the active cell will remove the selection from it.

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

The date.min parameter sets the minimum allowable date that the calendar will consider, which cannot be earlier than this date.

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

The date.max parameter sets the maximum allowable date that the calendar will consider, which cannot be later than this date.

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

The date.today parameter determines which day is considered today for the calendar. T00:00:00.000Z - It is necessary that the date does not have problems with the client’s time zone.