Prevent the Date Navigation

11 Jul 20242 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

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

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