Enabled/disable external edit-button when scheduler-event gets selected/deselected

[Laurin S]

Hi,

I want to enable an external button, that should open the event edit editor, once an event in the scheduler gets clicked. For that purpose I'm using the eventClick-event. Now I want to disable the button again, once the user is clicking on something else, like on an empty scheduler cell, when changing the scheduler view, when changing the current date of the scheduler, and so on...

Is there a recommended way how to do that or do I have to subscribe to all possible events of the scheduler? Right now I'm using only the cellClick-event to disable the button again, however this event gets fired only when clicking on an empty cell in the scheduler (which is also the expected behavior).

I've attached an example to explain a bit better my use case.

Other examples, when the edit-button should get disabled are for example:

• printing or exporting the scheduler
• changing the view of the scheduler
• changing the current date of the scheduler
• right-clicking on an empty cell or on another event
• clicking on a toolbar item
• searching
• ....
  

Thanks.

Attachment: reactb9tpgk_e365d5e4.zip

[Vinitha Devi Murugan]

Hi Laurin, 

 

Greetings from Syncfusion Support. 

 

Based on your requirements, we modified your shared sample by binding the mouseUp event to the document and used the code below to enable an external button only when the event in the scheduler is clicked.  

 

Sample: https://stackblitz.com/edit/enable-external-edit-button-only-on-appointment-click-wk24fd?file=index.js  

 

document.addEventListener('mouseup', function(args) { 

    if (args.target.classList.contains('e-appointment') || args.target.closest('.e-appointment')) { 

      console.log('event clicked'); 

      setEvent(true); 

    } else { 

      setEvent(undefined); 

    } 

  }); 

 

Kindly try with the above sample and get back to us if you need any further assistance 

 

Regards, 

Vinitha