Replace Editor Window with a custom pop up

[huntsman]

Is there a way to to replace the editor window?

If that's not possible, how can i add an image in the editor view header and how can i change the Title New Events??

[Hareesh Balasubramanian]

Hi Huntsman, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query by replacing the default editor window using the Dialog component, which can be viewed from the below link. 

Sample: https://stackblitz.com/edit/angular-customized-window-in-scheduler?file=app.component.ts  

<div> 

  <div class="control-section"> 

    <ejs-schedule width='100%' height='650px' (popupOpen)="onPopupOpen($event)"> 

    </ejs-schedule> 

  </div> 

  <div> 

    <ejs-dialog #Dialog [buttons]='dlgButtons' [visible]="visible" [animationSettings]='animationSettings' 

      [showCloseIcon]='showCloseIcon' [target]='target' [width]='width'> 

      <ng-template #header> 

        <img class="img2" src="https://ej2.syncfusion.com/products/typescript/dialog/template/images/1.png" style="display: inline-block;" alt="header image"/> 

        <div title="Nancy" class="e-icon-settings dlg-template"> Customized Dialog </div> 

      </ng-template> 

      <ng-template #content> 

        <table style="border-collapse: separate;border-spacing: 10px;width:85%;margin: 0px -5px 0px;"> 

          <tbody> 

            <tr> 

              <td class="e-textlabel">Summary</td> 

              <td colspan="4"> 

                <input id="Subject" class="e-field e-input" type="text" 

                                name="Subject" style="width: 100%" /> 

                        </td> 

            </tr> 

            <tr> 

              <td class="e-textlabel">From</td> 

              <td colspan="4"> 

                <ejs-datetimepicker id="StartTime" class="e-field" format="M/dd/yy h:mm a"> 

                </ejs-datetimepicker> 

              </td> 

            </tr> 

            <tr> 

              <td class="e-textlabel">To</td> 

              <td colspan="4"> 

                <ejs-datetimepicker id="EndTime" class="e-field" format="M/dd/yy h:mm a"> 

                </ejs-datetimepicker> 

              </td> 

            </tr> 

          </tbody> 

        </table> 

      </ng-template> 

    </ejs-dialog> 

  </div> 

</div> 

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

We will happy to assist you. 

Regards, 

Hareesh