Monthly calendar basics.

Wino.Calendar/App.xaml.cs

@@ -82,6 +82,7 @@ namespace Wino.Calendar
             services.AddTransient(typeof(CalendarSettingsPageViewModel));
             services.AddTransient(typeof(AccountManagementViewModel));
             services.AddTransient(typeof(PersonalizationPageViewModel));
+            services.AddTransient(typeof(AccountDetailsPageViewModel));
         }
 
         #endregion

Wino.Calendar/Controls/CalendarItemControl.xaml.cs

@@ -1,5 +1,4 @@
-using System.Diagnostics;
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using CommunityToolkit.Mvvm.Messaging;
 using Itenso.TimePeriod;
 using Windows.UI.Xaml;
@@ -126,7 +125,7 @@ namespace Wino.Calendar.Controls
                     CalendarItemTitle = CalendarItem.Title;
                 }
 
-                Debug.WriteLine($"{CalendarItem.Title} Period relation with {DisplayingDate.Period.ToString()}: {periodRelation}");
+                // Debug.WriteLine($"{CalendarItem.Title} Period relation with {DisplayingDate.Period.ToString()}: {periodRelation}");
             }
             else
             {

Wino.Calendar/Controls/DayColumnControl.cs

@@ -56,10 +56,15 @@ namespace Wino.Calendar.Controls
 
         private void UpdateValues()
         {
-            if (HeaderDateDayText == null || ColumnHeaderText == null || IsTodayBorder == null || DayModel == null) return;
+            if (HeaderDateDayText == null || IsTodayBorder == null || DayModel == null) return;
 
             HeaderDateDayText.Text = DayModel.RepresentingDate.Day.ToString();
-            ColumnHeaderText.Text = DayModel.RepresentingDate.ToString("dddd", DayModel.CalendarRenderOptions.CalendarSettings.CultureInfo);
+
+            // Monthly template does not use it.
+            if (ColumnHeaderText != null)
+            {
+                ColumnHeaderText.Text = DayModel.RepresentingDate.ToString("dddd", DayModel.CalendarRenderOptions.CalendarSettings.CultureInfo);
+            }
 
             AllDayItemsControl.ItemsSource = DayModel.EventsCollection.AllDayEvents;
 

Wino.Calendar/Controls/WinoCalendarControl.cs

@@ -6,6 +6,7 @@ using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Wino.Calendar.Args;
 using Wino.Calendar.ViewModels.Data;
+using Wino.Core.Domain.Enums;
 using Wino.Core.Domain.Models.Calendar;
 using Wino.Helpers;
 
@@ -30,6 +31,28 @@ namespace Wino.Calendar.Controls
         public static readonly DependencyProperty IsFlipIdleProperty = DependencyProperty.Register(nameof(IsFlipIdle), typeof(bool), typeof(WinoCalendarControl), new PropertyMetadata(true, new PropertyChangedCallback(OnIdleStateChanged)));
         public static readonly DependencyProperty ActiveScrollViewerProperty = DependencyProperty.Register(nameof(ActiveScrollViewer), typeof(ScrollViewer), typeof(WinoCalendarControl), new PropertyMetadata(null, new PropertyChangedCallback(OnActiveVerticalScrollViewerChanged)));
 
+        public static readonly DependencyProperty VerticalItemsPanelTemplateProperty = DependencyProperty.Register(nameof(VerticalItemsPanelTemplate), typeof(ItemsPanelTemplate), typeof(WinoCalendarControl), new PropertyMetadata(null, new PropertyChangedCallback(OnIsVerticalCalendarChanged)));
+        public static readonly DependencyProperty HorizontalItemsPanelTemplateProperty = DependencyProperty.Register(nameof(HorizontalItemsPanelTemplate), typeof(ItemsPanelTemplate), typeof(WinoCalendarControl), new PropertyMetadata(null, new PropertyChangedCallback(OnIsVerticalCalendarChanged)));
+        public static readonly DependencyProperty DisplayTypeProperty = DependencyProperty.Register(nameof(DisplayType), typeof(CalendarDisplayType), typeof(WinoCalendarControl), new PropertyMetadata(CalendarDisplayType.Day, new PropertyChangedCallback(OnIsVerticalCalendarChanged)));
+
+        public CalendarDisplayType DisplayType
+        {
+            get { return (CalendarDisplayType)GetValue(DisplayTypeProperty); }
+            set { SetValue(DisplayTypeProperty, value); }
+        }
+
+        public ItemsPanelTemplate VerticalItemsPanelTemplate
+        {
+            get { return (ItemsPanelTemplate)GetValue(VerticalItemsPanelTemplateProperty); }
+            set { SetValue(VerticalItemsPanelTemplateProperty, value); }
+        }
+
+        public ItemsPanelTemplate HorizontalItemsPanelTemplate
+        {
+            get { return (ItemsPanelTemplate)GetValue(HorizontalItemsPanelTemplateProperty); }
+            set { SetValue(HorizontalItemsPanelTemplateProperty, value); }
+        }
+
         public DayRangeRenderModel SelectedFlipViewDayRange
         {
             get { return (DayRangeRenderModel)GetValue(SelectedFlipViewDayRangeProperty); }
@@ -81,6 +104,14 @@ namespace Wino.Calendar.Controls
             SizeChanged += CalendarSizeChanged;
         }
 
+        private static void OnIsVerticalCalendarChanged(DependencyObject calendar, DependencyPropertyChangedEventArgs e)
+        {
+            if (calendar is WinoCalendarControl control)
+            {
+                control.ManageCalendarOrientation();
+            }
+        }
+
         private static void OnIdleStateChanged(DependencyObject calendar, DependencyPropertyChangedEventArgs e)
         {
             if (calendar is WinoCalendarControl calendarControl)
@@ -89,6 +120,7 @@ namespace Wino.Calendar.Controls
             }
         }
 
+
         private static void OnActiveVerticalScrollViewerChanged(DependencyObject calendar, DependencyPropertyChangedEventArgs e)
         {
             if (calendar is WinoCalendarControl calendarControl)
@@ -124,6 +156,22 @@ namespace Wino.Calendar.Controls
             }
         }
 
+        private void ManageCalendarOrientation()
+        {
+            if (InternalFlipView == null || HorizontalItemsPanelTemplate == null || VerticalItemsPanelTemplate == null) return;
+
+            bool isHorizontalCalendar = DisplayType == CalendarDisplayType.Day || DisplayType == CalendarDisplayType.Week || DisplayType == CalendarDisplayType.WorkWeek;
+
+            if (isHorizontalCalendar)
+            {
+                InternalFlipView.ItemsPanel = HorizontalItemsPanelTemplate;
+            }
+            else
+            {
+                InternalFlipView.ItemsPanel = VerticalItemsPanelTemplate;
+            }
+        }
+
         private void ManageHighlightedDateRange()
         {
             if (ActiveCanvas == null)
@@ -186,6 +234,7 @@ namespace Wino.Calendar.Controls
             IdleGrid = GetTemplateChild(PART_IdleGrid) as Grid;
 
             UpdateIdleState();
+            ManageCalendarOrientation();
         }
 
         private void UpdateIdleState()
@@ -248,8 +297,6 @@ namespace Wino.Calendar.Controls
 
         public CalendarItemControl GetCalendarItemControl(CalendarItemViewModel calendarItemViewModel)
         {
-            if (ActiveCanvas == null) return null;
-
             return this.FindDescendants<CalendarItemControl>().FirstOrDefault(a => a.CalendarItem == calendarItemViewModel);
         }
     }

Wino.Calendar/Selectors/WinoCalendarItemTemplateSelector.cs

@@ -0,0 +1,34 @@
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Wino.Core.Domain.Enums;
+
+namespace Wino.Calendar.Selectors
+{
+    public class WinoCalendarItemTemplateSelector : DataTemplateSelector
+    {
+        public CalendarDisplayType DisplayType { get; set; }
+
+        public DataTemplate DayWeekWorkWeekTemplate { get; set; }
+        public DataTemplate MonthlyTemplate { get; set; }
+
+
+        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+        {
+            switch (DisplayType)
+            {
+                case CalendarDisplayType.Day:
+                case CalendarDisplayType.Week:
+                case CalendarDisplayType.WorkWeek:
+                    return DayWeekWorkWeekTemplate;
+                case CalendarDisplayType.Month:
+                    return MonthlyTemplate;
+                case CalendarDisplayType.Year:
+                    break;
+                default:
+                    break;
+            }
+
+            return base.SelectTemplateCore(item, container);
+        }
+    }
+}

Wino.Calendar/Services/NavigationService.cs

@@ -16,21 +16,17 @@ namespace Wino.Calendar.Services
     {
         public Type GetPageType(WinoPage winoPage)
         {
-            switch (winoPage)
+            return winoPage switch
             {
-                case WinoPage.CalendarPage:
-                    return typeof(CalendarPage);
-                case WinoPage.SettingsPage:
-                    return typeof(SettingsPage);
-                case WinoPage.CalendarSettingsPage:
-                    return typeof(CalendarSettingsPage);
-                case WinoPage.AccountManagementPage:
-                    return typeof(AccountManagementPage);
-                case WinoPage.PersonalizationPage:
-                    return typeof(PersonalizationPage);
-                default:
-                    throw new Exception("Page is not implemented yet.");
-            }
+                WinoPage.CalendarPage => typeof(CalendarPage),
+                WinoPage.SettingsPage => typeof(SettingsPage),
+                WinoPage.CalendarSettingsPage => typeof(CalendarSettingsPage),
+                WinoPage.AccountManagementPage => typeof(AccountManagementPage),
+                WinoPage.ManageAccountsPage => typeof(ManageAccountsPage),
+                WinoPage.PersonalizationPage => typeof(PersonalizationPage),
+                WinoPage.AccountDetailsPage => typeof(AccountDetailsPage),
+                _ => throw new Exception("Page is not implemented yet."),
+            };
         }
 
         public bool Navigate(WinoPage page, object parameter = null, NavigationReferenceFrame frame = NavigationReferenceFrame.ShellFrame, NavigationTransitionType transition = NavigationTransitionType.None)

