How to close a Schedule dialog box?

[Ken Guest]

Specifying  custom header, content and footer templates:

                quickInfoTemplates={{

                  header: quickInfoHeaderTemplate,

                  content: quickInfoContentTemplate,

                  footer: quickInfoFooterTemplate

                }

  function quickInfoFooterTemplate(props: any): JSX.Element {

    return (

      // <div></div>

      <div className="e-popup-footer" style={{ minWidth: '' }}>

        <DefaultButton

          className="e-close e-event-cancel"

          style={{ marginRight: '5px' }}

          type={ButtonType.CANCEL}

          onClick={handleModalClose}

        >

          CANCEL

        </DefaultButton>

        <PrimaryButton

          style={{ marginLeft: '5px' }}

          type={ButtonType.SUBMIT}

          onClick={() => editAppointment(props)}

        >

          DONE

        </PrimaryButton>

      </div>

    );

  }

  function editAppointment(props: Appointment) {

    console.log('update props: ', props);

  }

What's the best/idiomatic way of closing the popup?

We've tried things like  this inside our editAppointment code

QuickPopups.quickDialogClass.quickPopupHide(true);

Which just don't work.

Can  you help please?

Thanks!

[Karthigeyan Krishnamurthi]

Hi Ken,  

 

Syncfusion greetings. 

 

We have prepared the below sample to close the quickpopup based on its button click. 

https://stackblitz.com/edit/react-hokn7e-zqw1hk?file=index.js 

 

footer(props) { 

    return (<div> 

      { 

        props.elementType === 'cell' ? 

          <div className="e-cell-footer"> 

            <button className="e-event-details" title="Extra Details">Extra Details</button> 

            <button className="e-event-create" title="Add">Add</button> 

            <button className="e-event-cancel" onClick={this.onQuickInfoClose.bind(this)} title="Close">Close</button> 

 

          </div> 

          : 

          <div className="e-event-footer"> 

            <button className="e-event-edit" title="Edit">Edit</button> 

            <button className="e-event-delete" title="Delete">Delete</button> 

            <button className="e-event-cancel" onClick={this.onQuickInfoClose.bind(this)} title="Close">Close</button> 

          </div> 

      } 

    </div> 

    ); 

  } 

 

  onQuickInfoClose = () => { 

    this.scheduleObj.quickPopup.quickPopupClose(); 

  }; 

  

Regards, 

Karthi 

[Ken Guest]

Thank you - that's exactly what I needed!

[Karthigeyan Krishnamurthi]

Most welcome 😊 

[Arun]

how to close editor pop up window ?

[Ravikumar Venkatesan]

Hi Arun, 

Greetings from Syncfusion support. 

We have validated your reported query “how to close editor pop up window ?” at our end. We can close the editor window manually with the help of the closeEditor public method of the EJ2 React Schedule like the below code. We have prepared a sample for your reference it can be available below. 

[index.js] 

  close(args) { 

    alert('Editor window is closing now.'); 

    this.scheduleObj.closeEditor(); 

  } 

Sample: https://stackblitz.com/edit/ej2-react-schedule-close-editor-window-manually-dbgo8k?file=index.js 

Kindly try the above sample and get back to us If you would require further assistance. 

API (closeEditor public method): https://ej2.syncfusion.com/react/documentation/api/schedule/#closeeditor 

Regards, 

Ravikumar Venkatesan