Scheduler - remove selected events

[Lukasz]

Hi

Is it possible to delete several selected events in one click? Does it work to select multiple items?

[Lukasz]

Please note, that  getSelectedElements array is empty:

var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];   
var selectedCells = scheduleObj.getSelectedElements();

ver. 20.4.50

[Swathi Ravi]

Hi Lukasz,

You can delete multiple events in one click by holding down the ctrl key and selecting the appointments you want to delete, then releasing the Ctrl key and pressing the delete key. The delete confirmation popup will be opened clicking the delete button on the confirmation popup will delete all the selected events.

UG: https://ej2.syncfusion.com/aspnetcore/documentation/schedule/appointments#deleting-multiple-appointments

Regards,

Swathi Ravi

[Lukasz]

Dear Swathi,

Your solution works, but I need a solution in which I will programmatically take a list of selected events and perform an action, for example, through a button in the menu.

[Swathi Ravi]

Lukasz,

You can delete the selected events programmatically by using the eventClick event and getEventDetails, deleteEvent methods, as shown in the below snippet.

UG: https://ej2.syncfusion.com/aspnetcore/documentation/schedule/crud-actions#deletion-using-deleteevent-method

API:

https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventClick

https://ej2.syncfusion.com/javascript/documentation/api/schedule/#deleteevent

https://ej2.syncfusion.com/javascript/documentation/api/schedule/#geteventdetails

[index.cshtml]

<div class="col-lg-9 control-section">

    <ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2023, 3, 15)" eventClick="onEventClick">

   </ejs-schedule>

</div>

<button onClick=onButtonClick()> Delete </button>

 

 

<script type="text/javascript">

    var slots = [];

    var deleteSlots = [];

 

    function onEventClick(args) {

        slots = [].slice.call(document.querySelectorAll('.e-appointment-border'));  //here get all selected elements

    }

 

    function onButtonClick() {

        var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];

        for (var i = 0; i < slots.length; i++) {

            deleteSlots.push(scheduleObj.getEventDetails(slots[i]));  // get the events details of selected elements.

        }

        scheduleObj.deleteEvent(deleteSlots); // delete the selected events.

    }

</script>

Attachment: ej2corescheduledeleteevents_5d54ccf5.zip