Wino.Calendar/Styles/WinoCalendarResources.xaml

@@ -3,6 +3,7 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:Wino.Calendar.Controls"
+    xmlns:controls1="using:Wino.Core.UWP.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:data="using:Wino.Calendar.ViewModels.Data"
     xmlns:helpers="using:Wino.Helpers"
@@ -12,8 +13,6 @@
     xmlns:selectors="using:Wino.Calendar.Selectors"
     xmlns:toolkitControls="using:CommunityToolkit.WinUI.Controls">
 
-
-
     <!--  08:00 or 8 AM/PM on the left etc.  -->
     <DataTemplate x:Key="DayCalendarHourHeaderTemplate" x:DataType="models:DayHeaderRenderModel">
         <Grid Height="{x:Bind HourHeight}">
@@ -50,6 +49,8 @@
     </DataTemplate>
 
     <!--  Equally distributed days of week representation in FlipView.  -->
+    <!--  Used for day-week-work week templates.  -->
+    <!--  Horizontal template  -->
     <DataTemplate x:Key="FlipTemplate" x:DataType="models:DayRangeRenderModel">
         <Grid
             x:Name="RootGrid"
@@ -57,14 +58,11 @@
             ColumnSpacing="0"
             RowSpacing="0">
             <Grid.RowDefinitions>
-                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" MinHeight="100" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
-            <ItemsControl
-                Grid.Column="1"
-                Margin="50,0,16,0"
-                ItemsSource="{x:Bind CalendarDays}">
+            <ItemsControl Margin="50,0,16,0" ItemsSource="{x:Bind CalendarDays}">
                 <ItemsControl.ItemTemplate>
                     <DataTemplate x:DataType="models:CalendarDayModel">
                         <controls:DayColumnControl DayModel="{x:Bind}" />
@@ -125,9 +123,58 @@
         </Grid>
     </DataTemplate>
 
+    <!--  Template that displays 35 days in total.  -->
+    <!--  Used for monthly view  -->
+    <!--  Vertical template  -->
+    <DataTemplate x:Key="MonthlyFlipTemplate" x:DataType="models:DayRangeRenderModel">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+
+            <Grid Height="20">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+            </Grid>
+            <ItemsControl Grid.Row="1" ItemsSource="{x:Bind CalendarDays}">
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate x:DataType="models:CalendarDayModel">
+                        <controls:DayColumnControl DayModel="{x:Bind Mode=OneWay}" Template="{StaticResource MonthlyColumnControlTemplate}" />
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+                <ItemsControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <controls1:EqualGridPanel Columns="7" Rows="5" />
+                        <!--<ItemsWrapGrid MaximumRowsOrColumns="7" Orientation="Horizontal" />-->
+                    </ItemsPanelTemplate>
+                </ItemsControl.ItemsPanel>
+            </ItemsControl>
+        </Grid>
+    </DataTemplate>
+
+    <ItemsPanelTemplate x:Key="VerticalFlipViewItemsPanel">
+        <VirtualizingStackPanel Orientation="Vertical" />
+    </ItemsPanelTemplate>
+
+    <ItemsPanelTemplate x:Key="HorizontalFlipViewItemsPanel">
+        <VirtualizingStackPanel Orientation="Horizontal" />
+    </ItemsPanelTemplate>
+
+
+
     <!--  Default style for WinoCalendarControl  -->
     <Style TargetType="controls:WinoCalendarControl">
         <Style.Setters>
+            <Setter Property="HorizontalItemsPanelTemplate" Value="{StaticResource HorizontalFlipViewItemsPanel}" />
+            <Setter Property="VerticalItemsPanelTemplate" Value="{StaticResource VerticalFlipViewItemsPanel}" />
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="controls:WinoCalendarControl">
@@ -141,9 +188,15 @@
                                 Background="Transparent"
                                 IsIdle="{x:Bind IsFlipIdle, Mode=TwoWay}"
                                 IsTabStop="False"
-                                ItemTemplate="{StaticResource FlipTemplate}"
                                 ItemsSource="{TemplateBinding DayRanges}"
