Open a new dialog in event editor

[Jay]

Hi there,

I want to add another DialogComponent as nested dialog in schedule's default editor when adding / editing event.

I am happy with most of the built-in editor, I found it's possible to overwrite the default editor by appending DialogComponent after ScheduleComponent, then nest another one next to it, see the code below:

function onPopupOpen(args) {

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

args.cancel = true;

if (args.target.classList.contains("e-appointment")) {

// this.temp = false;

eventDialog.header = "Edit Event";

eventDialog.show();

let btnOpenEle = document.querySelector("#btnOpen");

btnOpenEle.onclick = function () {

nestedDialog.show();

};

} else {

// this.temp = true;

eventDialog.header = "New Event";

eventDialog.show();

}

}

}

<ScheduleComponent

ref={(t) => (scheduleObj = t)}

popupOpen={onPopupOpen}

popupClose={onPopupClose}

......

ScheduleComponent>

<DialogComponent

id="eventDialog"

showCloseIcon={true}

visible={false}

width="500px"

ref={(dlg) => (eventDialog = dlg)}

// animationSettings={effect}

closeOnEscape={false}

target="#targetElement"

content={editorContent}

buttons={buttons}

>DialogComponent>

<DialogComponent

id="innerDialog"

showCloseIcon={true}

visible={false}

width="500px"

height="500px"

ref={(dlg) => (nestedDialog = dlg)}

// animationSettings={effect}

closeOnEscape={false}

target="#eventDialog"

>DialogComponent>

1. Is there any other better way to do it?
2. In this way, it will be a lot of efforts to overwrite the whole default editor, do you have any samples with fully customised editor that has the same functionalities (not only rendering but also CRUD) as the default editor?
   

Cheers,

Jay

[Swathi Ravi]

Hi Jay,

We regret to let you know that, according to the current Scheduler architecture, it’s not feasible to render the nested dialog inside the default editor. You can use the EditorTemplate to achieve your requirement. Refer to the below shared UG and Demo.

UG: https://ej2.syncfusion.com/react/documentation/schedule/editor-template#customizing-event-editor-using-template

Demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/schedule/editor-template

Regards,

Swathi Ravi