//app.component.ts
@Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [DragAndDropService, DayService, WeekService, MonthService, TimelineViewsService, TimelineMonthService]
})
export class AppComponent {
items: any;
public test;
public currentView = "Week";
public selectedDate: Date = new Date(2021, 8, 4);
public data;
constructor(db: AngularFirestore) {
this.data = db.collection('Data');
this.items = db.collection('Data').valueChanges().subscribe(data => {
this.items = data;
this.test = data;
let schObj = (document.querySelector('.e-schedule') as any).ej2_instances[0];
let length = this.test.length;
for (let i = 0; i < length; i++) {
let endTime = this.test[i].EndTime.seconds.toString() + "000";
let srtTime = this.test[i].StartTime.seconds.toString() + "000";
this.test[i].StartTime = new Date(parseInt(srtTime));
this.test[i].EndTime = new Date(parseInt(endTime));
}
schObj.eventSettings.dataSource = this.test;
})
}
public onPopupOpen(args: any): void {
if (args.type === 'Editor') {
args.duration = 60;
}
}
public onActionBegin(args: any): void {
if (args.requestType == "eventChange") {
this.data.doc(args.changedRecords[0].DocumentId).update({ Subject: args.changedRecords[0].Subject });
this.data.doc(args.changedRecords[0].DocumentId).update({ EndTime: args.changedRecords[0].EndTime });
this.data.doc(args.changedRecords[0].DocumentId).update({ StartTime: args.changedRecords[0].StartTime });
this.data.doc(args.changedRecords[0].DocumentId).update({ Location: args.changedRecords[0].Location });
this.data.doc(args.changedRecords[0].DocumentId).update({ IsAllDay: args.changedRecords[0].IsAllDay });
this.data.doc(args.changedRecords[0].DocumentId).update({ RecurrenceRule: args.changedRecords[0].RecurrenceRule });
} else if (args.requestType == "eventCreate") {
let guid = (this.GuidFun() + this.GuidFun() + "-" + this.GuidFun() + "-4" + this.GuidFun().substr(0, 3) + "-" + this.GuidFun() + "-" + this.GuidFun() + this.GuidFun() + this.GuidFun()).toLowerCase();
args.data[0].DocumentId = guid.toString();
this.data.doc(guid).set(args.data[0]);
} else if (args.requestType == "eventRemove") {
this.data.doc(args.deletedRecords[0].DocumentId).delete();
}
}
public GuidFun() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
}
//My HTML
<div class="container-fluid">
<div class="row">
<div class = 'card'>
<div class = 'card-body'>
<ejs-schedule width='100%' height='850px' [currentView]="currentView" (actionBegin)="onActionBegin($event)" [selectedDate]="selectedDate">
<e-views>
<e-view option='Day'></e-view>
<e-view option='Week'></e-view>
<e-view option='Month'></e-view>
<e-view option='TimelineDay'></e-view>
<e-view option='TimelineMonth'></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</div>
