RadScheduler Scroll to Time Slot Dynamically

2 posts, 0 answers
  1. Marlin
    Marlin avatar
    2 posts
    Member since:
    Oct 2016

    Posted 14 May 2020 Link to this post

    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).
  2. Peter Milchev
    Peter Milchev avatar
    880 posts

    Posted 19 May 2020 Link to this post

    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:

    <telerik:RadCodeBlock runat="server">
            function pageLoadHandler() {
                var scheduler = $find("<%= RadScheduler1.ClientID %>");
                var $timeslot = $telerik.$(scheduler.get_element()).find(".starter-timeslot");
                if ($timeslot.length>0) {
                    setTimeout(function () {
                // Sys.Application.remove_load(pageLoadHandler);  
    <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"



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



    Peter Milchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top