From 8811072e9c6bfa2f3ea8780bdbea24f95f3bfb5f Mon Sep 17 00:00:00 2001
From: markosteger <marko.steger@gmail.com>
Date: Mon, 6 Mar 2023 11:41:22 +0100
Subject: [PATCH 1/5] DatePicker - first commit

---
 .../Pages/Demo.razor                          |   9 +-
 .../Components/DatePicker/DatePicker.razor    |  79 +++++++++
 .../Components/DatePicker/DatePicker.razor.cs | 162 ++++++++++++++++++
 .../Connected.Components.csproj               |   1 +
 4 files changed, 248 insertions(+), 3 deletions(-)
 create mode 100644 src/Connected.Components/Components/DatePicker/DatePicker.razor
 create mode 100644 src/Connected.Components/Components/DatePicker/DatePicker.razor.cs

diff --git a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor
index eba1596..3bca23a 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor
@@ -946,7 +946,7 @@
 
 
                     <div class="form-outer">
-                        <div class="form-step @NextSlide">
+                    <div class="form-step previous">
                             <div class="row">
                                 <div class="col-12">Description for step 1</div>
                                 @* <div class="col-12 col-md-6 ">
@@ -995,9 +995,13 @@
                         </div>
                                       
 
-                        <div class="form-step @NextSlide">
+                        <div class="form-step">
                             <div class="bg-info">2</div>
                         </div>
+
+                        <div class="form-step next">
+                            <div class="bg-info">3</div>
+                        </div>
                     </div>
 
 
@@ -1014,7 +1018,6 @@
                                 <div class="dot completed"></div> 
                                 <div class="dot @NextSlide"></div>
                                 <div class="dot"></div>
-                                <div class="dot"></div>
                             </div>
 
 
