|
import { Component, OnInit, ViewChild } from '@angular/core';
import { ScheduleComponent, EventSettingsModel, TimeScaleModel, DayService, WeekService,
WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-ng-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
@Component({
selector: 'my-app',
// specifies the template string for the Schedule component
template: `<ejs-schedule #schedule width='100%' height='550px'
[selectedDate]="selectedDate" [eventSettings]="eventSettings" [timeScale]="timeScale"
(dataBinding)="onDataBinding()">
<ng-template #timeScaleMajorSlotTemplate let-data>
<div class="majorTime">{{getMajorTime(data.date)}}</div>
</ng-template>
<ng-template #timeScaleMinorSlotTemplate let-data>
<div class="minorTime">{{getMinorTime(data.date)}}</div>
</ng-template>
</ejs-schedule>`
})
export class AppComponent implements OnInit {
public selectedDate: Date;
public timeScale: TimeScaleModel;
public instance: Internationalization = new Internationalization();
public timezone: string;
@ViewChild('schedule')
public scheduleObj: ScheduleComponent;
ngOnInit(): void {
this.selectedDate = new Date(2018, 1, 15);
this.timeScale = { enable: true, interval: 60, slotCount: 4 };
}
getMajorTime(date: Date): string {
return this.instance.formatDate(date, { skeleton: 'Hm' });
}
getMinorTime(date: Date): string {
return this.instance.formatDate(date, { skeleton: 'ms' }).replace(':00', '');
}
onDataBinding(): void {
this.scheduleObj.timeFormat = "H:mm";
}
} | 
