Data recovery from the server: jqxScheduler

[KevinMbitkebeyoParticipant]

Hello. I want to retrieve the data from the server in order to display them in the scheduler. I can retrieve my data but I can’t display them in the scheduler. I tried to display what I get in the console and this is what I get:
[
{
“id”: 1,
“subject”: “Quarterly Project Review Meeting”,
“start”: “2022-11-23T08:00:00.000Z”,
“end”: “2022-11-23T15:00:00.000Z”
},
{
“id”: 2,
“subject”: “IT Group Mtg.”,
“start”: “2021-11-24T09:00:00.000Z”,
“end”: “2022-11-24T14:00:00.000Z”
},
{
“id”: 3,
“subject”: “Course Social Media”,
“start”: “2021-10-10T09:00:00.000Z”,
“end”: “2022-11-28T12:00:00.000Z”
},
{
“id”: 192,
“subject”: “azer”,
“start”: “2022-09-13T22:00:00.000Z”,
“end”: “2022-09-14T21:59:59.000Z”
},
{
“id”: 193,
“subject”: “zsf”,
“start”: “2022-09-25T22:00:00.000Z”,
“end”: “2022-09-26T21:59:59.000Z”
},
{
“id”: 194,
“subject”: “drg”,
“start”: “2022-09-12T22:00:00.000Z”,
“end”: “2022-09-13T21:59:59.000Z”
},
{
“id”: 195,
“subject”: “dszr”,
“start”: “2022-09-12T22:00:00.000Z”,
“end”: “2022-09-13T21:59:59.000Z”
},
{
“id”: 196,
“subject”: “tryy”,
“start”: “2022-09-20T22:00:00.000Z”,
“end”: “2022-09-21T21:59:59.000Z”
},
{
“id”: 197,
“subject”: “qzrsf”,
“start”: “2022-09-28T22:00:00.000Z”,
“end”: “2022-09-29T21:59:59.000Z”
},
{
“id”: 198,
“subject”: “sdf”,
“start”: “2022-09-28T22:00:00.000Z”,
“end”: “2022-09-29T21:59:59.000Z”
},
{
“id”: 199,
“subject”: “aaaaa”,
“start”: “2022-09-26T22:00:00.000Z”,
“end”: “2022-09-27T21:59:59.000Z”
},
{
“id”: 200,
“subject”: “erg”,
“start”: “2022-09-20T22:00:00.000Z”,
“end”: “2022-09-21T21:59:59.000Z”
},
{
“id”: 201,
“subject”: “uyr”,
“start”: “2022-09-21T22:00:00.000Z”,
“end”: “2022-09-22T21:59:59.000Z”
},
{
“id”: 202,
“subject”: “ezr”,
“start”: “2022-09-28T22:00:00.000Z”,
“end”: “2022-09-29T21:59:59.000Z”
},
{
“id”: 203,
“subject”: “eerert”,
“start”: “2022-09-14T22:00:00.000Z”,
“end”: “2022-09-15T21:59:59.000Z”
}
]

The three elements are the ones I put statically and it displays well in the scheduler. The rest of the data comes from the server but unfortunately it doesn’t display in the scheduler. How to solve this problem please. Thanks in advance

[svetoslav_borislavovParticipant]

Hi,

You can use the addAppointment method to add the new appointments when you fetch them.
See this example:

App.Component.ts:

import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
import { jqxSchedulerComponent } from ‘jqwidgets-ng/jqxscheduler’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’
})
export class AppComponent implements AfterViewInit {
@ViewChild(‘schedulerReference’, { static: false }) scheduler!: jqxSchedulerComponent;
ngAfterViewInit(): void {

this.scheduler.ensureAppointmentVisible(‘id1’);

//GET YOUR APPOINTMENTS FROM THE API

const appointmentsFromAPI = [
{
id: “id2”,
description: “”,
location: “”,
subject: “IT Group Mtg.”,
calendar: “Room 2”,
start: new Date(2020, 10, 24, 10, 0, 0),
end: new Date(2020, 10, 24, 15, 0, 0)
}
]

appointmentsFromAPI.forEach(appointment => {

this.scheduler.addAppointment(appointment);

});

}

generateAppointments(): any {

return [
{
id: “id1”,
description: “George brings projector for presentations.”,
location: “”,
subject: “Quarterly Project Review Meeting”,
calendar: “Room 1”,
start: new Date(2020, 10, 23, 9, 0, 0),
end: new Date(2020, 10, 23, 16, 0, 0)
},
{
id: “id3”,
description: “”,
location: “”,
subject: “Course Social Media”,
calendar: “Room 3”,
start: new Date(2020, 10, 27, 11, 0, 0),
end: new Date(2020, 10, 27, 13, 0, 0)
}
];

};

source: any =
{
dataType: “array”,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘location’, type: ‘string’ },
{ name: ‘subject’, type: ‘string’ },
{ name: ‘calendar’, type: ‘string’ },
{ name: ‘start’, type: ‘date’ },
{ name: ‘end’, type: ‘date’ }
],
id: ‘id’,
localData: this.generateAppointments()
};
dataAdapter: any = new jqx.dataAdapter(this.source);
date: any = new jqx.date(2020, 11, 23);
appointmentDataFields: any =
{
from: “start”,
to: “end”,
id: “id”,
description: “description”,
location: “location”,
subject: “subject”,
resourceId: “calendar”
};
resources: any =
{
colorScheme: “scheme05”,
dataField: “calendar”,
source: new jqx.dataAdapter(this.source)
};
views: any[] =
[
‘dayView’,
‘weekView’,
‘monthView’
];
}

