Remove Gray Style for Readonly appoiments

[Ronak]

Hello,
I am using ScheduleView Control to Display all events as readOnly but after doing this it doesn't look like Office Black Theme which is i am using you can see it in action here http://www.music.udel.edu/news-events/Pages/test.aspx
How can i set style to look like Office Black and also it displaying 2 tooltips both default and custom one.
Please advise

Thanks
Ronak

[Dani]

Hi Ronak,

The template of the AppointmentItem itself contains a visual element responsible for the ReadOnly visual state of all appointments. You can remove that by removing the following rectangle in the AppointmentItemHorizontalControlTemplate and the AppointmentItemVerticalControlTemplate:

<Rectangle x:Name="ReadOnlyVisual" Margin="2" Visibility="Collapsed" Fill="{StaticResource AppoinmtentItemBackground_ReadOnly}" />

Also, remove the animation in the visual state manager that is responsible for this state:

<VisualState x:Name="ReadOnly">
<!-- remove this StoryBoard-->
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0:0:0.0" Storyboard.TargetName="ReadOnlyVisual" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>

As a whole I would suggest that you create your custom AppointmentStyleSelector and make those changes upon the styles from that selector. You would need this selector for the tooltips part as well. Since the ToolTip is a part of the appointment item, by providing a different template for the Appointment, you can also provide a separate tooltip for each appointment style.

You can see this in action in the FirstLook example of  RadScheduleView. The example contains two different tooltip styles sharing one and the same template and also using two different images as a content template in the separate styles. You can check the source code and search for the MySinglePlayGamesToolTipStyle and  OthersGamesToolTipStyle.

Please, also check a similar forum thread. It contains a sample project that has the readonly visual elements for the appointment item removed.

I hope this helps.

Greetings,
Dani
the Telerik team

[Ronak]

Thanks Dani for your Quick reply.
i will try this and let you know

Thanks
Ronak

[Ronak]

Thanks Dhani i am not getting it works sorry to say but schedulerView Control is more complex then Scheduler
i am trying to Migrate Scheduler example from here to scheduleView but not getting work ToolTip and cant remove gray style
http://wwwtest.music.udel.edu/news-events/Pages/calendar.aspx

Please advise
Thanks
Ronak

[Dani]

Hello Ronak,

Which part do you experience difficulties with? Did you manage to create and apply an AppointmentStyleSelector to your ScheduleView?

Please, send a sample if possible, so that we can check what is not working.

Regards,
Dani
the Telerik team

[Ronak]

Thanks Dani for your quick reply.
Well to begin with  i am using third Party ToolTip control as i want to make tooltip visible for more then 10 sec.
second do i need to create a class derived from OrientedAppointmentItemStyleSelector ? i don't have resources

i cant attach as it allows only 2MB

Thanks
Ronak

[Dani]

Hi Ronak,

You do not need to actually inherit the AppointmentItemStyleSelector. You only need to use it. The following is the default AppointmentItemStyleSelector as generated from Expression Blend together with the default AppointmentItemBaseStyle, which you can modify to accomplish the task with the ReadOnly visual state.

I am not sure how exactly you are using the third-party tooltip. But what you can do with the AppointmentStyleSelector is to have a separate UI element that can serve as a tooltip. You already have the visual states and in the MouseOver state you can display the tooltip-to-be with a smooth animation and a delay of your choice. The benefit here is that you have the control over the animation delay and that you can have a different tooltip for different appointments.

Here are the resources related to the AppointmentItemStyleSelector and AppointmentItemBaseStyle:

