레이아웃

레이아웃을 사용하면 캘린더의 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>
    `
  }
});

연도를 선택하기 위한 기본 템플릿입니다.