@nebular/theme/components/calendar/base-calendar.component.html

@nebular/theme

<nb-card>
  <nb-card-header *ngIf="showHeader">
    <nb-calendar-header (navigateToday)="navigateToday()"></nb-calendar-header>
  </nb-card-header>

  <nb-card-body [ngSwitch]="activeViewMode">

    <ng-container *ngSwitchCase="ViewMode.DATE">

      <nb-calendar-pageable-navigation
        *ngSwitchCase="ViewMode.DATE"
        [date]="visibleDate"
        (next)="nextMonth()"
        (prev)="prevMonth()"
        (changeMode)="setViewMode(ViewMode.YEAR)">
      </nb-calendar-pageable-navigation>

      <nb-calendar-day-picker
        [boundingMonths]="boundingMonth"
        [cellComponent]="dayCellComponent"
        [min]="min"
        [max]="max"
        [filter]="filter"
        [visibleDate]="visibleDate"
        [size]="size"
        [date]="date"
        (dateChange)="dateChange.emit($event)">
      </nb-calendar-day-picker>

    </ng-container>

    <ng-container *ngSwitchCase="ViewMode.YEAR">

      <nb-calendar-pageable-navigation
        [date]="visibleDate"
        (next)="nextYears()"
        (prev)="prevYears()"
        (changeMode)="setViewMode(ViewMode.DATE)">
      </nb-calendar-pageable-navigation>

      <nb-calendar-year-picker
        [cellComponent]="yearCellComponent"
        [date]="date"
        [min]="min"
        [max]="max"
        [filter]="filter"
        [size]="size"
        [year]="visibleDate"
        (yearChange)="setVisibleDate($event); setViewMode(ViewMode.MONTH)">
      </nb-calendar-year-picker>

    </ng-container>

    <ng-container *ngSwitchCase="ViewMode.MONTH">

      <nb-calendar-navigation
        [date]="visibleDate"
        (changeMode)="setViewMode(ViewMode.DATE)">
      </nb-calendar-navigation>

      <nb-calendar-month-picker
        [cellComponent]="monthCellComponent"
        [min]="min"
        [max]="max"
        [filter]="filter"
        [size]="size"
        [month]="visibleDate"
        (monthChange)="setVisibleDate($event); setViewMode(ViewMode.DATE)">
      </nb-calendar-month-picker>

    </ng-container>

  </nb-card-body>

</nb-card>