feat: try layout.

demo/Ursa.Demo/Pages/DatePickerDemo.axaml

@@ -5,7 +5,7 @@
              xmlns:u="https://irihi.tech/ursa"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Ursa.Demo.Pages.DatePickerDemo">
-    <StackPanel Margin="20" Spacing="5">
+    <StackPanel Margin="20" HorizontalAlignment="Left">
         <u:CalendarDayButton />
         <u:CalendarDayButton IsSelected="True" />
         <u:CalendarDayButton IsBlackout="True" />
@@ -30,5 +30,6 @@
             <u:CalendarDayButton IsEndDate="True" IsInRange="True" />
             <u:CalendarDayButton IsInRange="True" />
         </StackPanel>
+        <u:Calendar/>
     </StackPanel>
 </UserControl>

src/Ursa.Themes.Semi/Controls/Calendar.axaml

@@ -28,13 +28,15 @@
                 <u:CalendarDayButton IsEndDate="True" IsInRange="True" />
                 <u:CalendarDayButton IsInRange="True" />
             </StackPanel>
+
+            <u:Calendar />
         </StackPanel>
     </Design.PreviewWith>
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type u:CalendarDayButton}" TargetType="u:CalendarDayButton">
         <Setter Property="Width" Value="32" />
         <Setter Property="Height" Value="32" />
-        <Setter Property="Margin" Value="0 2"></Setter>
+        <Setter Property="Margin" Value="0 2" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="BorderBrush" Value="Transparent" />
         <Setter Property="BorderThickness" Value="1" />
@@ -52,8 +54,8 @@
                             Name="PART_ContentPresenter"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
-                            Foreground="{TemplateBinding Foreground}"
+                            Content="{TemplateBinding Content}"
-                            Content="1" />
+                            Foreground="{TemplateBinding Foreground}" />
                     </Border>
                 </Panel>
             </ControlTemplate>
@@ -131,4 +133,130 @@
             <Setter Property="Cursor" Value="No" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:Calendar}" TargetType="u:Calendar">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:Calendar">
+                <Panel>
+                    <Grid Name="{x:Static u:Calendar.PART_MonthView}" RowDefinitions="Auto, *">
+                        <Grid Grid.Row="0" ColumnDefinitions="Auto, Auto,*, Auto, Auto">
+                            <Button
+                                Name="{x:Static u:Calendar.PART_PreviousYearButton}"
+                                Grid.Column="0"
+                                HorizontalContentAlignment="Left"
+                                Foreground="{TemplateBinding Foreground}"
+                                Theme="{DynamicResource BorderlessButton}">
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource CalendarItemPreviousIconGlyph}"
+                                    Foreground="{DynamicResource CalendarItemIconForeground}" />
+                            </Button>
+
+                            <Button
+                                Name="{x:Static u:Calendar.PART_PreviousButton}"
+                                Grid.Column="1"
+                                HorizontalContentAlignment="Left"
+                                Foreground="{TemplateBinding Foreground}"
+                                Theme="{DynamicResource BorderlessButton}">
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource CalendarItemPreviousIconGlyph}"
+                                    Foreground="{DynamicResource CalendarItemIconForeground}" />
+                            </Button>
+
+                            <Button
+                                Name="PART_HeaderButton"
+                                Grid.Column="2"
+                                HorizontalContentAlignment="Center"
+                                Content="Apr 2024"
+                                Foreground="{TemplateBinding Foreground}"
+                                Theme="{DynamicResource BorderlessButton}" />
+
+                            <Button
+                                Name="{x:Static u:Calendar.PART_NextButton}"
+                                Grid.Column="3"
+                                HorizontalContentAlignment="Left"
+                                Foreground="{TemplateBinding Foreground}"
+                                Theme="{DynamicResource BorderlessButton}">
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource CalendarItemNextIconGlyph}"
+                                    Foreground="{DynamicResource CalendarItemIconForeground}" />
+                            </Button>
+                            <Button
+                                Name="{x:Static u:Calendar.PART_NextYearButton}"
+                                Grid.Column="4"
+                                HorizontalContentAlignment="Left"
+                                Foreground="{TemplateBinding Foreground}"
+                                Theme="{DynamicResource BorderlessButton}">
+                                <PathIcon
+                                    Width="12"
+                                    Height="12"
+                                    Data="{DynamicResource CalendarItemNextIconGlyph}"
+                                    Foreground="{DynamicResource CalendarItemIconForeground}" />
+                            </Button>
+                        </Grid>
+                        <Grid Grid.Row="1" ColumnDefinitions="*, *, *, *, *, *, *">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" MinHeight="24" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <TextBlock
+                                Grid.Row="0"
+                                Grid.Column="0"
+                                HorizontalAlignment="Center"
+                                Text="M" />
+                            <TextBlock
+                                Grid.Row="0"
+                                Grid.Column="1"
+                                HorizontalAlignment="Center"
+                                Text="T" />
+                            <TextBlock
+                                Grid.Row="0"
+                                Grid.Column="2"
+                                HorizontalAlignment="Center"
+                                Text="W" />
+                            <TextBlock
+                                Grid.Row="0"
+                                Grid.Column="3"
+                                HorizontalAlignment="Center"
+                                Text="T" />
+                            <TextBlock
+                                Grid.Row="0"
+                                Grid.Column="4"
+                                HorizontalAlignment="Center"
+                                Text="F" />
+                            <TextBlock
+                                Grid.Row="0"
+                                Grid.Column="5"
+                                HorizontalAlignment="Center"
+                                Text="S" />
+                            <TextBlock
+                                Grid.Row="0"
+                                Grid.Column="6"
+                                HorizontalAlignment="Center"
+                                Text="S" />
+                            <Rectangle
+                                Grid.Column="0"
+                                Grid.Row="1"
+                                Grid.ColumnSpan="7"
+                                Height="1"
+                                HorizontalAlignment="Stretch"
+                                Fill="{DynamicResource SemiGrey2}" />
+                            
+                        </Grid>
+                    </Grid>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>

