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

Paquete de componentes para Angular2 desarrollado por NITSNETS.

<div class="calendar-container" [ngClass]="{
  'rangeFromActive': isRangeFromActive(),
  'rangeToActive': isRangeToActive()
}">
  <div class="month-name">
      <nts-button icon="chevron-left" size="small" (click)="previous()"></nts-button>
      <p>{{month.format("MMMM YYYY")}}</p>
      <nts-button icon="chevron-right" size="small" (click)="next()"></nts-button>
  </div>
  <div class="days-name">
      <p *ngFor="let dayName of dayNames">{{dayName}}</p>
  </div>
  <div class="week-row" *ngFor="let week of weeks"
    >
    <p class="day-container"
      *ngFor="let day of week.days"
      [ngClass]="{
        'selected': day.date.isSame(selected),
        'rangeMiddle': day.isRangeMiddle,
        'rangeFrom': day.isRangeFrom,
        'rangeTo': day.isRangeTo,
        'today': day.isToday,
        'different-month': !day.isCurrentMonth,
        'unavailable': day.isUnavailable
      }">
      <span class="day" (click)="select(day)">
        {{day.number}}
      </span>
    </p>
  </div>
</div>