Customize ColumnHeaderDateFormat

[CLAUDE LLOP]

Hi,
I would like to customize my ColumnHeaderDateFormat with every hour of my TimeLabelSpan (see screenshots attached : now and after)
Here is my source code :

                rsPlanning.TimelineView.SlotDuration = TimeSpan.Parse("01:00:00");
                rsPlanning.TimelineView.TimeLabelSpan = 8;
                rsPlanning.TimelineView.NumberOfSlots = 24;
                rsPlanning.TimelineView.ColumnHeaderDateFormat = "HH:mm";
                rsPlanning.TimelineView.HeaderDateFormat = "dddd";
                rsPlanning.TimelineView.EnableExactTimeRendering = true;
                rsPlanning.TimelineView.StartTime = TimeSpan.Parse("05:00:00");
                rsPlanning.ShowNavigationPane = true;
                rsPlanning.EnableDatePicker = false;










How I can edit my TimelineView to have my screenshot names after ? 

[Peter]

Hi Claude,

The merge of the header cells in your current view is caused by setting rsPlanning.TimelineView.TimeLabelSpan = 8; . So if you want to achieve the appearance from the second image, simply do not set this property and leave it to its default value of 1.

Kind regards,
Peter
the Telerik team

[CLAUDE LLOP]

Thanks for your reply. But I want to keep 3 blocks of 8 hours with separation bar !
Is it possible ?

[Peter]

Hi Claude,

Please, try the following:

<script type="text/javascript">

       function pageLoad() {

           var $ = $telerik.$;
           var sch = $find('<%=rsPlanning.ClientID %>');
           var schElement = sch.get_element();
           var numberOfColumns = $(".rsHorizontalHeaderTable tr:nth-child(2) > th", schElement).size() / 3;

           $(".rsHorizontalHeaderTable tr:first > th:not('th:last')", schElement).css("border-right", "solid 2px black");
           $(".rsHorizontalHeaderTable tr:nth-child(2) > th:not('th:last')", schElement).each(function(i) {
               if ((i + 1) % numberOfColumns == 0)

                   $(this).css("border-right", "solid 2px black");
           });
       }

   </script>
   <telerik:RadScheduler runat="server" ID="rsPlanning"
       SelectedView="TimelineView" ontimeslotcreated="rsPlanning_TimeSlotCreated">
   </telerik:RadScheduler>

protected void Page_Load(object sender, EventArgs e)
   {
       rsPlanning.TimelineView.SlotDuration = TimeSpan.Parse("01:00:00");
       rsPlanning.TimelineView.TimeLabelSpan = 8;
       rsPlanning.TimelineView.NumberOfSlots = 24;
       rsPlanning.TimelineView.ColumnHeaderDateFormat = "HH:mm";
       rsPlanning.TimelineView.HeaderDateFormat = "dddd";
       rsPlanning.TimelineView.EnableExactTimeRendering = true;
       rsPlanning.TimelineView.StartTime = TimeSpan.Parse("05:00:00");
       rsPlanning.ShowNavigationPane = true;
       rsPlanning.EnableDatePicker = false;
   }

   protected void rsPlanning_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
   {
       if (rsPlanning.SelectedView == SchedulerViewType.TimelineView)
       {
           if ((e.TimeSlot.End.Hour == 13) || (e.TimeSlot.End.Hour == 21))
           {
               e.TimeSlot.Control.Style.Add("border-right", "solid 2px black");
           }
       }
   }

   protected override void OnInit(EventArgs e)
   {
       base.OnInit(e);
       rsPlanning.Provider = new XmlSchedulerProvider(Server.MapPath("~/App_Data/Appointments.xml"), true);
   }

Attached is a sample for reference.

All the best,
Peter
the Telerik team

[CLAUDE LLOP]

Thank you so much !
It's working fine, I just had to add a few modifications.