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.

Additionally

DOM Templates

DOM templates allow you to customize the DOM structure of the calendar almost entirely and add your own HTML elements, such as buttons. Each calendar type has its own default template, and you can customize each of them.

Tags containing the «#» symbol are registered calendar components and should have a closing forward slash at the end of the tag, except for the <#Multiple><#/Multiple> tag, which wraps a single month. The default templates list all possible components for that template.

DOMTemplates.default

Type: String

Default: string

Options: string

js
new VanillaCalendar('#calendar', {
  DOMTemplates: {
    default: `
      <div class="vanilla-calendar-header">
        <#ArrowPrev />
        <div class="vanilla-calendar-header__content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext />
      </div>
      <div class="vanilla-calendar-wrapper">
        <#WeekNumbers />
        <div class="vanilla-calendar-content">
          <#Week />
          <#Days />
        </div>
      </div>
      <#ControlTime />
    `
  }
});
js
new VanillaCalendar('#calendar', {
  DOMTemplates: {
    default: `
      <div class="vanilla-calendar-header">
        <#ArrowPrev />
        <div class="vanilla-calendar-header__content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext />
      </div>
      <div class="vanilla-calendar-wrapper">
        <#WeekNumbers />
        <div class="vanilla-calendar-content">
          <#Week />
          <#Days />
        </div>
      </div>
      <#ControlTime />
    `
  }
});

This is the default template for displaying a single month and its dates.

DOMTemplates.multiple

Type: String

Default: string

Options: string

js
new VanillaCalendar('#calendar', {
  DOMTemplates: {
    multiple: `
      <div class="vanilla-calendar-controls">
        <#ArrowPrev />
        <#ArrowNext />
      </div>
      <div class="vanilla-calendar-grid">
        <#Multiple>
          <div class="vanilla-calendar-column">
            <div class="vanilla-calendar-header">
              <div class="vanilla-calendar-header__content">
                <#Month />
                <#Year />
              </div>
            </div>
            <div class="vanilla-calendar-wrapper">
              <#WeekNumbers />
              <div class="vanilla-calendar-content">
                <#Week />
                <#Days />
              </div>
            </div>
          </div>
        <#/Multiple>
      </div>
      <#ControlTime />
    `
  }
});
js
new VanillaCalendar('#calendar', {
  DOMTemplates: {
    multiple: `
      <div class="vanilla-calendar-controls">
        <#ArrowPrev />
        <#ArrowNext />
      </div>
      <div class="vanilla-calendar-grid">
        <#Multiple>
          <div class="vanilla-calendar-column">
            <div class="vanilla-calendar-header">
              <div class="vanilla-calendar-header__content">
                <#Month />
                <#Year />
              </div>
            </div>
            <div class="vanilla-calendar-wrapper">
              <#WeekNumbers />
              <div class="vanilla-calendar-content">
                <#Week />
                <#Days />
              </div>
            </div>
          </div>
        <#/Multiple>
      </div>
      <#ControlTime />
    `
  }
});

This is the default template for displaying multiple months and their dates.

DOMTemplates.month

Type: String

Default: string

Options: string

js
new VanillaCalendar('#calendar', {
  DOMTemplates: {
    month: `
      <div class="vanilla-calendar-header">
        <div class="vanilla-calendar-header__content">
          <#Month />
          <#Year />
        </div>
      </div>
      <div class="vanilla-calendar-wrapper">
        <div class="vanilla-calendar-content">
          <#Months />
        </div>
      </div>
    `
  }
});
js
new VanillaCalendar('#calendar', {
  DOMTemplates: {
    month: `
      <div class="vanilla-calendar-header">
        <div class="vanilla-calendar-header__content">
          <#Month />
          <#Year />
        </div>
      </div>
      <div class="vanilla-calendar-wrapper">
        <div class="vanilla-calendar-content">
          <#Months />
        </div>
      </div>
    `
  }
});

This is the default template for selecting a month.

DOMTemplates.year

Type: String

Default: string

Options: string

js
new VanillaCalendar('#calendar', {
  DOMTemplates: {
    year: `
      <div class="vanilla-calendar-header">
        <#ArrowPrev />
        <div class="vanilla-calendar-header__content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext />
      </div>
      <div class="vanilla-calendar-wrapper">
        <div class="vanilla-calendar-content">
          <#Years />
        </div>
      </div>
    `
  }
});
js
new VanillaCalendar('#calendar', {
  DOMTemplates: {
    year: `
      <div class="vanilla-calendar-header">
        <#ArrowPrev />
        <div class="vanilla-calendar-header__content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext />
      </div>
      <div class="vanilla-calendar-wrapper">
        <div class="vanilla-calendar-content">
          <#Years />
        </div>
      </div>
    `
  }
});

This is the default template for selecting a year.