Why isnt Scheduler populated with appointments from my Mongodb server (using Mongoose)?

[Youssef Lakdime]

I am building a MEAN-application with Scheduler. Creating appointments and saving them to the mongodb database works flawlessly, hoewever, the schedulers remains empty while there are many appointments in the database. This is in my index.js

app.post("/GetData", (req, res) => {
    Event.find({}, function(err, events) {
            res.send(events);
    });
    });

I see in my Network tab in my browsers developer tools that when the Scheduler is loaded, the 'getData returns a '200 OK' with the request

Running the 'GetData' endpoint in postman gives me these documents:

 {
        "_id": "5dc835d6wefw835250ab4456",
        "startTime": "Tue Nov 12 2019 12:00:00 GMT+0100 (GMT+01:00)",
        "endTime": "Tue Nov 12 2019 12:30:00 GMT+0100 (GMT+01:00)",
        "subject": "Work",
        "klant": "Simon",
        "km": 43,
        "business": true,
        "location": "Amsterdam",
        "description": "test",
        "__v": 0
    }

How does it come that I dont see the appointments in the scheduler?

[Youssef Lakdime]

private dataManager: DataManager = new DataManager({
  url: 'http://localhost:8000/GetData',
  crudUrl: 'http://localhost:8000/BatchData',
  adaptor: new UrlAdaptor
});

this is what I have as dataManager

[Vinitha Devi Murugan]

 

Hi Youssef, 

 

Syncfusion Greetings. 

 

We have tested your shared code in which field mapping is incorrect, which is the root cause of the reported issue. We prepared the sample below with the right field mapping, please refer to it. 

 

https://www.syncfusion.com/downloads/support/forum/148981/ze/sample2132006892 

Ug link: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#how-to-change-the-label-text-of-default-editor-fields 

 

Regards, 

M.Vinitha devi 

[yasser taibi]

Hello

please can someone help me with the execution of the program gives me this time offset in the frontback part of the project but at the database it saves the exact times

mongoDB 

[Ravikumar Venkatesan]

Hi Yasser,

Greetings from Syncfusion support.

We have validated your query based on your shared images and in your DB the appointment start and end times are stored in the UTC format. By default, while assigning this data to the Scheduler it automatically converts the start and end times of the appointment based on the System timezone. Because of that, the Scheduler appointments are rendered in the 11.

Ex: If you are in the UTC +3 Moscow timezone. If the appointment start time is May 19, 2022, at 9 AM in UTC. The Schedule automatically adds three hours to the appointment start time-based on the System's local timezone UTC +3 Moscow. So, the appointment was rendered on May 19, 2022, at 11 AM.

If you want the Schedule to render the appointment at the exact time that is stored in the DB can you kindly share the below details?

• Are you using the Timezone property of the Schedule?
• If yes can you share the Timezone property value?

Refer to the below UG for more details about working with Schedule Timezone.

https://ej2.syncfusion.com/angular/documentation/schedule/timezone/

Regards,

Ravikumar Venkatesan

[yasser taibi]

Hello,

Please, I need help. I want to save in the database "idUser" to have each activity has a user who created.

I managed to create "idUser" in the database as you see.

==> Code "routes/activity"

==> database

Now I want to give the value of "id User", how i pass the value? knowing that I can recover the value and I don't know how to add it ?

==> Code "activity.component.ts"

[Ravikumar Venkatesan]

Hi Yasser,

We have validated your query “I want to save in the database ‘idUser’” at our end. We suggest you add the IdUser field value to the added or changed appointment data on the actionComplete event of the Schedule as shown in the below code snippet. So, you can get the IdUser field value that will be available at the server end and you can store it in your DataBase.

[app.component.ts]

export class AppComponent {

  public data: Record<string, any>[] = extend([], zooEventsData, null, true) as Record<string, any>[];

  public selectedDate: Date = new Date(2021, 1, 15);

  public eventSettings: EventSettingsModel = { dataSource: this.data };

  public currentView: View = 'Week';

 

  public onActionComplete(args: ActionEventArgs): void {

    if (args.requestType === 'eventCreated') {

      // This block will execute once an appointment is created

      args.addedRecords[0].IdUser = 'User Id';

    }

    else if (args.requestType === 'eventChanged') {

      // This block will execute once an appointment is edited

      args.changedRecords[0].IdUser = 'User Id';

    }

  }

}

Sample: https://stackblitz.com/edit/ej2-angular-schedule-additing-custom-fields?file=app.component.ts

Kindly try the shared solution and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

[yasser taibi]

I followed all the steps you suggested !!

==> Code "activity.component.ts"

==> Code "activity.component.html"

==> Code "routes/activity"

==> database

Did I do something wrong ?

[Ravikumar Venkatesan]

Hi Yasser,

Sorry for the inconvenience caused.

We have validated your query “Did I do something wrong ?” at our end. We suggest you add the IdUser field value to the added or changed appointment data on the actionBegin event of the Schedule as shown in the below code snippet. So, you can get the IdUser field value that will be available at the server end and you can store it in your DataBase.

[app.component.ts]

export class AppComponent {

  public onActionBegin(args: ActionEventArgs): void {

    console.log('args: ', args);

    if (args.requestType === 'eventCreate') {

      // This block will execute once an appointment is created

      args.addedRecords[0].IdUser = 1;

    }

    else if (args.requestType === 'eventChange') {

      // This block will execute once an appointment is edited

      args.changedRecords[0].IdUser = 1;

    }

  }

}

Sample: https://stackblitz.com/edit/ej2-angular-schedule-additing-custom-fields-6x7gzo?file=app.component.ts

Kindly try the shared solution and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

[yasser taibi]

Thank you very much, now it works 

[Satheesh Kumar Balasubramanian]

Hi Yasser,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B

[yasser taibi]

I have another question, Now I want to show up the "activity" by user connected.

I edited in API, I gave him parameter "id_User".

==> Code "routes/activity"

But, I don't know how to add the parameter in here ??

==> Code "activity.component.ts"

[Ravikumar Venkatesan]

Hi Yasser,

We have validated your query “I have another question, Now I want to show up the "activity" by user connected.” at our end. You can achieve your requirement by sending the user id as an additional parameter to the server using the addParams method of the Query. Refer to the below UG for more details.

UG: https://ej2.syncfusion.com/angular/documentation/schedule/data-binding/#passing-additional-parameters-to-the-server

Kindly let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

[MEHDI EL AMINE]

Hey, i have a question please, i dont know how to use this Scheduler for that when the user connects to my app can only see, add or modify his activities.

And can i add like a userID attribute that links every activity added to the MONGODB database with its own user ??

If you could explain in the best way possible i would really appreciate it.

i am working with the MERN stack if that could help.

[Ravikumar Venkatesan]

Hi MEHDI,

Greetings from Syncfusion support.

Q1: I don't know how to use this Scheduler for that when the user connects to my app can only see, add or modify his activities.

You can send the userID to the server end using the addParams method. So, you can filter the userID specified activities alone from the server end and you can return them to the client end. So, the user can only see and edit the activities connected with his userID. Refer to the below update.

http://www.syncfusion.com/forums/148981/why-isnt-scheduler-populated-with-appointments-from-my-mongodb-server-using-mongoose?reply=SgnpJM

Q2: Can I add a userID attribute that links every activity added to the MongoDB database with its own user?

You can add the userID field to every activity added to the server using the actionBegin event of the Schedule as we suggested in the below update.

http://www.syncfusion.com/forums/148981/why-isnt-scheduler-populated-with-appointments-from-my-mongodb-server-using-mongoose?reply=SgnY2R

Kindly let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

[yasser taibi]

I try to apply passing additional parameters to the server, but without result can you explain it more simply?

Please.

==> Code "routes/activity"

==> Code "activity.component.ts"

[Ravikumar Venkatesan]

Hi Yasser,

We have validated your query “I try to apply passing additional parameters to the server, but without result can you explain it more simply?” at our end.  When you send additional parameters to the server using the query property you will get it from “req.body” as shown in the below snips.

[In browser end]

[In server end]

Kindly let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

[yasser taibi]

This time I am trying to display user activities by a drop-down list "<Select>/<Option>".

The problem is that I managed to display the first selected user but, if I want to change user, it does not give any result !! 

It doesn't take into consideration the parameters I gave it.

==>> First selection "user"

==>> Second selection "user"

==>>  Code "activity.component.ts"

==>>  Code "activity.component.html"

[Ravikumar Venkatesan]

Hi Yasser,

We have validated your query “The problem is that I managed to display the first selected user but, if I want to change user, it does not give any result !!” at our end. We suggest you update the value of the updated user id on the previously added params of the Schedule query as shown in the below code snippet to fetch appointments based on the selected user id.

[app.component.ts]

  changeUser(args) {

    this.scheduleObj.eventSettings.query.params[0].value = '2';

    this.scheduleObj.refreshEvents();

  }

Before:

After:

Kindly try the shared solution and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

[yasser taibi]

Hi,

I try to add a (start date / end date) interval to the calendar, when I click on the add button.

code >> conge.component.ts  >> add button <<

[Ravikumar Venkatesan]

Hi Yasser,

We have validated your query “I try to add a (start date / end date) interval to the calendar, when I click on the add button” based on your shared details at our end by preparing a sample at our end. In your shared appointment data the month of the appointment is mentioned as 07-July. So, we suspect that the appointment is rendered on the July month dates. So, we suggest you make sure the appointment is available or not on the respective July month dates as shown in the shared snip. We have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-add-event-method-sample?file=app.component.ts

Output:

Before add:

After add:

Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.

[yasser taibi]

Hello

this time i try to integrate the code you already gave me, but unfortunately i can't get the same result as you gave me, i share with you my code.

ts:

html:

Interface:

[Ravikumar Venkatesan]

Hi Yasser,

We have validated your reported problem by modifying our previously shared sample based on your shared details. But, we are unable to reproduce the problem on our end. We suggest you bind the actionBegin, actionComplete, and actionFailure events to the Schedule and use the getEvents method of the Schedule as shown below to make sure the appointment is added to the Schedule dataSource list.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-adding-event-through-public-method?file=app.component.ts

[app.component.html]

<div class="control-section">

  <button id="get-events-btn" (click)="getScheduleEvents($event)"> Get Schedule events list </button>

 

  <div class="schedule-container">

    <ejs-schedule #scheduleObj width='100%' height='650px' [eventSettings]="eventSettings" [(currentView)]="currentView"

      (actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)"

      (actionFailure)="onActionFailure($event)">

    </ejs-schedule>

  </div>

</div>

[app.component.ts]

  private onActionBegin(args) {

    if (args.requestType === 'eventCreate') {

      console.log('action begin data', args);

    }

  }

 

  private onActionComplete(args) {

    if (args.requestType === 'eventCreated') {

      console.log('action complete data', args);

    }

  }

 

  private onActionFailure(args) {

    console.log('action failure data', args);

  }

 

  private getScheduleEvents() {

    console.log('Schedule events list:', this.scheduleObj.getEvents());

  }

Output:

Kindly let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan