Макеты
Макеты позволяют вам почти полностью изменить структуру 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="group" aria-label="${self.labels.navigation}">
<#ArrowPrev [month] />
<div class="${self.styles.headerContent}" data-vc-header="content" aria-live="polite" aria-atomic="true">
<#Month />
<#Year />
</div>
<#ArrowNext [month] />
</div>
<div class="${self.styles.wrapper}" data-vc="wrapper">
<#WeekNumbers />
<div class="${self.styles.content}" data-vc="content" role="grid">
<#Week />
<#Dates />
<#DateRangeTooltip />
</div>
</div>
<#Collapse />
<#ControlTime />
`,
},
});Это шаблон по умолчанию для отображения одного месяца и его дат.
layouts.multiple
Type: String
Default: string
Options: string
new Calendar('#calendar', {
layouts: {
multiple: `
<div class="${self.styles.controls}" data-vc="controls" role="group" 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="group">
<div class="${self.styles.header}" data-vc="header">
<div class="${self.styles.headerContent}" data-vc-header="content" aria-live="polite" aria-atomic="true">
<#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="group" aria-label="${self.labels.navigation}">
<div class="${self.styles.headerContent}" data-vc-header="content" aria-live="polite" aria-atomic="true">
<#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="group" aria-label="${self.labels.navigation}">
<#ArrowPrev [year] />
<div class="${self.styles.headerContent}" data-vc-header="content" aria-live="polite" aria-atomic="true">
<#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>
`,
},
});Это шаблон по умолчанию для выбора года.
layouts.week
Type: String
Default: string
Options: string
new Calendar('#calendar', {
layouts: {
week: `
<div class="${self.styles.header}" data-vc="header" role="group" aria-label="${self.labels.navigation}">
<#ArrowPrev [week] />
<div class="${self.styles.headerContent}" data-vc-header="content" aria-live="polite" aria-atomic="true">
<#Month />
<#Year />
</div>
<#ArrowNext [week] />
</div>
<div class="${self.styles.wrapper}" data-vc="wrapper">
<#WeekNumbers />
<div class="${self.styles.content}" data-vc="content" role="grid">
<#Week />
<#Dates />
<#DateRangeTooltip />
</div>
</div>
<#Collapse />
<#ControlTime />
`,
},
});Это шаблон по умолчанию для одной недели. Он совпадает с layouts.default, кроме стрелок, которые шагают по неделе за раз.