Clear selected range of dates

[Eric]

How do we clear the selected range of dates (highlighted cells) with Javascript ?

[Ravikumar Venkatesan]

Hi Eric,

Greetings from Syncfusion support.

We have validated your query “How do we clear the selected range of dates (highlighted cells) with Javascript ?” at our end. You can remove the highlighted background color of work hours cells by using the resetWorkHours method. If you want to remove the cell highlighted based on appointment availability by removing the class added for highlighting them. You can find the implementation from the below code snippet. We have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/ej2-js-schedule-highlight-appointment-cells?file=index.js

[index.js]

document.getElementById('remove-app-cells-btn').onclick = function () {

  var listOfCells = document.querySelectorAll('.e-appointment-cell');

  for (var cell of listOfCells) {

    cell.classList.remove('e-appointment-cell');

  }

};

 

document.getElementById('reset-work-hours-btn').onclick = function () {

  scheduleObj.resetWorkHours();

};

Kindly try the shared solution and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan 

[Eric]

Hi,

I may have phrased my question wrongly but what I want is to remove the "manually" highlighted dates (when you use the mouse to select multiple dates) .

None of the methods you mentioned worked for that.

[Eric]

Nevermind I got it to work by adapting your code to

var listOfCells = document.querySelectorAll('.e-selected-cell');

for (var cell of listOfCells) {

cell.classList.remove('e-selected-cell');

}

 

Thanks

[Ravikumar Venkatesan]

Hi Eric,

Thanks for the update.

We are happy that you have achieved your requirement.

Regards,

Ravikumar Venkatesan