1. Home
  2. Forum
  3. Vue
  4. How to customize the editor footer of the scheduler on Vue 2?

How to customize the editor footer of the scheduler on Vue 2?

Hello, Syncfusion team and all developers.

How do way to customize the editor footer of the scheduler on Vue 2?

Ideally, I would like to have our own buttons on the footer.

Instead of the "Delete", "Save", "Cancel"...

I am not sure about this... Please help me asap.

Thanks.


3 Replies 1 reply marked as answer
VD Vinitha Devi Murugan Syncfusion Team August 9, 2021 07:05 AM UTC

Hi Alejandro, 
 
Greetings from Syncfusion Support. 
 
We have validated your reported query “How do way to customize the editor footer of the scheduler ” and achieved your requirement by making use of popupOpen event with below code. We have prepared the below sample for your reference.  
 
 
onPopupOpen: function (args) { 
  let scheduleObj = this.$refs.schedule.ej2Instances; 
  if (args.type === "Editor") { 
    var dialogObj = args.element.ej2_instances[0]; 
 
    var buttons; 
    if (args.target.classList.contains("e-appointment")) { 
      this.currentEvent = scheduleObj.getEventDetails(args.target); 
      buttons = [ 
        { 
          buttonModel: { content: "Button 1", cssClass: "e-custom-btn1" }, 
        }, 
        { 
          buttonModel: { content: "Button 2", cssClass: "e-custom-btn2" }, 
        }, 
        { 
          buttonModel: { content: "SAVE", isPrimary: true, cssClass: "e-event-save",}, 
        }, 
        { 
          buttonModel: { content: "DELETE", cssClass: "e-event-delete" }, 
        }, 
        { 
          buttonModel: { content: "CANCEL", cssClass: "e-event-cancel" }, 
        }, 
      ]; 
    } else { 
      buttons = [ 
        { 
          buttonModel: { content: "Add", isPrimary: true, cssClass: "e-event-add"}, 
        }, 
        { 
          buttonModel: { content: "CANCEL", cssClass: "e-event-delete" }, 
        }, 
      ]; 
    } 
    dialogObj.buttons = buttons; 
    dialogObj.dataBind(); 
    if (args.target.classList.contains("e-appointment")) { 
      let eventSave = args.element.querySelector(".e-event-save"); 
      if (eventSave) { 
        eventSave.addEventListener("click", this.editEvent); 
      } 
      let eventdelete = args.element.querySelector(".e-event-delete"); 
      if (eventdelete) { 
        eventdelete.addEventListener("click", this.eventDelete); 
      } 
      let custButton1 = args.element.querySelector(".e-custom-btn1"); 
      if (custButton1) { 
        custButton1.addEventListener("click", this.ButtonOneClick); 
      } 
      let custButton2 = args.element.querySelector(".e-custom-btn2"); 
      if (custButton2) { 
        custButton2.addEventListener("click", this.ButtonTwoClick); 
      } 
      let eventCancel = args.element.querySelector(".e-event-cancel"); 
      if (eventCancel) { 
        eventCancel.addEventListener("click", this.dialogClose); 
      } 
    } else { 
      let eventAdd = args.element.querySelector(".e-event-add"); 
      if (eventAdd) { 
        eventAdd.addEventListener("click", this.eventAdd); 
      } 
      let eventCancel = args.element.querySelector(".e-event-delete"); 
      if (eventCancel) { 
        eventCancel.addEventListener("click", this.dialogClose); 
      } 
    } 
  } 
}, 
 
eventAdd: function (e) { 
  let scheduleObj = this.$refs.schedule.ej2Instances; 
  const data = scheduleObj.getCellDetails( 
    scheduleObj.getSelectedElements() 
  ); 
  const eventData = scheduleObj.eventWindow.getObjectFromFormData( 
    "e-schedule-dialog" 
  ); 
  eventData.Id = scheduleObj.eventBase.getEventMaxID() + 1; 
  scheduleObj.addEvent(eventData); 
  this.dialogClose(); 
}, 
eventDelete: function (e) { 
  let scheduleObj = this.$refs.schedule.ej2Instances; 
  const eventData = scheduleObj.activeEventData.event; 
  scheduleObj.deleteEvent(eventData); 
  this.dialogClose(); 
}, 
editEvent: function (e) { 
  let scheduleObj = this.$refs.schedule.ej2Instances; 
  const eventData = scheduleObj.eventWindow.getObjectFromFormData( 
    "e-schedule-dialog" 
  ); 
  eventData.Id = this.currentEvent.Id; 
  scheduleObj.saveEvent(eventData); 
  this.dialogClose(); 
}, 
dialogClose: function () { 
  let dialogObj = document.querySelector(".e-schedule-dialog").ej2_instances[0]; 
  dialogObj.hide(); 
}, 
ButtonTwoClick: function () { 
  alert("Button Two clicked"); 
}, 
ButtonOneClick: function () { 
  alert("Button one clicked"); 
}, 
 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 
 


AD Alejandro Diaz replied to Vinitha Devi Murugan August 9, 2021 07:23 PM UTC

Hi Vinitha Devi Murugan.

Thanks for your answer. Your answer is working for me. It is a great answer.

Thanks for your kind and care.

Alejandro


Marked as answer
NR Nevitha Ravi Syncfusion Team August 10, 2021 08:12 AM UTC

Hi Alejandro, 

You are most welcome..! We are glad that our provided solution helped you, please get back to us if you need any further assistance. 

Regards, 
Nevitha 


Loader.
Up arrow icon