We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add custom button on editor only on Edit mode

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


1 Reply

SK Satheesh Kumar Balasubramanian Syncfusion Team November 14, 2022 08:55 AM

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');

}



Loader.
Live Chat Icon For mobile
Up arrow icon