how to display current month all week with custom header using timeline control

11 posts, 1 answers
  1. John
    John avatar
    19 posts
    Member since:
    May 2017

    Posted 16 May 2017 Link to this post

    how to display current month all week with custom header using timeline control (attached Image - week.png) (lang - vb.net)
  2. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 17 May 2017 Link to this post

    Hello John,

    Thank you for writing.

    The appropriate place to customize the header cells` text is the event handler for the CellFormatting event. Please check my code snippet below: 
    Private Sub RadScheduler1_CellFormatting(sender As Object, e As SchedulerCellEventArgs)
        If e.CellElement.[Date].DayOfWeek = DayOfWeek.Sunday Then
            If TypeOf e.CellElement Is SchedulerHeaderCellElement Then
                Dim week As Integer = CultureInfo.InvariantCulture.Calendar.GetWeekOfYear(e.CellElement.[Date], CalendarWeekRule.FirstFourDayWeek, DayOfWeek.Sunday)
                e.CellElement.Text = String.Format("Week {0} ({1} - {2})", week, e.CellElement.[Date].ToString("m"), e.CellElement.[Date].AddDays(7).ToString("m"))
            Else
                e.CellElement.ResetValue(LightVisualElement.TextProperty, ValueResetFlags.Local)
            End If
        End If
     
    End Sub

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. John
    John avatar
    19 posts
    Member since:
    May 2017

    Posted 18 May 2017 Link to this post

    Thanks haristo for giving answer

    This issue resolved but my another concern is how to display in week view as custom text and month view and year view display inbuilt header text using extend class SchedulerElementProvider

  4. Answer
    Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 18 May 2017 Link to this post

    Hi John,

    Thank you for writing back.

    In the CreateElement method of the SchedulerElementProvider, you can specify what custom elements to be created depending on the view. Then you can override the Text property of the newly created header cells: 
    public class MyElementProvider : SchedulerElementProvider
    {
        public MyElementProvider(RadScheduler scheduler)
            : base(scheduler)
        { }
     
        protected override T CreateElement<T>(SchedulerView view, object context)
        {
     
            if (view is SchedulerDayView && typeof(T) == typeof(SchedulerHeaderCellElement))
            {
                return new MyCustomSchedulerHeaderCellElement(this.Scheduler, view) as T;
            }
     
            return base.CreateElement<T>(view, context);
        }
    }

    I hope this information is useful. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Victor
    Victor avatar
    28 posts
    Member since:
    Aug 2016

    Posted 10 Sep 2018 in reply to Hristo Link to this post

    Hi,

     

    I have a similar question. How can I change the 'large' header of the timelineview. Now it says e.g. 15 Wednesday 16 Thursday, but I would like to change this with month/week etc.

     

    Hope you can help

     

    Kind regards

    Victor

  6. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 11 Sep 2018 Link to this post

    Hello Victor,

    Thank you for writing.

    The header cell in question can be customized by accessing the header row. The actual cell element will be also updated in the formatting events changing its Text so it will be necessary to cancel the TextChanging event in those cases and to update it. Please check my code snippet below: 
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
             
            this.radScheduler1.ActiveViewChanged += radScheduler1_ActiveViewChanged;
             
            this.radScheduler1.ActiveViewType = Telerik.WinControls.UI.SchedulerViewType.Timeline;
            SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();
            Timescales scale = Timescales.Hours;
            timelineView.ShowTimescale(scale);
        }
     
        private void UpdateHeader()
        {
            SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();
            SchedulerTimelineViewElement viewElement = (SchedulerTimelineViewElement)this.radScheduler1.ViewElement;
            System.Globalization.DateTimeFormatInfo dfi = DateTimeFormatInfo.CurrentInfo;
            Calendar cal = dfi.Calendar;
     
            int weekNumber = cal.GetWeekOfYear(timelineView.StartDate, dfi.CalendarWeekRule, dfi.FirstDayOfWeek);
            int yearNumber = cal.GetYear(timelineView.StartDate);
            viewElement.Header.HeaderRow.TextChanging -= HeaderRow_TextChanging;
            viewElement.Header.HeaderRow.Text = string.Format("Year #{0} Week #{1} {2}", yearNumber, weekNumber, viewElement.Header.HeaderRow.Text);
            viewElement.Header.HeaderRow.TextChanging += HeaderRow_TextChanging;
        }
     
        private void HeaderRow_TextChanging(object sender, Telerik.WinControls.TextChangingEventArgs e)
        {
            e.Cancel = true;
            this.UpdateHeader();
        }
     
        private void radScheduler1_ActiveViewChanged(object sender, SchedulerViewChangedEventArgs e)
        {
            if (e.NewView is SchedulerTimelineView)
            {
                this.UpdateHeader();
            }
        }
     
        protected override void OnShown(EventArgs e)
        {
            base.OnShown(e);
     
            this.UpdateHeader();
        }
    }

    I am also attaching a short video showing the result on my end.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Victor
    Victor avatar
    28 posts
    Member since:
    Aug 2016

    Posted 18 Sep 2018 in reply to Hristo Link to this post

    Hello Hristo,

    I get following cast error. Do you know what's wrong?

    Kind regards

    Victor

  8. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 19 Sep 2018 Link to this post

    Hello Victor,

    It appears that you are having the scheduler grouped by resources. In this case, the view element of the timeline view is TimelineGroupingByResourcesElement. You can change setting the header this way: 
    private void UpdateHeader()
    {
        SchedulerTimelineView timelineView = this.radScheduler1.GetTimelineView();
        TimelineGroupingByResourcesElement groupedViewElement = (TimelineGroupingByResourcesElement)this.radScheduler1.ViewElement;
        IList<SchedulerTimelineViewElement> viewElements = groupedViewElement.GetChildViewElements();
        System.Globalization.DateTimeFormatInfo dfi = DateTimeFormatInfo.CurrentInfo;
        Calendar cal = dfi.Calendar;
        foreach (SchedulerTimelineViewElement viewElement in viewElements)
        {
            int weekNumber = cal.GetWeekOfYear(timelineView.StartDate, dfi.CalendarWeekRule, dfi.FirstDayOfWeek);
            int yearNumber = cal.GetYear(timelineView.StartDate);
            viewElement.Header.HeaderRow.TextChanging -= HeaderRow_TextChanging;
            viewElement.Header.HeaderRow.Text = string.Format("Year #{0} Week #{1} {2}", yearNumber, weekNumber, viewElement.Header.HeaderRow.Text);
            viewElement.Header.HeaderRow.TextChanging += HeaderRow_TextChanging;
        }
    }

    I hope this will help. Let me know if you need further assistance.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Victor
    Victor avatar
    28 posts
    Member since:
    Aug 2016

    Posted 19 Sep 2018 in reply to Hristo Link to this post

    Thanks Hristo!
  10. Victor
    Victor avatar
    28 posts
    Member since:
    Aug 2016

    Posted 21 Sep 2018 Link to this post

     

     

    Hi Hristo,

    Code below works fine all but the name of the weekday.

    It still appears in English i.s.o. Dutch.

    Any Ideas?

     

     

    Kg Vic

     

    private void UpdateHeader()
            {
                try
                {

                    SchedulerTimelineView timelineView = this.timeLineRitten.GetTimelineView();
                    timelineView.CurrentCulture = new CultureInfo("nl-NL");
                    TimelineGroupingByResourcesElement groupedViewElement = (TimelineGroupingByResourcesElement)this.timeLineRitten.ViewElement;
                    if (groupedViewElement != null)
                    {
                        groupedViewElement.ResourceHeaderWidth = 150;
                        groupedViewElement.ResourcesHeader.Alignment = ContentAlignment.MiddleLeft;
                    }
                    IList<SchedulerTimelineViewElement> viewElements = groupedViewElement.GetChildViewElements();
                    System.Globalization.DateTimeFormatInfo dfi = DateTimeFormatInfo.CurrentInfo;
                    Calendar cal = dfi.Calendar;
                    foreach (SchedulerTimelineViewElement viewElement in viewElements)
                    {
                        int weekNumber = cal.GetWeekOfYear(timelineView.StartDate, dfi.CalendarWeekRule, dfi.FirstDayOfWeek);
                        int yearNumber = cal.GetYear(timelineView.StartDate);
                       
                        viewElement.Header.HeaderRow.TextChanging -= HeaderRow_TextChanging;
                        if (timelineView.StartDate.ToShortDateString() == timelineView.EndDate.ToShortDateString())
                        {
                            viewElement.Header.HeaderRow.Text = string.Format("{0} {1}", timelineView.StartDate.DayOfWeek, timelineView.StartDate.ToShortDateString());
                        }
                        else
                        {
                            viewElement.Header.HeaderRow.Text = string.Format("{0} {1} - {2} {3}", timelineView.StartDate.DayOfWeek, timelineView.StartDate.ToShortDateString(), timelineView.EndDate.DayOfWeek, timelineView.EndDate.ToShortDateString());
                        }
                        //viewElement.Header.HeaderRow.Text = string.Format("Year #{0} Week #{1} {2}", yearNumber, weekNumber, viewElement.Header.HeaderRow.Text);
                       
                        //viewElement.Header.HeaderRow.Font = new Font(viewElement.Header.HeaderRow.Font.FontFamily,16);
                        viewElement.Header.HeaderRow.Font = new Font(viewElement.Header.HeaderRow.Font.FontFamily, 16, FontStyle.Bold);
                        viewElement.Header.HeaderRow.TextChanging += HeaderRow_TextChanging;
              
                    }
                    return;
                }
                catch
                {
                    return;
                }

                return;
              
            }


  11. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 21 Sep 2018 Link to this post

    Hi Victor,

    It will be necessary to format the day according to applied culture on the view: 
    if (timelineView.StartDate.ToShortDateString() == timelineView.EndDate.ToShortDateString())
    {
        viewElement.Header.HeaderRow.Text = string.Format("{0} {1}", timelineView.StartDate.ToString(this.radScheduler1.HeaderFormat, timelineView.CurrentCulture), timelineView.StartDate.ToShortDateString());
    }
    else
    {
        viewElement.Header.HeaderRow.Text = string.Format("{0} {1} - {2} {3}", timelineView.StartDate.ToString(this.radScheduler1.HeaderFormat, timelineView.CurrentCulture), timelineView.StartDate.ToShortDateString(), timelineView.EndDate.ToString(this.radScheduler1.HeaderFormat, timelineView.CurrentCulture), timelineView.EndDate.ToShortDateString());
    }

    I hope this will help.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top