File
Implements
Metadata
| encapsulation |
ViewEncapsulation.None |
| selector |
app-calendar |
| styleUrls |
./calendar.component.scss |
| templateUrl |
./calendar.component.html |
Methods
|
dayClicked
|
dayClicked(undefined: literal type)
|
|
|
Parameters :
| Name |
Type |
Optional |
literal type
|
No
|
|
|
eventTimesChanged
|
eventTimesChanged(undefined: CalendarEventTimesChangedEvent)
|
|
|
Parameters :
| Name |
Type |
Optional |
CalendarEventTimesChangedEvent
|
No
|
|
|
handleEvent
|
handleEvent(action: string, event: CalendarEvent)
|
|
|
Parameters :
| Name |
Type |
Optional |
| action |
string
|
No
|
| event |
CalendarEvent
|
No
|
|
|
activeDayIsOpen
|
Type : boolean
|
Default value : true
|
|
|
|
events
|
Type : any[]
|
Default value : []
|
|
|
|
refresh
|
Type : Subject<any>
|
Default value : new Subject()
|
|
|
|
view
|
Type : string
|
Default value : 'month'
|
|
|
|
viewDate
|
Type : Date
|
Default value : new Date()
|
|
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeZh from '@angular/common/locales/zh';
import {
CalendarEvent,
CalendarEventTimesChangedEvent
} from 'angular-calendar';
import { Subject } from 'rxjs';
registerLocaleData(localeZh);
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CalendarComponent implements OnInit {
view: string = 'month';
refresh: Subject<any> = new Subject();
activeDayIsOpen: boolean = true;
viewDate: Date = new Date();
events: any[] = [];
handleEvent(action: string, event: CalendarEvent): void {}
dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {}
eventTimesChanged({
event,
newStart,
newEnd
}: CalendarEventTimesChangedEvent): void {}
constructor() {}
ngOnInit() {}
}
<mat-toolbar color="primary"></mat-toolbar>
<mat-toolbar color="primary">
<div class="calendar-header" fxLayout="row" fxLayoutAlign="start center">
<span>{{ viewDate | calendarDate:(view + 'ViewTitle'):'zh' }}</span>
<span fxFlex></span>
<div class="chevrons">
<button mat-icon-button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate">
<mat-icon>chevron_left</mat-icon>
</button>
<button mat-icon-button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate">
<mat-icon>chevron_right</mat-icon>
</button>
</div>
<button mat-button (click)="view = 'month'">月</button>
<button mat-button (click)="view = 'week'">周</button>
<button mat-button (click)="view = 'day'">日</button>
</div>
</mat-toolbar>
<div class="calendar">
<div [ngSwitch]="view">
<mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen"
(dayClicked)="dayClicked($event.day)" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-month-view>
<mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
(eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-week-view>
<mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
(eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-day-view>
</div>
</div>
@import '~angular-calendar/css/angular-calendar.css';
Legend
Html element with directive