ng2-ui-kit/src/components/calendar/calendar.component.html

Angular2 UI Kit

<div [class]="class">
  <input type="hidden" [(ngModel)]="viewDate">
  <div class="ui-kit-calendar-input" [class.opened]="opened || expanded" (click)="toggle()">
    <span [class.opened]="opened || expanded">{{ viewDate }}</span>
    <i class="ion-ios-calendar-outline"></i>
  </div>
  <div class="ui-kit-calendar-cal-container" [class.opened]="opened">
    <div class="ui-kit-calendar-cal-top">
      <i class="ion-arrow-left-b" (click)="prevMonth()"></i>
      <span>{{ date.format('MMMM YYYY') }}</span>
      <i class="ion-arrow-right-b" (click)="nextMonth()"></i>
    </div>
    <div class="ui-kit-calendar-day-names">
      <span>Mon</span>
      <span>Tue</span>
      <span>Wed</span>
      <span>Thu</span>
      <span>Fri</span>
      <span>Sat</span>
      <span>Sun</span>
    </div>
    <div class="ui-kit-calendar-days">
      <span *ngFor="let d of days; let i = index;" 
            (click)="selectDate($event, i)"
            [class.today]="d.today"
            [class.is-active]="d.selected">
        {{ d.day }}
      </span>
    </div>
  </div>
</div>