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

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

Дополнительно

DOM-Шаблоны

DOM-шаблоны позволяют вам почти полностью изменить структуру DOM календаря и добавить собственные HTML-элементы, такие как кнопки. Каждый тип календаря имеет свой собственный шаблон по умолчанию, и вы можете настроить каждый из них.

Теги, содержащие символ «#», являются зарегистрированными компонентами календаря и должны содержать закрывающую косую черту в конце тега, за исключением тега <#Multiple><#/Multiple>, который оборачивает один месяц. В шаблонах по умолчанию перечислены все возможные компоненты для этого шаблона.

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 />
    `
  }
});

Это шаблон по умолчанию для отображения одного месяца и его дат.

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 />
    `
  }
});

Это шаблон по умолчанию для отображения нескольких месяцев и их дат.

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

Это шаблон по умолчанию для выбора месяца.

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

Это шаблон по умолчанию для выбора года.