Scheduler TimelineView

Hello, Rick,    

We already have a similar request for introducing work time for Timeline view in RadScheduler. You can track its progress, subscribe for status changes and add your comments on the following link - feedback item.

We already have a similar request for introducing work time for Timeline view in RadScheduler.

Currently, you can control how many cells to be displayed in the timeline view. This can be achieved by the SchedulerTimescale.DisplayedCellsCount and the start/end range. Additional information about the different settings that RadScheduler in Timeline view offers is available in this help article: https://docs.telerik.com/devtools/winforms/controls/scheduler/views/timeline-view

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Hi Dess,

For your feedback, we have checked the Dayview for the business hours by using the property.

Screen Shot link
It is working fine. But if Timeline view is selected it displays full 24 hours based on the selected time scale (15/30/60 minutes).
Eg: Selecting the time scale of 15 minutes it takes as 12am to 11.45pm.

We need the timeline view to display the business hours (7am-5pm) per day same as the dayview. i have attached the video link for you reference. Can you please check & suggest a method/functionality to implement the same?

Video Link

Hello, Rick,

The Timeline view's SchedulerTimescale offers the DisplayedCellsCount property. It controls how many cells will be displayed for the current view. Please refer to the following code snippet demonstrating how to show the time range from 7:00 to 17:00:  

            this.radScheduler1.ActiveViewType = SchedulerViewType.Timeline;
            SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();

            Timescales scale = Timescales.Hours;
            timelineView.ShowTimescale(scale);
            SchedulerTimescale currentScaling = timelineView.GetScaling(); 
            currentScaling.DisplayedCellsCount = 11;
            timelineView.StartDate = DateTime.Today.AddHours(7);

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Hi Dess,

Thanks for your code it is very useful and working well. It is just focusing business hours from the 24 hours. But we need it to display the business hours only from 7:00 - 17:00 & should not display other hours in all the days. i have attached the video link for you reference.Can you please check & suggest?

Video Link

        public RadForm1()
        {
            InitializeComponent();
            this.radScheduler1.ActiveViewChanged += RadScheduler1_ActiveViewChanged;
            this.radScheduler1.ActiveViewType = SchedulerViewType.Timeline;
            SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();

            Timescales scale = Timescales.Hours;
            timelineView.ShowTimescale(scale);
            SchedulerTimescale currentScaling = timelineView.GetScaling();
            currentScaling.DisplayedCellsCount = 11;
            timelineView.StartDate = DateTime.Today.AddHours(7);
        }

        private void RadScheduler1_ActiveViewChanged(object sender, SchedulerViewChangedEventArgs e)
        {
            this.radScheduler1.ActiveView.PropertyChanged += ActiveView_PropertyChanged;
        }

        private void ActiveView_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "StartDate")
            {
                this.radScheduler1.ActiveView.PropertyChanged -= ActiveView_PropertyChanged;

                if (this.radScheduler1.ActiveView.StartDate.Hour < 7)
                {
                    this.radScheduler1.ActiveView.StartDate = this.radScheduler1.ActiveView.StartDate.AddDays(-1).AddHours(1);
                }
                else if (this.radScheduler1.ActiveView.StartDate.Hour > 7)
                {
                    this.radScheduler1.ActiveView.StartDate = this.radScheduler1.ActiveView.StartDate.AddDays(1).AddHours(-1);
                }
                this.radScheduler1.ActiveView.PropertyChanged += ActiveView_PropertyChanged;
            }
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Hi Dess,

    This code is amazing and working well. On the Start date & End date the Start time starts with 0.00 and ends with 0.00. Is there any way to display only the business hours (7-5)? & the scroll does not work when clicking the spin button when it reaches towards the end of the scroll. i have attached the video for your reference.Can you please check & suggest? 