-                                SelectedIndex="{Binding SelectedFlipViewIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}" />
+                                SelectedIndex="{Binding SelectedFlipViewIndex, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
+                                <controls:WinoCalendarFlipView.ItemTemplateSelector>
+                                    <selectors:WinoCalendarItemTemplateSelector
+                                        DayWeekWorkWeekTemplate="{StaticResource FlipTemplate}"
+                                        DisplayType="{x:Bind DisplayType, Mode=OneWay}"
+                                        MonthlyTemplate="{StaticResource MonthlyFlipTemplate}" />
+                                </controls:WinoCalendarFlipView.ItemTemplateSelector>
+                            </controls:WinoCalendarFlipView>
 
                             <Grid x:Name="PART_IdleGrid" Visibility="Collapsed">
                                 <muxc:ProgressRing
@@ -160,122 +213,227 @@
         </Style.Setters>
     </Style>
 
+    <!--  Top header control for days.  -->
+    <ControlTemplate x:Key="DailyColumnControlTemplate" TargetType="controls:DayColumnControl">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="25" />
+                <RowDefinition Height="7" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+
+            <!--  Name of the day. Monday, Tuesday etc. at the top.  -->
+            <TextBlock
+                x:Name="PART_ColumnHeaderText"
+                Margin="8,0,0,0"
+                FontSize="16"
+                TextTrimming="CharacterEllipsis" />
+
+            <Grid
+                Grid.Row="2"
+                Grid.RowSpan="2"
+                BorderBrush="{ThemeResource CalendarSeperatorBrush}"
+                BorderThickness="1,1,0,1" />
+
+            <!--  Border for today indication.  -->
+            <Border
+                x:Name="PART_IsTodayBorder"
+                Grid.Row="1"
+                Height="5"
+                Margin="2,0,2,0"
+                HorizontalAlignment="Stretch"
+                VerticalAlignment="Center"
+                Background="{ThemeResource SystemAccentColor}"
+                CornerRadius="2"
+                Visibility="Collapsed" />
+
+            <!--  Place where full day events go.  -->
+            <Grid
+                x:Name="PART_DayDataAreaGrid"
+                Grid.Row="2"
+                Padding="6"
+                BorderBrush="{ThemeResource CalendarSeperatorBrush}">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="*" MinHeight="35" />
+                </Grid.RowDefinitions>
+
+                <!--  Day number  -->
+                <TextBlock x:Name="PART_HeaderDateDayText" FontSize="17" />
+
+                <!--  Extras  -->
+                <StackPanel Grid.Column="1" HorizontalAlignment="Right" />
+
+                <!--  All-Multi Day Events  -->
+                <ItemsControl
+                    x:Name="PART_AllDayItemsControl"
+                    Grid.Row="1"
+                    Grid.ColumnSpan="2"
+                    Margin="0,6">
+                    <ItemsControl.ItemTemplateSelector>
+                        <selectors:CustomAreaCalendarItemSelector>
+                            <selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
+                                <DataTemplate x:DataType="data:CalendarItemViewModel">
+                                    <controls:CalendarItemControl
+                                        CalendarItem="{x:Bind}"
+                                        DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
+                                        IsCustomEventArea="True" />
+                                </DataTemplate>
+                            </selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
+                            <selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
+                                <DataTemplate x:DataType="data:CalendarItemViewModel">
+                                    <controls:CalendarItemControl
+                                        CalendarItem="{x:Bind}"
+                                        DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
+                                        IsCustomEventArea="True" />
+                                </DataTemplate>
+                            </selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
+                        </selectors:CustomAreaCalendarItemSelector>
+                    </ItemsControl.ItemTemplateSelector>
+                    <ItemsControl.ItemContainerTransitions>
+                        <TransitionCollection>
+                            <AddDeleteThemeTransition />
+                        </TransitionCollection>
+                    </ItemsControl.ItemContainerTransitions>
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Vertical" Spacing="2" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                </ItemsControl>
+            </Grid>
+
+            <VisualStateManager.VisualStateGroups>
+                <VisualStateGroup x:Name="TodayOrNotStates">
+                    <VisualState x:Name="NotTodayState" />
+                    <VisualState x:Name="TodayState">
+                        <VisualState.Setters>
+                            <Setter Target="PART_IsTodayBorder.Visibility" Value="Visible" />
+                            <Setter Target="PART_HeaderDateDayText.Foreground" Value="{ThemeResource SystemAccentColor}" />
+                            <Setter Target="PART_HeaderDateDayText.FontWeight" Value="Semibold" />
+                            <Setter Target="PART_ColumnHeaderText.FontWeight" Value="Semibold" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateManager.VisualStateGroups>
+        </Grid>
+    </ControlTemplate>
+
+    <!--  Monthly data control for months  -->
+    <ControlTemplate x:Key="MonthlyColumnControlTemplate" TargetType="controls:DayColumnControl">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="5" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+
+            <!--  Border for today indication.  -->
+            <Border
+                x:Name="PART_IsTodayBorder"
+                Grid.Row="0"
+                Height="5"
+                Margin="2,0,2,0"
+                HorizontalAlignment="Stretch"
+                VerticalAlignment="Center"
+                Background="{ThemeResource SystemAccentColor}"
+                CornerRadius="2"
+                Visibility="Collapsed" />
+
+            <!--  Border  -->
+            <Grid
+                Grid.Row="0"
+                Grid.RowSpan="2"
+                BorderBrush="{ThemeResource CalendarSeperatorBrush}"
+                BorderThickness="1,1,0,1" />
+
+            <!--  Place where full day events go.  -->
+            <Grid
+                x:Name="PART_DayDataAreaGrid"
+                Grid.Row="1"
+                Padding="6"
+                BorderBrush="{ThemeResource CalendarSeperatorBrush}">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="*" MinHeight="35" />
+                </Grid.RowDefinitions>
+
+                <!--  Day number  -->
+                <TextBlock x:Name="PART_HeaderDateDayText" FontSize="17" />
+
+                <!--  Extras  -->
+                <StackPanel Grid.Column="1" HorizontalAlignment="Right" />
+
+                <!--  All events summary.  -->
+                <ScrollViewer
+                    Grid.Row="1"
+                    Grid.ColumnSpan="2"
+                    Margin="0,6"
+                    Padding="0,0,16,0">
+                    <ItemsControl x:Name="PART_AllDayItemsControl">
+                        <ItemsControl.ItemTemplateSelector>
+                            <selectors:CustomAreaCalendarItemSelector>
+                                <selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
+                                    <DataTemplate x:DataType="data:CalendarItemViewModel">
+                                        <controls:CalendarItemControl
+                                            CalendarItem="{x:Bind}"
+                                            DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
+                                            IsCustomEventArea="True" />
+                                    </DataTemplate>
+                                </selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
+                                <selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
+                                    <DataTemplate x:DataType="data:CalendarItemViewModel">
+                                        <controls:CalendarItemControl
+                                            CalendarItem="{x:Bind}"
+                                            DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
+                                            IsCustomEventArea="True" />
+                                    </DataTemplate>
+                                </selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
+                            </selectors:CustomAreaCalendarItemSelector>
+                        </ItemsControl.ItemTemplateSelector>
+                        <ItemsControl.ItemContainerTransitions>
+                            <TransitionCollection>
+                                <AddDeleteThemeTransition />
+                            </TransitionCollection>
+                        </ItemsControl.ItemContainerTransitions>
+                        <ItemsControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <StackPanel Orientation="Vertical" Spacing="2" />
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                    </ItemsControl>
+                </ScrollViewer>
+            </Grid>
+
+            <VisualStateManager.VisualStateGroups>
+                <VisualStateGroup x:Name="TodayOrNotStates">
+                    <VisualState x:Name="NotTodayState" />
+                    <VisualState x:Name="TodayState">
+                        <VisualState.Setters>
+                            <Setter Target="PART_IsTodayBorder.Visibility" Value="Visible" />
+                            <Setter Target="PART_HeaderDateDayText.Foreground" Value="{ThemeResource SystemAccentColor}" />
+                            <Setter Target="PART_HeaderDateDayText.FontWeight" Value="Semibold" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateManager.VisualStateGroups>
+        </Grid>
+    </ControlTemplate>
+
     <!--  Default style for DayColumnControl  -->
     <Style TargetType="controls:DayColumnControl">
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="controls:DayColumnControl">
-                    <Grid>
-                        <Grid.RowDefinitions>
-                            <RowDefinition Height="25" />
-                            <RowDefinition Height="7" />
-                            <RowDefinition Height="*" />
-                        </Grid.RowDefinitions>
-
-                        <!--  Name of the day. Monday, Tuesday etc. at the top.  -->
-                        <TextBlock
-                            x:Name="PART_ColumnHeaderText"
-                            Margin="8,0,0,0"
-                            FontSize="16"
-                            TextTrimming="CharacterEllipsis" />
-
-                        <Grid
-                            Grid.Row="2"
-                            Grid.RowSpan="2"
-                            BorderBrush="{ThemeResource CalendarSeperatorBrush}"
-                            BorderThickness="1,1,0,1" />
-
-                        <!--  Border for today indication.  -->
-                        <Border
-                            x:Name="PART_IsTodayBorder"
-                            Grid.Row="1"
-                            Height="5"
-                            Margin="2,0,2,0"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Center"
-                            Background="{ThemeResource SystemAccentColor}"
-                            CornerRadius="2"
-                            Visibility="Collapsed" />
-
-                        <!--  Place where full day events go.  -->
-                        <Grid
-                            x:Name="PART_DayDataAreaGrid"
-                            Grid.Row="2"
-                            Padding="6"
-                            BorderBrush="{ThemeResource CalendarSeperatorBrush}">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
-                            </Grid.ColumnDefinitions>
-
-                            <Grid.RowDefinitions>
-                                <RowDefinition Height="Auto" />
-                                <RowDefinition Height="*" MinHeight="35" />
-                            </Grid.RowDefinitions>
-
-                            <!--  Day number  -->
-                            <TextBlock x:Name="PART_HeaderDateDayText" FontSize="17" />
-
-                            <!--  Extras  -->
-                            <StackPanel Grid.Column="1" HorizontalAlignment="Right" />
-
-                            <!--  All-Multi Day Events  -->
-                            <ItemsControl
-                                x:Name="PART_AllDayItemsControl"
-                                Grid.Row="1"
-                                Grid.ColumnSpan="2"
-                                Margin="0,6">
-                                <ItemsControl.ItemTemplateSelector>
-                                    <selectors:CustomAreaCalendarItemSelector>
-                                        <selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
-                                            <DataTemplate x:DataType="data:CalendarItemViewModel">
-                                                <controls:CalendarItemControl
-                                                    CalendarItem="{x:Bind}"
-                                                    DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
-                                                    IsCustomEventArea="True" />
-                                            </DataTemplate>
-                                        </selectors:CustomAreaCalendarItemSelector.AllDayTemplate>
-                                        <selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
-                                            <DataTemplate x:DataType="data:CalendarItemViewModel">
-                                                <controls:CalendarItemControl
-                                                    CalendarItem="{x:Bind}"
-                                                    DisplayingDate="{Binding DataContext, ElementName=PART_AllDayItemsControl}"
-                                                    IsCustomEventArea="True" />
-                                            </DataTemplate>
-                                        </selectors:CustomAreaCalendarItemSelector.MultiDayTemplate>
-                                    </selectors:CustomAreaCalendarItemSelector>
-                                </ItemsControl.ItemTemplateSelector>
-                                <ItemsControl.ItemContainerTransitions>
-                                    <TransitionCollection>
-                                        <AddDeleteThemeTransition />
-                                    </TransitionCollection>
-                                </ItemsControl.ItemContainerTransitions>
-                                <ItemsControl.ItemsPanel>
-                                    <ItemsPanelTemplate>
-                                        <StackPanel Orientation="Vertical" Spacing="2" />
-                                    </ItemsPanelTemplate>
-                                </ItemsControl.ItemsPanel>
-                            </ItemsControl>
-                        </Grid>
-
-                        <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup x:Name="TodayOrNotStates">
-                                <VisualState x:Name="NotTodayState" />
-                                <VisualState x:Name="TodayState">
-                                    <VisualState.Setters>
-                                        <Setter Target="PART_IsTodayBorder.Visibility" Value="Visible" />
-                                        <Setter Target="PART_HeaderDateDayText.Foreground" Value="{ThemeResource SystemAccentColor}" />
-                                        <Setter Target="PART_HeaderDateDayText.FontWeight" Value="Semibold" />
-                                        <Setter Target="PART_ColumnHeaderText.FontWeight" Value="Semibold" />
-                                    </VisualState.Setters>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
-                    </Grid>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
+        <Setter Property="Template" Value="{StaticResource DailyColumnControlTemplate}" />
     </Style>
 
 
 </ResourceDictionary>
+

Wino.Calendar/Views/Abstract/AccountDetailsPageAbstract.cs

@@ -0,0 +1,7 @@
+using Wino.Calendar.ViewModels;
+using Wino.Core.UWP;
+
+namespace Wino.Calendar.Views.Abstract
+{
+    public abstract class AccountDetailsPageAbstract : BasePage<AccountDetailsPageViewModel> { }
+}

Wino.Calendar/Views/Account/AccountManagementPage.xaml

@@ -9,6 +9,7 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:winuiControls="using:CommunityToolkit.WinUI.Controls"
+    x:Name="root"
     mc:Ignorable="d">
 
     <ScrollViewer Margin="-12,0">

Wino.Calendar/Views/Account/AccountManagementPage.xaml.cs

@@ -6,7 +6,7 @@ namespace Wino.Calendar.Views.Account
     {
         public AccountManagementPage()
         {
-            this.InitializeComponent();
+            InitializeComponent();
         }
     }
 }

Wino.Calendar/Views/AppShell.xaml

@@ -231,19 +231,33 @@
                                                         HorizontalContentAlignment="Stretch"
                                                         VerticalContentAlignment="Stretch"
                                                         IsChecked="{x:Bind IsChecked, Mode=TwoWay}">
-                                                        <Border
+                                                        <Grid Margin="0,0,0,5" ColumnSpacing="6">
+                                                            <Grid.ColumnDefinitions>
+                                                                <ColumnDefinition Width="Auto" />
+                                                                <ColumnDefinition Width="*" />
+                                                            </Grid.ColumnDefinitions>
+
+                                                            <Ellipse
+                                                                Width="20"
+                                                                Height="20"
+                                                                Fill="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(BackgroundColorHex), Mode=OneWay}" />
+
+                                                            <TextBlock
+                                                                Grid.Column="1"
+                                                                VerticalAlignment="Center"
+                                                                FontSize="14"
+                                                                Text="{x:Bind Name, Mode=OneWay}"
+                                                                TextWrapping="Wrap" />
+                                                        </Grid>
+                                                        <!--<Border
                                                             Margin="0,0,0,4"
                                                             Padding="4,2,4,2"
                                                             HorizontalAlignment="Stretch"
                                                             VerticalAlignment="Center"
                                                             Background="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(BackgroundColorHex), Mode=OneWay}"
                                                             CornerRadius="3">
