Enable scroll option on all-day section

21 Dec 20222 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

<ejs-schedule height="550" selectedDate="new DateTime(2021, 3, 28)" enableAllDayScroll="true">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments">
        <e-eventsettings-fields id="Id">
            <e-field-subject name="Subject"></e-field-subject>
            <e-field-isallday name="IsAllDay"></e-field-isallday>
            <e-field-starttime name="StartTime"></e-field-starttime>
            <e-field-endtime name="EndTime"></e-field-endtime>
        </e-eventsettings-fields>
    </e-schedule-eventsettings>
</ejs-schedule>

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