diff --git a/src/Connected.Components/Components/DatePicker/DatePicker.razor b/src/Connected.Components/Components/DatePicker/DatePicker.razor
new file mode 100644
index 0000000..9f6bb34
--- /dev/null
+++ b/src/Connected.Components/Components/DatePicker/DatePicker.razor
@@ -0,0 +1,79 @@
+@using System.Globalization;
+@if (loaded)
+{
+    <TextInput Value="@SelectedDate.ToString(Format)" Readonly="_readonly"></TextInput>
+    @if (Shown)
+    {
+        <div id="picker" class="m-2" style="width:270px; height:auto;">
+            <div id="picker_header" class="bg-info" style="height:80px;">
+                <div class="text-medium p-1">
+                    @SelectedDate.Year.ToString()
+                </div>
+                <div class="text-large p-1">
+                    @SelectedDate.ToString("ddd, " + Format)
+                </div>
+            </div>
+            <div id="picker_body" class="bg-white" style="height:auto;">
+                @switch (Selecting)
+                {
+                    case Selecting.Years:
+                        {
+                            <div class="text-justify text-md-justify">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Days)>@SelectedDate.ToString("yyyy")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+                            break;
+                        }
+                    case Selecting.Months:
+                        {
+                            <div class="text-justify text-md-justify">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("yyyy")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+                                @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
+                                {
+                                    int m = i;
+                                    <a href="#" @onclick="@(()=>SetMonth(m))">
+
+                                    <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
+                                            <div class="chip-leading-icon"></div>
+                                            <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
+                                            <div class="chip-cta-icon"></div>
+                                        </div>
+
+                                    </a>
+                                    if (i%3==0) { <br/> }
+                                }
+                            break;
+                        }
+                    case (Selecting.Days):
+                        {
+                            <div class="text-justify text-md-justify">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+
+                            @for (int i = 0; i < 7; i++)
+                            {
+                                <div class="chip-leading-icon d-inline-block p-1 m-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1).ToUpper()</div>
+                            }
+                            @foreach (var Date in Dates)
+                            {
+                                <a href="#" @onclick="@(()=>SetDate(Date))"><div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">@Date.Day.ToString()</div></a>
+                                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                                {
+                                    <br />
+                                }
+
+                                calendarStart = calendarStart.AddDays(1);
+                            }
+                            break;
+                        }
+                }
+            </div>
+        </div>
+    }
+}
diff --git a/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs b/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs
new file mode 100644
index 0000000..b0b7f7e
--- /dev/null
+++ b/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs
@@ -0,0 +1,162 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components.DatePicker;
+public partial class DatePicker
+{
+	private bool loaded = false;
+
+	private Selecting Selecting = Selecting.Days;
+	public DateTime calendarStart { get; set; }
+	public DateTime calendarEnd { get; set; }
+
+	//private DateTime Today = DateTime.Today;
+
+	private DateTime SelectedDate = DateTime.Today;
+
+	private List<DateTime> Dates = new List<DateTime>();
+
+	[Parameter]
+	public string Format { get; set; } = "dd.MM.yyyy";
+
+	private bool _readonly = false;
+	[Parameter]
+	public bool Editable
+	{
+		get
+		{
+			return !_readonly;
+		}
+		set
+		{
+			_readonly = !value;
+		}
+	}
+
+	[Parameter]
+	public bool Shown { get; set; } = false;
+
+	public void SetMonthNavigation()
+	{
+
+	}
+
+	public void SetDate(DateTime Date)
+	{
+		SelectedDate = Date;
+		SetStartStop();
+		StateHasChanged();
+	}
+
+	public void SetMonth(int month)
+	{
+		SelectedDate = new DateTime(SelectedDate.Year, month, SelectedDate.Day);
+		SetStartStop();
+		StateHasChanged();
+	}
+
+	private string ChipFirstRowClass
+	{
+		get
+		{
+			return new CssBuilder()
+				.AddClass("chip-leading-icon d-inline-block p-1 bg-danger text-small text-light")
+				.Build();
+		}
+	}
+	private string ChipFirstRowStyle
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle("width", "30px")
+				.AddStyle("height", "30px")
+				.AddStyle("text-align", "center")
+				.Build();
+		}
+	}
+	/*
+	 @for (int i=0;i<7; i++)
+            {
+                <div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
+            }
+            @while (calendarStart.CompareTo(calendarEnd) < 0)
+            {
+                <a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
+                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                {
+                    <br />
+                }
+                calendarStart = calendarStart.AddDays(1);
+            } 
+	 
+	 */
+
+	public void SetStartStop()
+	{
+		calendarStart = SelectedDate;
+		while (calendarStart.Day != 1)
+		{
+			calendarStart = calendarStart.AddDays(-1);
+		}
+		while (!calendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
+		{
+			calendarStart = calendarStart.AddDays(-1);
+		}
+		calendarEnd = SelectedDate;
+		while (calendarEnd.Month == SelectedDate.Month)
+		{
+			calendarEnd = calendarEnd.AddDays(1);
+		}
+		while (!calendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
+		{
+			calendarEnd = calendarEnd.AddDays(1);
+		}
+		DateTime start = calendarStart;
+		if (Dates is null) Dates = new();
+		Dates.Clear();
+		while (start.CompareTo(calendarEnd) < 0)
+		{
+			Dates.Add(start);
+			start = start.AddDays(1);
+		}
+	}
+
+	public string DateChipStyle(DateTime date)
+	{
+		string result = "";
+		if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
+		if (date.Month.CompareTo(SelectedDate.Month) == 0)
+		{
+			if (date.Date.CompareTo(SelectedDate.Date) == 0)
+				return "bg-info text-light";
+			else
+				return "bg-core text-dark";
+		}
+		return result;
+	}
+
+	public string MonthChipClass(int month)
+	{
+		if (month.CompareTo(SelectedDate.Month) == 0)
+			return "bg-info text-light";
+		else
+			return "bg-core text-dark";
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
+		SelectedDate = DateTime.Today;
+		SetStartStop();
+		loaded = true;
+		await base.OnInitializedAsync();
+	}
+
+}
+
+public enum Selecting
+{
+	Days,
+	Months,
+	Years
+}
diff --git a/src/Connected.Components/Connected.Components.csproj b/src/Connected.Components/Connected.Components.csproj
index 5ca9ac7..da165bb 100644
--- a/src/Connected.Components/Connected.Components.csproj
+++ b/src/Connected.Components/Connected.Components.csproj
@@ -20,6 +20,7 @@
 
 	<ItemGroup>
 		<None Include="compilerconfig.json" />
+		<None Include="Components\DatePicker\DatePicker.razor" />
 	</ItemGroup>
 
 	<ItemGroup>

From 2972f931e19c48ebd9a44ae42ffdb63568e70456 Mon Sep 17 00:00:00 2001
From: markosteger <marko.steger@gmail.com>
Date: Mon, 6 Mar 2023 14:49:20 +0100
Subject: [PATCH 2/5] DatePicker - concept, waiting for proper css styling for
 final edit

---
 .../Pages/Index.razor                         |  45 +---
 .../Components/DatePicker.razor               | 109 ++++++++++
 .../Components/DatePicker.razor.cs            | 203 ++++++++++++++++++
 .../Components/ToggleGlyphButton.razor.cs     |  24 ---
 .../Connected.Components.csproj               |   2 +-
 5 files changed, 320 insertions(+), 63 deletions(-)
 create mode 100644 src/Connected.Components/Components/DatePicker.razor
 create mode 100644 src/Connected.Components/Components/DatePicker.razor.cs

diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
index 7df32d4..5d62b8a 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
@@ -3,47 +3,16 @@
 
 <h1 style="text-align:center;">Component Sandbox</h1>
 
+<DatePicker 
+CloseOnDateSelect=true
+@bind-Date=@date>
 
-<p>SelectedValue: @SelectedValue.ToString()</p>
+</DatePicker>
 
-<RadioGroup Name="Group1">
-    <Radio Id="radio1" Label="Group 1, Radio 1"></Radio>
-    <Radio Id="radio2" Label="Group 1, Radio 2"></Radio>
-    <Radio Id="radio3" Label="Group 1, Radio 3"></Radio>
-    <Radio Id="radio4" Label="Group 1, Radio 4"></Radio>
-    <Radio Id="radio5" Label="Group 1, Radio 5" Disabled=true></Radio>
-</RadioGroup>
+<p>Selected date is @date.ToString()</p>
 
-<RadioGroup Name="Group2" Disabled=true>
-    <Radio Id="radio21" Label="Group 2, Radio 1"></Radio>
-    <Radio Id="radio22" Label="Group 2, Radio 2"></Radio>
-    <Radio Id="radio23" Label="Group 2, Radio 3"></Radio>
-    <Radio Id="radio24" Label="Group 2, Radio 4"></Radio>
-    <Radio Id="radio25" Label="Group 2, Radio 5"></Radio>
-</RadioGroup>
-@code {
-
-    int SelectedValue;
-
-    List<int> items;
-
-    private void FillItemsList()
-    {
-        if (items is null) items = new();
 
-        Random random = new Random(DateTime.Now.Millisecond);
-
-        for (int i = 0; i < 10; i++)
-        {
-            int item = random.Next();
-            items.Add(item);
-        }
-        StateHasChanged();
-    }
-
-    protected override async Task OnInitializedAsync()
-    {
-        FillItemsList();
-    }
+@code {
+    DateTime date = DateTime.Today;
 
 }
\ No newline at end of file
diff --git a/src/Connected.Components/Components/DatePicker.razor b/src/Connected.Components/Components/DatePicker.razor
new file mode 100644
index 0000000..c71fa15
--- /dev/null
+++ b/src/Connected.Components/Components/DatePicker.razor
@@ -0,0 +1,109 @@
+@using System.Globalization;
+@if (loaded)
+{
+    <div id="picker" class="m-2" style="width:270px; height:auto;">
+        <!-- DatePicker input !can be edited manualy -->
+        <div class="inline-block"><input type="text" value="@Date.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div>
+        @if (Shown)
+        {
+            <!-- DatePicker header -->
+            <div id="picker_header" class="bg-info" style="height:80px;">
+                <div class="text-medium p-1">
+                    @Date.Year.ToString()
+                </div>
+                <div class="text-large p-1">
+                    @Date.ToString("ddd, " + Format)
+                </div>
+            </div>
+            <!-- DatePicker body -->
+            <div id="picker_body" class="bg-white" style="height:auto;">
+                @switch (Selecting)
+                {
+                    case Selecting.Years:
+                        {
+                            <div class="@NavBarClass">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@Date.ToString("yyyy")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+                            @for (int i = Date.Year - 7; i < Date.Year + 8; i++)
+                            {
+                                int y = i;
+                                <a href="#" @onclick="@(()=>SetYear(y))">
+                                    <div class="chip-group-content d-inline-flex bg-core m-1 b-1 b-r-3 text-light" style="width:30%;">
+                                        <div class="chip-leading-icon"></div>
+                                        <div class="chip-label">@i.ToString()</div>
+                                        <div class="chip-cta-icon"></div>
+                                    </div>
+
+                                </a>
+                                if (Date.Year - i % 3 == 0)
+                                {
+                                    <br />
+                                }
+                            }
+                            break;
+                        }
+                    case Selecting.Months:
+                        {
+                            <div class="@NavBarClass">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@Date.ToString("MMMM yyyy")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+                            @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
+                            {
+                                int m = i;
+                                <a href="#" @onclick="@(()=>SetMonth(m))">
+
+                                    <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
+                                        <div class="chip-leading-icon"></div>
+                                        <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
+                                        <div class="chip-cta-icon"></div>
+                                    </div>
+
+                                </a>
+                                if (i % 3 == 0)
+                                {
+                                    <br />
+                                }
+                            }
+                            break;
+                        }
+                    case (Selecting.Days):
+                        {
+                            <div class="@NavBarClass">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@Date.ToString("MMMM yyyy")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+
+                            @for (int i = 0; i < 7; i++)
+                            {
+                                <div class="@DayNamesRowClass" style="width:30px; height:30px; text-align:center; padding-top:5px;">@calendarStart.AddDays(i).ToString("ddd")</div>
+                            }
+                            @foreach (var Date in Dates)
+                            {
+                                <a href="#" @onclick="@(()=>SetDate(Date))">
+                                    <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
+                                        @Date.Day.ToString()
+                                    </div>
+                                </a>
+                                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                                {
+                                    <br />
+                                }
+
+                                calendarStart = calendarStart.AddDays(1);
+                            }
+                            break;
+                        }
+                }
+            </div>
+            <!-- Bottom bar -->
+            <div>
+                
+            </div>
+        }
+    </div>
+}
diff --git a/src/Connected.Components/Components/DatePicker.razor.cs b/src/Connected.Components/Components/DatePicker.razor.cs
new file mode 100644
index 0000000..f287ef0
--- /dev/null
+++ b/src/Connected.Components/Components/DatePicker.razor.cs
@@ -0,0 +1,203 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class DatePicker
+{
+	private bool loaded = false;
+
+	private Selecting Selecting = Selecting.Days;
+	public DateTime calendarStart { get; set; }
+	public DateTime calendarEnd { get; set; }
+
+	//private DateTime Today = DateTime.Today;
+
+	[Parameter]
+	public bool CloseOnDateSelect { get; set; } = false;
+
+	[Parameter]
+	public DateTime Date { get; set;  } = DateTime.Today;
+
+	[Parameter]
+	public EventCallback<DateTime> DateChanged { get; set; }
+
+	private List<DateTime> Dates = new List<DateTime>();
+
+	[Parameter]
+	public string Format { get; set; } = "dd.MM.yyyy";
+
+	private bool _readonly = false;
+	[Parameter]
+	public bool Editable
+	{
+		get
+		{
+			return !_readonly;
+		}
+		set
+		{
+			_readonly = !value;
+		}
+	}
+	private bool Shown { get; set; } = false;
+
+	public async Task SetDate(DateTime Date)
+	{
+		this.Date = Date;
+		SetStartStop();
+		if (CloseOnDateSelect)
+			Shown = false;
+		await DateChanged.InvokeAsync(this.Date);
+		StateHasChanged();
+	}
+
+	public async Task SetMonth(int month)
+	{
+		Date = new DateTime(Date.Year, month, Date.Day);
+		Selecting = Selecting.Days;
+		SetStartStop();
+		await DateChanged.InvokeAsync(this.Date);
+		StateHasChanged();
+	}
+
+	public async Task SetYear(int year)
+	{
+		Date = new DateTime(year, Date.Month, Date.Day);
+		Selecting = Selecting.Months;
+		SetStartStop();
+		await DateChanged.InvokeAsync(this.Date);
+		StateHasChanged();
+	}
+
+	private string DayNamesRowClass
+	{
+		get
+		{
+			return new CssBuilder()
+				.AddClass("chip-leading-icon")
+				.AddClass("d-inline-block")
+				.AddClass("m-1")
+				.AddClass("bg-danger")
+				.AddClass("text-small")
+				.AddClass("text-white")
+				.Build();
+		}
+	}
+	private string ChipFirstRowStyle
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle("width", "30px")
+				.AddStyle("height", "30px")
+				.AddStyle("text-align", "center")
+				.Build();
+		}
+	}
+	/*
+	 @for (int i=0;i<7; i++)
+            {
+                <div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
+            }
+            @while (calendarStart.CompareTo(calendarEnd) < 0)
+            {
+                <a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
+                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                {
+                    <br />
+                }
+                calendarStart = calendarStart.AddDays(1);
+            } 
+	 
+	 */
+
+	public void SetStartStop()
+	{
+		calendarStart = Date;
+		while (calendarStart.Day != 1)
+		{
+			calendarStart = calendarStart.AddDays(-1);
+		}
+		while (!calendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
+		{
+			calendarStart = calendarStart.AddDays(-1);
+		}
+		calendarEnd = Date;
+		while (calendarEnd.Month == Date.Month)
+		{
+			calendarEnd = calendarEnd.AddDays(1);
+		}
+		while (!calendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
+		{
+			calendarEnd = calendarEnd.AddDays(1);
+		}
+		DateTime start = calendarStart;
+		if (Dates is null) Dates = new();
+		Dates.Clear();
+		while (start.CompareTo(calendarEnd) < 0)
+		{
+			Dates.Add(start);
+			start = start.AddDays(1);
+		}
+	}
+
+	public string DateChipStyle(DateTime date)
+	{
+		string result = "";
+		if (date.Month.CompareTo(Date.Month) < 0 || date.Month.CompareTo(Date.Month) > 0) return "bg-core text-light";
+		if (date.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info";
+		if (date.Month.CompareTo(Date.Month) == 0)
+		{
+			if (date.Date.CompareTo(Date.Date) == 0)
+				return result+" bg-info text-light";
+			else
+				return result+" bg-core text-dark";
+		}
+		return result;
+	}
+
+	public string MonthChipClass(int month)
+	{
+		if (month.CompareTo(Date.Month) == 0)
+			return "bg-info text-light";
+		else
+			return "bg-core text-dark";
+	}
+
+	public string YearChipClass(int year)
+	{
+		if (year.CompareTo(Date.Year) == 0)
+			return "bg-info text-light";
+		else
+			return "bg-core text-dark";
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
+		Date = DateTime.Today;
+		SetStartStop();
+		loaded = true;
+		await base.OnInitializedAsync();
+	}
+
+	private string NavBarClass
+	{
+		get
+		{
+			return new CssBuilder("text-justify")
+				.AddClass("text-md-justify")
+				//.AddClass("bg-warning")
+				.AddClass("text-small")
+				.AddClass("text-dark")
+				.Build();
+		}
+	}
+
+}
+
+public enum Selecting
+{
+	Days,
+	Months,
+	Years
+}
diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs
index e8349b0..eca7b3f 100644
--- a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs
+++ b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs
@@ -75,17 +75,6 @@ public partial class ToggleGlyphButton: Button
 
 	#region Styling
 
-	public string StyleList
-	{
-		get
-		{
-			return new StyleBuilder()
-				.AddStyle(base.Style)
-				.Build();
-		}
-	}
-
-
 	/// <summary>
 	/// Generated class list for button based on user parameters
 	/// </summary>
@@ -102,19 +91,6 @@ public partial class ToggleGlyphButton: Button
 		}
 	}
 
-	/// <summary>
-	/// Generated class list for button based on user parameters
-	/// </summary>
-	public string ContentClassList
-	{
-		get
-		{
-			return new CssBuilder("")
-				.AddClass(base.ContentClass)
-				.Build();
-		}
-	}
-
 	#endregion
 
 }
