how to put custom field in appointments data fields?

[EvolveOneParticipant]

Hey Hey.

How do I put my custom field in appointmentsData field? for example, i’d like to have user_id for each appointment. so that when some event occurs, i want to know for which user it was meant to be.

I am not talking about putting this custom field into editappointment dialog or something like that. I just want to save user_id for each appointments, and when the event such as appointmentChange this happens, i would like to write something like this :

appointmentChange(e) { console.log(e.appointment.user_id) };

[EvolveOneParticipant]

I am using Vue.js by the way.

[EvolveOneParticipant]

Here is how I tried to do it.

I put {name:’myData’, type:’number’} in source. I put ‘myData’:’myData’ in appointmentDataFields.
and when constructing appointment I did this let appointment = {start:”, end:”, myData:8}

I set the listener for your component like this @changedAppointments=”changedAppointments”

changedAppointments(e){
//here i need all the appointments(the ones that got changed after dropping and the ones that didn’t change). so I do this
let appointments = this.$refs.myScheduler.getAppointments();
console.log(appointments);
}

After console.log, i can check each apointment’s originalData. the bad thing is for the ones that I didn’t drop down at all, myData:8 is there. but for those that I dragged and dropped, it shows myData:undefined.

What should I do?

[MartinParticipant]

Hello EvolveOne,

Please, look at the following Example of how you can workaround this by using the dataAdapter to check the value of the custom added field.

Best Regards,
Martin

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

[EvolveOneParticipant]

Hey Martin,

I wanted to get all the appointments at that point and one of the appointment should have been changed. It might got changed, but my custom field was undefined. Your solution requires to loop through dataAdapter’s records and find the one that got changed. I’d say that I’d make this work still, but this.dataAdapter.records is undefined at all.

Here is my code https://gist.github.com/novaknole/71c842b7d5f5b4cdd773d1382fa83c22

look at the 104, 105 lines. 104 line prints the following :

loadallrecords: true
localdata: []
record: “”
recordendindex: 0
recordstartindex: 0
root: “”

What do I do?

[EvolveOneParticipant]

I think, I made it work. I had another dataAdapter which was actually becoming the responsible for maintaining the records. So here is the situation.

Let’s say I have 4 appointments. one of them starts at 12:00 am and ends at 02:00 am. Now, I dropped this appointment and start time became 01:00am and end time became 03:00 am. on appointment change, i console logged this.dataAdapter.records and it showed all the records. bad thing is when i printed these results, all appointments are the old one. even I had changed the one appointment’s time from 12:00-02:00 to 01:00-03:00am, dataAdapter.record’s appointments showed this appointment as from 12:00-02:00am. WHat I want is when appointment changes, and I print dataAdapter.records, it should show all the appointments as it does now, but with also updated start-end date. Is this possible?

[EvolveOneParticipant]

So, I still tried to do it my way. Here is how I approached it.

I wanted updated appointment’s updated time also. dataAdapter.records would give me the old times. so this.$refs.myScheduler.getAppointments() was the only way to get updated time. but this was giving me my custom field as undefined. So I used both.

HERE IS HOW I DID IT: https://gist.github.com/novaknole/dfd4a104d398273a01f9e0edd7308673

but this solution uses for loop within a for loop. (find method is something like for loop). So, can you think of any other better solution than this?

Thanks.

[EvolveOneParticipant]

Don’t forget my last question.

I also wanted to note (didn’t want to create new ticket). as soon as appointment gets changed, in appointmentChange event, i’d like to change the subject of the changed appointment.

I tried to change the subject for the first appointment. I tried the following things, none of them did work.

this.dataAdapter.originaldata[0].subject = “gio”;
this.dataAdapter.records[0].subject=”whatgio”;
this.dataAdapter.loadedData[0].subject = “vafren”;
this.dataAdapter._source.localData[0].subject = “vaime”;
this.dataAdapter._source.localdata[0].subject = “vaimevvvv”;

how do I do that too?

Don’t forget my last question too.

Thanks again.

[EvolveOneParticipant]

Last message. I united all my questions and I am gonna post them here so that you don’t have to go through one by one.

1) let’s say I have 4 appointments, and changed one of them(I dragged and dropped). after doing that, it means that appointment’s start and end date should have been changed. I need to get that appointment’s updated start and end date. but I don’t want to get only that appointment. As soon as appointmentChange event occurs, I’d like to get all the appointments that I have with updated start and end date. Turns out @appointmentChange event returns only that appointment that got updated. so I thought of the function you provide : getAppointments(), but this had some downside as it had my custom field undefined. but my custom field was not undefined if I used this.dataAdapter.records, but this way, I’d not have updated start and end date. So I was thinking about the solutions and came up with this:

https://gist.github.com/novaknole/dfd4a104d398273a01f9e0edd7308673 (downside of this is that I use for loop within for loop which is bad. do you think this is my last choice? can you think of any better solutions?

2) I use start date as the subject for each appointment. as soon as one of the appointments change(dragged and dropped which means start and end date changes), i also want to update subject of that appointment to updated start date. but couldn’t work it out. I tried following things:
Let’s say i wanted to change the subject for the first appointment.

this.dataAdapter.originaldata[0].subject = “gio”;
this.dataAdapter.records[0].subject=”whatgio”;
this.dataAdapter.loadedData[0].subject = “vafren”;
this.dataAdapter._source.localData[0].subject = “vaime”;
this.dataAdapter._source.localdata[0].subject = “vaimevvvv”;

None of them worked. what do you think I should do?

3) let’s say I have 4 appointments. let’s number them app1, app2, app3, app4. let’s say that i dragged an dropped app4 above app3. as soon as this happened, @appointmentChange event got called. in that event function, i’d like to get all the appointments, but with changed sequence. if it was app1,app2,app3,app4 before, now it should have become app1, app2, app4, app3. but when I get appointments, its sequence is the same as it was in the beginning. what do I do?

[MartinParticipant]

Hello EvolveOne,

1) As you mentioned, you can get the updated fields using this.$refs.myScheduler.getAppointments() and the custom field from the dataAdapter’s records.
I cannot think of a way for achieving it with smaller complexity.

2) You need to bind the dataAdapter again and assign it to the scheduler.
Here is an Example of how to update the first
appointment’s subject inside the mounted lifecycle hook.

3) As for the appointments’ order, you cannot get them in the changed sequence but what you can do is to compare the dates ‘from’ to determine what is
their order.

I hope that this answers would be useful.

Best Regards,
Martin

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

[EvolveOneParticipant]

let’s talk about the second question. It doesn’t work for me. Your example is very easy and straightforward.

Here is my code https://gist.github.com/novaknole/37869e556c0dfabfb55c3a77e896d647

Look at the 104 line. the method changedAppointments. I change the subject. the bad thing is it changes the subject to “new subject”, but drag doesn’t take affect for the appointment.

So I click on appointment, drag and drop somewhere else, it’s subject changes, but the appointment doesn’t remain at the new position and goes back to where it was.

Could you look at the code and tell me what’s wrong?

[MartinParticipant]

Hello EvolveOne,

Actually you can use setAppointmentProperty method of the scheduler to update the subject.
Here is an Example with your code.

Best Regards,
Martin

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

[Author]

Posts