Prevent Date Navigation in ASP.NET MVC Scheduler

By default, the Scheduler navigates to a different date when the user clicks a date in the header or in the Month view. You can prevent this navigation by removing the e-navigate CSS class from the date header and month view cells inside the RenderCell event, as shown in the following code example.

In the example below, the onRenderer handler checks the elementType of the rendered cell. When the cell is a dateHeader (the day labels in the Day, Week, and Work Week views) or a monthCells cell (each day cell in the Month view), the e-navigate class is removed from all of its child nodes. Without this class, the click handler that performs date navigation is not bound to those cells, so the click is effectively a no-op.

Removing the e-navigate class disables navigation on the date header and Month view cells only. To also disable the Previous, Next, and Today toolbar buttons, set the ShowHeaderBar toolbar configuration, or handle the Navigating event and cancel the action.

@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")
    .Height("550px")
    .RenderCell("onRenderer")
    .EventSettings(e => e.DataSource(ViewBag.datasource))
    .SelectedDate(new DateTime(2018, 1, 28))
    .Render()
)

<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; }
}