ngx-bootstrap/datepicker/themes/bs/bs-datepicker-view.html

Native Angular Bootstrap Components

<!-- days calendar view mode -->
<div class="bs-datepicker" [ngClass]="containerClass" *ngIf="viewMode | async">
  <div class="bs-datepicker-container">

    <!--calendars-->
    <div class="bs-calendar-container" [ngSwitch]="viewMode | async" role="application">
      <!--days calendar-->
      <div *ngSwitchCase="'day'">
        <bs-days-calendar-view
          *ngFor="let calendar of (daysCalendar | async)"
          [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1"
          [calendar]="calendar"
          [options]="options | async"
          (onNavigate)="navigateTo($event)"
          (onViewMode)="setViewMode($event)"
          (onHover)="dayHoverHandler($event)"
          (onSelect)="daySelectHandler($event)"
        ></bs-days-calendar-view>
      </div>

      <!--months calendar-->
      <div *ngSwitchCase="'month'">
        <bs-month-calendar-view
          *ngFor="let calendar of (monthsCalendar | async)"
          [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1"
          [calendar]="calendar"
          (onNavigate)="navigateTo($event)"
          (onViewMode)="setViewMode($event)"
          (onHover)="monthHoverHandler($event)"
          (onSelect)="monthSelectHandler($event)"
        ></bs-month-calendar-view>
      </div>

      <!--years calendar-->
      <div *ngSwitchCase="'year'">
        <bs-years-calendar-view
          *ngFor="let calendar of (yearsCalendar | async)"
          [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1"
          [calendar]="calendar"
          (onNavigate)="navigateTo($event)"
          (onViewMode)="setViewMode($event)"
          (onHover)="yearHoverHandler($event)"
          (onSelect)="yearSelectHandler($event)"
        ></bs-years-calendar-view>
      </div>

    </div>

    <!--applycancel buttons-->
    <div class="bs-datepicker-buttons" *ngIf="false">
      <button class="btn btn-success">Apply</button>
      <button class="btn btn-default">Cancel</button>
    </div>

  </div>

  <!--custom dates or date ranges picker-->
  <div class="bs-datepicker-custom-range" *ngIf="false">
    <bs-custom-date-view [ranges]="_customRangesFish"></bs-custom-date-view>
  </div>
</div>