unicorn-components
Version:
<a target="_blank" href="https://getunicorn.io"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2017/Jul/07/2615006260-5-nitsnetsstudios-ondemand-UNI_avatar.png" align="left"></a>
31 lines (28 loc) • 1.31 kB
HTML
<div class="uni-calendar__container" [ngClass]="{
'uni-calendar__container--range-from': isRangeFromActive(),
'uni-calendar__container--range-to': isRangeToActive()
}">
<div class="uni-calendar__month-name">
<uni-button icon="keyboard_arrow_left" size="small" (click)="previous()"></uni-button>
<p>{{month.format("MMMM YYYY")}}</p>
<uni-button icon="keyboard_arrow_right" size="small" (click)="next()"></uni-button>
</div>
<div class="uni-calendar__days-name">
<p *ngFor="let dayName of dayNames">{{dayName}}</p>
</div>
<div class="uni-calendar__week-row" *ngFor="let week of weeks">
<p class="uni-calendar__day" *ngFor="let day of week.days" [ngClass]="{
'uni-calendar__day--selected': day.date.isSame(selected),
'uni-calendar__day--range-middle': day.isRangeMiddle,
'uni-calendar__day--range-from': day.isRangeFrom,
'uni-calendar__day--range-to': day.isRangeTo,
'uni-calendar__day--today': day.isToday,
'uni-calendar__day--different-month': !day.isCurrentMonth,
'uni-calendar__day--unavailable': day.isUnavailable
}">
<span class="uni-calendar__day-number" (click)="select(day.date)">
{{day.number}}
</span>
</p>
</div>
</div>