how to create an event on the syncfusion Scheduler (subject, startTime, endTime) and save it on a firebase database

[Hernán]

Hello im using your scheduler and i need help when saving the events i create using the frontend to the firebase database. 

This is my configuration:

  <!-- The core Firebase JS SDK is always required and must be listed first -->

  <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use

     https://firebase.google.com/docs/web/setup#available-libraries -->

  <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-analytics.js"></script>

  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>

  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>

  <script>

    // Your web app's Firebase configuration

    var firebaseConfig = {

      apiKey: "xxxxxxxx",

      authDomain: "mydomain.com",

      databaseURL: "https://mydomain.firebaseio.com",

      projectId: "myproject",

      storageBucket: "projectbucket.appspot.com",

      messagingSenderId: "630050340120",

      appId: "1:6541810890800101808108",

      measurementId: "G-FLC09F6MFD"

    };

    // Initialize Firebase

    firebase.initializeApp(firebaseConfig);

    // firebase.analytics();

  </script>

[Vengatesh Maniraj]

Hi Hernán,  

 

Greetings from Syncfusion Support. 

 

We have prepared an Angular sample in which the data source can be obtained from the FireBase that can be downloaded from the following link,  

 

https://www.syncfusion.com/downloads/support/forum/151569/ze/sample888820237278692680  

 

For the FireBase data source structure can be referred from the below image,  

 

 

 

Note: The below code snippet need to configure in the environment.ts file from the project settings -> General in the FireBase link after creating a project for the data source.  

 

  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"  

  }  

 

Please let us know if you need any further assistance.

 

Regards,  

Vengatesh. 

[Hernán]

Hello Vengatesh, thank you for your kind reply, the good news is that it worked, using your code i was able to load the data from firebase into the scheduler. 

But my other problem wasn't solve, i still cant create new appointments or events using the scheduler user interfase and save those "appointments" into the firebase DB, i mean when i refresh the browser the data is lost cause is not saved in my firebase DB. 

If you could help me with that i would really appreciate it.

Thanks in advance

best regards!

[Hernán]

Hello, any news on this topic? i really need to know how to save the information on the scheduler into my Firebase DB.

Regards

[Hareesh Balasubramanian]

Hi Hernán, 

Sorry for the delay post. 

Based on your requirement, we have modified our previously updated sample in which CURD actions (i.e., Add, Edit, Delete) for the Scheduler appointments has been enabled using actionBegin event and that events are properly saved in to the Firebase. And it can be downloaded from the following link, 

Code snippet: 

  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); 

  } 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151569/ze/sample-486926095 

Kindly try the above sample and if you have any concerns please revert for further assistance. 

Regards, 

Hareesh 

 

[Hernán]

Hello Hareesh thanks for your kind reply, i tried the code from the sample and it didnt work, here is my code (its is almost the exact same copy)

I didnt get any compilation errors, but when i try to create a new event and save it or  update an existing one it doesnt work.....

My collection on firebase doesnt get the new event when i create it, nor the existing one is modified when i "save" it

this is my TypeScript code

import { Component, OnInit } from "@angular/core";

import { AngularFirestore } from "@angular/fire/firestore";

import {

  View,

  EventSettingsModel,

  DayService,

  WeekService,

  WorkWeekService,

  MonthService,

  AgendaService

} from "@syncfusion/ej2-angular-schedule";

@Component({

  selector: "app-agenda-pacientes",

  providers: [

    DayService,

    WeekService,

    WorkWeekService,

    MonthService,

    AgendaService

  ],

  templateUrl: "./agenda-pacientes.component.html",

  styleUrls: ["./agenda-pacientes.component.css"]

})

export class AgendaPacientesComponent {

  items: any;

  public test;

  public currentView = "WorkWeek";

  public data;

  public selectedDate = new Date();

  constructor(db: AngularFirestore) {

    this.data = db.collection("Agenda");

    this.items = db

      .collection("Agenda")

      .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 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);

  }

}

This is my HTML Code

<ejs-schedule

  [allowDragAndDrop]="true"

  [allowResizing]="true"

  [selectedDate]="selectedDate"

  [currentView]="currentView"

  (actionBegin)="onActionBegin($event)"

></ejs-schedule>

[Hareesh Balasubramanian]

Hi Hernán, 

Thanks for the update. 

We have validated your shared code snippet at our side and we suspect that you may give the wrong Firebase collection name in the client end, which may be the cause of the reported problem. And we have checked our lastly provided sample by ensured the CRUD actions at our end but it is working properly. And for further reference we have taken a video demo of it. 

Video Demo link: https://www.syncfusion.com/downloads/support/forum/151569/ze/scheduler_video_demo-668516913  

Please let us know if you the issue still persist. 

Regards, 

Hareesh 

[Hernán]

Hello Hareesh, i tried what u say, i changed my collection name to the same as your example "Data" and still i have the same issue, the code is exactly the same so i dont know what can be wrong, i noticed i dont have the Angular Grid but i dont think does have something to do with this....

i have this sample video (attached) where u can see my error.

Thank you

Attachment: APPsyc__Google_Chrome_26_2_2020_12_33_53_1e8c9ae0.zip

[Hareesh Balasubramanian]

Hi Hernán, 

Thanks for your update. 

We have validated your reported problem and we suspect that in your Firebase DB you need to give access to perform CRUD (add/edit/delete) operations that may the reason for the reported issue and for further reference kindly refer the below screenshot of our Firebase DB. 

Firebase DB image: 

 

Kindly try the above solution, if you have any other concerns please revert for further assistance. 

Regards, 

Hareesh 

[Hernán]

Hello Hareesh you are a savior!! that was my error, im sorry i didnt check that, now it is working as it should and i have my scheduler up and running with firebase!!!!

Thank you for you kind replys.

Best regards!

[Vengatesh Maniraj]

Hi Hernán, 

 

You are most welcome. 

 

We are happy that your problem has resolved. 

 

Please get in touch with us if you would require any further assistance. 

Regards, 

Vengatesh 

[Hernán]

Hi Hernán, 

 

You are most welcome. 

 

We are happy that your problem has resolved. 

 

Please get in touch with us if you would require any further assistance. 

Regards, 

Vengatesh 

Hello Vengatesh, i have a new problem with this topic, as i mention a couple of month before this implementation was working great, but now that i have finished my Web APP and deployed it i realize that when i use a mobile device the EventCreate() doesn't seem to be working.

When i create an event on the schedule, that event doesn't appear on firebase "Data" Collection but only if i use a cellphone to do it, if i am on my desktop (laptop) it works perfectly fine, that's the wierd thing..... 

I did some more testing to that issue and i noticed that i can modify the time of an existing event and the modifications (eventChange) works fine even on cellphone browser.

Here is my component.ts and my component.html :

import { Component } from "@angular/core";

import { AngularFirestore } from "@angular/fire/firestore";

import {

  DayService,

  WeekService,

  WorkWeekService,

  MonthService,

  AgendaService,

  ResizeService,

  WorkHoursModel,

  TimeScaleModel,

  View,

  DragAndDropService,

} from "@syncfusion/ej2-angular-schedule";

@Component({

  selector: "app-agenda-pacientes",

  providers: [

    DayService,

    WeekService,

    WorkWeekService,

    MonthService,

    AgendaService,

    ResizeService,

    DragAndDropService,

  ],

  templateUrl: "./agenda-pacientes.component.html",

  styleUrls: ["./agenda-pacientes.component.css"],

})

export class AgendaPacientesComponent {

  items: any;

  public test;

  public timeScale: TimeScaleModel = {

    enable: true,

    interval: 60,

    slotCount: 4,

  };

  public scheduleViews: View[] = ["Day", "Week", "WorkWeek"];

  public scheduleHours: WorkHoursModel = {

    highlight: true,

    start: "07:00",

    end: "20:00",

  };

  public currentView = "WorkWeek";

  public data;

  public selectedDate = new Date();

  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 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);

  }

}

--------------------------------------------------------------------------------------------------------------

