Customizing the default time duration in editor window

[subhajit]

Hi,

I'm trying to follow the sample at
https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-the-default-time-duration-in-editor-window

It works when creating a new event but not when editing an existing event. The time duration is always 30m even though args.duration is being set to 60.

Please help me find a solution.

[Balasubramanian Sattanathan]

Hi Subhajit, 

 

Greetings from Syncfusion Support. 

 

By default, the editor window will have a time duration of 30 minutes. If you would like to change this duration, please follow the link you have previously provided. And which is only applicable for event creation (through cellDoubleClick) and which is not supported for event editing operation (thorugh eventDoubleClick) 

 

UG link : https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-the-default-time-duration-in-editor-window 

 

Regards, 

Balasubramanian S 

[subhajit]

Hi,

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-the-default-time-duration-in-editor-window

At the example above when I create an appointent with an 60 min interval and try to edit, the edit window will open with 30 min interval not 60 min. In our application edit window interval should be based on what we selected when during appointment creation. Will you be implementing this interval customization features for edit appointment soon?

[Vinitha Devi Murugan]

Hi Subhajit, 

 

Thanks for your update. 

 

We achieved your requirement by making use of popupOpen event of the scheduler and same can be available in below link. 

 

https://stackblitz.com/edit/angular-krnjzt-w7jjao?file=app.component.ts  

onPopupOpen(args: PopupOpenEventArgs): void { 

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

      args.duration = 60; 

      var dialogObj = (args.element as any).ej2_instances[0]; 

      dialogObj.open = function() { 

        // Changed the event duration to 60 min 

        let startObj = (args.element.querySelector(".e-start") as any) 

          .ej2_instances[0]; 

        startObj.step = 60; 

        let endObj = (args.element.querySelector(".e-end") as any) 

          .ej2_instances[0]; 

        endObj.step = 60; 

      }; 

    } 

 

Regards, 

M.Vinitha devi 

[Benjamin]

Hi Vinitha, how we can change dinamically the editor default duration? 

I have a control in editor event dialog that if change his value from false to true (checkbox), so the duration of event change from 30 to 60 minutes. The way that i found to do it is at open set duration to 60 min and set step to 30 min for datetimepickers. Works fine but the unique problem is that i have to call: `this.schedulerObj.eventWindow.dialogObject.refresh()`, and this make close and open the editor.

How i can change default duration time of editor without call refresh function? i want to keep open the dialog. I attach a gif that show the behaviour:

Regards, thanks in advance

Attachment: not_refresh_dialog_d29ac7f3.zip

[Nevitha Ravi]

Hi Benjamin, 

Greetings from Syncfusion Support. 

We have achieved your requirement using change event of check box and start time datetimepicker. Please refer to the following sample. 

https://stackblitz.com/edit/angular-start-end-time-customization-in-editor?file=app.component.ts  

onPopupOpen(args: PopupOpenEventArgs): void { 

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

      args.duration = 60; 

      var dialogObj = (args.element as any).ej2_instances[0]; 

      var checkBoxObj = (args.element.querySelector( 

        '.e-time-zone.e-checkbox' 

      ) as any).ej2_instances[0]; 

      checkBoxObj.label = '30 min Duration'; 

      let startObj = (args.element.querySelector('.e-start') as any) 

        .ej2_instances[0]; 

      let endObj = (args.element.querySelector('.e-end') as any) 

        .ej2_instances[0]; 

      endObj.readonly = true; 

      startObj.change = function() { 

        if (!checkBoxObj.checked) { 

          endObj.value = new Date( 

            endObj.value.setHours(startObj.value.getHours() + 1) 

          ); 

          endObj.value = new Date( 

            endObj.value.setMinutes(startObj.value.getMinutes()) 

          ); 

        } else { 

          endObj.value = new Date( 

            endObj.value.setHours(startObj.value.getHours()) 

          ); 

          endObj.value = new Date( 

            endObj.value.setMinutes(startObj.value.getMinutes() + 30) 

          ); 

        } 

      }; 

      checkBoxObj.change = function() { 

        if (!checkBoxObj.checked) { 

          endObj.value = new Date( 

            endObj.value.setHours(startObj.value.getHours() + 1) 

          ); 

          endObj.value = new Date( 

            endObj.value.setMinutes(startObj.value.getMinutes()) 

          ); 

        } else { 

          endObj.value = new Date( 

            endObj.value.setHours(startObj.value.getHours()) 

          ); 

          endObj.value = new Date( 

            endObj.value.setMinutes(startObj.value.getMinutes() + 30) 

          ); 

        } 

      }; 

      dialogObj.open = function() { 

        // Changed the duration to 30 min 

        startObj.step = 30; 

        endObj.step = 30; 

      }; 

    } 

Please try the above solution and let us know if this meets your requirement.  

Regards, 

Nevitha. 

[Benjamin]

Thank you Nevitha, works like a charm! 

[Hareesh Balasubramanian]

Hi Benjamin, 

We are happy that our solution has been resolved your issues. 

Please get back to us if you need any further assistance. 

Regards, 

Hareesh