diff --git a/src/Connected.Components/Connected.Components.csproj b/src/Connected.Components/Connected.Components.csproj
index da165bb..93ee4f7 100644
--- a/src/Connected.Components/Connected.Components.csproj
+++ b/src/Connected.Components/Connected.Components.csproj
@@ -20,7 +20,7 @@
 
 	<ItemGroup>
 		<None Include="compilerconfig.json" />
-		<None Include="Components\DatePicker\DatePicker.razor" />
+		<None Include="Components\DatePicker.razor" />
 	</ItemGroup>
 
 	<ItemGroup>

From 515172ffb66953b3ef01d98ec14c18a5d6ca6d42 Mon Sep 17 00:00:00 2001
From: markosteger <marko.steger@gmail.com>
Date: Mon, 6 Mar 2023 15:15:25 +0100
Subject: [PATCH 3/5] DatePicker - changes on variable acces level (public ->
 private), variable names, Added methods for range select (only framework,
 nothing works yet)

---
 .../Components/DatePicker.razor.cs            | 73 +++++++++++--------
 1 file changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/Connected.Components/Components/DatePicker.razor.cs b/src/Connected.Components/Components/DatePicker.razor.cs
index f287ef0..676bedd 100644
--- a/src/Connected.Components/Components/DatePicker.razor.cs
+++ b/src/Connected.Components/Components/DatePicker.razor.cs
@@ -7,8 +7,8 @@ public partial class DatePicker
 	private bool loaded = false;
 
 	private Selecting Selecting = Selecting.Days;
