I want to disable the datepicker holiday dates which are stored in database

Hello!
Actually I want to disable the holiday dates on Datepicker which dates are stored in the database table tbl_holiday with fields id, date, and festival_name

1 Reply

BC Berly Christopher Syncfusion Team March 26, 2020 11:44 AM UTC

Hi Ishan, 

Greetings from Syncfusion support. 

We can achieve the requested requirement by changing the isDisabled as true in the RenderDayCell event as mentioned below. Here, we have achieved the requirement by adding dummy data named as “specialDateValues”.  

@Html.EJS().DatePicker("datepicker").RenderDayCell("renderDayCell").Render() 
 
<script> 
 
    var specialDateValues = [{ 
        id1, 
        datenew Date("4/4/2020"), 
        festival_name"Birthday" 
    }, 
    { 
        id2, 
        datenew Date("4/18/2020"), 
        festival_name"Vacation" 
    }, 
    { 
        id3, 
        datenew Date("4/25/2020"), 
        festival_name"New Year" 
    } 
    ]; 
    function renderDayCell(args) { 
        for (var i = 0i < specialDateValues.lengthi++) { 
            if (+specialDateValues[i].date === +args.date) { // Check whether the saved date in the popup  
                if (specialDateValues[i].date.getDay() === 0 || specialDateValues[i].date.getDay() === 6) { // To check if the provided date is week end 
                    args.isDisabled = true// Add the disabled class 
                } 
            } 
        } 
    } 
</script> 
 
Please find the sample from the below link. 


To know more about our component disabled functionalities, please refer the below documentation and demo link. 
 
 

Regards, 
Berly B.C

Loader.
Up arrow icon