-                                                            <TextBlock
-                                                                FontSize="14"
-                                                                Foreground="{x:Bind helpers:XamlHelpers.GetReadableTextColor(BackgroundColorHex), Mode=OneWay}"
-                                                                Text="{x:Bind Name, Mode=OneWay}"
-                                                                TextWrapping="Wrap" />
-                                                        </Border>
+
+                                                        </Border>-->
                                                     </CheckBox>
                                                 </DataTemplate>
                                             </ItemsControl.ItemTemplate>
@@ -360,8 +374,8 @@
                                 </ItemsPanelTemplate>
                             </Setter.Value>
                         </Setter>
-                        <Setter Target="PreviousDateButtonPathIcon.Data" Value="F1 M 16.799999 13.079999 C 16.933332 12.92 16.993332 12.74 16.98 12.539999 C 16.966665 12.34 16.886665 12.166667 16.74 12.02 C 16.593334 11.873333 16.42 11.799999 16.219999 11.799999 C 16.02 11.799999 15.853333 11.879999 15.719999 12.039999 L 10.76 17.279999 L 10.76 4.559999 C 10.76 4.346666 10.686666 4.166668 10.54 4.02 C 10.393332 3.873333 10.213333 3.799999 10 3.799999 C 9.786666 3.799999 9.606666 3.873333 9.46 4.02 C 9.313333 4.166668 9.24 4.346666 9.24 4.559999 L 9.24 17.279999 L 4.28 12.039999 C 4.146667 11.879999 3.98 11.799999 3.78 11.799999 C 3.58 11.799999 3.4 11.873333 3.24 12.02 C 3.08 12.166667 3 12.34 3 12.539999 C 3 12.74 3.066667 12.92 3.2 13.079999 L 9.28 19.48 C 9.439999 19.639999 9.626666 19.746666 9.84 19.799999 C 9.946667 19.799999 10.053333 19.799999 10.16 19.799999 C 10.373333 19.746666 10.559999 19.639999 10.719999 19.48 Z " />
-                        <Setter Target="NextDateButtonPathIcon.Data" Value="F1 M 3.2 10.52 C 2.986666 10.733333 2.92 10.98 3 11.259999 C 3.08 11.54 3.266666 11.713333 3.56 11.78 C 3.853333 11.846666 4.093333 11.773333 4.28 11.559999 L 9.24 6.32 L 9.24 19.039999 C 9.24 19.253332 9.313333 19.433332 9.46 19.58 C 9.606666 19.726665 9.786666 19.799999 10 19.799999 C 10.213333 19.799999 10.393332 19.726665 10.54 19.58 C 10.686666 19.433332 10.76 19.253332 10.76 19.039999 L 10.76 6.32 L 15.719999 11.559999 C 15.906666 11.773333 16.139999 11.846666 16.42 11.78 C 16.700001 11.713333 16.886665 11.54 16.98 11.259999 C 17.073332 10.98 17.013332 10.733333 16.799999 10.52 L 10.719999 4.119999 C 10.559999 3.959999 10.373333 3.853333 10.16 3.799999 C 10.053333 3.799999 9.946667 3.799999 9.84 3.799999 C 9.626666 3.853333 9.439999 3.959999 9.28 4.119999 Z " />
+                        <Setter Target="PreviousDateButtonPathIcon.Data" Value="F1 M 3.2 10.52 C 2.986666 10.733333 2.92 10.98 3 11.259999 C 3.08 11.54 3.266666 11.713333 3.56 11.78 C 3.853333 11.846666 4.093333 11.773333 4.28 11.559999 L 9.24 6.32 L 9.24 19.039999 C 9.24 19.253332 9.313333 19.433332 9.46 19.58 C 9.606666 19.726665 9.786666 19.799999 10 19.799999 C 10.213333 19.799999 10.393332 19.726665 10.54 19.58 C 10.686666 19.433332 10.76 19.253332 10.76 19.039999 L 10.76 6.32 L 15.719999 11.559999 C 15.906666 11.773333 16.139999 11.846666 16.42 11.78 C 16.700001 11.713333 16.886665 11.54 16.98 11.259999 C 17.073332 10.98 17.013332 10.733333 16.799999 10.52 L 10.719999 4.119999 C 10.559999 3.959999 10.373333 3.853333 10.16 3.799999 C 10.053333 3.799999 9.946667 3.799999 9.84 3.799999 C 9.626666 3.853333 9.439999 3.959999 9.28 4.119999 Z " />
+                        <Setter Target="NextDateButtonPathIcon.Data" Value="F1 M 16.799999 13.079999 C 16.933332 12.92 16.993332 12.74 16.98 12.539999 C 16.966665 12.34 16.886665 12.166667 16.74 12.02 C 16.593334 11.873333 16.42 11.799999 16.219999 11.799999 C 16.02 11.799999 15.853333 11.879999 15.719999 12.039999 L 10.76 17.279999 L 10.76 4.559999 C 10.76 4.346666 10.686666 4.166668 10.54 4.02 C 10.393332 3.873333 10.213333 3.799999 10 3.799999 C 9.786666 3.799999 9.606666 3.873333 9.46 4.02 C 9.313333 4.166668 9.24 4.346666 9.24 4.559999 L 9.24 17.279999 L 4.28 12.039999 C 4.146667 11.879999 3.98 11.799999 3.78 11.799999 C 3.58 11.799999 3.4 11.873333 3.24 12.02 C 3.08 12.166667 3 12.34 3 12.539999 C 3 12.74 3.066667 12.92 3.2 13.079999 L 9.28 19.48 C 9.439999 19.639999 9.626666 19.746666 9.84 19.799999 C 9.946667 19.799999 10.053333 19.799999 10.16 19.799999 C 10.373333 19.746666 10.559999 19.639999 10.719999 19.48 Z " />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>

Wino.Calendar/Views/AppShell.xaml.cs

@@ -18,9 +18,9 @@ namespace Wino.Calendar.Views
             InitializeComponent();
 
             Window.Current.SetTitleBar(DragArea);
+            ManageCalendarDisplayType();
         }
 
-
         private void ManageCalendarDisplayType()
         {
             // Go to different states based on the display type.

Wino.Calendar/Views/CalendarPage.xaml

@@ -33,6 +33,7 @@
             <calendarControls:WinoCalendarControl
                 x:Name="CalendarControl"
                 DayRanges="{x:Bind ViewModel.DayRanges}"
+                DisplayType="{x:Bind ViewModel.StatePersistanceService.CalendarDisplayType, Mode=OneWay}"
                 IsHitTestVisible="{x:Bind ViewModel.IsCalendarEnabled, Mode=OneWay}"
                 ScrollPositionChanging="CalendarScrolling"
                 SelectedFlipViewDayRange="{x:Bind ViewModel.SelectedDayRange, Mode=TwoWay}"

Wino.Calendar/Views/CalendarPage.xaml.cs

@@ -155,7 +155,5 @@ namespace Wino.Calendar.Views
             // In case of scrolling, we must dismiss the event details dialog.
             ViewModel.DisplayDetailsCalendarItemViewModel = null;
         }
