Room Scheduler Popup Start Time, End Time Should have 30 minutes of interval

[Atish Kumar]

Hello I am using ej2 Room Scheduler and I wanted the From and To fields in POP UP (Modal), the date-picker dropdown should have 30 minutes of the interval like 12:00 PM, 12:30 PM,01:00 PM etc.

Please Find Attached

Attachment: time_duration_dropdown_49a300.zip

[Vengatesh Maniraj]

Hi Atish, 

Greetings from Syncfusion Support. 

We have analyzed your requirement and we can achieve it by update the step property of the DateTimePicker in the Schedule’s popupOpen event like below. 

 popupOpen: (args: PopupOpenEventArgs) => { 

    if (args.type === "Editor") { 

      ((args.element as EJ2Instance) 

        .ej2_instances[0] as any).open = function() { 

        // set 30 min interval for start time datetimepicker 

        ((args.element.querySelector(".e-start") as EJ2Instance) 

          .ej2_instances[0] as any).step = 30; 

        // set 30 min interval for end time datetimepicker 

        ((args.element.querySelector(".e-end") as EJ2Instance) 

          .ej2_instances[0] as any).step = 30; 

      }; 

    } 

  } 

We have prepared the sample for your reference that is available in the below link.  

Sample: https://stackblitz.com/edit/changing-interval?file=index.ts 

Kindly check the above sample and get back to us if you need any further assistance. 

Regards, 

Vengatesh  

[Atish Kumar]

Hello Venkatesh,

thanks for your reply. as i am not using typescript I am using an older version of room scheduler which is in javascript.

I tried below codes

// set 30 min interval for start time datetimepicker 

args.element.querySelector(".e-start").ej2_instances[0].step = 30; 

// set 30 min interval for end time datetimepicker 

args.element.querySelector(".e-end").ej2_instances[0].step = 30; 

but it is not impacting the start and end time step.

attached the code can you please take a look once i am missing anything or should I update it with the latest version.

Attachment: syncfusion_roomscheduler_70b84642.zip

[Praveenkumar Narasimhanaidu]

Hi Atish,

 

Thanks for your update.

 

We have validated your reported issue and let you know that you have missed adding open function in shared code, that is the cause for issue. Please add below mentioned code in your sample and for the same we have modified your sample which available in following link.

 

Index.html

 

 if (args.type === 'Editor') {

                

                    (args.element.ej2_instances[0]).open = function() {

                    // set 30 min interval for start time datetimepicker 

                    args.element.querySelector(".e-start").ej2_instances[0].step = 30; 

                    // set 30 min interval for end time datetimepicker 

                    args.element.querySelector(".e-end").ej2_instances[0].step = 30; 

                    

                    }

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161970/ze/syncfusion_roomscheduler_70b84642-70740685

 

Kindly try the above solution and get back to us if you need any further assistance.

 

Regards,

Praveenkumar.