ipsos-components/src/lib/datepicker/calendar.html

Material Design components for Angular

<div class="mat-calendar-header">
  <div class="mat-calendar-controls">
    <button mat-button class="mat-calendar-period-button"
            (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
      {{_periodButtonText}}
      <div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
    </button>

    <div class="mat-calendar-spacer"></div>

    <button mat-icon-button class="mat-calendar-previous-button"
            [disabled]="!_previousEnabled()" (click)="_previousClicked()"
            [attr.aria-label]="_prevButtonLabel">
    </button>

    <button mat-icon-button class="mat-calendar-next-button"
            [disabled]="!_nextEnabled()" (click)="_nextClicked()"
            [attr.aria-label]="_nextButtonLabel">
    </button>
  </div>
</div>

<div class="mat-calendar-content" (keydown)="_handleCalendarBodyKeydown($event)"
    [ngSwitch]="_monthView" cdkMonitorSubtreeFocus>
  <mat-month-view
      *ngSwitchCase="true"
      [activeDate]="_activeDate"
      [selected]="selected"
      [dateFilter]="_dateFilterForViews"
      (selectedChange)="_dateSelected($event)"
      (_userSelection)="_userSelected()">
  </mat-month-view>

  <mat-year-view
      *ngSwitchDefault
      [activeDate]="_activeDate"
      [selected]="selected"
      [dateFilter]="_dateFilterForViews"
      (selectedChange)="_monthSelected($event)">
  </mat-year-view>
</div>