entire week or entire month highlights in mvc syncfusion calendar when click on button

Question

var cale = document.querySelector('#calendar').ej2_instances[0];

if (scheduleObj.isRendered) {

var days = [];

days.push("04-18-2021");

days.push("04-19-2021");

days.push("04-20-2021");

days.push("04-21-2021");

days.push("04-22-2021");

days.push("04-23-2021");

days.push("04-24-2021");

/// i want to hightlight days here

cals.find(days).element.classList.add('e-highlightweekend');

}

Jeyanth Muthu Pratheeban Sankara Subramanian · Accepted Answer

Hello Nishit,

Thanks for contacting Syncfusion support.

We checked the reported issue. We can uniquely identify each calendar cell for the specific day with the help of id attribute such that milliseconds value for the date value will be the value of the id attribute. With the help of this, we can uniquely identify the calendar cell and add the required class to it. To highlight the whole days in a month, we can add the desired class to all the table cells in it. We made sample for your convenience. Please find the sample in the below link. Also please refer to the below demo for highlighting the days when control is rendered without external button click.

Special Dates Demo : https://ej2.syncfusion.com/aspnetmvc/Calendar/SpecialDates#/material

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Calendar_Highlight_Week142053644

Code Snippet :

@Html.EJS().Calendar("calendar").Render()

function highlightWeek(args) {

var days = [];

days.push("04-18-2021");

days.push("04-19-2021");

days.push("04-20-2021");

days.push("04-21-2021");

days.push("04-22-2021");

days.push("04-23-2021");

days.push("04-24-2021");

days.map((ele) => {

document.querySelector('[id^="' + +new Date(ele) + '"]')?.classList.add("e-day-highlight");

})

}

function highlightMonth(args) {

var monthElements = document.getElementById("calendar").querySelectorAll("td.e-cell:not(.e-other-month)")

Array.prototype.slice.call(monthElements).map((ele) => {

ele.classList.add("e-day-highlight");

})

}

Screenshot :

Week Highlight	Month Highlight

Kindly integrate the provided solution with your application and get back to us if you need any further assistance on this.

Regards,

Jeyanth.