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

[Nishit Hirpara]

            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]

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() 

<input type="button" onclick="highlightWeek()" class="e-btn" value="Highlight Week"></input> 

<input type="button" onclick="highlightMonth()" class="e-btn" value="Highlight Month"></input> 

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.