<SolidColorBrush x:Key="RadScheduleForeground" Color="Black"/>
       <LinearGradientBrush x:Key="AppointmentItemBackground" EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="White"/>
           <GradientStop Color="#FFD4D4D4" Offset="1"/>
       </LinearGradientBrush>
       <SolidColorBrush x:Key="AppointmentItemOuterBorder" Color="#FF848484"/>
       <DataTemplate x:Key="AppointmentItemTemplate">
           <TextBlock TextWrapping="Wrap" Text="{Binding Subject}" TextTrimming="WordEllipsis"/>
       </DataTemplate>
       <SolidColorBrush x:Key="AppointmentItemInnerBorder" Color="#FFFFFFFF"/>
       <SolidColorBrush x:Key="AppointmentItemOuterBorder_MouseOver" Color="#FFFFC92B"/>
       <LinearGradientBrush x:Key="AppointmentItemBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="#FFFFFBA3" Offset="1"/>
           <GradientStop Color="#FFFFFBDA" Offset="0"/>
       </LinearGradientBrush>
       <SolidColorBrush x:Key="AppointmentItemInnerBorder_MouseOver" Color="#FFFFFFFF"/>
       <SolidColorBrush x:Key="AppoinmtentItemBackground_ReadOnly" Color="#B2BABFC6"/>
       <telerik:NullToVisibilityConverter x:Key="NullToVisibilityConverter"/>
       <ImageSource x:Key="AppointmentItem_Recurrence">/Telerik.Windows.Controls.ScheduleView;component/Themes/Images/AppointmentException.png</ImageSource>
       <telerik:RecurrenceStateIsExeptionToVisibilityConverter x:Key="RecurrenceStateIsExeptionToVisibilityConverter"/>
       <ImageSource x:Key="AppointmentItem_Exception">/Telerik.Windows.Controls.ScheduleView;component/Themes/Images/AppointmentRecurrence.png</ImageSource>
       <telerik:RecurrenceStateIsOccurenceToVisibilityConverter x:Key="RecurrenceStateIsOccurenceToVisibilityConverter"/>
       <SolidColorBrush x:Key="AppointmentItemResizeGripStroke" Color="#FF444444"/>
       <SolidColorBrush x:Key="AppointmentItemResizeGripBackground" Color="#FFFFFFFF"/>
       <SolidColorBrush x:Key="AppointmentItemDeleteIconStroke" Color="#FF444444"/>
       <LinearGradientBrush x:Key="AppointmentItemBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="#FFFCE79F" Offset="1"/>
           <GradientStop Color="#FFFDD3A8"/>
       </LinearGradientBrush>
       <SolidColorBrush x:Key="AppointmentItemOuterBorder_Selected" Color="#FFFFC92B"/>
       <SolidColorBrush x:Key="AppointmentItemInnerBorder_Selected" Color="#FFFFFFFF"/>
       <ControlTemplate x:Key="AppointmentItemHorizontalControlTemplate" TargetType="telerik:AppointmentItem">
           <Grid x:Name="Root">
               <telerik:CommandManager.InputBindings>
                   <telerik:InputBindingCollection>
                       <telerik:MouseBinding Command="local:RadScheduleViewCommands.EditAppointment" Gesture="LeftDoubleClick"/>
                   </telerik:InputBindingCollection>
               </telerik:CommandManager.InputBindings>
               <VisualStateManager.VisualStateGroups>
                   <VisualStateGroup x:Name="CommonStates">
                       <VisualState x:Name="Normal">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.200" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverOverlay">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.200">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Collapsed</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <DoubleAnimation BeginTime="0:0:0.0" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverOverlay"/>
                           </Storyboard>
                       </VisualState>
                       <VisualState x:Name="MouseOver">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.400" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverOverlay">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <DoubleAnimation BeginTime="0:0:0.200" Duration="0:0:0.200" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverOverlay"/>
                           </Storyboard>
                       </VisualState>
                       <VisualState x:Name="ReadOnly">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ReadOnlyVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                           </Storyboard>
                       </VisualState>
                   </VisualStateGroup>
                   <VisualStateGroup x:Name="SelectionStates">
                       <VisualState x:Name="Unselected"/>
                       <VisualState x:Name="Selected">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemBackground_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemOuterBorder_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CommonStatesVisualInnerBorder">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemInnerBorder_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                           </Storyboard>
                       </VisualState>
                   </VisualStateGroup>
               </VisualStateManager.VisualStateGroups>
               <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
                   <Border BorderBrush="{StaticResource AppointmentItemInnerBorder}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"/>
               </Border>
               <Border x:Name="CommonStatesVisual" BorderBrush="{StaticResource AppointmentItemOuterBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AppointmentItemBackground_MouseOver}" CornerRadius="2" Visibility="Collapsed">
                   <Border x:Name="CommonStatesVisualInnerBorder" BorderBrush="{StaticResource AppointmentItemInnerBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"/>
               </Border>
               <Border x:Name="PART_Category" Background="{Binding Category.CategoryBrush}" Margin="2"/>
               <Rectangle x:Name="ReadOnlyVisual" Fill="{StaticResource AppoinmtentItemBackground_ReadOnly}" Margin="2" Visibility="Collapsed"/>
               <Grid Margin="2">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
                   <Border x:Name="PART_TimeMarker" Background="{Binding TimeMarker.TimeMarkerBrush}" Grid.Column="0" HorizontalAlignment="Left" Visibility="{Binding TimeMarker, Converter={StaticResource NullToVisibilityConverter}}" Width="5"/>
                   <StackPanel Grid.Column="1" Margin="0 3 0 0" VerticalAlignment="Top">
                       <Image x:Name="RecurrenceMark" Grid.Column="0" HorizontalAlignment="Left" Height="10" Margin="2 1 1 0" Source="{StaticResource AppointmentItem_Recurrence}" Visibility="{Binding RecurrenceState, Converter={StaticResource RecurrenceStateIsExeptionToVisibilityConverter}}" Width="10"/>
                       <Image x:Name="ExceptionMark" Grid.Column="0" HorizontalAlignment="Left" Height="10" Margin="2 1 1 0" Source="{StaticResource AppointmentItem_Exception}" Visibility="{Binding RecurrenceState, Converter={StaticResource RecurrenceStateIsOccurenceToVisibilityConverter}}" Width="10"/>
                   </StackPanel>
                   <ContentPresenter Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
               </Grid>
               <Grid x:Name="MouseOverOverlay" Opacity="0" Visibility="Collapsed">
                   <Border x:Name="PART_StartResizeGrip" telerik:RadDragAndDropManager.AllowDrag="true" Background="Transparent" Cursor="SizeWE" HorizontalAlignment="Left" VerticalAlignment="Stretch">
                       <StackPanel x:Name="StartResizeGrip" HorizontalAlignment="Center" Margin="1" VerticalAlignment="Center">
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                       </StackPanel>
                   </Border>
                   <Border x:Name="PART_EndResizeGrip" telerik:RadDragAndDropManager.AllowDrag="true" Background="Transparent" Cursor="SizeWE" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                       <StackPanel x:Name="EndResizeGrip" HorizontalAlignment="Center" Margin="1" VerticalAlignment="Center">
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                       </StackPanel>
                   </Border>
                   <telerik:RadButton x:Name="DeleteButton" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="local:RadScheduleViewCommands.DeleteAppointment" HorizontalAlignment="Right" Height="11" IsTabStop="False" Margin="5" Padding="0" telerik:StyleManager.Theme="{StaticResource Theme}" VerticalAlignment="Top" Width="11">
                       <Path Data="M0,0 L5,5 M5,0 L0,5" Stroke="{StaticResource AppointmentItemDeleteIconStroke}"/>
                   </telerik:RadButton>
               </Grid>
           </Grid>
       </ControlTemplate>
       <Style x:Key="AppointmentItemBaseStyle" TargetType="telerik:AppointmentItem">
           <Setter Property="Background" Value="{StaticResource AppointmentItemBackground}"/>
           <Setter Property="BorderBrush" Value="{StaticResource AppointmentItemOuterBorder}"/>
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
           <Setter Property="VerticalContentAlignment" Value="Stretch"/>
           <Setter Property="Foreground" Value="{StaticResource RadScheduleForeground}"/>
           <Setter Property="BorderThickness" Value="1"/>
           <Setter Property="Padding" Value="2 0 0 0"/>
           <Setter Property="ContentTemplate" Value="{StaticResource AppointmentItemTemplate}"/>
           <Setter Property="Template" Value="{StaticResource AppointmentItemHorizontalControlTemplate}"/>
           <Setter Property="Canvas.ZIndex" Value="1"/>
       </Style>
       <ControlTemplate x:Key="AppointmentItemVerticalControlTemplate" TargetType="telerik:AppointmentItem">
           <Grid x:Name="Root">
               <telerik:CommandManager.InputBindings>
                   <telerik:InputBindingCollection>
                       <telerik:MouseBinding Command="local:RadScheduleViewCommands.EditAppointment" Gesture="LeftDoubleClick"/>
                   </telerik:InputBindingCollection>
               </telerik:CommandManager.InputBindings>
               <VisualStateManager.VisualStateGroups>
                   <VisualStateGroup x:Name="CommonStates">
                       <VisualState x:Name="Normal">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.200" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverOverlay">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.200">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Collapsed</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <DoubleAnimation BeginTime="0:0:0.0" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverOverlay"/>
                           </Storyboard>
                       </VisualState>
                       <VisualState x:Name="MouseOver">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.400" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverOverlay">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <DoubleAnimation BeginTime="0:0:0.200" Duration="0:0:0.200" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverOverlay"/>
                           </Storyboard>
                       </VisualState>
                       <VisualState x:Name="ReadOnly">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ReadOnlyVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                           </Storyboard>
                       </VisualState>
                   </VisualStateGroup>
                   <VisualStateGroup x:Name="SelectionStates">
                       <VisualState x:Name="Unselected"/>
                       <VisualState x:Name="Selected">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemBackground_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemOuterBorder_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CommonStatesVisualInnerBorder">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemInnerBorder_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                           </Storyboard>
                       </VisualState>
                   </VisualStateGroup>
               </VisualStateManager.VisualStateGroups>
               <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
                   <Border BorderBrush="{StaticResource AppointmentItemInnerBorder}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"/>
               </Border>
               <Border x:Name="CommonStatesVisual" BorderBrush="{StaticResource AppointmentItemOuterBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AppointmentItemBackground_MouseOver}" CornerRadius="2" Visibility="Collapsed">
                   <Border x:Name="CommonStatesVisualInnerBorder" BorderBrush="{StaticResource AppointmentItemInnerBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"/>
               </Border>
               <Border x:Name="PART_Category" Background="{Binding Category.CategoryBrush}" Margin="2"/>
               <Rectangle x:Name="ReadOnlyVisual" Fill="{StaticResource AppoinmtentItemBackground_ReadOnly}" Margin="2" Visibility="Collapsed"/>
               <Grid Margin="2">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
                   <Border x:Name="PART_TimeMarker" Background="{Binding TimeMarker.TimeMarkerBrush}" Grid.Column="0" HorizontalAlignment="Left" Visibility="{Binding TimeMarker, Converter={StaticResource NullToVisibilityConverter}}" Width="5"/>
                   <StackPanel Grid.Column="1" Margin="0 3 0 0" VerticalAlignment="Top">
                       <Image x:Name="RecurrenceMark" Grid.Column="0" HorizontalAlignment="Left" Height="10" Margin="2 1 1 0" Source="{StaticResource AppointmentItem_Recurrence}" Visibility="{Binding RecurrenceState, Converter={StaticResource RecurrenceStateIsExeptionToVisibilityConverter}}" Width="10"/>
                       <Image x:Name="ExceptionMark" Grid.Column="0" HorizontalAlignment="Left" Height="10" Margin="2 1 1 0" Source="{StaticResource AppointmentItem_Exception}" Visibility="{Binding RecurrenceState, Converter={StaticResource RecurrenceStateIsOccurenceToVisibilityConverter}}" Width="10"/>
                   </StackPanel>
                   <ContentPresenter Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
               </Grid>
               <Grid x:Name="MouseOverOverlay" Opacity="0" Visibility="Collapsed">
                   <Border x:Name="PART_StartResizeGrip" telerik:RadDragAndDropManager.AllowDrag="true" Background="Transparent" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                       <StackPanel x:Name="StartResizeGrip" HorizontalAlignment="Center" Margin="1" Orientation="Horizontal" VerticalAlignment="Center">
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                       </StackPanel>
                   </Border>
                   <Border x:Name="PART_EndResizeGrip" telerik:RadDragAndDropManager.AllowDrag="true" Background="Transparent" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                       <StackPanel x:Name="EndResizeGrip" HorizontalAlignment="Center" Margin="1" Orientation="Horizontal" VerticalAlignment="Center">
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                       </StackPanel>
                   </Border>
                   <telerik:RadButton x:Name="DeleteButton" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="local:RadScheduleViewCommands.DeleteAppointment" HorizontalAlignment="Right" Height="11" IsTabStop="False" Margin="5" Padding="0" telerik:StyleManager.Theme="{StaticResource Theme}" VerticalAlignment="Top" Width="11">
                       <Path Data="M0,0 L5,5 M5,0 L0,5" Stroke="{StaticResource AppointmentItemDeleteIconStroke}"/>
                   </telerik:RadButton>
               </Grid>
           </Grid>
       </ControlTemplate>
       <telerik:OrientedAppointmentItemStyleSelector x:Key="AppointmentItemStyleSelector">
           <telerik:OrientedAppointmentItemStyleSelector.HorizontalStyle>
               <Style BasedOn="{StaticResource AppointmentItemBaseStyle}" TargetType="telerik:AppointmentItem">
                   <Setter Property="Margin" Value="0 1 0 0"/>
               </Style>
           </telerik:OrientedAppointmentItemStyleSelector.HorizontalStyle>
           <telerik:OrientedAppointmentItemStyleSelector.MonthViewStyle>
               <Style BasedOn="{StaticResource AppointmentItemBaseStyle}" TargetType="telerik:AppointmentItem">
                   <Setter Property="Margin" Value="2 1 2 0"/>
               </Style>
           </telerik:OrientedAppointmentItemStyleSelector.MonthViewStyle>
           <telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
               <Style BasedOn="{StaticResource AppointmentItemBaseStyle}" TargetType="telerik:AppointmentItem">
                   <Setter Property="Template" Value="{StaticResource AppointmentItemVerticalControlTemplate}"/>
                   <Setter Property="Margin" Value="1 0 0 0"/>
               </Style>
           </telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
       </telerik:OrientedAppointmentItemStyleSelector>

I hope this will be helpful.

Best wishes,
Dani
the Telerik team

[Ronak]

Thanks Dani i will try that
but  do i need to set any property in ScheduleView or just this style only ?
please advise

Ronak

[Dani]

Hello Ronak,

You simply need to set the AppointmentStyleSelector property. For example:

<telerik:RadScheduleView AppointmentStyleSelector="{StaticResource AppointmentItemStyleSelector}">
           <telerik:RadScheduleView.ViewDefinitions>
               <telerik:DayViewDefinition/>
               <telerik:WeekViewDefinition/>
               <telerik:MonthViewDefinition/>
               <telerik:TimelineViewDefinition/>
           </telerik:RadScheduleView.ViewDefinitions>
       </telerik:RadScheduleView>

Also, note that you might have to replace local:RadScheduleViewCommands with telerik:RadScheduleViewCommands.

I hope this helps.


Greetings,
Dani
the Telerik team

[Ronak]

Thanks Dhani
i have followed your step meaning delete Visual State readonly and Rectangle from horizontal and vertical template but still not getting look of Office black.my custom tooltip works only in month view and day,week view show out of box tooltip.
i am attaching xaml code of my resources.xaml file

<ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:local="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.ScheduleView"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:Controls="clr-namespace:Silverlight.Controls.ToolTips;assembly=Silverlight.Controls.ToolTips"
>

        <Telerik:Office_BlackTheme x:Key="Theme"/>
        <SolidColorBrush x:Key="RadScheduleForeground" Color="Black"/>
        <LinearGradientBrush x:Key="AppointmentItemBackground" EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="White"/>
              <GradientStop Color="#FFD4D4D4" Offset="1"/>
        </LinearGradientBrush>
       <SolidColorBrush x:Key="AppointmentItemOuterBorder" Color="#FF848484"/>
       <DataTemplate x:Key="AppointmentItemTemplate">
           <TextBlock TextWrapping="Wrap" Text="{Binding Subject}" TextTrimming="WordEllipsis"/>
       </DataTemplate>
       <SolidColorBrush x:Key="AppointmentItemInnerBorder" Color="#FFFFFFFF"/>
       <SolidColorBrush x:Key="AppointmentItemOuterBorder_MouseOver" Color="#FFFFC92B"/>
       <LinearGradientBrush x:Key="AppointmentItemBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="#FFFFFBA3" Offset="1"/>
           <GradientStop Color="#FFFFFBDA" Offset="0"/>
       </LinearGradientBrush>
       <SolidColorBrush x:Key="AppointmentItemInnerBorder_MouseOver" Color="#FFFFFFFF"/>
       <SolidColorBrush x:Key="AppoinmtentItemBackground_ReadOnly" Color="#B2BABFC6"/>
       <Telerik:NullToVisibilityConverter x:Key="NullToVisibilityConverter"/>
       <ImageSource x:Key="AppointmentItem_Recurrence">/Telerik.Windows.Controls.ScheduleView;component/Themes/Images/AppointmentException.png</ImageSource>
       <Telerik:RecurrenceStateIsExeptionToVisibilityConverter x:Key="RecurrenceStateIsExeptionToVisibilityConverter"/>
       <ImageSource x:Key="AppointmentItem_Exception">/Telerik.Windows.Controls.ScheduleView;component/Themes/Images/AppointmentRecurrence.png</ImageSource>
       <Telerik:RecurrenceStateIsOccurenceToVisibilityConverter x:Key="RecurrenceStateIsOccurenceToVisibilityConverter"/>
       <SolidColorBrush x:Key="AppointmentItemResizeGripStroke" Color="#FF444444"/>
       <SolidColorBrush x:Key="AppointmentItemResizeGripBackground" Color="#FFFFFFFF"/>
       <SolidColorBrush x:Key="AppointmentItemDeleteIconStroke" Color="#FF444444"/>
       <LinearGradientBrush x:Key="AppointmentItemBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="#FFFCE79F" Offset="1"/>
           <GradientStop Color="#FFFDD3A8"/>
       </LinearGradientBrush>
       <SolidColorBrush x:Key="AppointmentItemOuterBorder_Selected" Color="#FFFFC92B"/>
       <SolidColorBrush x:Key="AppointmentItemInnerBorder_Selected" Color="#FFFFFFFF"/>
       <LinearGradientBrush x:Key="PerformanceBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFCCFF99" Offset="0"/>
            <GradientStop Color="#FF99CC66" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="RehearsalBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFAEC4DD" Offset="0"/>
            <GradientStop Color="#FF6C92BF" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ClassBrush"  EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFE9D7EB" Offset="0"/>
            <GradientStop Color="#FFB687B8" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ExternalClientBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFF99" Offset="0"/>
            <GradientStop Color="#FFFFD351" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="CMSBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFF4CFAE" Offset="0"/>
            <GradientStop Color="#FFCB7A32" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="StudentUseBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFF7D4D2" Offset="0"/>
            <GradientStop Color="#FFE8807D" Offset="1"/>
        </LinearGradientBrush>
       <Style x:Key="AppointmentSubjectTextBox" TargetType="TextBox">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="MaxHeight" Value="50" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1" UseLayoutRounding="True">
                            <ScrollViewer BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" x:Name="ContentElement" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    <ControlTemplate x:Key="ToolTipTemplate" TargetType="ToolTip">
        <Grid Background="Transparent">
            <!--  <ToolTipService.ToolTip> -->
                     <Border CornerRadius="2" MaxWidth="350" >
                            <Grid Margin="3,8,0,15">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition  Width="45"/>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Border Grid.ColumnSpan="2" VerticalAlignment="Top" BorderBrush="#FF417542" BorderThickness="1,1,1,1" CornerRadius="2,2,2,2" HorizontalAlignment="Left">
                                    <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1">
                                        <TextBlock Text="{Binding Path=Appointment.Subject}" TextWrapping="Wrap"  FontWeight="Bold" Margin="5,0,5,0" />
                                    </Border>
                                </Border>
                                <Image Grid.Row="1"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5 5 0 0" Source="../../Images/clock.png" Width="28" Height="29" />
                                <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Margin="0 5 0 0">
                                    <TextBlock Text="{Binding Path=Appointment.Start, StringFormat='dddd dd MMM yyyy'}" Margin="0 3" FontSize="10" />
                                    <StackPanel Orientation="Horizontal" Margin="0 0 0 0">
                                        <TextBlock Text="{Binding Path=Appointment.Start, StringFormat='hh:mm tt'}" TextWrapping="Wrap" FontSize="10" />
                                        <TextBlock Text=" - " FontSize="10" />
                                        <TextBlock Text="{Binding Path=Appointment.End, StringFormat='hh:mm tt'}" TextWrapping="Wrap" FontSize="10" />
                                    </StackPanel>
                                    <TextBlock Text="{Binding Path=Appointment.Location}" TextWrapping="Wrap" FontSize="10" />
                                </StackPanel>
                                <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Path=Appointment.Body}" Margin="5 3 5 8" TextWrapping="Wrap"  />
                            </Grid>
                      </Border>
             <!-- </ToolTipService.ToolTip> -->
         </Grid>
    </ControlTemplate>
    <Style x:Key="AppoinmentToolTipStyle" TargetType="ToolTip">
        <Setter Property="Template" Value="{StaticResource ToolTipTemplate}" />
   </Style>
   <ControlTemplate x:Key="AppointmentItemHorizontalControlTemplate" TargetType="Telerik:AppointmentItem">
           <Grid x:Name="Root">
               <Telerik:CommandManager.InputBindings>
                   <Telerik:InputBindingCollection>
                          <Telerik:MouseBinding Command="local:RadScheduleViewCommands.EditAppointment" Gesture="LeftDoubleClick"/>
                   </Telerik:InputBindingCollection>
               </Telerik:CommandManager.InputBindings>
               <ToolTipService.ToolTip>
                    <ToolTip Style="{StaticResource AppoinmentToolTipStyle}"/>
               </ToolTipService.ToolTip>
               <VisualStateManager.VisualStateGroups>
                   <VisualStateGroup x:Name="CommonStates">
                       <VisualState x:Name="Normal">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.200" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverOverlay">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.200">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Collapsed</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <DoubleAnimation BeginTime="0:0:0.0" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverOverlay"/>
                           </Storyboard>
                       </VisualState>
                       <VisualState x:Name="MouseOver" >
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.400" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverOverlay">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <DoubleAnimation BeginTime="0:0:0.200" Duration="0:0:0.200" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverOverlay"/>
                           </Storyboard>
                       </VisualState>

                   </VisualStateGroup>
                   <VisualStateGroup x:Name="SelectionStates">
                       <VisualState x:Name="Unselected"/>
                       <VisualState x:Name="Selected">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                  </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemBackground_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemOuterBorder_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CommonStatesVisualInnerBorder">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemInnerBorder_Selected}"/>
                                </ObjectAnimationUsingKeyFrames>
                           </Storyboard>
                       </VisualState>
                   </VisualStateGroup>
               </VisualStateManager.VisualStateGroups>
               <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
                   <Border BorderBrush="{StaticResource AppointmentItemInnerBorder}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"/>
               </Border>
               <Border x:Name="CommonStatesVisual" BorderBrush="{StaticResource AppointmentItemOuterBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AppointmentItemBackground_MouseOver}" CornerRadius="2" Visibility="Collapsed">
                   <Border x:Name="CommonStatesVisualInnerBorder" BorderBrush="{StaticResource AppointmentItemInnerBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"/>
               </Border>
               <Border x:Name="PART_Category" Background="{Binding Category.CategoryBrush}" Margin="2"/>

               <Grid Margin="2">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
                   <Border x:Name="PART_TimeMarker" Background="{Binding TimeMarker.TimeMarkerBrush}" Grid.Column="0" HorizontalAlignment="Left" Visibility="{Binding TimeMarker, Converter={StaticResource NullToVisibilityConverter}}" Width="5"/>
                   <StackPanel Grid.Column="1" Margin="0 3 0 0" VerticalAlignment="Top">
                       <Image x:Name="RecurrenceMark" Grid.Column="0" HorizontalAlignment="Left" Height="10" Margin="2 1 1 0" Source="{StaticResource AppointmentItem_Recurrence}" Visibility="{Binding RecurrenceState, Converter={StaticResource RecurrenceStateIsExeptionToVisibilityConverter}}" Width="10"/>
                       <Image x:Name="ExceptionMark" Grid.Column="0" HorizontalAlignment="Left" Height="10" Margin="2 1 1 0" Source="{StaticResource AppointmentItem_Exception}" Visibility="{Binding RecurrenceState, Converter={StaticResource RecurrenceStateIsOccurenceToVisibilityConverter}}" Width="10"/>
                   </StackPanel>
                   <ContentPresenter Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
               </Grid>
               <Grid x:Name="MouseOverOverlay" Opacity="0" Visibility="Collapsed">
                   <Border x:Name="PART_StartResizeGrip" Telerik:RadDragAndDropManager.AllowDrag="true" Background="Transparent" Cursor="SizeWE" HorizontalAlignment="Left" VerticalAlignment="Stretch">
                       <StackPanel x:Name="StartResizeGrip" HorizontalAlignment="Center" Margin="1" VerticalAlignment="Center">
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                       </StackPanel>
                   </Border>
                   <Border x:Name="PART_EndResizeGrip" Telerik:RadDragAndDropManager.AllowDrag="true" Background="Transparent" Cursor="SizeWE" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                       <StackPanel x:Name="EndResizeGrip" HorizontalAlignment="Center" Margin="1" VerticalAlignment="Center">
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                       </StackPanel>
                   </Border>
                   <Telerik:RadButton x:Name="DeleteButton" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="local:RadScheduleViewCommands.DeleteAppointment" HorizontalAlignment="Right" Height="11" IsTabStop="False" Margin="5" Padding="0" Telerik:StyleManager.Theme="{StaticResource Theme}" VerticalAlignment="Top" Width="11">
                       <Path Data="M0,0 L5,5 M5,0 L0,5" Stroke="{StaticResource AppointmentItemDeleteIconStroke}"/>
                   </Telerik:RadButton>
               </Grid>
           </Grid>
       </ControlTemplate>
       <ControlTemplate x:Key="AppointmentItemVerticalControlTemplate" TargetType="Telerik:AppointmentItem">
           <Grid x:Name="Root">
               <Telerik:CommandManager.InputBindings>
                   <Telerik:InputBindingCollection>
                       <Telerik:MouseBinding Command="local:RadScheduleViewCommands.EditAppointment" Gesture="LeftDoubleClick"/>
                   </Telerik:InputBindingCollection>
               </Telerik:CommandManager.InputBindings>
               <VisualStateManager.VisualStateGroups>
                   <VisualStateGroup x:Name="CommonStates">
                       <VisualState x:Name="Normal">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.200" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverOverlay">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.200">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Collapsed</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <DoubleAnimation BeginTime="0:0:0.0" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverOverlay"/>
                           </Storyboard>
                       </VisualState>
                       <VisualState x:Name="MouseOver">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0.400" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverOverlay">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0.0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                               <DoubleAnimation BeginTime="0:0:0.200" Duration="0:0:0.200" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverOverlay"/>
                           </Storyboard>
                       </VisualState>

                   </VisualStateGroup>
                   <VisualStateGroup x:Name="SelectionStates">
                       <VisualState x:Name="Unselected"/>
                       <VisualState x:Name="Selected">
                           <Storyboard>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Visible</Visibility>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Background" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemBackground_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CommonStatesVisual">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemOuterBorder_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CommonStatesVisualInnerBorder">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AppointmentItemInnerBorder_Selected}"/>
                               </ObjectAnimationUsingKeyFrames>
                           </Storyboard>
                       </VisualState>
                   </VisualStateGroup>
               </VisualStateManager.VisualStateGroups>
               <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
                   <Border BorderBrush="{StaticResource AppointmentItemInnerBorder}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"/>
               </Border>
               <Border x:Name="CommonStatesVisual" BorderBrush="{StaticResource AppointmentItemOuterBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AppointmentItemBackground_MouseOver}" CornerRadius="2" Visibility="Collapsed">
                   <Border x:Name="CommonStatesVisualInnerBorder" BorderBrush="{StaticResource AppointmentItemInnerBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"/>
               </Border>
               <Border x:Name="PART_Category" Background="{Binding Category.CategoryBrush}" Margin="2"/>
               <Grid Margin="2">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>
                   <Border x:Name="PART_TimeMarker" Background="{Binding TimeMarker.TimeMarkerBrush}" Grid.Column="0" HorizontalAlignment="Left" Visibility="{Binding TimeMarker, Converter={StaticResource NullToVisibilityConverter}}" Width="5"/>
                   <StackPanel Grid.Column="1" Margin="0 3 0 0" VerticalAlignment="Top">
                       <Image x:Name="RecurrenceMark" Grid.Column="0" HorizontalAlignment="Left" Height="10" Margin="2 1 1 0" Source="{StaticResource AppointmentItem_Recurrence}" Visibility="{Binding RecurrenceState, Converter={StaticResource RecurrenceStateIsExeptionToVisibilityConverter}}" Width="10"/>
                       <Image x:Name="ExceptionMark" Grid.Column="0" HorizontalAlignment="Left" Height="10" Margin="2 1 1 0" Source="{StaticResource AppointmentItem_Exception}" Visibility="{Binding RecurrenceState, Converter={StaticResource RecurrenceStateIsOccurenceToVisibilityConverter}}" Width="10"/>
                   </StackPanel>
                   <ContentPresenter Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
               </Grid>
               <Grid x:Name="MouseOverOverlay" Opacity="0" Visibility="Collapsed">
                   <Border x:Name="PART_StartResizeGrip" Telerik:RadDragAndDropManager.AllowDrag="true" Background="Transparent" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                       <StackPanel x:Name="StartResizeGrip" HorizontalAlignment="Center" Margin="1" Orientation="Horizontal" VerticalAlignment="Center">
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                           <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                       </StackPanel>
                   </Border>
                   <Border x:Name="PART_EndResizeGrip" Telerik:RadDragAndDropManager.AllowDrag="true" Background="Transparent" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                          <StackPanel x:Name="EndResizeGrip" HorizontalAlignment="Center" Margin="1" Orientation="Horizontal" VerticalAlignment="Center">
                                   <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                                   <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                                   <Border BorderBrush="{StaticResource AppointmentItemResizeGripStroke}" BorderThickness="0,0,1,1" Background="{StaticResource AppointmentItemResizeGripBackground}" Height="3" Margin="1" Width="3"/>
                        </StackPanel>
                   </Border>
                   <Telerik:RadButton x:Name="DeleteButton" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="local:RadScheduleViewCommands.DeleteAppointment" HorizontalAlignment="Right" Height="11" IsTabStop="False" Margin="5" Padding="0" Telerik:StyleManager.Theme="{StaticResource Theme}" VerticalAlignment="Top" Width="11">
                       <Path Data="M0,0 L5,5 M5,0 L0,5" Stroke="{StaticResource AppointmentItemDeleteIconStroke}"/>
                   </Telerik:RadButton>
               </Grid>
           </Grid>
       </ControlTemplate>
       <Style x:Key="AppointmentItemBaseStyle" TargetType="local:AppointmentItem">
           <Setter Property="Background" Value="{StaticResource AppointmentItemBackground}"/>
           <Setter Property="BorderBrush" Value="{StaticResource AppointmentItemOuterBorder}"/>
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
           <Setter Property="VerticalContentAlignment" Value="Stretch"/>
           <Setter Property="Foreground" Value="{StaticResource RadScheduleForeground}"/>
           <Setter Property="BorderThickness" Value="1"/>
           <Setter Property="Padding" Value="2 0 0 0"/>
           <Setter Property="ContentTemplate" Value="{StaticResource AppointmentItemTemplate}"/>
           <Setter Property="Template" Value="{StaticResource AppointmentItemHorizontalControlTemplate}"/>
           <Setter Property="Canvas.ZIndex" Value="1"/>
     </Style>
     <Telerik:OrientedAppointmentItemStyleSelector x:Key="AppointmentItemStyleSelector">
            <Telerik:OrientedAppointmentItemStyleSelector.HorizontalStyle>
               <Style BasedOn="{StaticResource AppointmentItemBaseStyle}" TargetType="local:AppointmentItem">
                   <Setter Property="Margin" Value="0 1 0 0"/>
               </Style>
           </Telerik:OrientedAppointmentItemStyleSelector.HorizontalStyle>
           <Telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
               <Style BasedOn="{StaticResource AppointmentItemBaseStyle}" TargetType="local:AppointmentItem">
                   <Setter Property="Template" Value="{StaticResource AppointmentItemVerticalControlTemplate}"/>
                   <Setter Property="Margin" Value="1 0 0 0"/>
               </Style>
           </Telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
       </Telerik:OrientedAppointmentItemStyleSelector>
</ResourceDictionary>

also please advise how can i increase delay for Tooltip to 5 min so

Thanks
Ronak

[Ronak]

Hi Dhani
i figure out ToolTip display porblem in day and week view plese discard that request

Thanks
Ronak

[Dani]

Hello Ronak,

I tested the xaml you are using and it seems fine. The theme is Office Black. I am not sure I understand correctly what you are trying to achieve. Can you please share more details on the issue you are experiencing?

Kind regards,
Dani
the Telerik team

[Ronak]

Thanks Dhani
Please find the attachment of Screenshot and u will notice a grey background instead of background of black theme.
As you mentioned in your previous reply that i can set delay duration for tooptip how can  i do that.
please do let me know if you need further information.
Thanks
Ronak

[Dani]

Hi Ronak,

Thank you for the screenshot, it really helped to identify the problem. We have been discussing read-only appointments, but what you actually need to change is the style for read-only slots.

This is done with the SpecialSlotStyleSelector. Please, find more details in the Special and ReadOnly Slots help article. The article explains how to provide a different background for the read-only slots.

What I was referring to about the tooltip issue, was that you can cancel the native tooltip of RadScheduleView (set ToolTipTemplate to x:Null) and show your own visual element that resembles a tooltip. This way you will have control over the animation and the animation duration that shows that visual element. Your visual element would be a part of the AppointmentItem control template and will be shown with an animation in the MouseOver visual state.

The downside of this approach is that, since this is not a genuine tooltip, it will not be dependant on the pointer of the mouse. Furthermore, it will be displayed within the boundaries of the AppointmentItem itself (unless you set negative margins, that is).

There is no other way to affect the tooltip animation, however. As you might have noticed, the ToolTipService does not provide any attached properties for control over show and hide delays.

I hope this helps.


Greetings,
Dani
the Telerik team

[Ronak]

Thanks Dani for your reply
Please visit this link http://www.music.udel.edu/news-events/Pages/calendar.aspx and i want same look and feel in radscheduleView control now as per your suggestion i go ahead and change styles resources for SpeicalSlot.Please find it below but i didnt get look what i want please find attachment of Screenshot.If you look at screenshot i am missing border in all view.

    <SolidColorBrush x:Key="RadScheduleBackground" Color="#FFFFFFFF" />
        <LinearGradientBrush x:Key="AppointmentItemBackground" EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="White"/>
              <GradientStop Color="#FFD4D4D4" Offset="1"/>
        </LinearGradientBrush>
<Style x:Key="HighlightItemStyle" TargetType="local:HighlightItem">

    <Setter Property="BorderThickness" Value="1" />

    <Setter Property="BorderBrush" Value="{x:Null}" />

    <Setter Property="Background" Value="{StaticResource DecorationRectangleBackground}" />

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="local:HighlightItem">

                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

<local:SpecialSlotStyleSelector x:Key="SpecialSlotStyleSelector">

    <local:SpecialSlotStyleSelector.DefaultStyle>

        <Style TargetType="local:HighlightItem" BasedOn="{StaticResource HighlightItemStyle}">

            <Setter Property="BorderThickness" Value="0" />

            <Setter Property="Background" Value="{StaticResource RadScheduleBackground}" />

        </Style>

    </local:SpecialSlotStyleSelector.DefaultStyle>

    <local:SpecialSlotStyleSelector.ReadOnlyStyle>

        <Style TargetType="local:HighlightItem" BasedOn="{StaticResource HighlightItemStyle}">

            <Setter Property="BorderThickness" Value="0" />

            <Setter Property="Background" Value="{StaticResource RadScheduleBackground}" />

        </Style>

    </local:SpecialSlotStyleSelector.ReadOnlyStyle>

</local:SpecialSlotStyleSelector>

Now regarding Tooltip if look into radscheduler that link i provided i am using third party toolTip but in case of ScheduleView its showing 2 toolTip if i use third party control.
please advise

Thanks
Ronak

[Ronak]

One more thing Dani if you look attachment file of Week View it display first day of month but one week range.I just notice that

Thanks
Ronak

[Ronak]

HI Telerik team
Please advise i am having problem creating same UI that i already have in Radscheduler in ScheduleView.
please visit following link that's what i want to achieve and note toolTip its duration is set at 5 min and its third party Control which works fine with Radscheduler but having trouble in ScheduleView
http://www.music.udel.edu/news-events/Pages/calendar.aspx
i have been working on this for quite time now
please advise