-	public DateTime calendarStart { get; set; }
-	public DateTime calendarEnd { get; set; }
+	private DateTime CalendarStart { get; set; } = DateTime.Today;
+	private DateTime CalendarEnd { get; set; } = DateTime.Today;
 
 	//private DateTime Today = DateTime.Today;
 
@@ -16,12 +16,21 @@ public partial class DatePicker
 	public bool CloseOnDateSelect { get; set; } = false;
 
 	[Parameter]
-	public DateTime Date { get; set;  } = DateTime.Today;
+	public DateTime SelectedDate { get; set;  } = DateTime.Today;
 
 	[Parameter]
-	public EventCallback<DateTime> DateChanged { get; set; }
+	public DateTime? SelectedEndDate { get; set; } = null;
 
-	private List<DateTime> Dates = new List<DateTime>();
+	[Parameter]
+	public EventCallback<DateTime> SelectedDateChanged { get; set; }
+
+	[Parameter]
+	public EventCallback<DateTime?> SelectedEndDateChanged { get; set; }
+
+	private List<DateTime> ShowingDates = new List<DateTime>();
+
+	[Parameter]
+	public bool UseDateRange { get; set; } = false;
 
 	[Parameter]
 	public string Format { get; set; } = "dd.MM.yyyy";
@@ -43,29 +52,29 @@ public partial class DatePicker
 
 	public async Task SetDate(DateTime Date)
 	{
-		this.Date = Date;
+		SelectedDate = Date;
 		SetStartStop();
 		if (CloseOnDateSelect)
 			Shown = false;
-		await DateChanged.InvokeAsync(this.Date);
+		await SelectedDateChanged.InvokeAsync(SelectedDate);
 		StateHasChanged();
 	}
 
 	public async Task SetMonth(int month)
 	{
-		Date = new DateTime(Date.Year, month, Date.Day);
+		SelectedDate = new DateTime(SelectedDate.Year, month, SelectedDate.Day);
 		Selecting = Selecting.Days;
 		SetStartStop();
-		await DateChanged.InvokeAsync(this.Date);
+		await SelectedDateChanged.InvokeAsync(SelectedDate);
 		StateHasChanged();
 	}
 
 	public async Task SetYear(int year)
 	{
-		Date = new DateTime(year, Date.Month, Date.Day);
+		SelectedDate = new DateTime(year, SelectedDate.Month, SelectedDate.Day);
 		Selecting = Selecting.Months;
 		SetStartStop();
-		await DateChanged.InvokeAsync(this.Date);
+		await SelectedDateChanged.InvokeAsync(SelectedDate);
 		StateHasChanged();
 	}
 
@@ -113,30 +122,30 @@ public partial class DatePicker
 
 	public void SetStartStop()
 	{
-		calendarStart = Date;
-		while (calendarStart.Day != 1)
+		CalendarStart = SelectedDate;
+		while (CalendarStart.Day != 1)
 		{
-			calendarStart = calendarStart.AddDays(-1);
+			CalendarStart = CalendarStart.AddDays(-1);
 		}
-		while (!calendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
+		while (!CalendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
 		{
-			calendarStart = calendarStart.AddDays(-1);
+			CalendarStart = CalendarStart.AddDays(-1);
 		}
-		calendarEnd = Date;
-		while (calendarEnd.Month == Date.Month)
+		CalendarEnd = SelectedDate;
+		while (CalendarEnd.Month == SelectedDate.Month)
 		{
-			calendarEnd = calendarEnd.AddDays(1);
+			CalendarEnd = CalendarEnd.AddDays(1);
 		}
-		while (!calendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
+		while (!CalendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
 		{
-			calendarEnd = calendarEnd.AddDays(1);
+			CalendarEnd = CalendarEnd.AddDays(1);
 		}
-		DateTime start = calendarStart;
-		if (Dates is null) Dates = new();
-		Dates.Clear();
-		while (start.CompareTo(calendarEnd) < 0)
+		DateTime start = CalendarStart;
+		if (ShowingDates is null) ShowingDates = new();
+		ShowingDates.Clear();
+		while (start.CompareTo(CalendarEnd) < 0)
 		{
-			Dates.Add(start);
+			ShowingDates.Add(start);
 			start = start.AddDays(1);
 		}
 	}
@@ -144,11 +153,11 @@ public partial class DatePicker
 	public string DateChipStyle(DateTime date)
 	{
 		string result = "";
-		if (date.Month.CompareTo(Date.Month) < 0 || date.Month.CompareTo(Date.Month) > 0) return "bg-core text-light";
+		if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
 		if (date.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info";
-		if (date.Month.CompareTo(Date.Month) == 0)
+		if (date.Month.CompareTo(SelectedDate.Month) == 0)
 		{
-			if (date.Date.CompareTo(Date.Date) == 0)
+			if (date.Date.CompareTo(SelectedDate.Date) == 0)
 				return result+" bg-info text-light";
 			else
 				return result+" bg-core text-dark";
@@ -158,7 +167,7 @@ public partial class DatePicker
 
 	public string MonthChipClass(int month)
 	{
-		if (month.CompareTo(Date.Month) == 0)
+		if (month.CompareTo(SelectedDate.Month) == 0)
 			return "bg-info text-light";
 		else
 			return "bg-core text-dark";
@@ -166,7 +175,7 @@ public partial class DatePicker
 
 	public string YearChipClass(int year)
 	{
-		if (year.CompareTo(Date.Year) == 0)
+		if (year.CompareTo(SelectedDate.Year) == 0)
 			return "bg-info text-light";
 		else
 			return "bg-core text-dark";
@@ -174,7 +183,7 @@ public partial class DatePicker
 
 	protected override async Task OnInitializedAsync()
 	{
-		Date = DateTime.Today;
+		SelectedDate = DateTime.Today;
 		SetStartStop();
 		loaded = true;
 		await base.OnInitializedAsync();

From 1bb1c0af5818f0d0c6107166fdddd9daea917361 Mon Sep 17 00:00:00 2001
From: markosteger <marko.steger@gmail.com>
Date: Mon, 6 Mar 2023 15:18:09 +0100
Subject: [PATCH 4/5] DatePicker - Index update binding beacuse of the name
 changes

---
 .../Pages/Index.razor                         |   2 +-
 .../Components/DatePicker/DatePicker.razor    |  79 ---------
 .../Components/DatePicker/DatePicker.razor.cs | 162 ------------------
 3 files changed, 1 insertion(+), 242 deletions(-)
 delete mode 100644 src/Connected.Components/Components/DatePicker/DatePicker.razor
 delete mode 100644 src/Connected.Components/Components/DatePicker/DatePicker.razor.cs

diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
index 5d62b8a..0e1ec6b 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
@@ -5,7 +5,7 @@
 
 <DatePicker 
 CloseOnDateSelect=true
-@bind-Date=@date>
+@bind-SelectedDate=@date>
 
 </DatePicker>
 
diff --git a/src/Connected.Components/Components/DatePicker/DatePicker.razor b/src/Connected.Components/Components/DatePicker/DatePicker.razor
deleted file mode 100644
index 9f6bb34..0000000
--- a/src/Connected.Components/Components/DatePicker/DatePicker.razor
+++ /dev/null
@@ -1,79 +0,0 @@
-@using System.Globalization;
-@if (loaded)
-{
-    <TextInput Value="@SelectedDate.ToString(Format)" Readonly="_readonly"></TextInput>
-    @if (Shown)
-    {
-        <div id="picker" class="m-2" style="width:270px; height:auto;">
-            <div id="picker_header" class="bg-info" style="height:80px;">
-                <div class="text-medium p-1">
-                    @SelectedDate.Year.ToString()
-                </div>
-                <div class="text-large p-1">
-                    @SelectedDate.ToString("ddd, " + Format)
-                </div>
-            </div>
-            <div id="picker_body" class="bg-white" style="height:auto;">
-                @switch (Selecting)
-                {
-                    case Selecting.Years:
-                        {
-                            <div class="text-justify text-md-justify">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Days)>@SelectedDate.ToString("yyyy")</div>
-                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
-                            </div>
-                            break;
-                        }
-                    case Selecting.Months:
-                        {
-                            <div class="text-justify text-md-justify">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("yyyy")</div>
-                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
-                            </div>
-                                @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
-                                {
-                                    int m = i;
-                                    <a href="#" @onclick="@(()=>SetMonth(m))">
-
-                                    <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
-                                            <div class="chip-leading-icon"></div>
-                                            <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
-                                            <div class="chip-cta-icon"></div>
-                                        </div>
-
-                                    </a>
-                                    if (i%3==0) { <br/> }
-                                }
-                            break;
-                        }
-                    case (Selecting.Days):
-                        {
-                            <div class="text-justify text-md-justify">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM")</div>
-                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
-                            </div>
-
-                            @for (int i = 0; i < 7; i++)
-                            {
-                                <div class="chip-leading-icon d-inline-block p-1 m-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1).ToUpper()</div>
-                            }
-                            @foreach (var Date in Dates)
-                            {
-                                <a href="#" @onclick="@(()=>SetDate(Date))"><div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">@Date.Day.ToString()</div></a>
-                                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
-                                {
-                                    <br />
-                                }
-
-                                calendarStart = calendarStart.AddDays(1);
-                            }
-                            break;
-                        }
-                }
-            </div>
-        </div>
-    }
-}
diff --git a/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs b/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs
deleted file mode 100644
index b0b7f7e..0000000
--- a/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs
+++ /dev/null
@@ -1,162 +0,0 @@
-using Connected.Utilities;
-using Microsoft.AspNetCore.Components;
-
-namespace Connected.Components.DatePicker;
-public partial class DatePicker
-{
-	private bool loaded = false;
-
-	private Selecting Selecting = Selecting.Days;
-	public DateTime calendarStart { get; set; }
-	public DateTime calendarEnd { get; set; }
-
-	//private DateTime Today = DateTime.Today;
-
-	private DateTime SelectedDate = DateTime.Today;
-
-	private List<DateTime> Dates = new List<DateTime>();
-
-	[Parameter]
-	public string Format { get; set; } = "dd.MM.yyyy";
-
-	private bool _readonly = false;
-	[Parameter]
-	public bool Editable
-	{
-		get
-		{
-			return !_readonly;
-		}
-		set
-		{
-			_readonly = !value;
-		}
-	}
-
-	[Parameter]
-	public bool Shown { get; set; } = false;
-
-	public void SetMonthNavigation()
-	{
-
-	}
-
-	public void SetDate(DateTime Date)
-	{
-		SelectedDate = Date;
-		SetStartStop();
-		StateHasChanged();
-	}
-
-	public void SetMonth(int month)
-	{
-		SelectedDate = new DateTime(SelectedDate.Year, month, SelectedDate.Day);
-		SetStartStop();
-		StateHasChanged();
-	}
-
-	private string ChipFirstRowClass
-	{
-		get
-		{
-			return new CssBuilder()
-				.AddClass("chip-leading-icon d-inline-block p-1 bg-danger text-small text-light")
-				.Build();
-		}
-	}
-	private string ChipFirstRowStyle
-	{
-		get
-		{
-			return new StyleBuilder()
-				.AddStyle("width", "30px")
-				.AddStyle("height", "30px")
-				.AddStyle("text-align", "center")
-				.Build();
-		}
-	}
-	/*
-	 @for (int i=0;i<7; i++)
-            {
-                <div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
-            }
-            @while (calendarStart.CompareTo(calendarEnd) < 0)
-            {
-                <a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
-                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
-                {
-                    <br />
-                }
-                calendarStart = calendarStart.AddDays(1);
-            } 
-	 
-	 */
-
-	public void SetStartStop()
-	{
-		calendarStart = SelectedDate;
-		while (calendarStart.Day != 1)
-		{
-			calendarStart = calendarStart.AddDays(-1);
-		}
-		while (!calendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
-		{
-			calendarStart = calendarStart.AddDays(-1);
-		}
-		calendarEnd = SelectedDate;
-		while (calendarEnd.Month == SelectedDate.Month)
-		{
-			calendarEnd = calendarEnd.AddDays(1);
-		}
-		while (!calendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
-		{
-			calendarEnd = calendarEnd.AddDays(1);
-		}
-		DateTime start = calendarStart;
-		if (Dates is null) Dates = new();
-		Dates.Clear();
-		while (start.CompareTo(calendarEnd) < 0)
-		{
-			Dates.Add(start);
-			start = start.AddDays(1);
-		}
-	}
-
-	public string DateChipStyle(DateTime date)
-	{
-		string result = "";
-		if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
-		if (date.Month.CompareTo(SelectedDate.Month) == 0)
-		{
-			if (date.Date.CompareTo(SelectedDate.Date) == 0)
-				return "bg-info text-light";
-			else
-				return "bg-core text-dark";
-		}
-		return result;
-	}
-
-	public string MonthChipClass(int month)
-	{
-		if (month.CompareTo(SelectedDate.Month) == 0)
-			return "bg-info text-light";
-		else
-			return "bg-core text-dark";
-	}
-
-	protected override async Task OnInitializedAsync()
-	{
-		SelectedDate = DateTime.Today;
-		SetStartStop();
-		loaded = true;
-		await base.OnInitializedAsync();
-	}
-
-}
-
-public enum Selecting
-{
-	Days,
-	Months,
-	Years
-}

From 2f017bbfab195f48f9d5b7784e35fd22928b0e2f Mon Sep 17 00:00:00 2001
From: markosteger <marko.steger@gmail.com>
Date: Mon, 6 Mar 2023 15:22:09 +0100
Subject: [PATCH 5/5] DatePicker - fixed errors rgearding variable name changes

---
 .../Components/DatePicker.razor               | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/Connected.Components/Components/DatePicker.razor b/src/Connected.Components/Components/DatePicker.razor
index c71fa15..e369771 100644
--- a/src/Connected.Components/Components/DatePicker.razor
+++ b/src/Connected.Components/Components/DatePicker.razor
@@ -3,16 +3,16 @@
 {
     <div id="picker" class="m-2" style="width:270px; height:auto;">
         <!-- DatePicker input !can be edited manualy -->
-        <div class="inline-block"><input type="text" value="@Date.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div>
+        <div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div>
         @if (Shown)
         {
             <!-- DatePicker header -->
             <div id="picker_header" class="bg-info" style="height:80px;">
                 <div class="text-medium p-1">
-                    @Date.Year.ToString()
+                    @SelectedDate.Year.ToString()
                 </div>
                 <div class="text-large p-1">
-                    @Date.ToString("ddd, " + Format)
+                    @SelectedDate.ToString("ddd, " + Format)
                 </div>
             </div>
             <!-- DatePicker body -->
@@ -23,10 +23,10 @@
                         {
                             <div class="@NavBarClass">
                                 <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@Date.ToString("yyyy")</div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
                                 <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
                             </div>
-                            @for (int i = Date.Year - 7; i < Date.Year + 8; i++)
+                            @for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
                             {
                                 int y = i;
                                 <a href="#" @onclick="@(()=>SetYear(y))">
@@ -37,7 +37,7 @@
                                     </div>
 
                                 </a>
-                                if (Date.Year - i % 3 == 0)
+                                if (SelectedDate.Year - i % 3 == 0)
                                 {
                                     <br />
                                 }
@@ -48,7 +48,7 @@
                         {
                             <div class="@NavBarClass">
                                 <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@Date.ToString("MMMM yyyy")</div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
                                 <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
                             </div>
                             @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
@@ -74,27 +74,27 @@
                         {
                             <div class="@NavBarClass">
                                 <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@Date.ToString("MMMM yyyy")</div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
                                 <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
                             </div>
 
                             @for (int i = 0; i < 7; i++)
                             {
-                                <div class="@DayNamesRowClass" style="width:30px; height:30px; text-align:center; padding-top:5px;">@calendarStart.AddDays(i).ToString("ddd")</div>
+                                <div class="@DayNamesRowClass" style="width:30px; height:30px; text-align:center; padding-top:5px;">@CalendarStart.AddDays(i).ToString("ddd")</div>
                             }
-                            @foreach (var Date in Dates)
+                            @foreach (var Date in ShowingDates)
                             {
                                 <a href="#" @onclick="@(()=>SetDate(Date))">
                                     <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
                                         @Date.Day.ToString()
                                     </div>
                                 </a>
-                                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                                @if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
                                 {
                                     <br />
                                 }
 
-                                calendarStart = calendarStart.AddDays(1);
+                                CalendarStart = CalendarStart.AddDays(1);
                             }
                             break;
                         }