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

[John]

how to display current month all week with custom header using timeline control (attached Image - week.png) (lang - vb.net)

[Hristo]

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

[John]

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

[Hristo]

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

[Victor]

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

[Hristo]

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

[Victor]

Hello Hristo,

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

Kind regards

Victor

[Hristo]

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

[Victor]

Thanks Hristo!

[Victor]

 

 

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

[Hristo]

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