Ground work for Wino Calendar. (#475)

Wino Calendar abstractions.

Wino.Calendar/Controls/CalendarDayItemsControl.cs

@@ -0,0 +1,132 @@
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+using System.Linq;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Wino.Core.Domain.Interfaces;
+using Wino.Core.Domain.Models.Calendar;
+
+namespace Wino.Calendar.Controls
+{
+    public class CalendarDayItemsControl : Control
+    {
+        private const string PART_CalendarPanel = nameof(PART_CalendarPanel);
+
+        private WinoCalendarPanel CalendarPanel;
+
+        public CalendarDayModel DayModel
+        {
+            get { return (CalendarDayModel)GetValue(DayModelProperty); }
+            set { SetValue(DayModelProperty, value); }
+        }
+
+
+        public static readonly DependencyProperty DayModelProperty = DependencyProperty.Register(nameof(DayModel), typeof(CalendarDayModel), typeof(CalendarDayItemsControl), new PropertyMetadata(null, new PropertyChangedCallback(OnRepresentingDateChanged)));
+
+        private static void OnRepresentingDateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is CalendarDayItemsControl control)
+            {
+                if (e.OldValue != null && e.OldValue is CalendarDayModel oldCalendarDayModel)
+                {
+                    control.DetachCollection(oldCalendarDayModel.Events);
+                }
+
+                if (e.NewValue != null && e.NewValue is CalendarDayModel newCalendarDayModel)
+                {
+                    control.AttachCollection(newCalendarDayModel.Events);
+                }
+
+                control.ResetItems();
+                control.RenderEvents();
+            }
+        }
+
+        public CalendarDayItemsControl()
+        {
+            DefaultStyleKey = typeof(CalendarDayItemsControl);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            CalendarPanel = GetTemplateChild(PART_CalendarPanel) as WinoCalendarPanel;
+
+            RenderEvents();
+        }
+
+        private void ResetItems()
+        {
+            if (CalendarPanel == null) return;
+
+            CalendarPanel.Children.Clear();
+        }
+
+        private void RenderEvents()
+        {
+            if (CalendarPanel == null || CalendarPanel.DayModel == null) return;
+
+            RenderCalendarItems();
+        }
+
+        private void AttachCollection(ObservableCollection<ICalendarItem> newCollection)
+            => newCollection.CollectionChanged += CalendarItemsChanged;
+
+        private void DetachCollection(ObservableCollection<ICalendarItem> oldCollection)
+            => oldCollection.CollectionChanged -= CalendarItemsChanged;
+
+        private void CalendarItemsChanged(object sender, NotifyCollectionChangedEventArgs e)
+        {
+            switch (e.Action)
+            {
+                case NotifyCollectionChangedAction.Add:
+                    foreach (ICalendarItem item in e.NewItems)
+                    {
+                        AddItem(item);
+                    }
+                    break;
+                case NotifyCollectionChangedAction.Remove:
+                    foreach (ICalendarItem item in e.OldItems)
+                    {
+                        var control = GetCalendarItemControl(item);
+                        if (control != null)
+                        {
+                            CalendarPanel.Children.Remove(control);
+                        }
+                    }
+                    break;
+                case NotifyCollectionChangedAction.Reset:
+                    ResetItems();
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        private CalendarItemControl GetCalendarItemControl(ICalendarItem item)
+            => CalendarPanel.Children.Where(c => c is CalendarItemControl calendarItemControl && calendarItemControl.Item == item).FirstOrDefault() as CalendarItemControl;
+
+        private void RenderCalendarItems()
+        {
+            if (DayModel == null || DayModel.Events == null || DayModel.Events.Count == 0)
+            {
+                ResetItems();
+                return;
+            }
+
+            foreach (var item in DayModel.Events)
+            {
+                AddItem(item);
+            }
+        }
+
+        private void AddItem(ICalendarItem item)
+        {
+            CalendarPanel.Children.Add(new CalendarItemControl()
+            {
+                Item = item
+            });
+        }
+    }
+}

Wino.Calendar/Controls/CalendarItemControl.cs

@@ -0,0 +1,42 @@
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Wino.Core.Domain.Interfaces;
+
+namespace Wino.Calendar.Controls
+{
+    public class CalendarItemControl : Control
+    {
+        public ICalendarItem Item
+        {
+            get { return (ICalendarItem)GetValue(ItemProperty); }
+            set { SetValue(ItemProperty, value); }
+        }
+
+        public static readonly DependencyProperty ItemProperty = DependencyProperty.Register(nameof(Item), typeof(ICalendarItem), typeof(CalendarItemControl), new PropertyMetadata(null, new PropertyChangedCallback(OnItemChanged)));
+
+        public CalendarItemControl()
+        {
+            DefaultStyleKey = typeof(CalendarItemControl);
+        }
+
+        private static void OnItemChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is CalendarItemControl control)
+            {
+                control.UpdateDateRendering();
+            }
+        }
+
+        private void UpdateDateRendering()
+        {
+            if (Item == null) return;
+
+            UpdateLayout();
+        }
+
+        public override string ToString()
+        {
+            return Item?.Name ?? "NA";
+        }
+    }
+}

Wino.Calendar/Controls/CustomCalendarFlipView.cs

@@ -0,0 +1,42 @@
+using Windows.UI.Xaml.Automation.Peers;
+using Windows.UI.Xaml.Controls;
+
+namespace Wino.Calendar.Controls
+{
+    /// <summary>
+    /// FlipView that hides the navigation buttons and exposes methods to navigate to the next and previous items with animations.
+    /// </summary>
+    public class CustomCalendarFlipView : FlipView
+    {
+        private const string PART_PreviousButton = "PreviousButtonHorizontal";
+        private const string PART_NextButton = "NextButtonHorizontal";
+
+        private Button PreviousButton;
+        private Button NextButton;
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            PreviousButton = GetTemplateChild(PART_PreviousButton) as Button;
+            NextButton = GetTemplateChild(PART_NextButton) as Button;
+
+            // Hide navigation buttons
+            PreviousButton.Opacity = NextButton.Opacity = 0;
+            PreviousButton.IsHitTestVisible = NextButton.IsHitTestVisible = false;
+        }
+
+        public void GoPreviousFlip()
+        {
+            var backPeer = new ButtonAutomationPeer(PreviousButton);
+            backPeer.Invoke();
+        }
+
+        public void GoNextFlip()
+        {
+            var nextPeer = new ButtonAutomationPeer(NextButton);
+            nextPeer.Invoke();
+        }
+
+    }
+}

Wino.Calendar/Controls/DayColumnControl.cs

@@ -0,0 +1,65 @@
+using System;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Wino.Core.Domain.Models.Calendar;
+
+namespace Wino.Calendar.Controls
+{
+    public class DayColumnControl : Control
+    {
+        private const string PART_HeaderDateDayText = nameof(PART_HeaderDateDayText);
+        private const string PART_IsTodayBorder = nameof(PART_IsTodayBorder);
+        private const string PART_ColumnHeaderText = nameof(PART_ColumnHeaderText);
+
+        private const string TodayState = nameof(TodayState);
+        private const string NotTodayState = nameof(NotTodayState);
+
+        private TextBlock HeaderDateDayText;
+        private TextBlock ColumnHeaderText;
+        private Border IsTodayBorder;
+
+        public CalendarDayModel DayModel
+        {
+            get { return (CalendarDayModel)GetValue(DayModelProperty); }
+            set { SetValue(DayModelProperty, value); }
+        }
+
+        public static readonly DependencyProperty DayModelProperty = DependencyProperty.Register(nameof(DayModel), typeof(CalendarDayModel), typeof(DayColumnControl), new PropertyMetadata(null, new PropertyChangedCallback(OnRenderingPropertiesChanged)));
+
+        public DayColumnControl()
+        {
+            DefaultStyleKey = typeof(DayColumnControl);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            HeaderDateDayText = GetTemplateChild(PART_HeaderDateDayText) as TextBlock;
+            ColumnHeaderText = GetTemplateChild(PART_ColumnHeaderText) as TextBlock;
+            IsTodayBorder = GetTemplateChild(PART_IsTodayBorder) as Border;
+
+            UpdateValues();
+        }
+
+        private static void OnRenderingPropertiesChanged(DependencyObject control, DependencyPropertyChangedEventArgs e)
+        {
+            if (control is DayColumnControl columnControl)
+            {
+                columnControl.UpdateValues();
+            }
+        }
+
+        private void UpdateValues()
+        {
+            if (HeaderDateDayText == null || ColumnHeaderText == null || IsTodayBorder == null || DayModel == null) return;
+
+            HeaderDateDayText.Text = DayModel.RepresentingDate.Day.ToString();
+            ColumnHeaderText.Text = DayModel.RepresentingDate.ToString("dddd", DayModel.CalendarRenderOptions.CalendarSettings.CultureInfo);
+
+            bool isToday = DayModel.RepresentingDate.Date == DateTime.Now.Date;
+
+            VisualStateManager.GoToState(this, isToday ? TodayState : NotTodayState, false);
+        }
+    }
+}

Wino.Calendar/Controls/DayHeaderControl.cs

@@ -0,0 +1,57 @@
+using System;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Wino.Core.Domain.Enums;
+
+namespace Wino.Calendar.Controls
+{
+    public class DayHeaderControl : Control
+    {
+        private const string PART_DayHeaderTextBlock = nameof(PART_DayHeaderTextBlock);
+        private TextBlock HeaderTextblock;
+
+        public DayHeaderDisplayType DisplayType
+        {
+            get { return (DayHeaderDisplayType)GetValue(DisplayTypeProperty); }
+            set { SetValue(DisplayTypeProperty, value); }
+        }
+
+        public DateTime Date
+        {
+            get { return (DateTime)GetValue(DateProperty); }
+            set { SetValue(DateProperty, value); }
+        }
+
+        public static readonly DependencyProperty DateProperty = DependencyProperty.Register(nameof(Date), typeof(DateTime), typeof(DayHeaderControl), new PropertyMetadata(default(DateTime), new PropertyChangedCallback(OnHeaderPropertyChanged)));
+        public static readonly DependencyProperty DisplayTypeProperty = DependencyProperty.Register(nameof(DisplayType), typeof(DayHeaderDisplayType), typeof(DayHeaderControl), new PropertyMetadata(DayHeaderDisplayType.TwentyFourHour, new PropertyChangedCallback(OnHeaderPropertyChanged)));
+
+        public DayHeaderControl()
+        {
+            DefaultStyleKey = typeof(DayHeaderControl);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            HeaderTextblock = GetTemplateChild(PART_DayHeaderTextBlock) as TextBlock;
+            UpdateHeaderText();
+        }
+
+        private static void OnHeaderPropertyChanged(DependencyObject control, DependencyPropertyChangedEventArgs e)
+        {
+            if (control is DayHeaderControl headerControl)
+            {
+                headerControl.UpdateHeaderText();
+            }
+        }
+
+        private void UpdateHeaderText()
+        {
+            if (HeaderTextblock != null)
+            {
+                HeaderTextblock.Text = DisplayType == DayHeaderDisplayType.TwelveHour ? Date.ToString("h tt") : Date.ToString("HH:mm");
+            }
+        }
+    }
+}

Wino.Calendar/Controls/WinoCalendarControl.cs

@@ -0,0 +1,144 @@
+using System;
+using System.Collections.ObjectModel;
+using CommunityToolkit.Mvvm.Messaging;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Wino.Calendar.Args;
+using Wino.Core.Domain.Models.Calendar;
+using Wino.Messaging.Client.Calendar;
+
+namespace Wino.Calendar.Controls
+{
+    public class WinoCalendarControl : Control
+    {
+        private const string PART_WinoFlipView = nameof(PART_WinoFlipView);
+
+        public event EventHandler<TimelineCellSelectedArgs> TimelineCellSelected;
+        public event EventHandler<TimelineCellUnselectedArgs> TimelineCellUnselected;
+
+        #region Dependency Properties
+
+        public static readonly DependencyProperty DayRangesProperty = DependencyProperty.Register(nameof(DayRanges), typeof(ObservableCollection<DayRangeRenderModel>), typeof(WinoCalendarControl), new PropertyMetadata(null));
+        public static readonly DependencyProperty SelectedFlipViewIndexProperty = DependencyProperty.Register(nameof(SelectedFlipViewIndex), typeof(int), typeof(WinoCalendarControl), new PropertyMetadata(-1));
+        public static readonly DependencyProperty SelectedFlipViewDayRangeProperty = DependencyProperty.Register(nameof(SelectedFlipViewDayRange), typeof(DayRangeRenderModel), typeof(WinoCalendarControl), new PropertyMetadata(null));
+
+        public DayRangeRenderModel SelectedFlipViewDayRange
+        {
+            get { return (DayRangeRenderModel)GetValue(SelectedFlipViewDayRangeProperty); }
+            set { SetValue(SelectedFlipViewDayRangeProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the collection of day ranges to render.
+        /// Each day range usually represents a week, but it may support other ranges.
+        /// </summary>
+        public ObservableCollection<DayRangeRenderModel> DayRanges
+        {
+            get { return (ObservableCollection<DayRangeRenderModel>)GetValue(DayRangesProperty); }
+            set { SetValue(DayRangesProperty, value); }
+        }
+
+        public int SelectedFlipViewIndex
+        {
+            get { return (int)GetValue(SelectedFlipViewIndexProperty); }
+            set { SetValue(SelectedFlipViewIndexProperty, value); }
+        }
+
+        #endregion
+
+        private WinoDayTimelineCanvas _activeCanvas;
+
+        public WinoDayTimelineCanvas ActiveCanvas
+        {
+            get { return _activeCanvas; }
+            set
+            {
+                // FlipView's timeline is changing.
+                // Make sure to unregister from the old one.
+
+                if (_activeCanvas != null)
+                {
+                    // Dismiss any selection on the old canvas.
+
+                    _activeCanvas.SelectedDateTime = null;
+                    _activeCanvas.TimelineCellSelected -= ActiveTimelineCellSelected;
+                    _activeCanvas.TimelineCellUnselected -= ActiveTimelineCellUnselected;
+                }
+
+                _activeCanvas = value;
+
+                if (_activeCanvas != null)
+                {
+                    _activeCanvas.TimelineCellSelected += ActiveTimelineCellSelected;
+                    _activeCanvas.TimelineCellUnselected += ActiveTimelineCellUnselected;
+
+                    // Raise visible date range change to shell.
+                    WeakReferenceMessenger.Default.Send(new VisibleDateRangeChangedMessage(_activeCanvas.RenderOptions.DateRange));
+                }
+            }
+        }
+
+        private WinoCalendarFlipView InternalFlipView;
+
+        public WinoCalendarControl()
+        {
+            DefaultStyleKey = typeof(WinoCalendarControl);
+            SizeChanged += CalendarSizeChanged;
+        }
+
+        private void CalendarSizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            if (ActiveCanvas == null) return;
+
+            ActiveCanvas.SelectedDateTime = null;
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            InternalFlipView = GetTemplateChild(PART_WinoFlipView) as WinoCalendarFlipView;
+
+            // Each FlipViewItem will have 1 timeline canvas to draw hour cells in the background that supports selection of them.
+            // When the selection changes, we need to stop listening to the old canvas and start listening to the new one to catch events.
+
+            InternalFlipView.ActiveTimelineCanvasChanged += FlipViewsActiveTimelineCanvasChanged;
+        }
+
+        private void FlipViewsActiveTimelineCanvasChanged(object sender, WinoDayTimelineCanvas e)
+        {
+            ActiveCanvas = e;
+
+            SelectedFlipViewDayRange = InternalFlipView.SelectedItem as DayRangeRenderModel;
+        }
+
+        private void ActiveTimelineCellUnselected(object sender, TimelineCellUnselectedArgs e)
+            => TimelineCellUnselected?.Invoke(this, e);
+
+        private void ActiveTimelineCellSelected(object sender, TimelineCellSelectedArgs e)
+            => TimelineCellSelected?.Invoke(this, e);
+
+        public void NavigateToDay(DateTime dateTime) => InternalFlipView.NavigateToDay(dateTime);
+
+        public void ResetTimelineSelection()
+        {
+            if (ActiveCanvas == null) return;
+
+            ActiveCanvas.SelectedDateTime = null;
+        }
+
+        public void GoNextRange()
+        {
+            if (InternalFlipView == null) return;
+
+            InternalFlipView.GoNextFlip();
+        }
+
+        public void GoPreviousRange()
+        {
+            if (InternalFlipView == null) return;
+
+            InternalFlipView.GoPreviousFlip();
+        }
+    }
+}

Wino.Calendar/Controls/WinoCalendarFlipView.cs

@@ -0,0 +1,91 @@
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+using CommunityToolkit.WinUI;
+using Windows.UI.Xaml.Controls;
+using Wino.Core.Domain.Models.Calendar;
+using Wino.Core.MenuItems;
+
+namespace Wino.Calendar.Controls
+{
+    public class WinoCalendarFlipView : CustomCalendarFlipView
+    {
+        public event EventHandler<WinoDayTimelineCanvas> ActiveTimelineCanvasChanged;
+
+        public WinoCalendarFlipView()
+        {
+            SelectionChanged += CalendarDisplayRangeChanged;
+        }
+
+        private async void CalendarDisplayRangeChanged(object sender, SelectionChangedEventArgs e)
+        {
+            if (SelectedIndex < 0)
+                ActiveTimelineCanvasChanged?.Invoke(this, null);
+            else
+            {
+                // TODO: Refactor this mechanism by listening to PrepareContainerForItemOverride and Loaded events together.
+                while (ContainerFromIndex(SelectedIndex) == null)
+                {
+                    await Task.Delay(250);
+                }
+
+                if (ContainerFromIndex(SelectedIndex) is FlipViewItem flipViewItem)
+                {
+                    var canvas = flipViewItem.FindDescendant<WinoDayTimelineCanvas>();
+                    ActiveTimelineCanvasChanged?.Invoke(this, canvas);
+                }
+            }
+        }
+
+        /// <summary>
+        /// Navigates to the specified date in the calendar.
+        /// </summary>
+        /// <param name="dateTime">Date to navigate.</param>
+        public async void NavigateToDay(DateTime dateTime)
+        {
+            // Find the day range that contains the date.
+            var dayRange = GetItemsSource()?.FirstOrDefault(a => a.CalendarDays.Any(b => b.RepresentingDate.Date == dateTime.Date));
+
+            if (dayRange != null)
+            {
+                var navigationItemIndex = GetItemsSource().IndexOf(dayRange);
+
+                if (Math.Abs(navigationItemIndex - SelectedIndex) > 4)
+                {
+                    // Difference between dates are high.
+                    // No need to animate this much, just go without animating.
+
+                    SelectedIndex = navigationItemIndex;
+                }
+                else
+                {
+                    // Until we reach the day in the flip, simulate next-prev button clicks.
+                    // This will make sure the FlipView animations are triggered.
+                    // Setting SelectedIndex directly doesn't trigger the animations.
+
+                    while (SelectedIndex != navigationItemIndex)
+                    {
+                        if (SelectedIndex > navigationItemIndex)
+                        {
+                            GoPreviousFlip();
+                        }
+                        else
+                        {
+                            GoNextFlip();
+                        }
+                    }
+                }
+            }
+        }
+
+
+        public void NavigateHour(TimeSpan hourTimeSpan)
+        {
+            // Total height of the FlipViewItem is the same as vertical ScrollViewer to position day headers.
+            // Find the day range that contains the hour.
+        }
+
+        private ObservableRangeCollection<DayRangeRenderModel> GetItemsSource()
+            => ItemsSource as ObservableRangeCollection<DayRangeRenderModel>;
+    }
+}

Wino.Calendar/Controls/WinoCalendarPanel.cs

@@ -0,0 +1,254 @@
+
+using System;
+using System.Collections.Generic;
+using System.Collections.Specialized;
+using System.Linq;
+using Windows.Foundation;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Wino.Calendar.Models;
+using Wino.Core.Domain.Interfaces;
+using Wino.Core.Domain.Models.Calendar;
+
+namespace Wino.Calendar.Controls
+{
+    public class WinoCalendarPanel : Panel
+    {
+        private const double LastItemRightExtraMargin = 12d;
+
+        // Store each ICalendarItem measurements by their Id.
+        private readonly Dictionary<Guid, CalendarItemMeasurement> _measurements = new Dictionary<Guid, CalendarItemMeasurement>();
+
+        public static readonly DependencyProperty EventItemMarginProperty = DependencyProperty.Register(nameof(EventItemMargin), typeof(Thickness), typeof(WinoCalendarPanel), new PropertyMetadata(new Thickness(0, 0, 0, 0)));
+        public static readonly DependencyProperty DayModelProperty = DependencyProperty.Register(nameof(DayModel), typeof(CalendarDayModel), typeof(WinoCalendarPanel), new PropertyMetadata(null, new PropertyChangedCallback(OnDayChanged)));
+
+        public CalendarDayModel DayModel
+        {
+            get { return (CalendarDayModel)GetValue(DayModelProperty); }
+            set { SetValue(DayModelProperty, value); }
+        }
+
+        public Thickness EventItemMargin
+        {
+            get { return (Thickness)GetValue(EventItemMarginProperty); }
+            set { SetValue(EventItemMarginProperty, value); }
+        }
+
+        private static void OnDayChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is WinoCalendarPanel control)
+            {
+                // We need to listen for new events being added or removed from the collection to reset measurements.
+                if (e.OldValue is CalendarDayModel oldDayModel)
+                {
+                    control.DetachCollection(oldDayModel.Events);
+                }
+
+                if (e.NewValue is CalendarDayModel newDayModel)
+                {
+                    control.AttachCollection(newDayModel.Events);
+                }
+
+                control.ResetMeasurements();
+                control.UpdateLayout();
+            }
+        }
+
+        private void AttachCollection(IEnumerable<ICalendarItem> events)
+        {
+            if (events is INotifyCollectionChanged collection)
+            {
+                collection.CollectionChanged += EventCollectionChanged;
+            }
+        }
+
+        private void DetachCollection(IEnumerable<ICalendarItem> events)
+        {
+            if (events is INotifyCollectionChanged collection)
+            {
+                collection.CollectionChanged -= EventCollectionChanged;
+            }
+        }
+
+        private void ResetMeasurements() => _measurements.Clear();
+
+        // No need to handle actions. Each action requires a full measurement update.
+        private void EventCollectionChanged(object sender, NotifyCollectionChangedEventArgs e) => ResetMeasurements();
+
+        private double GetChildTopMargin(DateTime childStart, double availableHeight)
+        {
+            double totalMinutes = 1440;
+            double minutesFromStart = (childStart - DayModel.RepresentingDate).TotalMinutes;
+            return (minutesFromStart / totalMinutes) * availableHeight;
+        }
+
+        private double GetChildWidth(CalendarItemMeasurement calendarItemMeasurement, double availableWidth)
+        {
+            return (calendarItemMeasurement.Right - calendarItemMeasurement.Left) * availableWidth;
+        }
+
+        private double GetChildLeftMargin(CalendarItemMeasurement calendarItemMeasurement, double availableWidth)
+            => availableWidth * calendarItemMeasurement.Left;
+
+        private double GetChildHeight(DateTime childStart, DateTime childEnd)
+        {
+            double totalMinutes = 1440;
+            double availableHeight = DayModel.CalendarRenderOptions.CalendarSettings.HourHeight * 24;
+            double childDuration = (childEnd - childStart).TotalMinutes;
+            return (childDuration / totalMinutes) * availableHeight;
+        }
+
+        protected override Size ArrangeOverride(Size finalSize)
+        {
+            // Measure/arrange each child height and width.
+            // This is a vertical calendar. Therefore the height of each child is the duration of the event.
+            // Children weights for left and right will be saved if they don't exist.
+            // This is important because we don't want to measure the weights again.
+            // They don't change until new event is added or removed.
+            // Width of the each child may depend on the rectangle packing algorithm.
+            // Children are first categorized into columns. Then each column is shifted to the left until
+            // no overlap occurs. The width of each child is calculated based on the number of columns it spans.
+
+            double availableHeight = finalSize.Height;
+            double availableWidth = finalSize.Width;
+
+            var calendarControls = Children.Cast<CalendarItemControl>();
+
+            if (_measurements.Count == 0 && DayModel.Events.Count > 0)
+            {
+                // We keep track of this collection when event is added/removed/reset etc.
+                // So if the collection is empty, we must fill it up again for proper calculations.
+
+                LayoutEvents(DayModel.Events);
+            }
+
+            foreach (var child in calendarControls)
+            {
+                // We can't arrange this child. It doesn't have a valid ICalendarItem or measurement.
+                if (child.Item == null || !_measurements.ContainsKey(child.Item.Id)) continue;
+
+                var childMeasurement = _measurements[child.Item.Id];
+
+                double childHeight = Math.Max(0, GetChildHeight(child.Item.StartTime, child.Item.EndTime));
+                double childWidth = Math.Max(0, GetChildWidth(childMeasurement, finalSize.Width));
+                double childTop = Math.Max(0, GetChildTopMargin(child.Item.StartTime, availableHeight));
+                double childLeft = Math.Max(0, GetChildLeftMargin(childMeasurement, availableWidth));
+
+                bool isHorizontallyLastItem = childMeasurement.Right == 1;
+
+                // Add additional right margin to items that falls on the right edge of the panel.
+                // Max of 5% of the width or 20px.
+                var extraRightMargin = isHorizontallyLastItem ? Math.Max(LastItemRightExtraMargin, finalSize.Width * 5 / 100) : 0;
+
+                var finalChildWidth = childWidth - extraRightMargin;
+
+                if (finalChildWidth < 0) finalChildWidth = 1;
+
+                child.Measure(new Size(childWidth, childHeight));
+
+                var arrangementRect = new Rect(childLeft + EventItemMargin.Left, childTop + EventItemMargin.Top, childWidth - extraRightMargin, childHeight);
+
+                child.Arrange(arrangementRect);
+            }
+
+            return finalSize;
+        }
+
+        #region ColumSpanning and Packing Algorithm
+
+        private void AddOrUpdateMeasurement(ICalendarItem calendarItem, CalendarItemMeasurement measurement)
+        {
+            if (_measurements.ContainsKey(calendarItem.Id))
+            {
+                _measurements[calendarItem.Id] = measurement;
+            }
+            else
+            {
+                _measurements.Add(calendarItem.Id, measurement);
+            }
+        }
+
+        // Pick the left and right positions of each event, such that there are no overlap.
+        private void LayoutEvents(IEnumerable<ICalendarItem> events)
+        {
+            var columns = new List<List<ICalendarItem>>();
+            DateTime? lastEventEnding = null;
+
+            foreach (var ev in events.OrderBy(ev => ev.Period.Start).ThenBy(ev => ev.Period.End))
+            {
+                if (ev.Period.Start >= lastEventEnding)
+                {
+                    PackEvents(columns);
+                    columns.Clear();
+                    lastEventEnding = null;
+                }
+
+                bool placed = false;
+
+                foreach (var col in columns)
+                {
+                    if (!col.Last().Period.OverlapsWith(ev.Period))
+                    {
+                        col.Add(ev);
+                        placed = true;
+                        break;
+                    }
+                }
+                if (!placed)
+                {
+                    columns.Add(new List<ICalendarItem> { ev });
+                }
+                if (lastEventEnding == null || ev.Period.End > lastEventEnding.Value)
+                {
+                    lastEventEnding = ev.Period.End;
+                }
+            }
+            if (columns.Count > 0)
+            {
+                PackEvents(columns);
+            }
+        }
+
+        // Set the left and right positions for each event in the connected group.
+        private void PackEvents(List<List<ICalendarItem>> columns)
+        {
+            float numColumns = columns.Count;
+            int iColumn = 0;
+
+            foreach (var col in columns)
+            {
+                foreach (var ev in col)
+                {
+                    int colSpan = ExpandEvent(ev, iColumn, columns);
+
+                    var leftWeight = iColumn / numColumns;
+                    var rightWeight = (iColumn + colSpan) / numColumns;
+
+                    AddOrUpdateMeasurement(ev, new CalendarItemMeasurement(leftWeight, rightWeight));
+                }
+
+                iColumn++;
+            }
+        }
+
+        // Checks how many columns the event can expand into, without colliding with other events.
+        private int ExpandEvent(ICalendarItem ev, int iColumn, List<List<ICalendarItem>> columns)
+        {
+            int colSpan = 1;
+
+            foreach (var col in columns.Skip(iColumn + 1))
+            {
+                foreach (var ev1 in col)
+                {
+                    if (ev1.Period.OverlapsWith(ev.Period)) return colSpan;
+                }
+
+                colSpan++;
+            }
+
+            return colSpan;
+        }
+
+        #endregion
+    }
+}

Wino.Calendar/Controls/WinoCalendarTypeSelectorControl.cs

@@ -0,0 +1,92 @@
+using System.Windows.Input;
+using CommunityToolkit.Diagnostics;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Wino.Core.Domain.Enums;
+
+namespace Wino.Calendar.Controls
+{
+    public class WinoCalendarTypeSelectorControl : Control
+    {
+        private const string PART_TodayButton = nameof(PART_TodayButton);
+        private const string PART_DayToggle = nameof(PART_DayToggle);
+        private const string PART_WeekToggle = nameof(PART_WeekToggle);
+        private const string PART_MonthToggle = nameof(PART_MonthToggle);
+        private const string PART_YearToggle = nameof(PART_YearToggle);
+
+        public static readonly DependencyProperty SelectedTypeProperty = DependencyProperty.Register(nameof(SelectedType), typeof(CalendarDisplayType), typeof(WinoCalendarTypeSelectorControl), new PropertyMetadata(CalendarDisplayType.Week));
+        public static readonly DependencyProperty DisplayDayCountProperty = DependencyProperty.Register(nameof(DisplayDayCount), typeof(int), typeof(WinoCalendarTypeSelectorControl), new PropertyMetadata(0));
+        public static readonly DependencyProperty TodayClickedCommandProperty = DependencyProperty.Register(nameof(TodayClickedCommand), typeof(ICommand), typeof(WinoCalendarTypeSelectorControl), new PropertyMetadata(null));
+
+        public ICommand TodayClickedCommand
+        {
+            get { return (ICommand)GetValue(TodayClickedCommandProperty); }
+            set { SetValue(TodayClickedCommandProperty, value); }
+        }
+
+        public CalendarDisplayType SelectedType
+        {
+            get { return (CalendarDisplayType)GetValue(SelectedTypeProperty); }
+            set { SetValue(SelectedTypeProperty, value); }
+        }
+
+        public int DisplayDayCount
+        {
+            get { return (int)GetValue(DisplayDayCountProperty); }
+            set { SetValue(DisplayDayCountProperty, value); }
+        }
+
+        private AppBarButton _todayButton;
+        private AppBarToggleButton _dayToggle;
+        private AppBarToggleButton _weekToggle;
+        private AppBarToggleButton _monthToggle;
+        private AppBarToggleButton _yearToggle;
+
+        public WinoCalendarTypeSelectorControl()
+        {
+            DefaultStyleKey = typeof(WinoCalendarTypeSelectorControl);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            _todayButton = GetTemplateChild(PART_TodayButton) as AppBarButton;
+            _dayToggle = GetTemplateChild(PART_DayToggle) as AppBarToggleButton;
+            _weekToggle = GetTemplateChild(PART_WeekToggle) as AppBarToggleButton;
+            _monthToggle = GetTemplateChild(PART_MonthToggle) as AppBarToggleButton;
+            _yearToggle = GetTemplateChild(PART_YearToggle) as AppBarToggleButton;
+
+            Guard.IsNotNull(_todayButton, nameof(_todayButton));
+            Guard.IsNotNull(_dayToggle, nameof(_dayToggle));
+            Guard.IsNotNull(_weekToggle, nameof(_weekToggle));
+            Guard.IsNotNull(_monthToggle, nameof(_monthToggle));
+            Guard.IsNotNull(_yearToggle, nameof(_yearToggle));
+
+            _todayButton.Click += TodayClicked;
+
+            _dayToggle.Click += (s, e) => { SetSelectedType(CalendarDisplayType.Day); };
+            _weekToggle.Click += (s, e) => { SetSelectedType(CalendarDisplayType.Week); };
+            _monthToggle.Click += (s, e) => { SetSelectedType(CalendarDisplayType.Month); };
+            _yearToggle.Click += (s, e) => { SetSelectedType(CalendarDisplayType.Year); };
+
+            UpdateToggleButtonStates();
+        }
+
+        private void TodayClicked(object sender, RoutedEventArgs e) => TodayClickedCommand?.Execute(null);
+
+        private void SetSelectedType(CalendarDisplayType type)
+        {
+            SelectedType = type;
+            UpdateToggleButtonStates();
+        }
+
+        private void UpdateToggleButtonStates()
+        {
+            _dayToggle.IsChecked = SelectedType == CalendarDisplayType.Day;
+            _weekToggle.IsChecked = SelectedType == CalendarDisplayType.Week;
+            _monthToggle.IsChecked = SelectedType == CalendarDisplayType.Month;
+            _yearToggle.IsChecked = SelectedType == CalendarDisplayType.Year;
+        }
+    }
+}

Wino.Calendar/Controls/WinoCalendarView.cs

@@ -0,0 +1,145 @@
+using System;
+using System.Windows.Input;
+using CommunityToolkit.Diagnostics;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
+using Wino.Core.Domain.Models.Calendar;
+using Wino.Helpers;
+
+namespace Wino.Calendar.Controls
+{
+    public class WinoCalendarView : Control
+    {
+        private const string PART_DayViewItemBorder = nameof(PART_DayViewItemBorder);
+        private const string PART_CalendarView = nameof(PART_CalendarView);
+
+        public static readonly DependencyProperty HighlightedDateRangeProperty = DependencyProperty.Register(nameof(HighlightedDateRange), typeof(DateRange), typeof(WinoCalendarView), new PropertyMetadata(null, new PropertyChangedCallback(OnHighlightedDateRangeChanged)));
+        public static readonly DependencyProperty VisibleDateBackgroundProperty = DependencyProperty.Register(nameof(VisibleDateBackground), typeof(Brush), typeof(WinoCalendarView), new PropertyMetadata(null, new PropertyChangedCallback(OnPropertiesChanged)));
+        public static readonly DependencyProperty TodayBackgroundBrushProperty = DependencyProperty.Register(nameof(TodayBackgroundBrush), typeof(Brush), typeof(WinoCalendarView), new PropertyMetadata(null));
+        public static readonly DependencyProperty DateClickedCommandProperty = DependencyProperty.Register(nameof(DateClickedCommand), typeof(ICommand), typeof(WinoCalendarView), new PropertyMetadata(null));
+
+        /// <summary>
+        /// Gets or sets the command to execute when a date is picked.
+        /// Unused.
+        /// </summary>
+        public ICommand DateClickedCommand
+        {
+            get { return (ICommand)GetValue(DateClickedCommandProperty); }
+            set { SetValue(DateClickedCommandProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the highlighted range of dates.
+        /// </summary>
+        public DateRange HighlightedDateRange
+        {
+            get { return (DateRange)GetValue(HighlightedDateRangeProperty); }
+            set { SetValue(HighlightedDateRangeProperty, value); }
+        }
+
+        public Brush VisibleDateBackground
+        {
+            get { return (Brush)GetValue(VisibleDateBackgroundProperty); }
+            set { SetValue(VisibleDateBackgroundProperty, value); }
+        }
+
+        public Brush TodayBackgroundBrush
+        {
+            get { return (Brush)GetValue(TodayBackgroundBrushProperty); }
+            set { SetValue(TodayBackgroundBrushProperty, value); }
+        }
+
+        private CalendarView CalendarView;
+
+        public WinoCalendarView()
+        {
+            DefaultStyleKey = typeof(WinoCalendarView);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            CalendarView = GetTemplateChild(PART_CalendarView) as CalendarView;
+
+            Guard.IsNotNull(CalendarView, nameof(CalendarView));
+
+            CalendarView.SelectedDatesChanged -= InternalCalendarViewSelectionChanged;
+            CalendarView.SelectedDatesChanged += InternalCalendarViewSelectionChanged;
+
+            // TODO: Should come from settings.
+            CalendarView.FirstDayOfWeek = Windows.Globalization.DayOfWeek.Monday;
+
+            // Everytime display mode changes, update the visible date range backgrounds.
+            // If users go back from year -> month -> day, we need to update the visible date range backgrounds.
+
+            CalendarView.RegisterPropertyChangedCallback(CalendarView.DisplayModeProperty, (s, e) => UpdateVisibleDateRangeBackgrounds());
+        }
+
+        private void InternalCalendarViewSelectionChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
+        {
+            if (args.AddedDates?.Count > 0)
+            {
+                var clickedDate = args.AddedDates[0].Date;
+                SetInnerDisplayDate(clickedDate);
+
+                var clickArgs = new CalendarViewDayClickedEventArgs(clickedDate);
+                DateClickedCommand?.Execute(clickArgs);
+            }
+
+            // Reset selection, we don't show selected dates but react to them.
+            CalendarView.SelectedDates.Clear();
+        }
+
+        private static void OnPropertiesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is WinoCalendarView control)
+            {
+                control.UpdateVisibleDateRangeBackgrounds();
+            }
+        }
+
+        private void SetInnerDisplayDate(DateTime dateTime) => CalendarView?.SetDisplayDate(dateTime);
+
+        // Changing selected dates will trigger the selection changed event.
+        // It will behave like user clicked the date.
+        public void GoToDay(DateTime dateTime) => CalendarView.SelectedDates.Add(dateTime);
+
+        private static void OnHighlightedDateRangeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is WinoCalendarView control)
+            {
+                control.SetInnerDisplayDate(control.HighlightedDateRange.StartDate);
+                control.UpdateVisibleDateRangeBackgrounds();
+            }
+        }
+
+        public void UpdateVisibleDateRangeBackgrounds()
+        {
+            if (HighlightedDateRange == null || VisibleDateBackground == null || TodayBackgroundBrush == null || CalendarView == null) return;
+
+            var markDateCalendarDayItems = WinoVisualTreeHelper.FindDescendants<CalendarViewDayItem>(CalendarView);
+
+            foreach (var calendarDayItem in markDateCalendarDayItems)
+            {
+                var border = WinoVisualTreeHelper.GetChildObject<Border>(calendarDayItem, PART_DayViewItemBorder);
+
+                if (border == null) return;
+
+                if (calendarDayItem.Date.Date == DateTime.Today.Date)
+                {
+                    border.Background = TodayBackgroundBrush;
+                }
+                else if (calendarDayItem.Date.Date >= HighlightedDateRange.StartDate.Date && calendarDayItem.Date.Date < HighlightedDateRange.EndDate.Date)
+                {
+                    border.Background = VisibleDateBackground;
+                }
+                else
+                {
+                    border.Background = null;
+                }
+            }
+        }
+    }
+}

Wino.Calendar/Controls/WinoDayTimelineCanvas.cs

@@ -0,0 +1,277 @@
+using System;
+using System.Diagnostics;
+using Microsoft.Graphics.Canvas.Geometry;
+using Microsoft.Graphics.Canvas.UI.Xaml;
+using Windows.Foundation;
+using Windows.UI.Input;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
+using Wino.Calendar.Args;
+using Wino.Core.Domain.Models.Calendar;
+
+namespace Wino.Calendar.Controls
+{
+    public class WinoDayTimelineCanvas : Control, IDisposable
+    {
+        public event EventHandler<TimelineCellSelectedArgs> TimelineCellSelected;
+        public event EventHandler<TimelineCellUnselectedArgs> TimelineCellUnselected;
+
+        private const string PART_InternalCanvas = nameof(PART_InternalCanvas);
+        private CanvasControl Canvas;
+
+        public static readonly DependencyProperty RenderOptionsProperty = DependencyProperty.Register(nameof(RenderOptions), typeof(CalendarRenderOptions), typeof(WinoDayTimelineCanvas), new PropertyMetadata(null, new PropertyChangedCallback(OnRenderingPropertiesChanged)));
+        public static readonly DependencyProperty SeperatorColorProperty = DependencyProperty.Register(nameof(SeperatorColor), typeof(SolidColorBrush), typeof(WinoDayTimelineCanvas), new PropertyMetadata(null, new PropertyChangedCallback(OnRenderingPropertiesChanged)));
+        public static readonly DependencyProperty HalfHourSeperatorColorProperty = DependencyProperty.Register(nameof(HalfHourSeperatorColor), typeof(SolidColorBrush), typeof(WinoDayTimelineCanvas), new PropertyMetadata(null, new PropertyChangedCallback(OnRenderingPropertiesChanged)));
+        public static readonly DependencyProperty SelectedCellBackgroundBrushProperty = DependencyProperty.Register(nameof(SelectedCellBackgroundBrush), typeof(SolidColorBrush), typeof(WinoDayTimelineCanvas), new PropertyMetadata(null, new PropertyChangedCallback(OnRenderingPropertiesChanged)));
+        public static readonly DependencyProperty WorkingHourCellBackgroundColorProperty = DependencyProperty.Register(nameof(WorkingHourCellBackgroundColor), typeof(SolidColorBrush), typeof(WinoDayTimelineCanvas), new PropertyMetadata(null, new PropertyChangedCallback(OnRenderingPropertiesChanged)));
+        public static readonly DependencyProperty SelectedDateTimeProperty = DependencyProperty.Register(nameof(SelectedDateTime), typeof(DateTime?), typeof(WinoDayTimelineCanvas), new PropertyMetadata(null, new PropertyChangedCallback(OnSelectedDateTimeChanged)));
+        public static readonly DependencyProperty PositionerUIElementProperty = DependencyProperty.Register(nameof(PositionerUIElement), typeof(UIElement), typeof(WinoDayTimelineCanvas), new PropertyMetadata(null));
+
+        public UIElement PositionerUIElement
+        {
+            get { return (UIElement)GetValue(PositionerUIElementProperty); }
+            set { SetValue(PositionerUIElementProperty, value); }
+        }
+
+        public CalendarRenderOptions RenderOptions
+        {
+            get { return (CalendarRenderOptions)GetValue(RenderOptionsProperty); }
+            set { SetValue(RenderOptionsProperty, value); }
+        }
+
+        public SolidColorBrush HalfHourSeperatorColor
+        {
+            get { return (SolidColorBrush)GetValue(HalfHourSeperatorColorProperty); }
+            set { SetValue(HalfHourSeperatorColorProperty, value); }
+        }
+
+        public SolidColorBrush SeperatorColor
+        {
+            get { return (SolidColorBrush)GetValue(SeperatorColorProperty); }
+            set { SetValue(SeperatorColorProperty, value); }
+        }
+
+        public SolidColorBrush WorkingHourCellBackgroundColor
+        {
+            get { return (SolidColorBrush)GetValue(WorkingHourCellBackgroundColorProperty); }
+            set { SetValue(WorkingHourCellBackgroundColorProperty, value); }
+        }
+
+        public SolidColorBrush SelectedCellBackgroundBrush
+        {
+            get { return (SolidColorBrush)GetValue(SelectedCellBackgroundBrushProperty); }
+            set { SetValue(SelectedCellBackgroundBrushProperty, value); }
+        }
+
+        public DateTime? SelectedDateTime
+        {
+            get { return (DateTime?)GetValue(SelectedDateTimeProperty); }
+            set { SetValue(SelectedDateTimeProperty, value); }
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            Canvas = GetTemplateChild(PART_InternalCanvas) as CanvasControl;
+
+            Canvas.Draw += OnCanvasDraw;
+            Canvas.PointerPressed += OnCanvasPointerPressed;
+
+            ForceDraw();
+        }
+
+        private static void OnSelectedDateTimeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is WinoDayTimelineCanvas control)
+            {
+                if (e.OldValue != null && e.NewValue == null)
+                {
+                    control.RaiseCellUnselected();
+                }
+
+                control.ForceDraw();
+            }
+        }
+
+        private void RaiseCellUnselected()
+        {
+            TimelineCellUnselected?.Invoke(this, new TimelineCellUnselectedArgs());
+        }
+
+        private void OnCanvasPointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
+        {
+            if (RenderOptions == null) return;
+
+            var hourHeight = RenderOptions.CalendarSettings.HourHeight;
+
+            // When users click to cell we need to find the day, hour and minutes (first 30 minutes or second 30 minutes) that it represents on the timeline.
+
+            PointerPoint positionerRootPoint = e.GetCurrentPoint(PositionerUIElement);
+            PointerPoint canvasPointerPoint = e.GetCurrentPoint(Canvas);
+
+            Point touchPoint = canvasPointerPoint.Position;
+
+            var singleDayWidth = (Canvas.ActualWidth / RenderOptions.TotalDayCount);
+
+            int day = (int)(touchPoint.X / singleDayWidth);
+            int hour = (int)(touchPoint.Y / hourHeight);
+
+            bool isSecondHalf = touchPoint.Y % hourHeight > (hourHeight / 2);
+
+            var diffX = positionerRootPoint.Position.X - touchPoint.X;
+            var diffY = positionerRootPoint.Position.Y - touchPoint.Y;
+
+            var cellStartRelativePositionX = diffX + (day * singleDayWidth);
+            var cellEndRelativePositionX = cellStartRelativePositionX + singleDayWidth;
+
+            var cellStartRelativePositionY = diffY + (hour * hourHeight) + (isSecondHalf ? hourHeight / 2 : 0);
+            var cellEndRelativePositionY = cellStartRelativePositionY + (isSecondHalf ? (hourHeight / 2) : hourHeight);
+
+            var cellSize = new Size(cellEndRelativePositionX - cellStartRelativePositionX, hourHeight / 2);
+            var positionerPoint = new Point(cellStartRelativePositionX, cellStartRelativePositionY);
+
+            var clickedDateTime = RenderOptions.DateRange.StartDate.AddDays(day).AddHours(hour).AddMinutes(isSecondHalf ? 30 : 0);
+
+            // If there is already a selected date, in order to mimic the popup behavior, we need to dismiss the previous selection first.
+            // Next click will be a new selection.
+
+            // Raise the events directly here instead of DP to not lose pointer position.
+            if (clickedDateTime == SelectedDateTime || SelectedDateTime != null)
+            {
+                SelectedDateTime = null;
+            }
+            else
+            {
+                TimelineCellSelected?.Invoke(this, new TimelineCellSelectedArgs(clickedDateTime, touchPoint, positionerPoint, cellSize));
+                SelectedDateTime = clickedDateTime;
+            }
+
+            Debug.WriteLine($"Clicked: {clickedDateTime}");
+        }
+
+        public WinoDayTimelineCanvas()
+        {
+            DefaultStyleKey = typeof(WinoDayTimelineCanvas);
+        }
+
+        private static void OnRenderingPropertiesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is WinoDayTimelineCanvas control)
+            {
+                control.ForceDraw();
+            }
+        }
+
+        private void ForceDraw() => Canvas?.Invalidate();
+
+        private bool CanDrawTimeline()
+        {
+            return RenderOptions != null
+                && Canvas != null
+                && Canvas.ReadyToDraw
+                && WorkingHourCellBackgroundColor != null
+                && SeperatorColor != null
+                && HalfHourSeperatorColor != null
+                && SelectedCellBackgroundBrush != null;
+        }
+
+        private void OnCanvasDraw(CanvasControl sender, CanvasDrawEventArgs args)
+        {
+            if (!CanDrawTimeline()) return;
+
+            int hours = 24;
+
+            double canvasWidth = Canvas.ActualWidth;
+            double canvasHeight = Canvas.ActualHeight;
+
+            if (canvasWidth == 0 || canvasHeight == 0) return;
+
+            // Calculate the width of each rectangle (1 day column)
+            // Equal distribution of the whole width.
+            double rectWidth = canvasWidth / RenderOptions.TotalDayCount;
+
+            // Calculate the height of each rectangle (1 hour row)
+            double rectHeight = RenderOptions.CalendarSettings.HourHeight;
+
+            // Define stroke and fill colors
+            var strokeColor = SeperatorColor.Color;
+            float strokeThickness = 0.5f;
+
+            for (int day = 0; day < RenderOptions.TotalDayCount; day++)
+            {
+                var currentDay = RenderOptions.DateRange.StartDate.AddDays(day);
+
+                bool isWorkingDay = RenderOptions.CalendarSettings.WorkingDays.Contains(currentDay.DayOfWeek);
+
+                // Loop through each hour (rows)
+                for (int hour = 0; hour < hours; hour++)
+                {
+                    var renderTime = TimeSpan.FromHours(hour);
+
+                    var representingDateTime = currentDay.AddHours(hour);
+
+                    // Calculate the position and size of the rectangle
+                    double x = day * rectWidth;
+                    double y = hour * rectHeight;
+
+                    var rectangle = new Rect(x, y, rectWidth, rectHeight);
+
+                    // Draw the rectangle border.
+                    // This is the main rectangle.
+                    args.DrawingSession.DrawRectangle(rectangle, strokeColor, strokeThickness);
+
+                    // Fill another rectangle with the working hour background color
+                    // This rectangle must be placed with -1 margin to prevent invisible borders of the main rectangle.
+                    if (isWorkingDay && renderTime >= RenderOptions.CalendarSettings.WorkingHourStart && renderTime <= RenderOptions.CalendarSettings.WorkingHourEnd)
+                    {
+                        var backgroundRectangle = new Rect(x + 1, y + 1, rectWidth - 1, rectHeight - 1);
+
+                        args.DrawingSession.DrawRectangle(backgroundRectangle, strokeColor, strokeThickness);
+                        args.DrawingSession.FillRectangle(backgroundRectangle, WorkingHourCellBackgroundColor.Color);
+                    }
+
+                    // Draw a line in the center of the rectangle for representing half hours.
+                    double lineY = y + rectHeight / 2;
+
+                    args.DrawingSession.DrawLine((float)x, (float)lineY, (float)(x + rectWidth), (float)lineY, HalfHourSeperatorColor.Color, strokeThickness, new CanvasStrokeStyle()
+                    {
+                        DashStyle = CanvasDashStyle.Dot
+                    });
+                }
+
+                // Draw selected item background color for the date if possible.
+                if (SelectedDateTime != null)
+                {
+                    var selectedDateTime = SelectedDateTime.Value;
+                    if (selectedDateTime.Date == currentDay.Date)
+                    {
+                        var selectionRectHeight = rectHeight / 2;
+                        var selectedY = selectedDateTime.Hour * rectHeight + (selectedDateTime.Minute / 60) * rectHeight;
+
+                        // Second half of the hour is selected.
+                        if (selectedDateTime.TimeOfDay.Minutes == 30)
+                        {
+                            selectedY += rectHeight / 2;
+                        }
+
+                        var selectedRectangle = new Rect(day * rectWidth, selectedY, rectWidth, selectionRectHeight);
+                        args.DrawingSession.FillRectangle(selectedRectangle, SelectedCellBackgroundBrush.Color);
+                    }
+                }
+            }
+        }
+
+        public void Dispose()
+        {
+            if (Canvas == null) return;
+
+            Canvas.Draw -= OnCanvasDraw;
+            Canvas.PointerPressed -= OnCanvasPointerPressed;
+            Canvas.RemoveFromVisualTree();
+
+            Canvas = null;
+        }
+    }
+}