Prevent Date Navigation in ASP.NET Core Scheduler

You can prevent navigation when clicking on the date header by removing the e-navigate class from the header cells. This can be done in the renderCell event, as shown in the following code example.

The renderCell event is triggered for each cell rendered in the Scheduler, including the date header cells. By checking the elementType property of the event arguments, you can target only the header cells and remove the e-navigate class to disable navigation.

This approach disables only the date header navigation. The Scheduler toolbar (date picker, navigation buttons) can still be used to change the date. To fully lock the date, you may also need to handle the Navigating event and cancel it.

The following example demonstrates how to prevent date navigation by removing the e-navigate class in the renderCell event.

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" height="550" renderCell="onRenderer" selectedDate="new DateTime(2018, 1, 28)">
    <e-schedule-eventsettings dataSource="@ViewBag.datasource">
    </e-schedule-eventsettings>
</ejs-schedule>

<script type="text/javascript">
    function onRenderer(args) {
        if(args.elementType === "dateHeader" || args.elementType === "monthCells") {
            ej.base.removeClass(args.element.childNodes, "e-navigate");
        }
    }
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2018, 2, 13, 9, 30, 0), EndTime = new DateTime(2018, 2, 13, 11, 0, 0) });
    appData.Add(new AppointmentData
    { Id = 2, Subject = "Milky Way as Melting pot", StartTime = new DateTime(2018, 2, 15, 9, 30, 0), EndTime = new DateTime(2018, 2, 15, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

See also