Set Different Working Hours on Different Days in ASP.NET MVC Scheduler

By default, the work hours of the Scheduler are highlighted based on the start and end values provided within the WorkHours property, which remains the same for all days. To highlight a different work hours range for different days, use the setWorkHours method. You can pass a single date object or a collection of multiple date objects as the first argument, and the start and end time values to be applied as work hours as the second and third arguments, respectively. In the following code example, on a button click, 11:00 AM to 08:00 PM on the 15th and 17th of February are added as work hours.

CSHTML

@using Syncfusion.EJ2.Schedule

<div>
    @Html.EJS().Button("btn1").Content("Change the work hours").Render()
</div>

<div>
    @(Html.EJS().Schedule("schedule")
        .Width("100%")
        .Height("550px")
        .WorkHours(wh =>
            wh.Highlight(true)
            .Start("09:00")
            .End("11:00")
        )
        .Views(ViewBag.view)
        .SelectedDate(new DateTime(2018, 2, 15))
        .Render()
    )
</div>

<script type="text/javascript">
    document.getElementById('btn1').onclick = function () {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var dates = [new Date(2018, 1, 15), new Date(2018, 1, 17)];
        scheduleObj.setWorkHours(dates, '11:00', '20:00');
    };
</script>

Data.cs

public ActionResult Index()
{
    List<ScheduleView> viewOption = new List<ScheduleView>()
    {
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Day },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
        new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Month }
    };
    ViewBag.view = viewOption;
    return View();
}