This is a migrated thread and some comments may be shown as answers.

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

10 Answers 103 Views
Scheduler and Reminder
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 16 May 2017, 11:04 AM
how to display current month all week with custom header using timeline control (attached Image - week.png) (lang - vb.net)

10 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 17 May 2017, 08:02 AM
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.
0
John
Top achievements
Rank 1
answered on 18 May 2017, 06:22 AM

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

0
Accepted
Hristo
Telerik team
answered on 18 May 2017, 09:50 AM
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.
0
Victor
Top achievements
Rank 2
answered on 10 Sep 2018, 04:40 PM

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

0
Hristo
Telerik team
answered on 11 Sep 2018, 08:24 AM
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.
0
Victor
Top achievements
Rank 2
answered on 18 Sep 2018, 02:43 PM

Hello Hristo,

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

Kind regards

Victor

0
Hristo
Telerik team
answered on 19 Sep 2018, 06:39 AM
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.
0
Victor
Top achievements
Rank 2
answered on 19 Sep 2018, 07:03 AM
Thanks Hristo!
0
Victor
Top achievements
Rank 2
answered on 21 Sep 2018, 10:47 AM

 

 

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


0
Hristo
Telerik team
answered on 21 Sep 2018, 12:02 PM
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.
Tags
Scheduler and Reminder
Asked by
John
Top achievements
Rank 1
Answers by
Hristo
Telerik team
John
Top achievements
Rank 1
Victor
Top achievements
Rank 2
Share this question
or