Макеты

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

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

layouts.default

Type: String

Default: string

Options: string

new Calendar('#calendar', {
  layouts: {
    default: `
      <div class="${self.styles.header}" data-vc="header" role="toolbar" aria-label="${self.labels.navigation}">
        <#ArrowPrev [month] />
        <div class="${self.styles.headerContent}" data-vc-header="content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext [month] />
      </div>
      <div class="${self.styles.wrapper}" data-vc="wrapper">
        <#WeekNumbers />
        <div class="${self.styles.content}" data-vc="content">
          <#Week />
          <#Dates />
          <#DateRangeTooltip />
        </div>
      </div>
      <#ControlTime />
    `
  }
});

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

layouts.multiple

Type: String

Default: string

Options: string

new Calendar('#calendar', {
  layouts: {
    multiple: `
      <div class="${self.styles.controls}" data-vc="controls" role="toolbar" aria-label="${self.labels.navigation}">
        <#ArrowPrev [month] />
        <#ArrowNext [month] />
      </div>
      <div class="${self.styles.grid}" data-vc="grid">
        <#Multiple>
          <div class="${self.styles.column}" data-vc="column" role="region">
            <div class="${self.styles.header}" data-vc="header">
              <div class="${self.styles.headerContent}" data-vc-header="content">
                <#Month />
                <#Year />
              </div>
            </div>
            <div class="${self.styles.wrapper}" data-vc="wrapper">
              <#WeekNumbers />
              <div class="${self.styles.content}" data-vc="content">
                <#Week />
                <#Dates />
              </div>
            </div>
          </div>
        <#/Multiple>
        <#DateRangeTooltip />
      </div>
      <#ControlTime />
    `
  }
});

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

layouts.month

Type: String

Default: string

Options: string

new Calendar('#calendar', {
  layouts: {
    month: `
      <div class="${self.styles.header}" data-vc="header" role="toolbar" aria-label="${self.labels.navigation}">
        <div class="${self.styles.headerContent}" data-vc-header="content">
          <#Month />
          <#Year />
        </div>
      </div>
      <div class="${self.styles.wrapper}" data-vc="wrapper">
        <div class="${self.styles.content}" data-vc="content">
          <#Months />
        </div>
      </div>
    `
  }
});

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

layouts.year

Type: String

Default: string

Options: string

new Calendar('#calendar', {
  layouts: {
    year: `
      <div class="${self.styles.header}" data-vc="header" role="toolbar" aria-label="${self.labels.navigation}">
        <#ArrowPrev [year] />
        <div class="${self.styles.headerContent}" data-vc-header="content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext [year] />
      </div>
      <div class="${self.styles.wrapper}" data-vc="wrapper">
        <div class="${self.styles.content}" data-vc="content">
          <#Years />
        </div>
      </div>
    `
  }
});

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