File
Metadata
| encapsulation |
ViewEncapsulation.None |
| selector |
stbui-calendar-month |
| styleUrls |
./month.component.scss |
| templateUrl |
./month.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
Outputs
|
selectValueChange
|
Type : EventEmitter<any>
|
|
|
Methods
|
coerceBooleanProperty
|
coerceBooleanProperty(value)
|
|
|
|
|
|
isNow
|
isNow(date: Date)
|
|
|
Parameters :
| Name |
Type |
Optional |
| date |
Date
|
No
|
|
|
onSelectValueChange
|
onSelectValueChange(event)
|
|
|
|
|
Accessors
|
displayDate
|
getdisplayDate()
|
|
|
setdisplayDate(val)
|
|
|
|
|
import {
Component,
Input,
Output,
EventEmitter,
ViewEncapsulation
} from '@angular/core';
import { getWeekArray } from '../dateUtils';
@Component({
selector: 'stbui-calendar-month',
templateUrl: './month.component.html',
styleUrls: ['./month.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class MonthComponent {
weeksArray;
@Output() selectValueChange: EventEmitter<any> = new EventEmitter<any>();
@Input()
set displayDate(val) {
this.weeksArray = getWeekArray(val || new Date(), 1);
this.weeksArray = this.weeksArray.map(weeks => {
return weeks.map(day => {
return { selected: false, day };
});
});
}
get displayDate() {
return this.weeksArray;
}
constructor() {}
isNow(date: Date): boolean {
const now = new Date();
return (
date &&
date.getFullYear() === now.getFullYear() &&
date.getMonth() === now.getMonth() &&
date.getDate() === now.getDate()
);
}
coerceBooleanProperty(value): boolean {
return value != null && `${value}` !== 'false';
}
onSelectValueChange(event) {
if (!this.coerceBooleanProperty(event.day)) {
return false;
}
for (let weeks of this.weeksArray) {
for (let day of weeks) {
day.selected = false;
}
}
event.selected = true;
this.selectValueChange.emit(event.day);
}
}
<div class="stb-calendar-monthday-content">
<div class="stb-calendar-monthday-row" *ngFor="let weeks of weeksArray">
<ng-container *ngFor="let week of weeks">
<button mat-mini-fab color="primary" *ngIf="isNow(week.day)">{{ week.day | datePicker: 'formatDay' }}</button>
<button mat-mini-fab color="primary" *ngIf="!isNow(week.day) && week.selected" [class.selected]="week.selected" (click)="onSelectValueChange(week)">{{ week.day | datePicker: 'formatDay' }}</button>
<button mat-ripple class="stb-day-button" *ngIf="!isNow(week.day) && !week.selected&&week.day" (click)="onSelectValueChange(week)">{{ week.day | datePicker: 'formatDay' }}</button>
<button class="stb-day-button empty" *ngIf="!week.day">{{ week.day | datePicker: 'formatDay' }}</button>
</ng-container>
</div>
</div>
.stb-calendar-monthday-content {
position: relative;
&-row {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-bottom: 2px;
}
}
.stb-day-button {
display: inline-block;
background: none;
outline: none;
font-weight: 400;
position: relative;
width: 40px;
height: 40px;
line-height: 36px;
margin: 0;
border: 0;
border-radius: 50%;
box-sizing: border-box;
white-space: nowrap;
text-align: center;
text-decoration: none;
vertical-align: top;
user-select: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
&.disabled {
opacity: 0.4;
}
&.empty {
cursor: default
}
}
Legend
Html element with directive