Ronak

[Dani]

Hello Ronak,

It seems there are three issues you are having.

You are correctly using the SpecialSlotStyleSelector. You are simply missing a border because you have set BorderThickness to 0. Here, if you look at the XAML, you will find example readonly styles that you can use for reference.

It is currently not possible to set a delay for the tooltip different than the default one. As I explained in an earlier post, you have one option that does have its drawbacks.

If you have the tooltip issue working with RadScheduler control, please share details on your approach, so that we can give you feedback on whether this is possible with RadScheduleView.

I am not sure I understand correctly your timer ruler items issue. If the concern is that you have the first day of month next to the previous month ending day without an explicit naming, you can try customizing the time ruler items and provide a custom string format, for example.

If you have questions that are not related to read-only slots, please submit a separate forum thread.

I hope this helps.

 Greetings,
Dani
the Telerik team

[Ronak]

Thanks Dani for your reply.
i have set BorderThickness to 1 but still its not working.If you look at screenshot of WeekView you will see  30 june 2011 instead of some Week range like 1-7 june.I think its should display week range as per Out of box behavior i don't  have to any customization  as per my knowledge.

here i have used third party silverlight control in radScheduler
1.i have download dll from http://tooltipservice.codeplex.com/
2.I have created appointment template like below and set AppointmentTemplate Property in radScheduler Control.

 xmlns:Controls="clr-namespace:Silverlight.Controls.ToolTips;assembly=Silverlight.Controls.ToolTips" 
