DisabledDates.cshtml

@using Syncfusion.EJ2

@section ControlsSection{
    <div class=" control-section">
        <div class="calender-section">
            <div id="calender-control">
                <ejs-calendar id="calendar" renderDayCell="disableDate" change="valueChange"></ejs-calendar>
                <br>
                <span id="date_label"> Selected Value: </span>
            </div>
        </div>
    </div>
}

<script>
    function disableDate(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            args.isDisabled = true;
        }
    }
    function valueChange(args) {
        /*Displays selected date in the label*/
        document.getElementById('date_label').textContent = 'Selected Value: ' + args.value.toLocaleDateString();
    }

</script>

@*custom code start*@
<style>
    #date_label {
        display: block;
        width: 248px;
        color: rgba(0, 0, 0, 0.58);
        margin-left: 5px;
    }

    #calender-control {
        max-width: 300px;
        margin: 0 auto;
    }

    body.highcontrast #date_label {
        color: white;
    }
</style>

@*custom code end*@

@section ActionDescription{
    <div id="action-description">
        <p>
            In the following sample, all the weekends (Saturday and Sunday) of a month are <code>disabled</code>, and these dates are restricted to set or select in the Calendar.
        </p>
    </div>
}


@section Description{
    <div id="description">
        <p>
            Disabled Dates sample demonstrates, how to disable a specific dates in the Calendar by using <code>renderDayCell</code> event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates
            in the Calendar. Here the weekend date's are disabled by using renderDayCell.
        </p>
        <p>
            More information on the disabled dates can be found in this
            <a href="https://ej2.syncfusion.com/aspnetcore/documentation/calendar/customization/#disable-weekends" target="_blank"> documentation section</a>.
        </p>
    </div>

}

@section Meta{

       <meta content= "This example demonstrates how to disable the dates like weekends, weekdays and specific dates (past, future and current dates) in a ASP.NET Core Calendar" />
}