Replace Event editor with my own editor

[Gilles]

Hi,

I want to replace the current event editor (image1.jpg) with my own editor (image2)

Is it possible ?

Attachment: images_16c66b5a.zip

[Hareesh Balasubramanian]

Hi Gilles, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared “I want to replace the current event editor (image1.jpg) with my own editor (image2)” query by replaced our default dialog using the Dialog component, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/scheduler-with-dialog-component-javascript-sample?file=index.js  

(Dialog)UG link: https://ej2.syncfusion.com/javascript/documentation/dialog/template/ 

  popupOpen: function(args) { 

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

      args.cancel = true; 

      var dialogObj = document.querySelector(".e-dialog").ej2_instances[0]; 

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

        dialogObj.header = "This Event"; 

        temp = false; 

        dialogObj.buttons = [ 

          { 

            click: dlgDeleteClick.bind(this), 

            buttonModel: { 

              content: "Delete", 

              cssClass: "e-delete", 

              isPrimary: true 

            } 

          }, 

          { 

            click: dlgalertClick.bind(this), 

            buttonModel: { content: "Alert", isPrimary: true } 

          }, 

          { 

            click: dlgBtnClick.bind(this), 

            buttonModel: { content: "Save", isPrimary: true } 

          }, 

          { 

            click: dlgBtnCancel.bind(this), 

            buttonModel: { content: "Cancel", isPrimary: true } 

          } 

        ]; 

        dialogObj.show(); 

        document.getElementById("dlgContent").style.visibility = "visible"; 

        let subject = document.querySelector("#Subject"); 

        let start = document.querySelector("#StartTime").ej2_instances[0]; 

        let end = document.querySelector("#EndTime").ej2_instances[0]; 

        id = args.data.Id; 

        subject.value = args.data.Subject; 

        start.value = args.data.StartTime; 

        end.value = args.data.EndTime; 

      } else { 

        dialogObj.header = "New Event"; 

        temp = true; 

        dialogObj.buttons = [ 

          { 

            click: dlgalertClick.bind(this), 

            buttonModel: { content: "Alert", isPrimary: true } 

          }, 

          { 

            click: dlgBtnClick.bind(this), 

            buttonModel: { content: "Save", isPrimary: true } 

          }, 

          { 

            click: dlgBtnCancel.bind(this), 

            buttonModel: { content: "Cancel", isPrimary: true } 

          } 

        ]; 

        dialogObj.show(); 

        document.getElementById("dlgContent").style.visibility = "visible"; 

        document.querySelector("#Subject").value = ""; 

        let start = document.querySelector("#StartTime").ej2_instances[0]; 

        let end = document.querySelector("#EndTime").ej2_instances[0]; 

        start.value = args.data.StartTime; 

        end.value = args.data.EndTime; 

      } 

    } 

  } 

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

Regards, 

Hareesh