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

    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