Prevent the Date Navigation

17 Feb 20222 minutes to read

We can prevent navigation while clicking on the date header by simply removing e-navigate class from header cells which can be achieved in the renderCell event as shown in the following code example.

CSHTML

@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>

Data.cs

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