src/Ursa/Controls/DateTimePicker/Calendar.cs

@@ -1,12 +1,32 @@
 using Avalonia;
 using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
 using Avalonia.Interactivity;
 
 namespace Ursa.Controls;
 
+[TemplatePart(PART_NextYearButton, typeof(Button))]
+[TemplatePart(PART_PreviousYearButton, typeof(Button))]
+[TemplatePart(PART_NextButton, typeof(Button))]
+[TemplatePart(PART_PreviousButton, typeof(Button))]
+[TemplatePart(PART_HeaderButton, typeof(Button))]
+[TemplatePart(PART_BackButton, typeof(Button))]
+[TemplatePart(PART_MonthView, typeof(Panel))]
+[TemplatePart(PART_YearView, typeof(Panel))]
 public class Calendar: TemplatedControl
 {
+    public const string PART_NextYearButton = "PART_NextYearButton";
+    public const string PART_PreviousYearButton = "PART_PreviousYearButton";
+    public const string PART_NextButton = "PART_NextButton";
+    public const string PART_PreviousButton = "PART_PreviousButton";
+    public const string PART_HeaderButton = "PART_HeaderButton";
+    public const string PART_BackButton = "PART_BackButton";
+    public const string PART_MonthView = "PART_MonthView";
+    public const string PART_YearView = "PART_YearView";
+    
+    
     public static readonly StyledProperty<DateTime> SelectedDateProperty = AvaloniaProperty.Register<Calendar, DateTime>(nameof(SelectedDate), DateTime.Now);
     public DateTime SelectedDate
     {

src/Ursa/Controls/DateTimePicker/CalendarDayButton.cs

@@ -99,6 +99,9 @@ public class CalendarDayButton: ContentControl
     }
     
     private bool _isBlackout;
+    /// <summary>
+    /// Notice: IsBlackout is not equivalent to not IsEnabled. Blackout dates still react to pointerover actions. 
+    /// </summary>
     public bool IsBlackout
     {
         get => _isBlackout;
@@ -117,7 +120,6 @@ public class CalendarDayButton: ContentControl
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        PseudoClasses.Set(PseudoClassName.PC_Disabled, IsEnabled);
         PseudoClasses.Set(PC_Today, IsToday);
         PseudoClasses.Set(PC_StartDate, IsStartDate);
         PseudoClasses.Set(PC_EndDate, IsEndDate);