RadScheduler Scroll to Time Slot Dynamically

[Marlin]

I want to set ShowFullTime="true" and ShowFooter="false" for RadScheduler, then display it with the default start position to 8:00am (auto scroll to 8am).

[Peter Milchev]

Hello Marlin,

This can be easily achieved by setting a custom CSS class to the desired timeslot in the OnTimeSlotCreated event and then use the scrollIntoView() method of this element:

• https://www.telerik.com/support/kb/aspnet-ajax/scheduler/details/how-to-scroll-into-view-a-specific-time-slot-on-initial-page-load

<telerik:RadCodeBlock runat="server">
    <script>
        function pageLoadHandler() {
            var scheduler = $find("<%= RadScheduler1.ClientID %>");
            var $timeslot = $telerik.$(scheduler.get_element()).find(".starter-timeslot");
                       
            if ($timeslot.length>0) {
                setTimeout(function () {
                    $timeslot[0].scrollIntoView();
                })
            }

            // Sys.Application.remove_load(pageLoadHandler);  
        }
        Sys.Application.add_load(pageLoadHandler);
    </script>
</telerik:RadCodeBlock>
<telerik:RadScheduler RenderMode="Lightweight" Font-Size="14px" runat="server" ID="RadScheduler1"
    SelectedDate="2012-04-16" ShowFullTime="true" ShowFooter="false" DayStartTime="00:00:00" DayEndTime="18:00:00"
    OverflowBehavior="Auto"
    OnTimeSlotCreated="RadScheduler1_TimeSlotCreated"
    >
</telerik:RadScheduler>

 

 

private const string ProviderSessionKey = "Telerik.Web.Examples.Scheduler.XmlSchedulerProvider.DefaultCS";

// You can safely ignore this method.
// Its purpose is to limit the changes to the underlying data only to the active user session.
protected void Page_Init(object sender, EventArgs e)
{
    Telerik.Web.UI.XmlSchedulerProvider provider;
    if ((Session[ProviderSessionKey] == null) || (!IsPostBack))
    {
        provider = new Telerik.Web.UI.XmlSchedulerProvider(Server.MapPath("~/App_Data/Appointments.xml"), true);
        Session[ProviderSessionKey] = provider;
    }
    else
    {
        provider = (Telerik.Web.UI.XmlSchedulerProvider)Session[ProviderSessionKey];
    }

    RadScheduler1.Provider = provider;
}

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
{
    var scheduler = sender as RadScheduler;
    if (e.TimeSlot.Start.Date == scheduler.VisibleRangeStart.Date
        && e.TimeSlot.Start.Hour == 8 && e.TimeSlot.Start.Minute==0)
    {
        e.TimeSlot.CssClass += " starter-timeslot";
    }
}

 

 

Regards,
Peter Milchev
Progress Telerik