Telerik blogs

Customize the appointments in every resource group in Telerik Scheduler for Silverlight

by Valeri Hristov
November 19, 2009 Web 0 Comments


We have recently introduced a new feature  in RadScheduler for Silverlight/WPF -  Resource Grouping. Now I will tell you more about how to customize the look and feel of the appointments in every resource group including the header of this group.

All you have to do is set a ResourceStyleMapping object associated with every resource:

 

Using this object you can set the following properties:

ResourceName - the name of the resource that should be associated with this style

ResourceType - the name of the type, to which the resource belongs

ResourceBrush - the value of this property is used to set color of the header of the resource group and to set a background of the appointments in this group

AppointmentBrush - the value of this property is used to set color of the appointments in this group different from the background of the  group header

MouseOverAppointmentBrush - the value of this property is used to set color of the appointments on mouse over

SelectedAppointmentBrush - the value of this property is used to set color of the appointments when they are clicked

AppointmentTemplate – a property of type DataTemplate. Use this property to completely change the look of an appointment

<telerik:RadScheduler x:Name="scheduler"  GroupBy="Person"> 
    <telerik:RadScheduler.Resources> 
        <ImageBrush x:Key="OceanBackground" ImageSource="Ocean.png" Stretch="UniformToFill" /> 
        <ImageBrush x:Key="DiscoBackground" ImageSource="Disco.png" Stretch="UniformToFill" /> 
        <ImageBrush x:Key="RelaxBackground" ImageSource="Relax.png" Stretch="UniformToFill" /> 
        <DataTemplate x:Key="JohnAppointmentTemplate"> 
            <Grid> 
                <ToolTipService.ToolTip> 
                    <StackPanel> 
                        <Image  Source="John.jpg" /> 
                        <TextBlock Text="assigned to John" /> 
                    </StackPanel> 
  
                </ToolTipService.ToolTip> 
                <TextBlock Text="{Binding Occurrence.Appointment.Subject}" Height="20"/> 
            </Grid> 
        </DataTemplate> 
        <DataTemplate x:Key="MarryAppointmentTemplate"> 
            <Grid> 
                <ToolTipService.ToolTip> 
                    <StackPanel> 
                        <Image  Source="Marry.jpg" /> 
                        <TextBlock Text="assigned to Marry" /> 
                    </StackPanel> 
                </ToolTipService.ToolTip> 
                <TextBlock Text="{Binding Occurrence.Appointment.Subject}"/> 
            </Grid> 
        </DataTemplate> 
        <DataTemplate x:Key="SamAppointmentTemplate"> 
            <Grid> 
                <ToolTipService.ToolTip> 
                    <StackPanel> 
                        <Image  Source="Samanta.jpg" /> 
                        <TextBlock Text="assigned to Sam" /> 
                    </StackPanel> 
                </ToolTipService.ToolTip> 
                <TextBlock Text="{Binding Occurrence.Appointment.Subject}"/> 
            </Grid> 
        </DataTemplate> 
        
    </telerik:RadScheduler.Resources> 
    <telerik:RadScheduler.ResourceTypes> 
        <telerik:ResourceType Name="Person" AllowMultipleSelection="True" > 
            <telerik:ResourceType.Resources> 
                <telerik:Resource ResourceName="John" /> 
                <telerik:Resource ResourceName="Marry"  /> 
                <telerik:Resource ResourceName="Samanta"  /> 
            </telerik:ResourceType.Resources> 
        </telerik:ResourceType> 
    </telerik:RadScheduler.ResourceTypes> 
    <telerik:RadScheduler.ResourceStyleMappings> 
        <telerik:ResourceStyleMapping ResourceType="Person" ResourceName="John" ResourceBrush="{StaticResource OceanBackground}" AppointmentTemplate="{StaticResource JohnAppointmentTemplate}" /> 
        <telerik:ResourceStyleMapping ResourceType="Person" ResourceName="Marry" ResourceBrush="{StaticResource DiscoBackground}"  AppointmentTemplate="{StaticResource MarryAppointmentTemplate}"/> 
        <telerik:ResourceStyleMapping ResourceType="Person" ResourceName="Samanta" ResourceBrush="{StaticResource RelaxBackground}"  AppointmentTemplate="{StaticResource SamAppointmentTemplate}"/> 
  
    </telerik:RadScheduler.ResourceStyleMappings> 
</telerik:RadScheduler>

 

Below is a screenshot of the result you can achieve using the properties mentioned above.

style mapping

More about resource grouping and resource style mapping features of RadScheduler you can find here or  just contact us with any questions or comments.

XAML
About the Author

Valeri Hristov

Team Lead,
Platform Team

Comments

Comments are disabled in preview mode.