App.component.html:

<jqxScheduler #schedulerReference [date]=”date” [width]=”800″ [height]=”600″ [source]=”dataAdapter” [showLegend]=”true”
[view]=”‘weekView'” [appointmentDataFields]=”appointmentDataFields” [resources]=”resources” [views]=”views”>
</jqxScheduler>

Basically, forEach the new appointments and add them.
If you need further help, do not hesitate to contact us!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[KevinMbitkebeyoParticipant]

thanks

[KevinMbitkebeyoParticipant]

Thank you for your help the solution you gave me to work. But I have another concern. I can’t change the data of my server from the scheduler. Here is the code I used to do it:

myAppointmentChange(item: any): void {
let appointment = item.args.appointment;

const singleEvent: CalendarInterface = {
event: null,
locationId: this.locality,
startdate: null,
enddate: null,
month: null,
year: null,
};
singleEvent.id = appointment.originalData.id;
singleEvent.event = appointment.subject;
singleEvent.startdate = appointment.originalData.start;
singleEvent.enddate = appointment.originalData.end;
singleEvent.month = this.date.month();
singleEvent.year = this.date.year();
this.calService.update(singleEvent).subscribe(
(data) => {
this.openSnackBar(“L’évènement a bien été mis à jour.”);
console.log(data);
},
(error) => {
console.log(error);
},
);
}

the id I get is of type string and does not match the one in my server which is of type number. What to do please?

I have looked at similar posts to this one but unfortunately I have not found a solution to my problem.

[svetoslav_borislavovParticipant]

Hi,

To avoid the id overriding add the appointments by replacing the data source like that:

ngAfterViewInit(): void {

this.scheduler.ensureAppointmentVisible(‘id1’);

//GET YOUR APPOINTMENTS FROM THE API

const appointmentsFromAPI = [
{
id: 2,
description: “”,
location: “”,
subject: “IT Group Mtg.”,
calendar: “Room 2”,
start: new Date(2020, 10, 24, 10, 0, 0),
end: new Date(2020, 10, 24, 15, 0, 0)
}
];

this.scheduler.source(new jqx.dataAdapter(this.generateSource(appointmentsFromAPI)));

}

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com

[KevinMbitkebeyoParticipant]

Hi, please the solution you gave me did not work. In fact what I would like to do is to get the id that is in the server in order to modify it using the scheduler fields. The id that I get in the scheduler appointment is this one: “2226-22-23-16-29”. Here is how I implemented the relief you proposed:

ngAfterViewInit(): void {
this.myScheduler.ensureAppointmentVisible(‘id1’);
let appointments = new Array();
const datas = this.calService.getCalendars().subscribe(
(data) => {
this.events = data;

for (let i = 0; i < this.events.length; i++) {
const singleEvent: schedulerInter = {
id: null,
subject: null,
start: null,
end: null,
};
singleEvent.end = new Date(this.events[i].enddate);
singleEvent.id = this.events[i].id;
singleEvent.start = new Date(this.events[i].startdate);
singleEvent.subject = this.events[i].event;
appointments.push(singleEvent);
}
},
(error) => {
console.log(error);
},
() => {
appointments.forEach((appointment) => {
this.myScheduler.addAppointment(appointment);
});
},
);

this.myScheduler.source(new jqx.dataAdapter(this.resources(datas)));
}

[svetoslav_borislavovParticipant]

Hi,

Please, remove the part where you are adding each appointment to the scheduler.
Firstly, initialize the scheduler with an empty array.
Then, when you get the data from the service replace the source of the scheduler.
In your case something like this:

function ngAfterViewInit(): void {

let appointments = [];

const datas = this.calService.getCalendars().subscribe(
(data) => {

for (let i = 0; i < data.length; i++) {
const singleEvent = {
id: data[i].id,
subject: data[i].event,
start: new Date(data[i].startdate),
end: new Date(data[i].enddate),
};

appointments.push(singleEvent);
}

this.myScheduler.source(new jqx.dataAdapter(this.resources(appointments)));
},
(error) => {
console.log(error);
}
);

}

this.myScheduler.source(new jqx.dataAdapter(this.resources(appointments)));
new jqx.dataAdapter accepts you dataSource with the data fields and the actual data. ‘this.resources(appointments)’ is the method for creating the dataSource.

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts