Enable scroll option on all-day section

11 Jul 20242 minutes to read

When you have larger number of appointments in all-day row, it is difficult to view all the appointments properly. In that case you can enable scroller option for all-day row by setting true to EnableAllDayScroll whereas its default value is false. When setting this property to true, individual scroller for all-day row is enabled when it reaches its maximum height on expanding.

NOTE

This property is not applicable for Scheduler with Height auto.

CSHTML

@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")
    .Height("550px")
    .EventSettings(e => e.Fields(f => f.Subject(sub => sub.Name("Subject"))
            .Id("Id")
            .IsAllDay(allday => allday.Name("IsAllDay"))
            .StartTime(st => st.Name("StartTime"))
            .EndTime(et => et.Name("EndTime"))
        )
        .DataSource(ViewBag.appointments)
    )
    .SelectedDate(new DateTime(2021, 3, 28))
    .EnableAllDayScroll(true)
    .Render()
)

Data.cs

public ActionResult Index()
{
    ViewBag.appointments = generateObject();
    return View();
}

public List<AppointmentData> generateObject()
{
    List<AppointmentData> appData = new List<AppointmentData>(25);
    for (int a = 0; a <= 25; a++)
    { 
        appData.Add(new AppointmentData
        {
            Id = a + 1,
            Subject = 'Testing',
            StartTime = new Date(2021, 3, 28),
            EndTime = new Date(2021, 3, 29),
            IsAllDay = true
        });
    }
    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; }
    public bool IsAllDay { get; set; }
}