Video Link

        private void RadScheduler1_ActiveViewChanged(object sender, SchedulerViewChangedEventArgs e)
        {
            this.radScheduler1.ActiveView.PropertyChanged += ActiveView_PropertyChanged;
        }

        DateTime lastStart = DateTime.Now;
        private void ActiveView_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "StartDate")
            {
                this.radScheduler1.ActiveView.PropertyChanged -= ActiveView_PropertyChanged;

                if (this.radScheduler1.ActiveView.StartDate.Hour < 7)
                {
                    this.radScheduler1.ActiveView.StartDate = lastStart.Date.AddDays(-1).AddHours(7); 
                }
                else if (this.radScheduler1.ActiveView.StartDate.Hour > 7)
                {
                    this.radScheduler1.ActiveView.StartDate = lastStart.Date.AddDays(1).AddHours(7); 
                }
                Console.WriteLine(this.radScheduler1.ActiveView.StartDate);
                this.radScheduler1.ActiveView.PropertyChanged += ActiveView_PropertyChanged;

                lastStart = this.radScheduler1.ActiveView.StartDate;
            }
        }

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Hello Dess,

Thanks for the reply. We tried with the code snippet which was provided but still its working the same.

We will share you a demo application and video reference. Can you please check & let us know if we are missing something? 

Demo Project (The link will be valid for 6 days).

Video Link

Hello, Rick, 

Thank you for the provided sample project and video file. 

Indeed, when you reach the start/end of the range, you are not allowed to navigate to the next/previous day;s business hours. This situation can be handled by adjusting the start/end hours considering the range of the active view. 

Note that the Timeline view allows you to specify the RangeStartDate and RangeEndDate properties. Thus, you won't be allowed to navigate outside the specified range: 

            SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();
            timelineView.RangeStartDate = new DateTime(2020, 3, 10, 7, 0, 0);
            timelineView.RangeEndDate = new DateTime(2020, 3, 25, 17, 0, 0);

Please give it a try and see how it would work on your end.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Hi Dess,

    Thanks for your reply.The process works fine when the business hour timescale is set to 1 hour. But when the timescale is set to 15 minutes & 30 minutes we are not able to set the business hours within the DisplayedCellsCount.

we have changed the Timescale property as Timescales scale = Timescales.Minutes;

On the Day view, the row is resized based on the selected timescale. Is there any possibility to do the same in the timeline view? 

We have implemented the same on our project & the demo & video link mentioned below for your reference. 

Demo Video link

Project Video Link

Hello, Rick,

For the Day view, note that RadScheduler offers a dedicated ruler element which manages the start/end ruler scale. For the Timeline view, such a ruler element doesn't exist. It is necessary to manage the time range and the number of the displayed cells considering the time scale.

When you change the time scale in Timeline view, the SchedulerTimescale.DisplayedCellsCount may get reset. Hence, you will need to increase or reduce the DisplayedCellsCount according to the applied time scale. For example, for Timescales.Hours, the DisplayedCellsCount property is set to 11. For Timescales.HalfHour, set the DisplayedCellsCount property is set to 21, etc. This can be achieved in the PropertyChanged event of the ActiveView:

        private void ActiveView_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName=="ScaleVisible")
            {
                SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();

                if (timelineView != null)
                {
                    SchedulerTimescale currentScaling = timelineView.GetScaling();
                    if (currentScaling.Timescale == Timescales.Hours)
                    {
                        currentScaling.DisplayedCellsCount = 11;
                    }
                    else if (currentScaling.Timescale == Timescales.HalfHour)
                    {
                        currentScaling.DisplayedCellsCount = 21;
                    }
                    //...
                    //etc.
                }
            }
}

However, I would recommend you to hide the thumb of the scrollbar in order to manage more easily the navigation in Timeline view and use the scroll arrows:

            SchedulerTimelineViewElement element = this.radScheduler1.SchedulerElement.ViewElement as SchedulerTimelineViewElement;
            element.NavigationElement.FindDescendant<RadScrollBarElement>().ThumbElement.Visibility = ElementVisibility.Collapsed;

I hope this information helps. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik