TimeLineViewDefinition header format

[Christie Admin]

Hi,

I would like to know how it's possible in the header of each column to have only the first day instead of having the beginning and the end of the week.

Thank's
Alain

[Yana]

Hello Alain,

The required approach can be achieved by customizing the TimeRulerItemTemplateSelector property of the ScheduleView and more specifically the HorizontalTimelineGroupTemplate. 

I have attached a sample project to demonstrate exactly the approach, please download the attachment and give it a try.

Hope this helps.

Regards,
Yana
Telerik

[Christie Admin]

Hi Yana,

that's axactly what I want except one thing, can you tell me how to hide the time header, the one below the date header?

Thank's
Alain

[Yana]

Hi Alain,

In order to remove completely the time header you should customize the TimeRulerItemStyleSelector and set Height to "0" to the MajorHorizontalTickStyle and MinorHorizontalTickStyle.  I've updated the project with the needed changes. However note that in the project I have used Implicit Styles in order to make such customizations easier.

Hope this helps.

Regards,
Yana
Telerik

[Christie Admin]

Hi, Yana,

thank you so much :) I you look at the picture, I can see a display issue using the Office 2013 theme.

Thank's
Alain

[Yana]

Hi Alain,

I have tried to reproduce the issue shown in the screenshot in the sample project, but without much success.  I have attached the updated project, could you please download it and give it a try? What is different in your case?

Regards,
Yana
Telerik

[Christie Admin]

Honnestly I don't what is the difference between my project and your's :(

Here is my xaml:

<UserControl x:Class="AppointmentControls.SearchResultByWeek.SearchResultByWeek"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:AppCtrl="clr-namespace:AppointmentControls"
             xmlns:ViewModel="clr-namespace:AppointmentControls"
             xmlns:local="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.ScheduleView"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300" x:Name="Me">

    <UserControl.Resources>
        <ResourceDictionary>
            <ViewModel:ViewModel x:Key="ViewModel" />

            <local:TimeRulerItemTemplateSelector x:Key="CustomTimeRulerItemTemplateSelector">
                <local:TimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding DateTime, StringFormat=yyyy-MM-dd}" Margin="2 1" TextAlignment="Left"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
                    <DataTemplate>
                        <!--<TextBlock Text="{Binding FormattedValue}" Margin="2" TextAlignment="Left"/>-->
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="2" TextAlignment="Left"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="1 2" TextAlignment="Right">
                            <TextBlock.LayoutTransform>
                                <RotateTransform Angle="-90"/>
                            </TextBlock.LayoutTransform>
                        </TextBlock>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalTimelineMajorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalTimelineMajorItemTemplate>
                <local:TimeRulerItemTemplateSelector.VerticalTimelineMinorItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.VerticalTimelineMinorItemTemplate>
                <local:TimeRulerItemTemplateSelector.MonthGroupTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="6 2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.MonthGroupTemplate>
                <local:TimeRulerItemTemplateSelector.MonthItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FormattedValue}" Margin="6 2"/>
                    </DataTemplate>
                </local:TimeRulerItemTemplateSelector.MonthItemTemplate>
            </local:TimeRulerItemTemplateSelector>
            <Style x:Key="CustomMajorHorizontalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
                <Setter Property="Height" Value="0" />
            </Style>
            <Style x:Key="CustomMinorHorizontalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
                <Setter Property="Height" Value="0" />
            </Style>
            <local:OrientedTimeRulerItemStyleSelector x:Key="CustomTimeRulerItemStyleSelector"
            MonthViewGroupStyle="{StaticResource TimeRulerMonthViewGroupItemStyle}"
            MonthViewTickStyle="{StaticResource TimeRulerMonthViewItemStyle}"
            MonthViewTodayTickStyle="{StaticResource TimeRulerMonthViewTodayItemStyle}"
            HorizontalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle}"
            VerticalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle_Vertical}"
            MajorHorizontalTickStyle="{StaticResource CustomMajorHorizontalTimeRulerItemStyle}"
            MajorVerticalTickStyle="{StaticResource MajorVerticalTimeRulerItemStyle}"
            MinorHorizontalTickStyle="{StaticResource CustomMinorHorizontalTimeRulerItemStyle}"
            MinorVerticalTickStyle="{StaticResource MinorVerticalTimeRulerItemStyle}"
            HorizontalLineStyle="{StaticResource TimeRulerLineStyle}"
            VerticalLineStyle="{StaticResource TimeRulerLineStyle}"/>

            <Style x:Key="TimeRulerGroupItemStyle" TargetType="local:TimeRulerGroupItem">
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="Margin" Value="0 0 -1 -1" />
                <Setter Property="Panel.ZIndex" Value="100" />
                <Setter Property="Padding" Value="4 2" />                
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:TimeRulerGroupItem">
                            <telerik:RadButton BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Command="local:RadScheduleViewCommands.SetDayViewMode" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.DateTime.Date}">
                                <ContentPresenter x:Name="Content" />
                            </telerik:RadButton>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <local:OrientedTimeRulerItemStyleSelector x:Key="TimeRulerItemStyleSelector" HorizontalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle}" />

            <AppCtrl:SearchResultSlotStyleSelector x:Key="CustomSpecialSlotStyleSelector">
                <AppCtrl:SearchResultSlotStyleSelector.CustomSlotStyle>
                    <Style TargetType="telerik:HighlightItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Border Background="{Binding Slot.Background}" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </AppCtrl:SearchResultSlotStyleSelector.CustomSlotStyle>
            </AppCtrl:SearchResultSlotStyleSelector>

            <DataTemplate x:Key="FreeSlotTemplate">
                <Grid Margin="-2 0 -1 0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Ellipse Grid.Column="0" Margin="2 1 2 0" Stretch="Fill" Fill="{Binding Appointment.ResultAccuracyColor}" Width="10" Height="10" Stroke="Black" StrokeThickness="1.0" />
                    <TextBlock Grid.Column="1" Margin="0 0 0 0" Text="{Binding Appointment.Subject}"  HorizontalAlignment="Left" VerticalAlignment="Center" />
                </Grid>
            </DataTemplate>

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/System.Windows.xaml" />
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.xaml" />
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Input.xaml" />
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.ScheduleView.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="Root" DataContext="{StaticResource ViewModel}">
        <telerik:RadScheduleView x:Name="ScheduleView" Panel.ZIndex="1" SnapAppointments="True" AppointmentSelectionChanged="RadScheduleView_AppointmentSelectionChanged" AppointmentEditing="ScheduleView_AppointmentEditing" AppointmentEdited="ScheduleView_AppointmentEdited" IsInlineEditingEnabled="False" FirstDayOfWeek="Monday" ActiveViewDefinitionIndex="0" NavigationHeaderVisibility="Collapsed" MinTimeRulerExtent="200" MaxTimeRulerExtent="500" SpecialSlotStyleSelector="{StaticResource CustomSpecialSlotStyleSelector}" AppointmentItemContentTemplate="{StaticResource FreeSlotTemplate}" TimeRulerItemStyleSelector="{StaticResource TimeRulerItemStyleSelector}" ShowDialog="SearchResultView_ShowDialog" TimeRulerItemTemplateSelector="{StaticResource CustomTimeRulerItemTemplateSelector}" MouseEnter="ScheduleView_MouseEnter" MouseLeave="ScheduleView_MouseLeave">
            <telerik:RadScheduleView.ViewDefinitions>
                <telerik:TimelineViewDefinition x:Name="View" FirstDayOfWeek="Monday" GroupTickLength="7d" MinorTickLength="7d" MajorTickLength="7d" VisibleDays="70" TimerulerMajorTickStringFormat="" TimerulerMinorTickStringFormat="" MinTimeRulerExtent="600" MaxTimeRulerExtent="Infinity" StretchAppointments="True" StretchGroupHeaders="True" TimerulerGroupStringFormat="{}{0:yyyy-MM-dd}" />
            </telerik:RadScheduleView.ViewDefinitions>

            <telerik:RadScheduleView.ResourceTypesSource>
                <telerik:ResourceTypeCollection>
                    <telerik:ResourceType Name="DaysOfTheWeek">
                        <telerik:Resource ResourceName="Monday" DisplayName="Lun" />
                        <telerik:Resource ResourceName="Tuesday" DisplayName="Mar" />
                        <telerik:Resource ResourceName="Wednesday" DisplayName="Mer" />
                        <telerik:Resource ResourceName="Thursday" DisplayName="Jeu" />
                        <telerik:Resource ResourceName="Friday" DisplayName="Ven" />
                        <telerik:Resource ResourceName="Saturday" DisplayName="Sam" />
                        <telerik:Resource ResourceName="Sunday" DisplayName="Dim" />
                    </telerik:ResourceType>
                    <telerik:ResourceType Name="PartsOfTheDay">
                        <telerik:Resource ResourceName="NG" DisplayName="NU" />
                        <telerik:Resource ResourceName="AM" DisplayName="AM" />
                        <telerik:Resource ResourceName="PM" DisplayName="PM" />
                        <telerik:Resource ResourceName="EV" DisplayName="SO" />
                    </telerik:ResourceType>
                </telerik:ResourceTypeCollection>
            </telerik:RadScheduleView.ResourceTypesSource>

            <telerik:RadScheduleView.GroupDescriptionsSource>
                <telerik:GroupDescriptionCollection>
                    <telerik:ResourceGroupDescription ResourceType="DaysOfTheWeek" />
                    <telerik:ResourceGroupDescription ResourceType="PartsOfTheDay" />
                </telerik:GroupDescriptionCollection>
            </telerik:RadScheduleView.GroupDescriptionsSource>

            <telerik:RadScheduleView.DragDropBehavior>
                <AppCtrl:SearchResultCustomDragDropBehavior />
            </telerik:RadScheduleView.DragDropBehavior>
        </telerik:RadScheduleView>
    </Grid>
</UserControl>

[Yana]

Hi Alain,

Still, I am not able to replicate the issue with the provided code. Can you confirm that you're using our latest release? Is it possible to try create a runnable sample and send it to us, so we to be able to research the case? Note that you should open a support ticket and attach the sample there.

I would like to make a note here  - I've noticed that you've merged the theme resource dictionaries inside the UserControl - the recommended approach is to merge them in App.xaml, as for example, EdtiAppointmentDialog, when shown, is placed in a different visual tree and in the current way, will not receive its Style.

I am looking forward to your reply.

Regards,
Yana
Telerik