Change endtime field of editor window when another field is changed

Question

I have two types of events. A 1 hr event and one 15 min event. What I want is, when I change the event type to 15 min call the end time field changes automatically to make it a 15 min duration event. Can anyone tell me how can this be done?

Balasubramanian Sattanathan · Accepted Answer

Hi Mansi,

Greetings from Syncfusion Support.

You can have the different endTime based on the DropDown value(Session Type) by
making use of the change
event of the Dropdownlist.

Code snippet:

onChange(args) {
    var startObj =
  document.querySelector('#StartTime').ej2_instances[0];
    var endObj =
  document.querySelector('#EndTime').ej2_instances[0];
    if (args.value === "15 min Free
  call") {
      endObj.value = new
  Date(endObj.value.setMinutes(startObj.value.getMinutes() + 15));
    } else {
      endObj.value = new
  Date(endObj.value.setMinutes(startObj.value.getMinutes() + 30));
    }
  }

Sample: https://stackblitz.com/edit/react-schedule-editor-template-numeric-textbox-jlvb2h?file=index.js

Kindly try the above solution and let us know if this is helpful.

Regards,
Balasubramanian S

Mansi Sharma · Answer

Thanks! This really helped!One suggestion I would like to give is:-It would be a more good solution if you use it like this

endObj.value = new Date(startObj.value.getTime() + 15);

Otherwise, we would be setting endTime two times and that leads to a bug when we create another appointment after the first one!

Mansi Sharma · Answer

Also, I had another question. How can we set the default value of dropdown to regular call?

I have written the dataSource of dropdown as follows:

dataSource: [
            { text: 'Regular Call', value: 'regular' },
            { text: '15 mins Free Call', value: 'free-call' },
          ]

Mansi Sharma · Answer

That's

endObj.value = new Date(startObj.value.getTime() + 15 * 60000);In my first reply!

Balasubramanian Sattanathan · Answer

Hi Mansi,Thanks for your suggestion in the first reply.How can we set the default value of dropdown to regular call? You can use the value property to select a specific item based on value https://ej2.syncfusion.com/react/documentation/api/drop-down-list#value Or you can index the property to select a specific item based on index position https://ej2.syncfusion.com/react/documentation/api/drop-down-list#index Regards,Balasubramanian S