<DataTemplate x:Key="AppointmentTemplate">

    <Grid Background="Transparent">

       <!--  <ToolTipService.ToolTip> -->

        <Controls:ToolTipService.ToolTip>

           <Controls:ToolTip DisplayTime="00:05:00" InitialDelay="00:00:00" x:Name="appointmentTooltip">

                <Controls:ToolTip.Content>

                    <Border CornerRadius="2" Width="320"  >

                        <Grid Margin="3,8,0,15">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition  Width="55"/>

                                <ColumnDefinition />

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="60"/>

                                <RowDefinition Height="50"/>

                                <RowDefinition MinHeight="100" Height="Auto" />

                            </Grid.RowDefinitions>

                            <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Top" Height="50"

                                BorderBrush="#FF417542" BorderThickness="1,1,1,1" CornerRadius="2,2,2,2" Width="240" HorizontalAlignment="Left">

                                <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1"  Background="{Binding Path=Occurrence.Appointment.Category.CategoryBrush}" >

                                    <TextBlock Text="{Binding Path=Occurrence.Appointment.Subject,Mode=TwoWay}" TextWrapping="Wrap"  TextAlignment="Left" FontWeight="Bold" VerticalAlignment="Center" Height="31" Width="200" HorizontalAlignment="Left" Margin="5,0,0,0" />

                                </Border>

                            </Border>

                            <TextBlock TextWrapping="Wrap" FontStyle="Italic" Grid.Column="0" Grid.ColumnSpan="2" Width="250"  Grid.Row="1" Text="{Binding Path=Occurrence.Appointment, Converter={StaticResource DateFormatConverter},Mode=TwoWay}"  TextAlignment="Left" HorizontalAlignment="Left"/>

                            <TextBlock Margin="0,5,0,0" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextWrapping="Wrap" Text="{Binding Path=Occurrence.Appointment.Body,Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Top"  />

                        </Grid>

                    </Border>

                </Controls:ToolTip.Content>

            </Controls:ToolTip>

       </Controls:ToolTipService.ToolTip>

      <!--   </ToolTipService.ToolTip> -->

       <TextBox x:Name="PART_SubjectTextBox" Margin="7 0 5 0" VerticalAlignment="Top"  HorizontalAlignment="Stretch"

                                              Text="{Binding Path=Occurrence.Appointment.Subject,Mode=TwoWay}"

                                              IsHitTestVisible="False" Style="{StaticResource AppointmentSubjectTextBox}"

                                              Foreground="Black" TextWrapping="Wrap"  Background="Transparent"  BorderThickness="0"  />

    </Grid>

</DataTemplate>

hope this help

Thanks
Ronak

[Pana]

Hi Ronak,

You set Background on SpecialSlots. Please note that SpecialSlots, Highlights and GroupHeaders will be rendered above the TimeRulerItems so if you use solid background these items may hide the time lines.

The TimeRulerItemStyleSelector has style for the lines so if you change the style in some way you may cause them to disappear.

Greetings,
Pana
the Telerik team

[Ronak]

Thanks Pana for info but wats solution here.

Thanks
Ronak

[Dani]

Hi Ronak,

What Pana explained is correct - the time ruler lines are hidden because the special slot white background overlays them.  I suggest that you use a semitransparent background for the read only slots. For example, 40% orange (#66FFD02A), would produce the appearance in the attached screenshot. Additionally, you can change the line color of the time ruler items. For that purpose, you need to use the TimeRulerItemStyleSelector and modify the BorderBrush of the TimeRulerLineStyle.

The CurrentInterval text in WeekView indeed does show only today date in certain circumstances. This behavior was a reported bug and was fixed for the 2011 Q2 release, which is due any moment now. Please , upgrade to the newer version of RadScheduleView when available.

To modify the appointment template as you have done for the RadScheduler, in RadScheduleView you need to use the AppointmentStyleSelector. The selector contains a horizontal and a vertical appointment template. Please, try making the same tooltip customizations in both templates.

Best wishes,
Dani
the Telerik team

[Ronak]

Thanks Dani for your reply i will try your solution for Border line in all View and also looking forward to Q2 release.
for third issue actually i am able to create look and feel same as what i have in radscheduler but there is only issue is i would like to override default behivour of toolTip the default delay time and i have done this same thing in radScheduler using Third party control but its not working in case of ScheduleView.

Thanks
Ronak

[Ronak]

Thanks Dani
please find the attachment and this is look i want to achieve with read only slots.
your solutions did work but i don't want yellow background
Thanks
Ronak

[Dani]

Hi Ronak,

The screnshot you sent shows appointments with a custom style. As earlier explained you can accomplish that with the AppointmentStyleSelector. You also need the AppointmentStyleSelector to modify the template of the appointment item if you wish to integrate a third-party tooltip.

Please, check the online Appointment Style example that demonstrates the usage of the AppointmentStyleSelector.

Please, note that read-only slots is different from read-only appointments.

Regards,
Dani
the Telerik team

[Ronak]

Thanks Dani
i know that and i have done that with successfully integration with third party ToolTip Control but the only one thing is left that i can't set the background as per screenshot may be i am missing color code.i have set background to some color but its not showing Lines in all View.
This is the only thing left to successfully migrate my application from radScheduler to ScheduleView.
Also have navigation issue which will be fixed in Q2 2011 release

Thanks
Ronak

[Dani]

Hello Ronak,

Please, use semitransparent background for the read-only slots. As I pointed out in one of my earlier posts, a solid background overlays the time ruler lines. So just use transpararency in whatever color you pick, it does not necessarily need to be the yellow one.

I hope this helps.

Greetings,
Dani
the Telerik team