prs/prs.desktop/Components/Calendar/Calendar.xaml

<UserControl x:Class="PRSDesktop.Calendar"
             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:local="clr-namespace:PRSDesktop"
             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
             mc:Ignorable="d"
             d:DesignHeight="600" d:DesignWidth="800" SizeChanged="Calendar_OnSizeChanged">
    
    <UserControl.Resources>

        <Style TargetType="syncfusion:TimeRulerCell">
            <Setter Property='VerticalContentAlignment' Value="Center" />
        </Style>
        
        <Style TargetType="syncfusion:AppointmentControl">
            <Setter Property="BorderBrush" Value="DimGray" />
            <Setter Property="SelectionBorderBrush" Value="Red"/>
            <Setter Property="BorderThickness" Value="0.75"/>
            <Setter Property="Margin" Value="0,0,-8,0"/>
        </Style>

    </UserControl.Resources>
    
   <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="240" x:Name="VisibleSettingsColumn" />
            <ColumnDefinition Width="0" x:Name="HiddenSettingsColumn"/>
        </Grid.ColumnDefinitions>

        <syncfusion:SfScheduler 
            Grid.Column="0"
            Grid.Row="0"
            Name="Bookings"
            HeaderDateFormat="dd MMM yyyy"
            SizeChanged="Schedule_SizeChanged"
            AppointmentEditorOpening="Schedule_AppointmentEditorOpening"
            SchedulerContextMenuOpening="Bookings_OnSchedulerContextMenuOpening"
            AppointmentTapped="Bookings_OnAppointmentTapped"
            ViewType="Day"
            HeaderHeight="0"
            BorderThickness="1"
            BorderBrush="Silver"
            Background="Silver"
            ResourceGroupType="Date"
            FirstDayOfWeek="Monday"
            >
            
            <!-- <syncfusion:SfScheduler.AppointmentMapping> -->
            <!--     <syncfusion:AppointmentMapping -->
            <!--         Id="Id" -->
            <!--         Subject = "Subject" -->
            <!--         Notes = "Notes" -->
            <!--         StartTime="StartTime" -->
            <!--         EndTime="EndTime" -->
            <!--         AppointmentBackground="Background" -->
            <!--         Foreground="Foreground" -->
            <!--         ResourceIdCollection="ResourceIdCollection" -->
            <!--     /> -->
            <!-- </syncfusion:SfScheduler.AppointmentMapping> -->

            <syncfusion:SfScheduler.CellContextMenu>
                <ContextMenu />
            </syncfusion:SfScheduler.CellContextMenu>
                    
            <syncfusion:SfScheduler.AppointmentContextMenu>
                <ContextMenu />
            </syncfusion:SfScheduler.AppointmentContextMenu>
            
            <syncfusion:SfScheduler.DaysViewSettings>

                <syncfusion:DaysViewSettings ViewHeaderDateFormat="dd MMM yy" ViewHeaderDayFormat="dddd"
                                             ViewHeaderHeight="45" TimeRulerFormat="hh:mm tt" TimeInterval="0:30"
                                             MinimumAllDayAppointmentsCount="0">

                    <syncfusion:DaysViewSettings.ViewHeaderTemplate>
                        <DataTemplate>
                            <StackPanel Background="WhiteSmoke" Margin="-10,0,0,0" VerticalAlignment="Stretch"
                                        HorizontalAlignment="Stretch" Orientation="Vertical">
                                <Label HorizontalContentAlignment="Center" Content="{Binding DayText}" FontSize="12"
                                       Foreground="Black" FontFamily="Arial" FontWeight="Bold"
                                       VerticalContentAlignment="Bottom" Margin="0,0,0,-5" />
                                <Label HorizontalContentAlignment="Center" Content="{Binding DateText}" FontSize="10"
                                       VerticalContentAlignment="Top" />
                            </StackPanel>
                        </DataTemplate>
                    </syncfusion:DaysViewSettings.ViewHeaderTemplate>

                    <syncfusion:DaysViewSettings.AppointmentTemplate>
                        <DataTemplate>
                            <Border BorderThickness="0" Background="{Binding AppointmentBackground}" Padding="2" CornerRadius="2">
                    
                                <Border.ToolTip>
                                    <local:CalendarBlock DataContext="{Binding}" />
                                </Border.ToolTip>
                    
                                <local:CalendarBlock DataContext="{Binding}" />
                    
                            </Border>
                        </DataTemplate>
                    </syncfusion:DaysViewSettings.AppointmentTemplate>

                </syncfusion:DaysViewSettings>
            </syncfusion:SfScheduler.DaysViewSettings>
        </syncfusion:SfScheduler>

        <Grid Margin="0" Grid.Row="0" Grid.Column="1">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />                
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            
            <DockPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,0,0" >
                <Button x:Name="HideSideBar" DockPanel.Dock="Left" Content=" &#x276f; " Width="30" Margin="0,0,5,0" BorderBrush="Gray" Background="WhiteSmoke" BorderThickness="0.75" Click="HideSideBar_OnClick"/>
                <!-- <Label Grid.Row="0" Grid.Column="0" Content="View" VerticalContentAlignment="Center" Margin="5,0,0,0" /> -->
                <ComboBox x:Name="CalendarViewSelector" DockPanel.Dock="Left" SelectionChanged="CalendarViewSelector_SelectionChanged"
                          VerticalContentAlignment="Center" SelectedIndex="-1" >
                    <ComboBoxItem Content="Day" />
                    <ComboBoxItem Content="Work Week" />
                    <ComboBoxItem Content="Week" />
                </ComboBox>
            </DockPanel>
            
            
            <Border BorderBrush="Gray" BorderThickness="0.75" Padding="0,0,0,0" Grid.Row="1" Grid.Column="0"
                    Grid.ColumnSpan="2" Margin="5,5,0,5" Background="White">
                <syncfusion:CalendarEdit x:Name="DateSelector" ShowAbbreviatedMonthNames="True" AllowMultiplySelection="False"
                                         DateChanged="DateSelector_DateChanged" BorderBrush="Transparent"  />
            </Border>

            <local:EmployeeSelector 
                x:Name="EmployeeSelector" 
                Grid.Row="2" 
                Grid.RowSpan="2" 
                Grid.Column="0" 
                Grid.ColumnSpan="2"
                SettingsChanged="EmployeeSelector_OnSettingsChanged"
                SelectionChanged="EmployeeSelector_OnSelectionChanged"/>

            <Label Content="Start" Grid.Row="4" VerticalContentAlignment="Center" Margin="5,5,0,0" />
            <DockPanel Grid.Row="4" Grid.Column="1" Margin="5,5,0,0">
                <Button DockPanel.Dock="Left" Padding="2" BorderThickness="0.75,0.75,0,0.75" Background="White"
                        BorderBrush="Gray" Click="StartTimeSelector_Down_Click">
                    <Image Source="pack://application:,,,/Resources/leftarrow.png" Height="20" Width="20" />
                </Button>
                <Button DockPanel.Dock="Right" Padding="2" BorderThickness="0,0.75,0.75,0.75" Background="White"
                        BorderBrush="Gray" Click="StartTimeSelector_Up_Click">
                    <Image Source="pack://application:,,,/Resources/rightarrow.png" Height="20" Width="20" />
                </Button>
                <TextBox x:Name="StartTimeSelector" IsReadOnly="True" DockPanel.Dock="Left" BorderThickness="0,0.75,0,0.75"
                         BorderBrush="Gray" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
            </DockPanel>

            <Label Content="Finish" Grid.Row="5" VerticalContentAlignment="Center" Margin="5,5,0,0" />
            <DockPanel Grid.Row="5" Grid.Column="1" Margin="5,5,0,0">
                <Button DockPanel.Dock="Left" Padding="2" BorderThickness="0.75,0.75,0,0.75" Background="White"
                        BorderBrush="Gray" Click="FinishTimeSelector_Down_Click">
                    <Image Source="pack://application:,,,/Resources/leftarrow.png" Height="20" Width="20" />
                </Button>
                <Button DockPanel.Dock="Right" Padding="2" BorderThickness="0,0.75,0.75,0.75" Background="White"
                        BorderBrush="Gray" Click="FinishTimeSelector_Up_Click">
                    <Image Source="pack://application:,,,/Resources/rightarrow.png" Height="20" Width="20" />
                </Button>
                <TextBox x:Name="FinishTimeSelector" IsReadOnly="True" DockPanel.Dock="Left" BorderThickness="0,0.75,0,0.75"
                         BorderBrush="Gray" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
            </DockPanel>
            
            <Label Content="Assignments" Grid.Row="6" VerticalContentAlignment="Center" Margin="5,5,0,0" />
            <ComboBox 
                x:Name="AssignmentTypeSelector" 
                Grid.Row="6" 
                Grid.Column="1"
                SelectedIndex="0" 
                Margin="5,5,0,0"
                SelectionChanged="AssignmentTypeSelector_OnSelectionChanged"
                VerticalContentAlignment="Center"
                >
                <ComboBoxItem Content="Automatic" />
                <ComboBoxItem Content="Booked Time" />
                <ComboBoxItem Content="Actual Time" />
            </ComboBox>
            
            <Label Content="Background" Grid.Row="7" VerticalContentAlignment="Center" Margin="5,5,0,0" />
            <ComboBox 
                x:Name="BackgroundTypeSelector" 
                Grid.Row="7" 
                Grid.Column="1"
                SelectedIndex="0" 
                Margin="5,5,0,0"
                SelectionChanged="BackgroundTypeSelector_OnSelectionChanged"
                VerticalContentAlignment="Center"
            >
                <ComboBoxItem Content="Automatic" />
                <ComboBoxItem Content="Rosters" />
                <ComboBoxItem Content="Timesheets" />
            </ComboBox>
            
            <Label Content="Interval" Grid.Row="8" VerticalContentAlignment="Center" Margin="5,5,0,0" />
            <ComboBox 
                x:Name="IntervalSelector" 
                Grid.Row="8" 
                Grid.Column="1"
                SelectedIndex="0" 
                Margin="5,5,0,0"
                SelectionChanged="IntervalSelector_OnSelectionChanged"
                VerticalContentAlignment="Center"
            >
                <ComboBoxItem Content="Five Minutes" />
                <ComboBoxItem Content="Six Minutes" />
                <ComboBoxItem Content="Ten Minutes" />
                <ComboBoxItem Content="Fifteen Minutes" />
                <ComboBoxItem Content="Twenty Minutes" />
                <ComboBoxItem Content="Thirty Minutes" />
                <ComboBoxItem Content="Sixty Minutes" />
            </ComboBox>
            
            <Label Content="Zoom" Grid.Row="9" VerticalContentAlignment="Center" Margin="5,5,0,0" />
            <DockPanel Grid.Row="9" Grid.Column="1" Margin="5,5,0,0">
                <Button DockPanel.Dock="Left" Padding="2" BorderThickness="0.75,0.75,0,0.75" Background="White"
                        BorderBrush="Gray" Click="ZoomSelector_Down_Click">
                    <Image Source="pack://application:,,,/Resources/leftarrow.png" Height="20" Width="20" />
                </Button>
                <Button DockPanel.Dock="Right" Padding="2" BorderThickness="0,0.75,0.75,0.75" Background="White"
                        BorderBrush="Gray" Click="ZoomSelector_Up_Click">
                    <Image Source="pack://application:,,,/Resources/rightarrow.png" Height="20" Width="20" />
                </Button>
                <TextBox x:Name="ZoomSelector" IsReadOnly="True" DockPanel.Dock="Left" BorderThickness="0,0.75,0,0.75"
                         BorderBrush="Gray" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
            </DockPanel>
            
        </Grid>

       <DockPanel Grid.Row="0" Grid.Column="2">
           <Button x:Name="ShowSideBar" DockPanel.Dock="Top" Content=" &#x276e; " Margin="5,0,0,0" Padding="4" BorderBrush="Gray" Background="WhiteSmoke" BorderThickness="0.75,0.75,0.75,0" Click="ShowSideBar_OnClick"/>
           <Border DockPanel.Dock="Top" Margin="5,0,0,0" BorderBrush="Gray" Background="WhiteSmoke" BorderThickness="0.75,0,0.75,0.75">
               <Label Content="Settings" HorizontalContentAlignment="Right" Margin="0,5,0,0" Background="Transparent">
                   <Label.LayoutTransform>
                       <RotateTransform Angle="270"/>
                   </Label.LayoutTransform>
               </Label>
           </Border>
       </DockPanel>
       
    </Grid>
</UserControl>