---
title: Макеты
description: Макеты позволяют изменять структуру DOM календаря и добавлять собственные HTML-элементы.
section: 7
---

# Макеты

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

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

## layouts.default

`Type: String`

`Default: string`

`Options: string`

```ts
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`

```ts
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`

```ts
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`

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

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