angular-material-app documentation
  1. Components
  2. CalendarComponent

File

src/app/materials/calendar/calendar.component.ts

Implements

OnInit

Metadata

encapsulation ViewEncapsulation.None
selector app-calendar
styleUrls ./calendar.component.scss
templateUrl ./calendar.component.html

Index

Properties
Methods

Constructor

constructor()
Defined in src/app/materials/calendar/calendar.component.ts:34

Methods

dayClicked
dayClicked(undefined: literal type)
Defined in src/app/materials/calendar/calendar.component.ts:28
Parameters :
Name Type Optional
literal type No
Returns : void
eventTimesChanged
eventTimesChanged(undefined: CalendarEventTimesChangedEvent)
Defined in src/app/materials/calendar/calendar.component.ts:30
Parameters :
Name Type Optional
CalendarEventTimesChangedEvent No
Returns : void
handleEvent
handleEvent(action: string, event: CalendarEvent)
Defined in src/app/materials/calendar/calendar.component.ts:26
Parameters :
Name Type Optional
action string No
event CalendarEvent No
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/materials/calendar/calendar.component.ts:38
Returns : void

Properties

activeDayIsOpen
Type : boolean
Default value : true
Defined in src/app/materials/calendar/calendar.component.ts:22
events
Type : any[]
Default value : []
Defined in src/app/materials/calendar/calendar.component.ts:24
refresh
Type : Subject<any>
Default value : new Subject()
Defined in src/app/materials/calendar/calendar.component.ts:21
view
Type : string
Default value : 'month'
Defined in src/app/materials/calendar/calendar.component.ts:20
viewDate
Type : Date
Default value : new Date()
Defined in src/app/materials/calendar/calendar.component.ts:23
 
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() {}
}
Copy
<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>
Copy

./calendar.component.scss 

@import '~angular-calendar/css/angular-calendar.css';
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""