<ejs-schedule

  [selectedDate]="selectedDate"

  [currentView]="currentView"

  [views]="scheduleViews"

  startHour="07:00"

  endHour="20:00"

  [timeScale]="timeScale"

  (actionBegin)="onActionBegin($event)"

></ejs-schedule>

[Vengatesh Maniraj]

Hi Hernán, 

 

Thanks for the update. 

 

We have checked the reported issue but we need additional information to validate this issue. So could you please share us Syncfusion package version which is used in your project? 

 

We are happy to assist you. 

 

Regards, 

Vengatesh 

[Hernán]

Hi Hernán, 

 

Thanks for the update. 

 

We have checked the reported issue but we need additional information to validate this issue. So could you please share us Syncfusion package version which is used in your project? 

 

We are happy to assist you. 

 

Regards, 

Vengatesh 

Hello thanks for the reply,  in my package.json file it says :  

"@syncfusion/ej2-angular-schedule": "^17.4.39",

    "@syncfusion/ej2-material-theme": "~17.3.9",

[Hareesh Balasubramanian]

Hi Hernán, 

Thanks for the update. 

We have validated your reported query “When i create an event on the schedule, that event doesn't appear on firebase "Data" Collection but only if i use a cellphone to do it” at our end. And for that, we have modified our previously updated sample using actionBegin event and it can be downloaded from the following link. 

Code snippet: 

  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.schData.Subject = args.data[0].Subject; 

      this.schData.StartTime = args.data[0].StartTime; 

      this.schData.EndTime = args.data[0].EndTime; 

      this.schData.Location = args.data[0].Location; 

      this.schData.IsAllDay = args.data[0].IsAllDay; 

      this.schData.RecurrenceRule = args.data[0].RecurrenceRule; 

      this.schData.Id = args.data[0].Id; 

      this.data.doc(guid).set(this.schData); 

    } else if (args.requestType == "eventRemove") { 

      this.data.doc(args.deletedRecords[0].DocumentId).delete(); 

    } 

  } 

Sample: https://www.syncfusion.com/downloads/support/forum/151569/ze/Sample-1909641726  

Kindly try the above sample and revert us if you have any further assistance. 

Regards, 

Hareesh 

[Hernán]

Hello Hareesh, thanks for your reply, unfortunately the code didnt work for me, i copied exactly as the sample, i also added the new variable:

 public schData = {

    Subject: null,

    StartTime: null,

    EndTime: null,

    Location: null,

    IsAllDay: null,

    Id: null,

    RecurrenceRule: null,

  };

But now it doesn't save on firebase any data that i create on the frontend, it's not working on desktop (i tried it on localhost) so i didnt deployed a new version to try on mobile.

I await for your comments

regards!

[Hareesh Balasubramanian]

Hi Hernán, 

Thanks for the update. 

We have validated your reported problem “it doesn't save on firebase any data that i create on the frontend” at our end. And for that, we have checked our previously updated sample in the mobile Emulator mode and the CRUD actions are working properly at our end and the same sample can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/151569/ze/Sample488715078  

And for further reference, we have taken a video demo of the above sample and it can be downloaded from the below link, 

https://www.syncfusion.com/downloads/support/forum/151569/ze/video_demo571693176  

Kindly try the above solution and get back to us with the below details, if the problem is not resolved at your end. 

• Replicate your problem in the above shared sample or
• Share the issue replication steps with a working sample(if possible)

Regards, 

Hareesh 

[Hernán]

Hello, i cant get this working, the reading, update and delete of the CRUD is working fine, the problem is the "create" of new events, i recorded a video where i show you, i dont know what else to do, i can send you my component.ts if you want, please find the video attached in zip  

Attachment: Angular_9_Google_Chrome_8_5_2020_12_26_43_848b6269.zip

[Hareesh Balasubramanian]

Hi Hernán, 

 

Thanks for the update. 

 

We have validated your reported problem with your shared details “i cant get this working, the reading, update and delete of the CRUD is working fine, the problem is the "create" of new events,” but we couldn’t able to reproduce the reported problem at our side. And for the same, we have taken a video demo of our previously updated sample and it can be downloaded from the following link, 

 

