We received a couple of questions on how some of the days and hours in the different views of RadScheduler can be customized.

The answer of this question is in the attached application illustrating how working hours and days can be  marked in orange.

 The solution includes 3 easy steps :
  1. Create a custom theme using the default RadScheduler' theme.
  2. Create a ValueConverter returning the right color depending on the hour/day.
  3. Find the style applied to every hour(timeslot) and apply the converter to the Background property.

To create a custom theme you can follow the steps below:

  1. Create a Silverlight class library.
  2. Inherit the Telerik.Windows.Theme class.
  3. Set the Source property of the constructor of the theme.
  4. Add a Generic.xaml file containing the XAML of RadScheduler.(You can find  and use this file from the attached project)

Now it  is time to create the converter:

public class TimeSlotsWorkingHoursConverter : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
        { 
            TimeSlot slot = value as TimeSlot; 
            if (slot != null
            { 
                if (parameter != null && parameter.ToString() == "Month" && IsWorkingDay(slot) ) 
                { 
                    return new SolidColorBrush(Colors.Orange); 
                } 
                else if (IsWorkingHour(slot)) 
                { 
                    return new SolidColorBrush(Colors.Orange); 
                }  
                return new SolidColorBrush(Colors.White); 
                 
            } 
            else 
            { 
                return new SolidColorBrush(Colors.White); 
            } 
        } 
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
        { 
            throw new NotImplementedException(); 
        } 
 
        private bool IsWorkingHour(TimeSlot slot) 
        { 
            return (slot.Start.Hour >= 8 && slot.End.Hour <= 17 && slot.End.Hour > 0 &&  IsWorkingDay(slot)); 
        } 
 
        private bool IsWorkingDay(TimeSlot slot) 
        { 
            return slot.Start.DayOfWeek >= DayOfWeek.Monday && slot.End.DayOfWeek <= DayOfWeek.Saturday; 
        } 
    } 


And of course, use it:

Find the style  with a key  "OneWeekDayStyle" applied to the hours in Day and Week views and edit it, like:
 <Style x:Key="OneWeekDayStyle" TargetType="telerikScheduler:TimeSlotItem"
        <Setter  Property="Template" > 
            <Setter.Value> 
                <ControlTemplate TargetType="telerikScheduler:TimeSlotItem"
                    <Border x:Name="PART_ContentHost"   
                            Background="{Binding ., Converter={StaticResource TimeSlotsWorkingHoursConverter}}"  
                            Margin="0,0,1,1"  
                            BorderBrush="{StaticResource TimeSlotItemBorderBrush}"  
                            MinHeight="20"  
                             > 
  <telerik:CommandManager.InputBindings> 
                            <telerik:InputBindingCollection> 
                                <telerik:MouseBinding MouseAction="LeftDoubleClick" Command="telerikScheduler:RadSchedulerCommands.CreateAppointment"  /> 
                            </telerik:InputBindingCollection> 
                        </telerik:CommandManager.InputBindings> 
                         
                        <vsm:VisualStateManager.VisualStateGroups> 
                            <vsm:VisualStateGroup x:Name="CommonStates"
                                <vsm:VisualState x:Name="Normal" /> 
                                <vsm:VisualState x:Name="MouseOver" > 
                                    <Storyboard> 
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentHost" Storyboard.TargetProperty="Background" Duration="0"
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MonthTimeSlotItemOverBrush}"/> 
                                        </ObjectAnimationUsingKeyFrames> 
                                    </Storyboard> 
                                </vsm:VisualState> 
                            </vsm:VisualStateGroup> 
                            <vsm:VisualStateGroup x:Name="SelectionStates"
                                <vsm:VisualState x:Name="Unselected"/> 
                                <vsm:VisualState x:Name="Selected"
                                    <Storyboard> 
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContentHost" Storyboard.TargetProperty="Background" Duration="0"
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MonthTimeSlotItemSelectedBrush}"/> 
                                        </ObjectAnimationUsingKeyFrames> 
                                    </Storyboard> 
                                </vsm:VisualState> 
                            </vsm:VisualStateGroup> 
                        </vsm:VisualStateManager.VisualStateGroups> 
                    </Border> 
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 




Find the style with a key "MonthDayStyle" applied to the days in a Month view and edit it, like:
  <Style x:Key="MonthDayStyle" TargetType="telerikScheduler:TimeSlotItem"
        <Setter Property="Control.Template"
            <Setter.Value> 
                <ControlTemplate TargetType="telerikScheduler:TimeSlotItem"
                    <Border Name="DayBorder" 
                                BorderBrush="{StaticResource SchedulerBorderBrush}" 
                                Background="{Binding ., Converter={StaticResource TimeSlotsWorkingHoursConverter},ConverterParameter=Month}" 
                                BorderThickness="0,0,1,1" > 
                       .... 
                    </Border> 
                     
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 

And the result is shown below:

shceduler- month view


scheduler day view

Don't hesitate to leave your comments.

Download the source code.


Rossitza-Fakalieva
About the Author

Rossitza Fakalieva

Rossitza Fakalieva is Manager of the Progress Desktop UI & Tools division, which develops the UI for WPF, UI for WinForms and Telerik Reporting products. She started her career on the Telerik ASP.NET team in 2006 as a support officer and passed through the position of software developer to the position of senior manager. Off work, she enjoys cooking, watching movies and reading books.

Related Posts

Comments

Comments are disabled in preview mode.