Using a custom modal onclick in scheduler component

[Milou]

Hi there,

We are using your scheduler component to book meeting rooms. We have a custom styled bootstrap modal we wish to use to enter reservation information. 

I have read the documentation and found the "editorTemplate" option, however this does not seem to support a full restyle of the editor popup. I wish to completely replace the current popup/ modal with our custom one. Is this possible?

Also I was wondering if it is possible to trigger the dialog in Editor mode instead of  QuickInfo on a single click?

Thanks in advance for your help.

Kind regards,

Milou

[Ravikumar Venkatesan]

Hi Milou, 

Greetings from Syncfusion support. 

It is possible to completely replace the default editor window model to your custom model by using the editorTemplate and also you can open the editor window in single click by using the popupOpen event with the following code. 

onPopupOpen(args) { 

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

      var dialogObj = args.element.ej2_instances[0]; 

      dialogObj.hide(); 

      var currentAction = args.target.classList.contains('e-work-cells') ? 'Add' : 'Save'; 

      this.scheduleObj.openEditor(args.data, currentAction); 

    } 

  } 

<ScheduleComponent  popupOpen={this.onPopupOpen.bind(this)}> </ScheduleComponent> 

Sample: https://stackblitz.com/edit/react-scheduler-with-editor-template-and-single-click-e8jgmx?file=index.js 

Kindly try the above sample and get in touch with us for If you would require any further assistance. 

UG link(editorTemplate): https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#editor-window-and-quick-popups 

Regards, 

Ravikumar Venkatesan 

[Milou]

Hi Ravikumar,

Thanks for your reply. Do you have an example of using the "editorTemplate" option to completely replace the popup/ editor? Because as I mentioned, we have tried using this option but found you can only add stuff to the existing Syncfusion popup, not completely replace it by our own popup.

If we use "editorTemplate" you seem forced to use the header and footer provided by the Syncfusion popup, this makes it impossible to use the header and footer of our own modal design (we use this modal on multiple places on our site). We would be forced to restyle everything just for this one place. 

Regards, Milou

[Hareesh Balasubramanian]

Hi Milou, 

Thanks for the update. 

We have validated your shared scenario at our end and for the same we have prepared a sample in that the scheduler default editor widow has been customized using Dialog component and the sample can be viewed from the following link, 

Code snippet: 

                <div id='targetElement' className='control-section col-lg-12 defaultDialog dialog-target'> 

        <ScheduleComponent height='650px' ref={schedule => this.scheduleObj = schedule} selectedDate={new Date(2019, 0, 10)} popupOpen={(this.onPopupOpen.bind(this))}> 

          <ViewsDirective> 

            <ViewDirective option='Day' /> 

            <ViewDirective option='Week' /> 

            <ViewDirective option='WorkWeek' /> 

            <ViewDirective option='Month' /> 

            <ViewDirective option='Agenda' /> 

          </ViewsDirective> 

          <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} /> 

        </ScheduleComponent> 

        <DialogComponent id="defaultdialog" showCloseIcon={true} animationSettings={this.animationSettings} visible={this.hideDialog} width={'500px'} ref={dialog => this.dialogInstance = dialog} target={'#targetElement'} header={this.header} buttons={this.dlgButtons} content={this.content}> 

        </DialogComponent> 

    </div> 

Sample: https://stackblitz.com/edit/react-lnkuin-zajfap?file=index.js 

Kindly try the above sample and get back to us for further assistance. 

Regards, 

Hareesh