Video Demo: https://www.syncfusion.com/downloads/support/forum/151569/ze/video_demo-909189789  

 

Kindly refer to the above-shared video demo and get back to us with the below details, if the problem is not resolved at your end. 

 

• Replicate your problem in the above shared sample or
• Share the issue replication steps with a working sample(if possible)

 

Regards, 

Hareesh 

[Israel Ogunsakin]

Hello Hareech,

How can we implement this for Syncfusion calendar Flutter? There is no documentation on how to achieve this.

Please kindly help!

Regards,

Israel 

[Nevitha Ravi]

Hi Israel, 

 

Greetings from Syncfusion Support. 

 

We have checked the reported query "How can we implement this for Syncfusion calendar Flutter?" from our end. You can implement Syncfusion calendar in Flutter by following the steps provided in our UG documentation.  

  

UG link: https://help.syncfusion.com/flutter/calendar/getting-started  

  

You can also refer the following blogs for CRUD operations   

  

https://www.syncfusion.com/blogs/post/how-to-create-a-scheduling-application-using-flutter-event-calendar.aspx  

https://www.syncfusion.com/blogs/post/how-to-load-appointments-on-demand-using-web-services-in-flutter-event-calendar.aspx  

 

Please get back to us if you need any further assistance. 

 

Regards, 

Nevitha 

[Israel Ogunsakin]

Hello again Nevitha,

I already have the Event Calendar with appointment editor working fine, I have also configured Cloud Firestore properly but I get lost in trying to add data to the Firebase. It will be very helpful if I can get a flutter sample in which the data can be added, edited and deleted from Firebase. Essentially, this will be similar to what you provided for the user above (Hernan) but in Flutter.

Also, is it possible Syncfusion calendar with Google Calendar?

I already the Event Calendar with custom appointment editor working fine but it will be very helpful if I can get a flutter sample in which the data can be added to firebase and date source can be obtained from the FireBase.

Also, is it possible to load events from google calendar to Syncfusion calendar?

I already the Event Calendar with custom appointment editor working fine but it will be very helpful if I can get a flutter sample in which the data can be added to firebase and date source can be obtained from the FireBase.

he FireBase.

[Nevitha Ravi]

Hi Israel,  

  

Thank you for the update.  

  

Based on the provided information your requirement is “To save the appointments in Firebase database using appointment editor”. We have prepared the simple sample for save the appointment in the Firebase database from appointment editor. Please find the sample from the following link,  

  

Sample link: https://www.syncfusion.com/downloads/support/forum/151569/ze/flutter_firebase_calendar-2083321051-850678964  

  

Also, we have prepared the sample loading Google calendar event to Syncfusion Flutter calendar. Please find the sample from the following link.  Please find the following steps for getting OAuth Client ID.  

  

Step 1:  

Create a project in https://console.developers.google.com/  

  

Step 2:  

In Dashboard tab click “Enable APIS and services” and enable calendar API’s   

  

Step 3:  

In Credential tab click the “Create Credential” option and click “OAuth client ID” option from the list.  

  

Step 4:  

Then specify the Application type, Package name, SHA-1  key value.  

  

Application type: Android  

  

Package name: Should be in AndroidManifest.xml file of the sample.  

  

SHA-1 key:  Please refer the following link https://stackoverflow.com/questions/27609442/how-to-get-the-sha-1-fingerprint-certificate-in-android-studio-for-debug-mode for SHA-1 key generation from Android Studio.  

  

Sample link:  

https://www.syncfusion.com/downloads/support/forum/151569/ze/flutter_jsonapplication645890365-1881289404 

 

We hope that above samples help you. Please let us know if you need further assistance.  

  

Regards 

Nevitha 

[Michael]

Hi gents,
Can you tell me what the RecurrenceRule syntax is, please?

I have an events app already up and running in firestore, but I would like to incorporate scheduler into the app

regards

Michael

[Ravikumar Venkatesan]

Refer to the below UG sections for using the RecurrenceRule with the Schedule.

https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#recurrence-options-and-rules

https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#recurring-events