How to perform CRUD actions in scheduler with Firebase as DB
This knowledge base explains how to perform CRUD action in schedule using Firebase as a Database in Angular.
Integrate Angular Scheduler with Firebase
Refer to the following steps to achieve this:
Step 1: Follow the installation guidelines for getting the Firebase project by using G-Mail account.
Firebase link: https://console.firebase.google.com/?pli=1
Step 2: After creating the Firebase project, create a scheduler project in Angular platform by following the getting started UG link as follows.
Getting Started: https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/?no-cache=1
Step 3: Copy the Firebase SDK snippet from the (settings -> Project settings) and integrate the same in the above Angular project. And for further reference, refer to the following code snippets of the Firebase SDK snippets.
environment.ts
export const environment = {
production: false,
firebase: {
apiKey: "AIzaSyAF4lNZ5WtAsXSpfFLlMjD76ij3ykkV71Y",
authDomain: "angular-84f46.firebaseapp.com",
databaseURL: "https://angular-84f46.firebaseio.com",
projectId: "angular-84f46",
storageBucket: "angular-84f46.appspot.com",
messagingSenderId: "63615603270",
appId: "1:63615603270:web:946140011c5410c96bf047",
measurementId: "G-4JSCEMTWJ6"
}
};
Step 4: To get the resource collection and events from the Firebase to be displayed in the Scheduler, refer to the following snippets.
app.component.ts
constructor(db: AngularFirestore) {
this.resItems = db.collection('ResourceData').valueChanges().subscribe(resData => { // Resource Data source
this.categoryDataSource = resData;
})
this.data = db.collection('Data');
this.items = db.collection('Data').valueChanges().subscribe(data => { // Scheduler events
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;
})
}
Step 5: To perform CRUD operation in the Scheduler (that is Create/Edit/Delete events for the Scheduler that needs to be reflected in the Firebase DB) using the actionBegin event. Refer to the following snippets to perform CRUD actions for further reference.
app.component.ts
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({ IsAllDay: args.changedRecords[0].IsAllDay });
this.data.doc(args.changedRecords[0].DocumentId).update({ ConferenceId: args.changedRecords[0].ConferenceId });
} 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.schData.Subject = args.data[0].Subject;
this.schData.StartTime = args.data[0].StartTime;
this.schData.EndTime = args.data[0].EndTime;
this.schData.ConferenceId = args.data[0].ConferenceId;
this.schData.IsAllDay = args.data[0].IsAllDay;
this.schData.Id = args.data[0].Id;
this.schData.DocumentId = args.data[0].DocumentId;
this.data.doc(guid).set(this.schData);
} else if (args.requestType == "eventRemove") {
this.data.doc(args.deletedRecords[0].DocumentId).delete();
}
}
actionBegin: https://ej2.syncfusion.com/angular/documentation/api/schedule/#actionbegin
Step 6: Run the Firebase service, then the sample and events (that is from the Firebase DB) can be viewed in the Scheduler. Refer to the following screenshot of events in Firebase DB.
Figure 1: Events in the Firebase DB
To perform CRUD operations in Firebase, you need to allow access for it. Switch to Rules in the Database and allow access for it. Refer to the below image for reference.
Figure 2: Accessing the Firebase DB for CRUD actions
Refer to the example from the following GitHub link.
Example –https://github.com/SyncfusionExamples/ej2-angular-scheduler-with-firebase