-
-
     }
 }

Wino.Calendar/Views/Settings/AccountDetailsPage.xaml.cs

@@ -0,0 +1,12 @@
+using Wino.Calendar.Views.Abstract;
+
+namespace Wino.Calendar.Views.Settings
+{
+    public sealed partial class AccountDetailsPage : AccountDetailsPageAbstract
+    {
+        public AccountDetailsPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

Wino.Calendar/Wino.Calendar.csproj

@@ -156,6 +156,7 @@
     <Compile Include="Models\CalendarItemMeasurement.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="Selectors\CustomAreaCalendarItemSelector.cs" />
+    <Compile Include="Selectors\WinoCalendarItemTemplateSelector.cs" />
     <Compile Include="Services\AccountCalendarStateService.cs" />
     <Compile Include="Services\CalendarAuthenticatorConfig.cs" />
     <Compile Include="Services\DialogService.cs" />
@@ -163,6 +164,7 @@
     <Compile Include="Services\ProviderService.cs" />
     <Compile Include="Services\SettingsBuilderService.cs" />
     <Compile Include="Styles\WinoCalendarResources.xaml.cs" />
+    <Compile Include="Views\Abstract\AccountDetailsPageAbstract.cs" />
     <Compile Include="Views\Abstract\AccountManagementPageAbstract.cs" />
     <Compile Include="Views\Abstract\AppShellAbstract.cs" />
     <Compile Include="Views\Abstract\CalendarPageAbstract.cs" />
@@ -177,6 +179,9 @@
     <Compile Include="Views\CalendarPage.xaml.cs">
       <DependentUpon>CalendarPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\Settings\AccountDetailsPage.xaml.cs">
+      <DependentUpon>AccountDetailsPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\Settings\CalendarSettingsPage.xaml.cs">
       <DependentUpon>CalendarSettingsPage.xaml</DependentUpon>
     </Compile>
@@ -293,6 +298,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Views\Settings\AccountDetailsPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\Settings\CalendarSettingsPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>