Add custom button on editor only on Edit mode

Question

Hi there,I'm trying to add a new button on the footer of the editor window, ONLY when editor is on Edit mode. In other words, I want to create an extra button next to Delete button, while editing an event. I saw this thread https://www.syncfusion.com/forums/160475/add-custom-button , but this pushes the button to the editor on any action, even when I'm checking for an eventId.I tried to catch editor's mode on popupOpen, as said here: When a cell is double clicked, the detailed editor window opens in “Add new” mode, whereas when an event is double clicked, the same is opened in an “Edit” mode. ​, but couldn't make it work (args.mode returns undefined)Could you please help me on that?Than

Satheesh Kumar Balasubramanian · Answer

You can add custom button while editing an event using popupOpen event of the schedule.

https://stackblitz.com/edit/scheduler-javascript-additional-button-sample-azjhxp?file=index.js,index.html

index.js:

var scheduleObj = new ej.schedule.Schedule({

height: '650px',

selectedDate: new Date(2018, 1, 15),

eventSettings: {

dataSource: [

{

Id: 1,

Subject: 'Meeting',

StartTime: new Date(2018, 1, 15, 10, 0),

EndTime: new Date(2018, 1, 15, 12, 30),

},

],

},

popupOpen: function (args) {

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

let dialogObj = args.element.ej2_instances[0];

let buttons = dialogObj.buttons;

if (

args.data.Id &&

document.querySelectorAll('.e-btn.e-alert').length < 1

) {

buttons.push({

buttonModel: {

cssClass: 'e-alert',

content: 'Alert',

isPrimary: true,

},

click: alert.bind(this),

});

dialogObj.setProperties({ buttons: buttons });

} else if (

!args.data.Id &&

document.querySelectorAll('.e-btn.e-alert').length > 0

) {

buttons.pop();

dialogObj.setProperties({ buttons: buttons });

document.querySelectorAll('.e-btn.e-event-delete')[0].style.display =

'none';

}

},

});

scheduleObj.appendTo('#Schedule');

function alert(e) {

console.log('Button Clicked');

}