From d19da0e658d4394d7db87aea60dd508e53d37395 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sun, 20 Sep 2026 06:04:20 +0330
Subject: [PATCH 1/9] Improve theme infra of BitCalendar #13292

---
 .../Inputs/Calendar/BitCalendar.razor         | 354 ++++---
 .../Inputs/Calendar/BitCalendar.razor.cs      | 915 +++++++++++++++---
 .../Inputs/Calendar/BitCalendar.scss          | 527 +++++-----
 .../Inputs/Calendar/BitCalendarClassStyles.cs |  10 +
 .../JsInterop/CalendarsJsRuntimeExtensions.cs |   4 +-
 .../Bit.BlazorUI/Scripts/Calendars.ts         |   4 +-
 .../Inputs/Calendar/BitCalendarDemo.razor     | 579 +++++------
 .../Inputs/Calendar/BitCalendarDemo.razor.cs  | 474 ++++++++-
 .../Calendar/BitCalendarDemo.razor.samples.cs | 398 ++++----
 .../Calendar/BitCalendarDemo.razor.scss       |   6 +
 .../Inputs/Calendar/BitCalendarTests.cs       | 438 +++++++++
 11 files changed, 2775 insertions(+), 934 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
index 9a5c9b2fb3b..0ff2453398a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @inherits BitInputBase<DateTimeOffset?>
 
 @{
@@ -6,6 +6,7 @@
     var todayYear = _culture.Calendar.GetYear(today);
     var todayMonth = _culture.Calendar.GetMonth(today);
     var focusableDay = GetFocusableDay();
+    var isInvalid = ValueInvalid is true;
 
     var prevMonthNavIconCss = BitIconInfo.From(PrevMonthNavIcon, PrevMonthNavIconName ?? "Up")?.GetCssClasses();
     var nextMonthNavIconCss = BitIconInfo.From(NextMonthNavIcon, NextMonthNavIconName ?? "Up bit-ico-r180")?.GetCssClasses();
@@ -23,15 +24,27 @@
     var decreaseMinuteIconCss = BitIconInfo.From(TimePickerDecreaseMinuteIcon, TimePickerDecreaseMinuteIconName ?? "ChevronDownSmall")?.GetCssClasses();
 }
 
+@* A calendar is a composite of labelled grids, so it needs no role of its own - but one given a name is a
+   named group, which is what lets a screen reader say which of two calendars on a page the focus is in. *@
 <div @ref="RootElement" @attributes="HtmlAttributes"
      id="@_Id"
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
+     role="@(AriaLabel.HasValue() ? "group" : null)"
+     aria-label="@AriaLabel"
      dir="@Dir?.ToString().ToLower()">
 
-    <div style="@Styles?.Container" class="bit-cal-cnt @Classes?.Container" disabled=@(IsEnabled is false)>
+    @if (HeaderTemplate is not null)
+    {
+        <div style="@Styles?.Header" class="bit-cal-hdr @Classes?.Header">@HeaderTemplate</div>
+    }
+
+    <div style="@Styles?.Container" class="bit-cal-cnt @Classes?.Container">
+        @* The selection as words, for a screen reader alone: the day cell carries it as aria-selected, which
+           is state rather than something announced when it changes. Left empty while nothing is selected, so
+           clearing the value does not announce a selection of nothing. *@
         <div class="bit-cal-sdt" aria-live="polite" aria-atomic="true">
-            @(string.Format(SelectedDateAriaAtomic, CurrentValueAsString))
+            @(CurrentValueAsString.HasValue() ? string.Format(SelectedDateAriaAtomic, CurrentValueAsString) : null)
         </div>
 
         @if (DayPickerIsVisible())
@@ -42,7 +55,6 @@
                     {
                         var title = string.Format(MonthPickerToggleTitle, _monthTitle);
                         <button @onclick="@ToggleMonthPickerOverlay"
-                                tabindex="0"
                                 type="button"
                                 title="@title"
                                 aria-live="polite"
@@ -50,15 +62,13 @@
                                 aria-label="@title"
                                 style="@Styles?.DayPickerMonth"
                                 disabled="@(IsEnabled is false)"
-                                aria-disabled="@(IsEnabled is false)"
                                 class="bit-cal-ptb @Classes?.DayPickerMonth">
                             @_monthTitle
                         </button>
                     }
                     else
                     {
-                        <div tabindex="-1"
-                             aria-live="polite"
+                        <div aria-live="polite"
                              aria-atomic="true"
                              style="@Styles?.DayPickerMonth"
                              class="bit-cal-pkt @Classes?.DayPickerMonth">
@@ -73,10 +83,10 @@
                         <button @onclick="() => HandleMonthChange(false)"
                                 type="button"
                                 title="@GoToPrevMonthTitle"
+                                aria-label="@GoToPrevMonthTitle"
                                 style="@Styles?.PrevMonthNavButton"
                                 class="bit-cal-nbt @Classes?.PrevMonthNavButton"
-                                disabled="@prevDisabled"
-                                aria-disabled="@prevDisabled">
+                                disabled="@prevDisabled">
                             <i aria-hidden="true"
                                style="@Styles?.PrevMonthNavIcon"
                                class="bit-cal-ico @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
@@ -88,9 +98,9 @@
                             <button @onclick="HandleGoToToday"
                                     type="button"
                                     title="@GoToTodayTitle"
+                                    aria-label="@GoToTodayTitle"
                                     disabled="@goToTodayDisabled"
                                     style="@Styles?.GoToTodayButton"
-                                    aria-disabled="@goToTodayDisabled"
                                     class="bit-cal-gtb @Classes?.GoToTodayButton">
                                 <i aria-hidden="true"
                                    style="@Styles?.GoToTodayIcon"
@@ -102,8 +112,8 @@
                                 style="@Styles?.NextMonthNavButton"
                                 class="bit-cal-nbt @Classes?.NextMonthNavButton"
                                 title="@GoToNextMonthTitle"
-                                disabled="@nextDisabled"
-                                aria-disabled="@nextDisabled">
+                                aria-label="@GoToNextMonthTitle"
+                                disabled="@nextDisabled">
                             <i aria-hidden="true"
                                style="@Styles?.NextMonthNavIcon"
                                class="bit-cal-ico @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
@@ -111,13 +121,9 @@
                         @if (ShowTimePicker && ShowTimePickerAsOverlay && (ShowMonthPicker is false || ShowMonthPickerAsOverlay))
                         {
                             <button @onclick="@ToggleTimePickerOverlay"
-                                    tabindex="0"
                                     type="button"
-                                    aria-live="polite"
-                                    aria-atomic="true"
                                     title="@ShowTimePickerTitle"
                                     disabled="@(IsEnabled is false)"
-                                    aria-disabled="@(IsEnabled is false)"
                                     aria-label="@ShowTimePickerTitle"
                                     style="@Styles?.ShowTimePickerButton"
                                     class="bit-cal-nbt @Classes?.ShowTimePickerButton">
@@ -128,7 +134,14 @@
                         }
                     </div>
                 </div>
-                <div role="grid" aria-label="@_monthTitle" style="@Styles?.DaysGrid" class="bit-cal-grd @Classes?.DaysGrid">
+                <div role="grid"
+                     aria-label="@_monthTitle"
+                     aria-readonly="@(ReadOnly ? "true" : null)"
+                     aria-disabled="@(IsEnabled is false ? "true" : null)"
+                     aria-required="@(Required ? "true" : null)"
+                     aria-invalid="@(isInvalid ? "true" : null)"
+                     style="@Styles?.DaysGrid"
+                     class="bit-cal-grd @Classes?.DaysGrid">
                     <div role="row" style="@Styles?.DaysHeaderRow" class="bit-cal-dgh @Classes?.DaysHeaderRow">
                         @if (ShowWeekNumbers)
                         {
@@ -144,15 +157,19 @@
                                  aria-label="@_culture.DateTimeFormat.GetDayName(dayOfWeek)"
                                  style="@Styles?.DayNameHeader"
                                  class="bit-cal-wlb @Classes?.DayNameHeader">
-                                @dayOfWeekName[0]
+                                @* A culture is free to leave the shortest day names empty, and the header of
+                                   the column would then be an index out of range. *@
+                                @(dayOfWeekName.HasValue() ? dayOfWeekName[0].ToString() : string.Empty)
                             </div>
                         }
                     </div>
 
                     @for (var week = 0; week < 6; week++)
                     {
-                        //to ignore the last empty week of the month || to ignore the first whole week of the month
-                        if (_daysOfCurrentMonth[week, 0].HasValue is false) continue;
+                        @* The weeks past the end of the month (FixedWeeks off) hold no days at all. The check
+                           spans the whole row: at the very edge of the calendar's supported range a row can
+                           start with empty cells and still hold days to show. *@
+                        if (IsWeekRowEmpty(week)) continue;
 
                         <div role="row" style="@Styles?.DaysRow" class="bit-cal-dgr @Classes?.DaysRow">
                             @if (ShowWeekNumbers)
@@ -169,31 +186,41 @@
                             }
                             @for (var day = 0; day < 7; day++)
                             {
-                                var date = _daysOfCurrentMonth[week, day]!.Value;
+                                var nullableDate = _daysOfCurrentMonth[week, day];
 
-                                if (ShowOutsideDays is false && IsInCurrentMonth(date) is false)
+                                @* A day out of the calendar's supported range has no date to offer, so it
+                                   stays an empty cell keeping the columns of the week aligned, exactly like
+                                   an outside day hidden by ShowOutsideDays. *@
+                                if (nullableDate.HasValue is false ||
+                                    (ShowOutsideDays is false && IsInCurrentMonth(nullableDate.Value) is false))
                                 {
                                     <div role="gridcell" style="@Styles?.DayButton" class="bit-cal-dbe @Classes?.DayButton"></div>
                                     continue;
                                 }
 
+                                var date = nullableDate.Value;
+
                                 var disabled = IsEnabled is false || IsDayDisabled(date);
                                 var isSelected = IsSelectedDate(date);
                                 var isToday = IsInCurrentMonth(date) && date == today.Date;
                                 var (style, klass) = GetDayButtonCss(date);
                                 var dayEvents = GetDayEvents(date);
+                                var opensEventDialog = ShowEventDetails && dayEvents.Count > 0;
+                                @* A read-only calendar still browses, so its days stay focusable - but they no
+                                   longer select anything, which aria-disabled is what reports. *@
                                 <button @onclick="() => HandleDayClick(date, dayEvents)"
                                         @onkeydown="e => HandleDayKeyDown(e, date)"
                                         type="button"
                                         role="gridcell"
                                         id="@GetDayButtonId(date)"
                                         disabled="@disabled"
-                                        aria-readonly="true"
-                                        aria-disabled="@disabled"
-                                        aria-label="@date.ToString(_culture.DateTimeFormat.LongDatePattern, _culture)"
+                                        aria-readonly="@(ReadOnly ? "true" : null)"
+                                        aria-disabled="@((disabled || ReadOnly) ? "true" : null)"
+                                        aria-label="@GetDayAriaLabel(date, dayEvents)"
                                         aria-current="@(isToday ? "date" : null)"
+                                        aria-haspopup="@(opensEventDialog ? "dialog" : null)"
                                         title="@(dayEvents.Count > 0 ? GetEventTooltip(dayEvents) : null)"
-                                        style="@style @Styles?.DayButton"
+                                        style="@style"
                                         class="bit-cal-dbt@(klass) @Classes?.DayButton"
                                         tabindex="@(date == focusableDay ? 0 : -1)"
                                         aria-selected="@(isSelected ? "true" : "false")">
@@ -207,7 +234,8 @@
                                     }
                                     @if (dayEvents.Count > 0)
                                     {
-                                        <span style="@Styles?.EventIndicator"
+                                        <span aria-hidden="true"
+                                              style="@Styles?.EventIndicator"
                                               class="bit-cal-evi @Classes?.EventIndicator">
                                         </span>
                                     }
@@ -236,14 +264,12 @@
                     var nextTitle = string.Format(GoToNextYearTitle, _currentYear + 1);
                     <div style="@Styles?.MonthPickerHeader" class="bit-cal-pkh @Classes?.MonthPickerHeader">
                         <button @onclick="ToggleBetweenMonthAndYearPicker"
-                                tabindex="0"
                                 type="button"
                                 aria-atomic="true"
                                 aria-live="polite"
                                 title="@toggleTitle"
                                 aria-label="@toggleTitle"
                                 disabled="@(IsEnabled is false)"
-                                aria-disabled="@(IsEnabled is false)"
                                 style="@Styles?.YearPickerToggleButton"
                                 class="bit-cal-ptb @Classes?.YearPickerToggleButton">
                             @_currentYear
@@ -254,7 +280,6 @@
                                     title="@prevTitle"
                                     aria-label="@prevTitle"
                                     disabled="@prevDisabled"
-                                    aria-disabled="@prevDisabled"
                                     style="@Styles?.PrevYearNavButton"
                                     class="bit-cal-nbt @Classes?.PrevYearNavButton">
                                 <i aria-hidden="true"
@@ -271,7 +296,6 @@
                                         aria-label="@GoToTodayTitle"
                                         disabled="@goToTodayDisabled"
                                         style="@Styles?.GoToTodayButton"
-                                        aria-disabled="@goToTodayDisabled"
                                         class="bit-cal-gtb @Classes?.GoToTodayButton">
                                     <i aria-hidden="true"
                                        style="@Styles?.GoToTodayIcon"
@@ -283,7 +307,6 @@
                                     title="@nextTitle"
                                     aria-label="@nextTitle"
                                     disabled="@nextDisabled"
-                                    aria-disabled="@nextDisabled"
                                     style="@Styles?.NextYearNavButton"
                                     class="bit-cal-nbt @Classes?.NextYearNavButton">
                                 <i aria-hidden="true"
@@ -293,14 +316,10 @@
                             @if (ShowTimePickerAsOverlay && ShowTimePicker)
                             {
                                 <button @onclick="@ToggleTimePickerOverlay"
-                                        tabindex="0"
                                         type="button"
-                                        aria-live="polite"
-                                        aria-atomic="true"
                                         title="@ShowTimePickerTitle"
                                         disabled="@(IsEnabled is false)"
                                         aria-label="@ShowTimePickerTitle"
-                                        aria-disabled="@(IsEnabled is false)"
                                         style="@Styles?.ShowTimePickerButton"
                                         class="bit-cal-nbt @Classes?.ShowTimePickerButton">
                                     <i aria-hidden="true"
@@ -310,40 +329,51 @@
                             }
                         </div>
                     </div>
-                    <div role="grid" aria-label="@_currentYear" class="bit-cal-grd">
-                    @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
-                    {
-                        <div style="@Styles?.MonthsRow" class="bit-cal-pkr @Classes?.MonthsRow" role="row">
-                            @for (var cellIndex = 1; cellIndex <= 4; cellIndex++)
-                            {
-                                var month = (rowIndex * 4) + cellIndex;
-                                var monthName = _culture.DateTimeFormat.GetMonthName(month);
-                                var disabled = IsEnabled is false || IsMonthOutOfMinAndMaxDate(month);
-                                var selected = month == _currentMonth;
-                                <button @onclick="() => SelectMonth(month)"
-                                        type="button"
-                                        role="gridcell"
-                                        title="@monthName"
-                                        aria-readonly="true"
-                                        aria-label="@monthName"
-                                        disabled="@disabled"
-                                        aria-disabled="@disabled"
-                                        tabindex="@(selected ? 0 : -1)"
-                                        aria-selected="@(selected ? "true" : "false")"
-                                        style="@Styles?.MonthButton"
-                                        class="bit-cal-pkb@(GetMonthCellCssClass(month, todayYear, todayMonth)) @Classes?.MonthButton">
-                                    @if (MonthCellTemplate is not null)
-                                    {
-                                        @MonthCellTemplate(GetDateTimeOfMonthCell(month))
-                                    }
-                                    else
-                                    {
-                                        @_culture.DateTimeFormat.GetAbbreviatedMonthName(month)
-                                    }
-                                </button>
-                            }
-                        </div>
-                    }
+                    @* Not every calendar has twelve months: a leap year of the Hebrew calendar has thirteen. *@
+                    var monthsInYear = GetMonthsInCurrentYear();
+                    var monthRowCount = (monthsInYear + 3) / 4;
+                    var focusableMonth = GetFocusableMonth();
+                    <div role="grid"
+                         aria-label="@_currentYear"
+                         aria-disabled="@(IsEnabled is false ? "true" : null)"
+                         class="bit-cal-grd">
+                        @for (var rowIndex = 0; rowIndex < monthRowCount; rowIndex++)
+                        {
+                            <div style="@Styles?.MonthsRow" class="bit-cal-pkr @Classes?.MonthsRow" role="row">
+                                @for (var cellIndex = 1; cellIndex <= 4; cellIndex++)
+                                {
+                                    var month = (rowIndex * 4) + cellIndex;
+
+                                    if (month > monthsInYear) continue;
+
+                                    var monthName = _culture.DateTimeFormat.GetMonthName(month);
+                                    var disabled = IsEnabled is false || IsMonthOutOfMinAndMaxDate(month);
+                                    var selected = month == _currentMonth;
+                                    <button @onclick="() => SelectMonth(month)"
+                                            @onkeydown="e => HandleMonthKeyDown(e, month)"
+                                            type="button"
+                                            role="gridcell"
+                                            title="@monthName"
+                                            id="@GetMonthButtonId(month)"
+                                            aria-label="@monthName"
+                                            disabled="@disabled"
+                                            aria-disabled="@(disabled ? "true" : null)"
+                                            tabindex="@(month == focusableMonth ? 0 : -1)"
+                                            aria-selected="@(selected ? "true" : "false")"
+                                            style="@Styles?.MonthButton"
+                                            class="bit-cal-pkb@(GetMonthCellCssClass(month, todayYear, todayMonth)) @Classes?.MonthButton">
+                                        @if (MonthCellTemplate is not null)
+                                        {
+                                            @MonthCellTemplate(GetDateTimeOfMonthCell(month))
+                                        }
+                                        else
+                                        {
+                                            @_culture.DateTimeFormat.GetAbbreviatedMonthName(month)
+                                        }
+                                    </button>
+                                }
+                            </div>
+                        }
                     </div>
                 }
                 else
@@ -361,7 +391,6 @@
                                 title="@toggleTitle"
                                 aria-label="@toggleTitle"
                                 disabled="@(IsEnabled is false)"
-                                aria-disabled="@(IsEnabled is false)"
                                 style="@Styles?.MonthPickerToggleButton"
                                 class="bit-cal-ptb @Classes?.MonthPickerToggleButton">
                             @_yearPickerStartYear - @_yearPickerEndYear
@@ -372,7 +401,6 @@
                                     title="@prevTitle"
                                     aria-label="@prevTitle"
                                     disabled="@prevDisabled"
-                                    aria-disabled="@prevDisabled"
                                     style="@Styles?.PrevYearRangeNavButton"
                                     class="bit-cal-nbt @Classes?.PrevYearRangeNavButton">
                                 <i aria-hidden="true"
@@ -389,7 +417,6 @@
                                         aria-label="@GoToTodayTitle"
                                         disabled="@goToTodayDisabled"
                                         style="@Styles?.GoToTodayButton"
-                                        aria-disabled="@goToTodayDisabled"
                                         class="bit-cal-gtb @Classes?.GoToTodayButton">
                                     <i aria-hidden="true"
                                        style="@Styles?.GoToTodayIcon"
@@ -401,7 +428,6 @@
                                     title="@nextTitle"
                                     aria-label="@nextTitle"
                                     disabled="@nextDisabled"
-                                    aria-disabled="@nextDisabled"
                                     style="@Styles?.NextYearRangeNavButton"
                                     class="bit-cal-nbt @Classes?.NextYearRangeNavButton">
                                 <i aria-hidden="true"
@@ -410,37 +436,43 @@
                             </button>
                         </div>
                     </div>
-                    <div role="grid" aria-label="@_yearPickerStartYear - @_yearPickerEndYear" class="bit-cal-grd">
-                    @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
-                    {
-                        <div style="@Styles?.YearsRow" class="bit-cal-pkr @Classes?.YearsRow" role="row">
-                            @for (var cellIndex = 0; cellIndex <= 3; cellIndex++)
-                            {
-                                var year = _yearPickerStartYear + (rowIndex * 4) + cellIndex;
-                                var disabled = IsYearOutOfMinAndMaxDate(year);
-                                var selected = year == _currentYear;
-                                <button @onclick="() => SelectYear(year)"
-                                        type="button"
-                                        role="gridcell"
-                                        aria-readonly="true"
-                                        disabled="@disabled"
-                                        aria-disabled="@disabled"
-                                        tabindex="@(selected ? 0 : -1)"
-                                        style="@Styles?.YearButton"
-                                        class="bit-cal-pkb @Classes?.YearButton"
-                                        aria-selected="@(selected ? "true" : "false")">
-                                    @if (YearCellTemplate is not null)
-                                    {
-                                        @YearCellTemplate(year)
-                                    }
-                                    else
-                                    {
-                                        @year
-                                    }
-                                </button>
-                            }
-                        </div>
-                    }
+                    var focusableYear = GetFocusableYear();
+                    <div role="grid"
+                         aria-label="@_yearPickerStartYear - @_yearPickerEndYear"
+                         aria-disabled="@(IsEnabled is false ? "true" : null)"
+                         class="bit-cal-grd">
+                        @for (var rowIndex = 0; rowIndex <= 2; rowIndex++)
+                        {
+                            <div style="@Styles?.YearsRow" class="bit-cal-pkr @Classes?.YearsRow" role="row">
+                                @for (var cellIndex = 0; cellIndex <= 3; cellIndex++)
+                                {
+                                    var year = _yearPickerStartYear + (rowIndex * 4) + cellIndex;
+                                    var disabled = IsEnabled is false || IsYearOutOfMinAndMaxDate(year);
+                                    var selected = year == _currentYear;
+                                    <button @onclick="() => SelectYear(year)"
+                                            @onkeydown="e => HandleYearKeyDown(e, year)"
+                                            type="button"
+                                            role="gridcell"
+                                            id="@GetYearButtonId(year)"
+                                            aria-label="@year"
+                                            disabled="@disabled"
+                                            aria-disabled="@(disabled ? "true" : null)"
+                                            tabindex="@(year == focusableYear ? 0 : -1)"
+                                            style="@Styles?.YearButton"
+                                            class="bit-cal-pkb @Classes?.YearButton"
+                                            aria-selected="@(selected ? "true" : "false")">
+                                        @if (YearCellTemplate is not null)
+                                        {
+                                            @YearCellTemplate(year)
+                                        }
+                                        else
+                                        {
+                                            @year
+                                        }
+                                    </button>
+                                }
+                            </div>
+                        }
                     </div>
                 }
             </div>
@@ -464,7 +496,6 @@
                                     aria-label="@NowButtonTitle"
                                     style="@Styles?.NowButton"
                                     disabled="@(IsEnabled is false)"
-                                    aria-disabled="@(IsEnabled is false)"
                                     class="bit-cal-gtn @Classes?.NowButton">
                                 <i aria-hidden="true"
                                    style="@Styles?.NowButtonIcon"
@@ -476,8 +507,8 @@
                             <button @onclick="ToggleTimePickerOverlay"
                                     type="button"
                                     title="@HideTimePickerTitle"
+                                    aria-label="@HideTimePickerTitle"
                                     disabled="@(IsEnabled is false)"
-                                    aria-disabled="@(IsEnabled is false)"
                                     style="@Styles?.HideTimePickerButton"
                                     class="bit-cal-nbt @Classes?.HideTimePickerButton">
                                 <i aria-hidden="true"
@@ -493,8 +524,9 @@
                                 @onpointerout="HandleOnPointerUpOrOut"
                                 @onpointerdown="() => HandleOnPointerDown(true, true)"
                                 type="button"
+                                title="@TimePickerIncreaseHourTitle"
+                                aria-label="@TimePickerIncreaseHourTitle"
                                 disabled="@(IsEnabled is false)"
-                                aria-disabled="@(IsEnabled is false)"
                                 style="@Styles?.TimePickerIncreaseHourButton"
                                 class="bit-cal-tbt @Classes?.TimePickerIncreaseHourButton">
                             <i aria-hidden="true"
@@ -513,7 +545,6 @@
                                title="@TimePickerHourTitle"
                                aria-label="@TimePickerHourTitle"
                                disabled="@(IsEnabled is false)"
-                               aria-disabled="@(IsEnabled is false)"
                                style="@Styles?.TimePickerHourInput"
                                class="bit-cal-tin @Classes?.TimePickerHourInput"
                                autocomplete="@BitAutoCompleteValue.NewPassword" />
@@ -521,8 +552,9 @@
                                 @onpointerout="HandleOnPointerUpOrOut"
                                 @onpointerdown="() => HandleOnPointerDown(false, true)"
                                 type="button"
+                                title="@TimePickerDecreaseHourTitle"
+                                aria-label="@TimePickerDecreaseHourTitle"
                                 disabled="@(IsEnabled is false)"
-                                aria-disabled="@(IsEnabled is false)"
                                 style="@Styles?.TimePickerDecreaseHourButton"
                                 class="bit-cal-tbt @Classes?.TimePickerDecreaseHourButton">
                             <i aria-hidden="true"
@@ -530,14 +562,15 @@
                                class="bit-cal-ico @decreaseHourIconCss @Classes?.TimePickerDecreaseHourIcon" />
                         </button>
                     </div>
-                    <div style="@Styles?.TimePickerHourMinuteSeparator" class="bit-cal-tpr bit-cal-tdv @Classes?.TimePickerHourMinuteSeparator">:</div>
+                    <div aria-hidden="true" style="@Styles?.TimePickerHourMinuteSeparator" class="bit-cal-tpr bit-cal-tdv @Classes?.TimePickerHourMinuteSeparator">:</div>
                     <div style="@Styles?.MinuteInputContainer" class="bit-cal-tpr @Classes?.MinuteInputContainer">
                         <button @onpointerup="HandleOnPointerUpOrOut"
                                 @onpointerout="HandleOnPointerUpOrOut"
                                 @onpointerdown="() => HandleOnPointerDown(true, false)"
                                 type="button"
+                                title="@TimePickerIncreaseMinuteTitle"
+                                aria-label="@TimePickerIncreaseMinuteTitle"
                                 disabled="@(IsEnabled is false)"
-                                aria-disabled="@(IsEnabled is false)"
                                 style="@Styles?.TimePickerIncreaseMinuteButton"
                                 class="bit-cal-tbt @Classes?.TimePickerIncreaseMinuteButton">
                             <i aria-hidden="true"
@@ -556,7 +589,6 @@
                                title="@TimePickerMinuteTitle"
                                aria-label="@TimePickerMinuteTitle"
                                disabled="@(IsEnabled is false)"
-                               aria-disabled="@(IsEnabled is false)"
                                style="@Styles?.TimePickerMinuteInput"
                                class="bit-cal-tin @Classes?.TimePickerMinuteInput"
                                autocomplete="@BitAutoCompleteValue.NewPassword" />
@@ -564,8 +596,9 @@
                                 @onpointerout="HandleOnPointerUpOrOut"
                                 @onpointerdown="() => HandleOnPointerDown(false, false)"
                                 type="button"
+                                title="@TimePickerDecreaseMinuteTitle"
+                                aria-label="@TimePickerDecreaseMinuteTitle"
                                 disabled="@(IsEnabled is false)"
-                                aria-disabled="@(IsEnabled is false)"
                                 style="@Styles?.TimePickerDecreaseMinuteButton"
                                 class="bit-cal-tbt @Classes?.TimePickerDecreaseMinuteButton">
                             <i aria-hidden="true"
@@ -576,12 +609,14 @@
 
                     @if (TimeFormat == BitTimeFormat.TwelveHours)
                     {
+                        @* The two halves of the day are a pair of toggles rather than a pair of commands: which
+                           one the time is in is state, which aria-pressed is what reports. *@
                         <div style="@Styles?.TimePickerAmPmContainer" class="bit-cal-tpr bit-cal-am-pm @Classes?.TimePickerAmPmContainer">
                             <button @onclick="HandleOnAmClick"
                                     type="button"
                                     disabled="@(IsEnabled is false)"
+                                    aria-pressed="@(IsAm() is true ? "true" : "false")"
                                     style="@Styles?.TimePickerAmButton"
-                                    aria-disabled="@(IsEnabled is false)"
                                     class="bit-cal-tbt bit-cal-bam @(IsAm() is true ? "bit-cal-bns" : string.Empty) @Classes?.TimePickerAmButton">
                                 @_culture.DateTimeFormat.AMDesignator
                             </button>
@@ -589,8 +624,8 @@
                             <button @onclick="HandleOnPmClick"
                                     type="button"
                                     disabled="@(IsEnabled is false)"
+                                    aria-pressed="@(IsAm() is false ? "true" : "false")"
                                     style="@Styles?.TimePickerPmButton"
-                                    aria-disabled="@(IsEnabled is false)"
                                     class="bit-cal-tbt bit-cal-bpm @(IsAm() is false ? "bit-cal-bns" : string.Empty) @Classes?.TimePickerPmButton">
                                 @_culture.DateTimeFormat.PMDesignator
                             </button>
@@ -601,51 +636,74 @@
         }
     </div>
 
+    @if (FooterTemplate is not null)
+    {
+        <div style="@Styles?.Footer" class="bit-cal-ftr @Classes?.Footer">@FooterTemplate</div>
+    }
+
     @if (_showEventModal)
     {
+        @* The details of a day's events are a modal dialog: named by the date it is headed with, dismissed with
+           Escape or the close button, keeping Tab inside it while it is open, and handing the keyboard back to
+           the day cell it was opened from once it closes (SyncEventDialogFocus). *@
         <div class="bit-cal-eov @Classes?.EventModalOverlay"
              style="@Styles?.EventModalOverlay"
              @onclick="CloseEventModal">
-            <div class="bit-cal-emc @Classes?.EventModalContainer"
+            <div id="@_eventDialogId"
+                 role="dialog"
+                 tabindex="-1"
+                 aria-modal="true"
+                 aria-labelledby="@_eventDialogTitleId"
+                 class="bit-cal-emc @Classes?.EventModalContainer"
                  style="@Styles?.EventModalContainer"
+                 @onkeydown="HandleEventDialogKeyDown"
                  @onclick:stopPropagation="true">
                 <div class="bit-cal-emh @Classes?.EventModalHeader"
                      style="@Styles?.EventModalHeader">
-                    <span>@FormatEventModalDate(_eventModalDate)</span>
+                    <span id="@_eventDialogTitleId">@FormatEventModalDate(_eventModalDate)</span>
                     <button type="button"
                             @onclick="CloseEventModal"
+                            title="@EventDetailsCloseButtonTitle"
+                            aria-label="@EventDetailsCloseButtonTitle"
                             style="@Styles?.EventModalCloseButton"
-                            class="bit-cal-emx @Classes?.EventModalCloseButton">&times;</button>
+                            class="bit-cal-emx @Classes?.EventModalCloseButton">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
                 </div>
-                @foreach (var evt in _eventModalEvents)
-                {
-                    <div class="bit-cal-emi @Classes?.EventItem"
-                         style="@Styles?.EventItem">
-                        <div class="bit-cal-eit @Classes?.EventItemTitle"
-                             style="@Styles?.EventItemTitle">@evt.Title</div>
-                        @if (evt.StartTime.HasValue || evt.EndTime.HasValue)
-                        {
-                            <div class="bit-cal-eis @Classes?.EventItemTime"
-                                 style="@Styles?.EventItemTime">
-                                @if (evt.StartTime.HasValue && evt.EndTime.HasValue)
-                                {
-                                    @($"{FormatEventTime(evt.StartTime.Value)} \u2013 {FormatEventTime(evt.EndTime.Value)}")
-                                }
-                                else if (evt.StartTime.HasValue)
-                                {
-                                    @($"{EventTimeFromText} {FormatEventTime(evt.StartTime.Value)}")
-                                }
-                                else
-                                {
-                                    @($"{EventTimeUntilText} {FormatEventTime(evt.EndTime!.Value)}")
-                                }
-                            </div>
-                        }
-                        <div class="bit-cal-eib @Classes?.EventItemBody"
-                             style="@Styles?.EventItemBody">@evt.Body</div>
-                    </div>
-                }
+                <ul class="bit-cal-eml">
+                    @foreach (var evt in GetEventModalEvents())
+                    {
+                        <li class="bit-cal-emi @Classes?.EventItem"
+                            style="@Styles?.EventItem">
+                            <div class="bit-cal-eit @Classes?.EventItemTitle"
+                                 style="@Styles?.EventItemTitle">@evt.Title</div>
+                            @if (evt.StartTime.HasValue || evt.EndTime.HasValue)
+                            {
+                                <div class="bit-cal-eis @Classes?.EventItemTime"
+                                     style="@Styles?.EventItemTime">
+                                    @if (evt.StartTime.HasValue && evt.EndTime.HasValue)
+                                    {
+                                        @($"{FormatEventTime(evt.StartTime.Value)} – {FormatEventTime(evt.EndTime.Value)}")
+                                    }
+                                    else if (evt.StartTime.HasValue)
+                                    {
+                                        @($"{EventTimeFromText} {FormatEventTime(evt.StartTime.Value)}")
+                                    }
+                                    else
+                                    {
+                                        @($"{EventTimeUntilText} {FormatEventTime(evt.EndTime!.Value)}")
+                                    }
+                                </div>
+                            }
+                            @if (evt.Body.HasValue())
+                            {
+                                <div class="bit-cal-eib @Classes?.EventItemBody"
+                                     style="@Styles?.EventItemBody">@evt.Body</div>
+                            }
+                        </li>
+                    }
+                </ul>
             </div>
         </div>
     }
-</div>
\ No newline at end of file
+</div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
index d5b72dff21b..57306506792 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
@@ -6,7 +6,8 @@ namespace Bit.BlazorUI;
 
 /// <summary>
 /// BitCalendar is a fully-featured inline calendar for browsing and selecting a single date, or a date and time when the built-in time picker is enabled.
-/// It offers day, month, and year views, day events, flexible day/week rules, any culture and time zone, and complete keyboard accessibility.
+/// It offers day, month and year grids - each of them operated with the arrow keys the way the WAI-ARIA grid pattern prescribes - day events with a details
+/// dialog, flexible day/week rules, header and footer slots, three sizes, and any culture and time zone, including the non-Gregorian ones.
 /// </summary>
 public partial class BitCalendar : BitInputBase<DateTimeOffset?>
 {
@@ -21,13 +22,17 @@ public partial class BitCalendar : BitInputBase<DateTimeOffset?>
     private bool _showTimePicker;
     private bool _showMonthPicker;
     private bool _showEventModal;
-    private bool _focusAfterRender;
     private DateTime? _focusedDate;
+    private int? _focusedYearCell;
+    private int? _focusedMonthCell;
+    private string? _focusElementIdAfterRender;
+    private bool _focusTimePickerAfterRender;
+    private bool _eventModalFocusTrapped;
+    private bool _eventModalFocusStored;
     private DateOnly _eventModalDate;
     private HashSet<DateTime> _disabledDates = [];
     private HashSet<DateTime> _highlightedDates = [];
     private HashSet<DayOfWeek> _disabledDaysOfWeek = [];
-    private IReadOnlyList<BitCalendarEvent> _eventModalEvents = [];
     private Dictionary<DateOnly, List<BitCalendarEvent>> _eventsByDate = [];
     private int _yearPickerEndYear;
     private int _yearPickerStartYear;
@@ -39,6 +44,11 @@ public partial class BitCalendar : BitInputBase<DateTimeOffset?>
     private CancellationTokenSource _cancellationTokenSource = new();
     private readonly DateTime?[,] _daysOfCurrentMonth = new DateTime?[DEFAULT_WEEK_COUNT, DEFAULT_DAY_COUNT_PER_WEEK];
 
+    // The parts of the event dialog that have to name one another: the surface the focus is trapped in and
+    // restored from, and the heading it takes its accessible name from.
+    private string _eventDialogId => $"{_Id}-event-dialog";
+    private string _eventDialogTitleId => $"{_Id}-event-dialog-title";
+
 
 
     private int _hour;
@@ -109,6 +119,11 @@ private int _minuteView
 
 
 
+    /// <summary>
+    /// Whether selecting the already selected day deselects it, clearing the value.
+    /// </summary>
+    [Parameter] public bool AllowDeselect { get; set; }
+
     /// <summary>
     /// Custom CSS classes for different parts of the BitCalendar component.
     /// </summary>
@@ -177,10 +192,16 @@ private int _minuteView
     [Parameter] public IEnumerable<DayOfWeek>? DisabledDaysOfWeek { get; set; }
 
     /// <summary>
-    /// The list of events to display on calendar days.
+    /// The list of events to display on calendar days. The events of a day are ordered the way an agenda of it
+    /// is: the all-day ones (which carry no start time) first, then the rest by the time they start at.
     /// </summary>
     [Parameter] public IEnumerable<BitCalendarEvent>? Events { get; set; }
 
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the close button of the event details dialog.
+    /// </summary>
+    [Parameter] public string EventDetailsCloseButtonTitle { get; set; } = "Close";
+
     /// <summary>
     /// The text shown before the start time of an event when only a start time is present (e.g. "From 09:00").
     /// </summary>
@@ -191,6 +212,12 @@ private int _minuteView
     /// </summary>
     [Parameter] public string EventTimeUntilText { get; set; } = "Until";
 
+    /// <summary>
+    /// Rendered under the pickers, inside the root of the calendar: the place for the actions a calendar is
+    /// often given of its own, such as a Clear button or a summary of the selection.
+    /// </summary>
+    [Parameter] public RenderFragment? FooterTemplate { get; set; }
+
     /// <summary>
     /// Overrides the first day of the week in the day picker. If not set, the first day of the week of the Culture is used.
     /// </summary>
@@ -211,6 +238,12 @@ private int _minuteView
     /// </summary>
     [Parameter] public Func<DateTimeOffset, string?>? GetDayClass { get; set; }
 
+    /// <summary>
+    /// Rendered above the pickers, inside the root of the calendar: the place for a caption or a legend of
+    /// its own, before the day, month and year grids.
+    /// </summary>
+    [Parameter] public RenderFragment? HeaderTemplate { get; set; }
+
     /// <summary>
     /// The title of the Go to next month button (tooltip).
     /// </summary>
@@ -304,6 +337,12 @@ private int _minuteView
     /// </summary>
     [Parameter] public bool HighlightSelectedMonth { get; set; }
 
+    /// <summary>
+    /// Whether the day picker should highlight today's day. It only affects the visual style of the day
+    /// cell; the accessibility attributes still report the day as the current date.
+    /// </summary>
+    [Parameter] public bool HighlightToday { get; set; } = true;
+
     /// <summary>
     /// The step, in hours, the spin buttons of the time picker move the hour by.
     /// </summary>
@@ -436,7 +475,8 @@ private int _minuteView
     [Parameter] public string? PrevYearRangeNavIconName { get; set; }
 
     /// <summary>
-    /// The text of selected date aria-atomic of the calendar.
+    /// The template of the text a screen reader is given when the selection changes, where {0} is the selected
+    /// date written with the <see cref="DateFormat"/>. Nothing is announced while no date is selected.
     /// </summary>
     [Parameter] public string SelectedDateAriaAtomic { get; set; } = "Selected date {0}";
 
@@ -450,6 +490,13 @@ private int _minuteView
     /// </summary>
     [Parameter] public bool ShowGoToToday { get; set; } = true;
 
+    /// <summary>
+    /// Whether clicking a day that carries events opens the dialog listing them.
+    /// The day is selected either way; turning this off leaves the events to the indicator, the tooltip and
+    /// whatever the page itself shows for the selected day.
+    /// </summary>
+    [Parameter] public bool ShowEventDetails { get; set; } = true;
+
     /// <summary>
     /// Whether the month picker is shown or hidden.
     /// </summary>
@@ -500,6 +547,12 @@ private int _minuteView
     /// </summary>
     [Parameter] public bool ShowWeekNumbers { get; set; }
 
+    /// <summary>
+    /// The size of the calendar, which scales its cells and their text.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitSize? Size { get; set; }
+
     /// <summary>
     /// Specifies the date and time of the calendar when it is showing without any selected value.
     /// </summary>
@@ -528,6 +581,16 @@ private int _minuteView
     /// </summary>
     [Parameter] public string? TimePickerDecreaseHourIconName { get; set; }
 
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's decrease-hour button.
+    /// </summary>
+    [Parameter] public string TimePickerDecreaseHourTitle { get; set; } = "Decrease hour";
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's decrease-minute button.
+    /// </summary>
+    [Parameter] public string TimePickerDecreaseMinuteTitle { get; set; } = "Decrease minute";
+
     /// <summary>
     /// Gets or sets the icon to display in the decrease-minute button using custom CSS classes for external icon libraries.
     /// Takes precedence over <see cref="TimePickerDecreaseMinuteIconName"/> when both are set.
@@ -571,6 +634,16 @@ private int _minuteView
     /// </summary>
     [Parameter] public string? TimePickerIncreaseMinuteIconName { get; set; }
 
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's increase-hour button.
+    /// </summary>
+    [Parameter] public string TimePickerIncreaseHourTitle { get; set; } = "Increase hour";
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's increase-minute button.
+    /// </summary>
+    [Parameter] public string TimePickerIncreaseMinuteTitle { get; set; } = "Increase minute";
+
     /// <summary>
     /// TimeZone for the DatePicker.
     /// </summary>
@@ -618,6 +691,8 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => BitCssClasses.Color(Color, "bit-cal"));
 
+        ClassBuilder.Register(() => BitCssClasses.Size(Size, "bit-cal"));
+
         // A culture that writes right to left implies the direction of the calendar as well, so one that was
         // given no explicit Dir still lays itself out the way its culture reads.
         ClassBuilder.Register(() => BitCssClasses.CultureRtl(Dir, _culture));
@@ -645,6 +720,13 @@ protected override void OnParametersSet()
 
         BuildEventsLookup();
         BuildDatesLookups();
+
+        // The dialog lists the events of its day, so it goes away with the last of them - a page that clears
+        // the events of the visible month is not left with an empty dialog over its calendar.
+        if (_showEventModal && GetEventModalEvents().Count == 0)
+        {
+            CloseEventModal();
+        }
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -662,16 +744,74 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             catch (JSDisconnectedException) { } // we can ignore this exception here
         }
 
-        if (_focusAfterRender && _focusedDate.HasValue)
+        // The cell the keyboard moved to, which can be in a month - or in a whole picker - that was not on
+        // screen when the key was pressed, so the focus is placed after the render that brought it there.
+        if (_focusElementIdAfterRender.HasValue())
+        {
+            var elementId = _focusElementIdAfterRender!;
+            _focusElementIdAfterRender = null;
+
+            try
+            {
+                await _js.BitCalendarsFocusCell(elementId);
+            }
+            catch (JSDisconnectedException) { } // we can ignore this exception here
+        }
+
+        if (_focusTimePickerAfterRender)
         {
-            _focusAfterRender = false;
+            _focusTimePickerAfterRender = false;
 
             try
             {
-                await _js.BitCalendarsFocusCell(GetDayButtonId(_focusedDate.Value));
+                await _inputTimeHourRef.FocusAsync();
             }
             catch (JSDisconnectedException) { } // we can ignore this exception here
         }
+
+        await SyncEventDialogFocus();
+    }
+
+    /// <summary>
+    /// Gives focus to the calendar: the day of the day grid that is in the tab sequence, or the month, the
+    /// year or the hour input when the day grid is not the picker on screen.
+    /// </summary>
+    /// <remarks>
+    /// The calendar renders no input element of its own - what the keyboard operates is a grid of buttons -
+    /// so this overrides the base implementation rather than focusing a field.
+    /// </remarks>
+    public override ValueTask FocusAsync() => FocusAsync(false);
+
+    /// <inheritdoc cref="FocusAsync()"/>
+    /// <param name="preventScroll">Whether the browser should refrain from scrolling the newly focused cell
+    /// into view.</param>
+    public override async ValueTask FocusAsync(bool preventScroll)
+    {
+        MoveFocusToTheVisiblePicker();
+
+        if (_focusElementIdAfterRender.HasValue())
+        {
+            var elementId = _focusElementIdAfterRender!;
+            _focusElementIdAfterRender = null;
+
+            try
+            {
+                await _js.BitCalendarsFocusCell(elementId, preventScroll);
+            }
+            catch (JSDisconnectedException) { } // we can ignore this exception here
+
+            return;
+        }
+
+        if (_focusTimePickerAfterRender is false) return;
+
+        _focusTimePickerAfterRender = false;
+
+        try
+        {
+            await _inputTimeHourRef.FocusAsync(preventScroll);
+        }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
     }
 
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out DateTimeOffset? result, [NotNullWhen(false)] out string? validationErrorMessage)
@@ -704,38 +844,50 @@ protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(fa
 
 
 
+    // A value the user just picked is not a parameter change: the pickers that are on screen stay on screen.
+    // Recomputing them here would close the time picker overlay on the first press of a spin button, and take
+    // the month overlay away from under a selection made in it.
     private void HandleOnValueChanged(object? sender, EventArgs args)
     {
-        OnSetParameters();
+        OnSetParameters(resetPickers: false);
     }
 
-    private void OnSetParameters()
+    private void OnSetParameters() => OnSetParameters(true);
+
+    private void OnSetParameters(bool resetPickers)
     {
-        _showTimePicker = ShowTimePicker && ShowTimePickerAsOverlay is false;
-        _showMonthPicker = _showTimePicker is false && ShowMonthPicker && ShowMonthPickerAsOverlay is false;
+        if (resetPickers)
+        {
+            _showTimePicker = ShowTimePicker && ShowTimePickerAsOverlay is false;
+            _showMonthPicker = _showTimePicker is false && ShowMonthPicker && ShowMonthPickerAsOverlay is false;
+        }
 
         _timeZone = TimeZone ?? TimeZoneInfo.Local;
         _culture = Culture ?? CultureInfo.CurrentUICulture;
 
-        var dateTime = CurrentValue.GetValueOrDefault(StartingValue.GetValueOrDefault(Today ?? DateTimeOffset.Now));
+        var value = CurrentValue.GetValueOrDefault(StartingValue.GetValueOrDefault(GetNow()));
 
         var minDate = GetMinDate();
         var maxDate = GetMaxDate();
 
-        if (minDate.HasValue && minDate > dateTime)
+        if (minDate.HasValue && minDate > value)
         {
-            dateTime = minDate.Value;
+            value = minDate.Value;
         }
 
-        if (maxDate.HasValue && maxDate < dateTime)
+        if (maxDate.HasValue && maxDate < value)
         {
-            dateTime = maxDate.Value;
+            value = maxDate.Value;
         }
 
+        // Everything the calendar shows - the month it opens on, the time in the time picker - belongs to the
+        // TimeZone of the component, not to the offset the value happens to carry.
+        var dateTime = GetDateTime(value);
+
         _hour = CurrentValue.HasValue || StartingValue.HasValue ? dateTime.Hour : 0;
         _minute = CurrentValue.HasValue || StartingValue.HasValue ? dateTime.Minute : 0;
 
-        GenerateCalendarData(dateTime.DateTime);
+        GenerateCalendarData(dateTime);
     }
 
     private async Task SelectDate(DateTime selectedDate)
@@ -747,6 +899,29 @@ private async Task SelectDate(DateTime selectedDate)
         var previousYear = _currentYear;
         var previousMonth = _currentMonth;
 
+        // Selecting the selected day again deselects it (AllowDeselect), leaving the calendar on the month
+        // the user is looking at rather than jumping back onto today the way an emptied value otherwise would.
+        if (AllowDeselect && IsSelectedDate(selectedDate))
+        {
+            var deselectedYear = _culture.Calendar.GetYear(selectedDate);
+            var deselectedMonth = _culture.Calendar.GetMonth(selectedDate);
+
+            _focusedDate = selectedDate;
+
+            CurrentValue = null;
+
+            _currentYear = deselectedYear;
+            _currentMonth = deselectedMonth;
+
+            GenerateMonthData(_currentYear, _currentMonth);
+
+            await OnSelectDate.InvokeAsync(CurrentValue);
+
+            await NotifyMonthChange(previousYear, previousMonth);
+
+            return;
+        }
+
         _focusedDate = selectedDate;
 
         selectedDate = selectedDate.AddHours(_hour);
@@ -759,7 +934,7 @@ private async Task SelectDate(DateTime selectedDate)
 
         if (_currentYear != previousYear || _currentMonth != previousMonth)
         {
-            _focusAfterRender = true;
+            _focusElementIdAfterRender = GetDayButtonId(_focusedDate.Value);
         }
 
         GenerateMonthData(_currentYear, _currentMonth);
@@ -778,6 +953,7 @@ private async Task SelectMonth(int month)
         var previousMonth = _currentMonth;
 
         _currentMonth = month;
+        _focusedMonthCell = month;
 
         GenerateMonthData(_currentYear, _currentMonth);
 
@@ -801,10 +977,16 @@ private async Task SelectYear(int year)
 
         ChangeYearRanges(_currentYear - 1);
 
+        ClampCurrentMonthToYear();
+
         GenerateMonthData(_currentYear, _currentMonth);
 
         ToggleBetweenMonthAndYearPicker();
 
+        // The year that was activated goes away with the year grid, so the focus is handed to the month grid
+        // that replaces it - otherwise a keyboard selection drops the focus onto the body.
+        FocusMonthCell(GetFocusableMonth());
+
         await NotifyMonthChange(previousYear, previousMonth);
     }
 
@@ -813,6 +995,11 @@ private void ToggleBetweenMonthAndYearPicker()
         if (IsEnabled is false) return;
 
         _showYearPicker = !_showYearPicker;
+
+        // The grid that comes into view starts its roving tabindex over, on the month or the year the
+        // calendar is actually displaying, rather than on wherever the keyboard left it last time.
+        _focusedYearCell = null;
+        _focusedMonthCell = null;
     }
 
     private async Task HandleMonthChange(bool isNext)
@@ -825,7 +1012,7 @@ private async Task HandleMonthChange(bool isNext)
 
         if (isNext)
         {
-            if (_currentMonth < 12)
+            if (_currentMonth < GetMonthsInCurrentYear())
             {
                 _currentMonth++;
             }
@@ -844,7 +1031,7 @@ private async Task HandleMonthChange(bool isNext)
             else
             {
                 _currentYear--;
-                _currentMonth = 12;
+                _currentMonth = GetMonthsInCurrentYear();
             }
         }
 
@@ -863,6 +1050,8 @@ private async Task HandleYearChange(bool isNext)
 
         _currentYear += isNext ? +1 : -1;
 
+        ClampCurrentMonthToYear();
+
         GenerateMonthData(_currentYear, _currentMonth);
 
         await NotifyMonthChange(previousYear, previousMonth);
@@ -887,6 +1076,11 @@ private async Task HandleGoToToday()
 
         GenerateCalendarData(GetToday());
 
+        // The month and the year the roving tabindex was left on are not the ones on screen any more, so the
+        // grids start it over on what they now display.
+        _focusedYearCell = null;
+        _focusedMonthCell = null;
+
         await NotifyMonthChange(previousYear, previousMonth);
     }
 
@@ -905,8 +1099,21 @@ private void HandleNowButtonClick()
 
     private void GenerateCalendarData(DateTime dateTime)
     {
-        _currentMonth = _culture.Calendar.GetMonth(dateTime);
-        _currentYear = _culture.Calendar.GetYear(dateTime);
+        var calendar = _culture.Calendar;
+
+        // A date the culture's calendar does not support has no year or month to be read off it, so the view
+        // opens on the nearest date it does - the Hebrew calendar of .NET, for one, starts in 1583.
+        if (dateTime < calendar.MinSupportedDateTime)
+        {
+            dateTime = calendar.MinSupportedDateTime;
+        }
+        else if (dateTime > calendar.MaxSupportedDateTime)
+        {
+            dateTime = calendar.MaxSupportedDateTime;
+        }
+
+        _currentMonth = calendar.GetMonth(dateTime);
+        _currentYear = calendar.GetYear(dateTime);
 
         _yearPickerStartYear = _currentYear - 1;
         _yearPickerEndYear = _currentYear + 10;
@@ -919,42 +1126,62 @@ private void GenerateMonthData(int year, int month)
         _monthTitle = $"{_culture.DateTimeFormat.GetMonthName(month)} {year}";
 
         var calendar = _culture.Calendar;
-        var firstDayOfMonth = new DateTime(year, month, 1, calendar);
         int daysInMonth = calendar.GetDaysInMonth(year, month);
-        int dayOfWeek = (int)calendar.GetDayOfWeek(firstDayOfMonth);
         int firstDayOfWeek = (int)GetFirstDayOfWeek();
+        int dayOfWeek;
 
-        // Adjust dayOfWeek to match the culture's first day of week
-        dayOfWeek = (dayOfWeek - firstDayOfWeek + 7) % 7;
-
-        DateTime previousMonth;
-        if (month == 1)
+        var firstDayOfMonth = TryCreateDate(year, month, 1);
+        if (firstDayOfMonth.HasValue)
         {
-            previousMonth = new(year - 1, 12, 1);
+            dayOfWeek = (int)calendar.GetDayOfWeek(firstDayOfMonth.Value);
         }
         else
         {
-            previousMonth = new(year, month - 1, 1);
+            // The first supported month of a calendar does not have to start at its first day (the minimum
+            // of the Hebrew calendar falls in the middle of a month), so the weekday of the unrepresentable
+            // first day is walked back from the first day the calendar does support.
+            var minDate = calendar.MinSupportedDateTime;
+            dayOfWeek = ((int)calendar.GetDayOfWeek(minDate) - (calendar.GetDayOfMonth(minDate) - 1)) % 7;
+            if (dayOfWeek < 0)
+            {
+                dayOfWeek += 7;
+            }
         }
-        int daysInPreviousMonth = calendar.GetDaysInMonth(previousMonth.Year, previousMonth.Month);
 
-        DateTime nextMonth;
-        if (month == 12)
+        // Adjust dayOfWeek to match the culture's first day of week
+        dayOfWeek = (dayOfWeek - firstDayOfWeek + 7) % 7;
+
+        // The adjacent months are kept as plain year/month numbers of the culture's own calendar: a DateTime
+        // built out of them would be a Gregorian date of a year that calendar never had, and a thirteenth
+        // month - which a leap year of the Hebrew calendar does have - has no Gregorian counterpart at all.
+        int monthsInYear = calendar.GetMonthsInYear(year);
+
+        int previousYear = month == 1 ? year - 1 : year;
+        int previousMonth;
+        int daysInPreviousMonth;
+        if (previousYear < GetMinCalendarYearMonth().Year)
         {
-            nextMonth = new(year + 1, 1, 1);
+            // The year before the calendar's first year cannot be asked anything - every one of its days
+            // comes out as an empty cell anyway, so any day numbers at all do for the counting.
+            previousMonth = 1;
+            daysInPreviousMonth = dayOfWeek;
         }
         else
         {
-            nextMonth = new(year, month + 1, 1);
+            previousMonth = month == 1 ? calendar.GetMonthsInYear(previousYear) : month - 1;
+            daysInPreviousMonth = calendar.GetDaysInMonth(previousYear, previousMonth);
         }
 
+        int nextYear = month == monthsInYear ? year + 1 : year;
+        int nextMonth = month == monthsInYear ? 1 : month + 1;
+
         int day = daysInPreviousMonth - dayOfWeek + 1;
 
         for (int i = 0; i < 1; i++)
         {
             for (int j = 0; j < dayOfWeek; j++)
             {
-                _daysOfCurrentMonth[i, j] = new(previousMonth.Year, previousMonth.Month, day, calendar);
+                _daysOfCurrentMonth[i, j] = TryCreateDate(previousYear, previousMonth, day);
                 day++;
             }
         }
@@ -969,7 +1196,7 @@ private void GenerateMonthData(int year, int month)
 
                 if (day <= daysInMonth)
                 {
-                    _daysOfCurrentMonth[i, j] = new(year, month, day, calendar);
+                    _daysOfCurrentMonth[i, j] = TryCreateDate(year, month, day);
                     day++;
                 }
                 else
@@ -978,13 +1205,104 @@ private void GenerateMonthData(int year, int month)
                     {
                         ended = true;
                     }
-                    _daysOfCurrentMonth[i, j] = ended ? null : new(nextMonth.Year, nextMonth.Month, day - daysInMonth, calendar);
+                    _daysOfCurrentMonth[i, j] = ended ? null : TryCreateDate(nextYear, nextMonth, day - daysInMonth);
                     day++;
                 }
             }
         }
     }
 
+    // A day at the very edge of the calendar - the days around its first and last supported months - cannot
+    // be represented as a DateTime at all, so it becomes an empty cell instead of an exception.
+    private DateTime? TryCreateDate(int year, int month, int day)
+    {
+        try
+        {
+            return new DateTime(year, month, day, _culture.Calendar);
+        }
+        catch (ArgumentException)
+        {
+            return null;
+        }
+    }
+
+    // The first day of a month at the very edge of the calendar's supported range does not have to be
+    // representable (the range of the Hebrew calendar starts in the middle of a month), so the nearest day
+    // the calendar does support stands in for it.
+    private DateTime GetFirstDayOfMonthOrClamp(int year, int month)
+    {
+        var date = TryCreateDate(year, month, 1);
+        if (date.HasValue) return date.Value;
+
+        var calendar = _culture.Calendar;
+        var (minYear, minMonth) = GetMinCalendarYearMonth();
+
+        return year == minYear && month <= minMonth
+            ? calendar.MinSupportedDateTime.Date
+            : calendar.MaxSupportedDateTime.Date;
+    }
+
+    // DateTime is bounded to the years 1 through 9999 of the Gregorian calendar, and some calendars support
+    // even less, so everything the navigation can reach is bounded by the calendar's own range the same way
+    // MinDate and MaxDate bound it.
+    private (int Year, int Month) GetMinCalendarYearMonth()
+    {
+        var calendar = _culture.Calendar;
+        var minDate = calendar.MinSupportedDateTime;
+
+        return (calendar.GetYear(minDate), calendar.GetMonth(minDate));
+    }
+
+    /// <inheritdoc cref="GetMinCalendarYearMonth"/>
+    private (int Year, int Month) GetMaxCalendarYearMonth()
+    {
+        var calendar = _culture.Calendar;
+        var maxDate = calendar.MaxSupportedDateTime;
+
+        return (calendar.GetYear(maxDate), calendar.GetMonth(maxDate));
+    }
+
+    private int GetMonthsInCurrentYear()
+    {
+        // Not every calendar has twelve months: a leap year of the Hebrew calendar has thirteen.
+        return _culture.Calendar.GetMonthsInYear(_currentYear);
+    }
+
+    private bool IsWeekRowEmpty(int weekIndex)
+    {
+        for (var day = 0; day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
+        {
+            if (_daysOfCurrentMonth[weekIndex, day].HasValue) return false;
+        }
+
+        return true;
+    }
+
+    // Moving to another year of a calendar whose years do not all have the same number of months (the Hebrew
+    // one) can leave the displayed month past the end of the year that is now displayed - and moving to the
+    // first or the last supported year can leave it past the supported part of that year.
+    private void ClampCurrentMonthToYear()
+    {
+        var monthsInYear = GetMonthsInCurrentYear();
+
+        if (_currentMonth > monthsInYear)
+        {
+            _currentMonth = monthsInYear;
+        }
+
+        var (minCalendarYear, minCalendarMonth) = GetMinCalendarYearMonth();
+        if (_currentYear == minCalendarYear && _currentMonth < minCalendarMonth)
+        {
+            _currentMonth = minCalendarMonth;
+        }
+
+        var (maxCalendarYear, maxCalendarMonth) = GetMaxCalendarYearMonth();
+        if (_currentYear == maxCalendarYear && _currentMonth > maxCalendarMonth)
+        {
+            _currentMonth = maxCalendarMonth;
+        }
+    }
+
     private void ChangeYearRanges(int fromYear)
     {
         _yearPickerStartYear = fromYear;
@@ -1033,39 +1351,91 @@ private DayOfWeek GetDayOfWeek(int index)
 
     private int GetWeekNumber(int weekIndex)
     {
-        return _culture.Calendar.GetWeekOfYear(_daysOfCurrentMonth[weekIndex, 0]!.Value, WeekNumberRule ?? CalendarWeekRule.FirstFullWeek, GetFirstDayOfWeek());
+        // The first cells of the week can be empty at the very edge of the calendar's supported range, so the
+        // number of the week is read off the first day of it that actually exists.
+        var date = _daysOfCurrentMonth[weekIndex, 0];
+        for (var day = 1; date.HasValue is false && day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
+        {
+            date = _daysOfCurrentMonth[weekIndex, day];
+        }
+
+        return _culture.Calendar.GetWeekOfYear(date!.Value, WeekNumberRule ?? CalendarWeekRule.FirstFullWeek, GetFirstDayOfWeek());
     }
 
     private void ToggleMonthPickerOverlay()
     {
         _showMonthPicker = !_showMonthPicker;
+
+        // Each toggle swaps one whole picker for another, taking the button that was activated out of the DOM
+        // with it, so the focus has to be handed over to the picker that takes its place.
+        _focusedYearCell = null;
+        _focusedMonthCell = null;
+
+        MoveFocusToTheVisiblePicker();
     }
 
     private void ToggleTimePickerOverlay()
     {
         _showTimePicker = !_showTimePicker;
+
+        MoveFocusToTheVisiblePicker();
+    }
+
+    private void MoveFocusToTheVisiblePicker()
+    {
+        if (DayPickerIsVisible())
+        {
+            _focusedDate = GetFocusableDay();
+            _focusElementIdAfterRender = GetDayButtonId(_focusedDate.Value);
+        }
+        else if (MonthPickerIsVisible() && _showYearPicker is false)
+        {
+            FocusMonthCell(GetFocusableMonth());
+        }
+        else if (MonthPickerIsVisible())
+        {
+            FocusYearCell(GetFocusableYear());
+        }
+        else if (_showTimePicker)
+        {
+            // Nothing but the time picker is left on screen, so its hour input is where the focus goes.
+            _focusTimePickerAfterRender = true;
+        }
     }
 
     private bool CanChangeMonth(bool isNext)
     {
         if (IsEnabled is false) return false;
 
-        var maxDate = GetMaxDate();
-        if (isNext && maxDate.HasValue)
+        if (isNext)
         {
-            var maxDateYear = _culture.Calendar.GetYear(maxDate.Value.DateTime);
-            var maxDateMonth = _culture.Calendar.GetMonth(maxDate.Value.DateTime);
+            var (maxCalendarYear, maxCalendarMonth) = GetMaxCalendarYearMonth();
+            if (_currentYear == maxCalendarYear && _currentMonth >= maxCalendarMonth) return false;
 
-            if (maxDateYear == _currentYear && maxDateMonth == _currentMonth) return false;
-        }
+            var max = GetMaxDate();
+            if (max.HasValue)
+            {
+                var maxDate = GetDateTime(max.Value);
+                var maxDateYear = _culture.Calendar.GetYear(maxDate);
+                var maxDateMonth = _culture.Calendar.GetMonth(maxDate);
 
-        var minDate = GetMinDate();
-        if (isNext is false && minDate.HasValue)
+                if (maxDateYear == _currentYear && maxDateMonth == _currentMonth) return false;
+            }
+        }
+        else
         {
-            var minDateYear = _culture.Calendar.GetYear(minDate.Value.DateTime);
-            var minDateMonth = _culture.Calendar.GetMonth(minDate.Value.DateTime);
+            var (minCalendarYear, minCalendarMonth) = GetMinCalendarYearMonth();
+            if (_currentYear == minCalendarYear && _currentMonth <= minCalendarMonth) return false;
 
-            if (minDateYear == _currentYear && minDateMonth == _currentMonth) return false;
+            var min = GetMinDate();
+            if (min.HasValue)
+            {
+                var minDate = GetDateTime(min.Value);
+                var minDateYear = _culture.Calendar.GetYear(minDate);
+                var minDateMonth = _culture.Calendar.GetMonth(minDate);
+
+                if (minDateYear == _currentYear && minDateMonth == _currentMonth) return false;
+            }
         }
 
         return true;
@@ -1075,12 +1445,15 @@ private bool CanChangeYear(bool isNext)
     {
         if (IsEnabled is false) return false;
 
+        if (isNext && _currentYear >= GetMaxCalendarYearMonth().Year) return false;
+        if (isNext is false && _currentYear <= GetMinCalendarYearMonth().Year) return false;
+
         var maxDate = GetMaxDate();
         var minDate = GetMinDate();
 
         return (
-                (isNext && maxDate.HasValue && _culture.Calendar.GetYear(maxDate.Value.DateTime) == _currentYear) ||
-                (isNext is false && minDate.HasValue && _culture.Calendar.GetYear(minDate.Value.DateTime) == _currentYear)
+                (isNext && maxDate.HasValue && _culture.Calendar.GetYear(GetDateTime(maxDate.Value)) == _currentYear) ||
+                (isNext is false && minDate.HasValue && _culture.Calendar.GetYear(GetDateTime(minDate.Value)) == _currentYear)
                ) is false;
     }
 
@@ -1088,12 +1461,15 @@ private bool CanChangeYearRange(bool isNext)
     {
         if (IsEnabled is false) return false;
 
+        if (isNext && GetMaxCalendarYearMonth().Year < _yearPickerStartYear + 12) return false;
+        if (isNext is false && GetMinCalendarYearMonth().Year >= _yearPickerStartYear) return false;
+
         var maxDate = GetMaxDate();
         var minDate = GetMinDate();
 
         return (
-                (isNext && maxDate.HasValue && _culture.Calendar.GetYear(maxDate.Value.DateTime) < _yearPickerStartYear + 12) ||
-                (isNext is false && minDate.HasValue && _culture.Calendar.GetYear(minDate.Value.DateTime) >= _yearPickerStartYear)
+                (isNext && maxDate.HasValue && _culture.Calendar.GetYear(GetDateTime(maxDate.Value)) < _yearPickerStartYear + 12) ||
+                (isNext is false && minDate.HasValue && _culture.Calendar.GetYear(GetDateTime(minDate.Value)) >= _yearPickerStartYear)
                ) is false;
     }
 
@@ -1102,27 +1478,17 @@ private DateTimeOffset GetNow()
         return Today ?? DateTimeOffset.Now;
     }
 
-    // Today as a whole day in the time zone of the component: the days it is compared against carry no
-    // time of day, so a bound taken from the current instant would place today on the wrong side of it.
-    private (DateTimeOffset start, DateTimeOffset end) GetTodayBounds()
-    {
-        var today = GetDateTime(GetNow()).Date;
-
-        var start = new DateTimeOffset(today, _timeZone.GetUtcOffset(today));
-
-        return (start, start.AddDays(1).AddTicks(-1));
-    }
-
     // DisablePast and DisableFuture bound the selectable days by today exactly the way MinDate and MaxDate
     // do, so every consumer of the allowed range reads the bounds through these two accessors. Where both
-    // apply, the narrower of the two wins. Today itself stays selectable under either of them.
+    // apply, the narrower of the two wins. Today itself stays selectable under either of them, since every
+    // comparison below weighs a whole day rather than an instant.
     private DateTimeOffset? GetMinDate()
     {
         if (DisablePast is false) return MinDate;
 
-        var startOfToday = GetTodayBounds().start;
+        var now = GetNow();
 
-        return MinDate.HasValue && MinDate.Value > startOfToday ? MinDate : startOfToday;
+        return MinDate.HasValue && MinDate.Value > now ? MinDate : now;
     }
 
     /// <inheritdoc cref="GetMinDate"/>
@@ -1130,23 +1496,25 @@ private DateTimeOffset GetNow()
     {
         if (DisableFuture is false) return MaxDate;
 
-        var endOfToday = GetTodayBounds().end;
+        var now = GetNow();
 
-        return MaxDate.HasValue && MaxDate.Value < endOfToday ? MaxDate : endOfToday;
+        return MaxDate.HasValue && MaxDate.Value < now ? MaxDate : now;
     }
 
+    // Every caller weighs a day of the calendar, so the comparison is day against day: a MinDate that carries
+    // a time of day rules out the days before it, not the day it itself falls on.
     private bool IsWeekDayOutOfMinAndMaxDate(DateTime date)
     {
         var maxDate = GetMaxDate();
         if (maxDate.HasValue)
         {
-            if (date > GetDateTime(maxDate.Value)) return true;
+            if (date.Date > GetDateTime(maxDate.Value).Date) return true;
         }
 
         var minDate = GetMinDate();
         if (minDate.HasValue)
         {
-            if (date < GetDateTime(minDate.Value)) return true;
+            if (date.Date < GetDateTime(minDate.Value).Date) return true;
         }
 
         return false;
@@ -1154,20 +1522,30 @@ private bool IsWeekDayOutOfMinAndMaxDate(DateTime date)
 
     private bool IsMonthOutOfMinAndMaxDate(int month)
     {
-        var maxDate = GetMaxDate();
-        if (maxDate.HasValue)
+        // The supported range of the calendar itself bounds the selection the same way MinDate and MaxDate do:
+        // a month past its edge has no representable days at all.
+        var (minCalendarYear, minCalendarMonth) = GetMinCalendarYearMonth();
+        if (_currentYear < minCalendarYear || (_currentYear == minCalendarYear && month < minCalendarMonth)) return true;
+
+        var (maxCalendarYear, maxCalendarMonth) = GetMaxCalendarYearMonth();
+        if (_currentYear > maxCalendarYear || (_currentYear == maxCalendarYear && month > maxCalendarMonth)) return true;
+
+        var max = GetMaxDate();
+        if (max.HasValue)
         {
-            var maxDateYear = _culture.Calendar.GetYear(maxDate.Value.DateTime);
-            var maxDateMonth = _culture.Calendar.GetMonth(maxDate.Value.DateTime);
+            var maxDate = GetDateTime(max.Value);
+            var maxDateYear = _culture.Calendar.GetYear(maxDate);
+            var maxDateMonth = _culture.Calendar.GetMonth(maxDate);
 
             if (_currentYear > maxDateYear || (_currentYear == maxDateYear && month > maxDateMonth)) return true;
         }
 
-        var minDate = GetMinDate();
-        if (minDate.HasValue)
+        var min = GetMinDate();
+        if (min.HasValue)
         {
-            var minDateYear = _culture.Calendar.GetYear(minDate.Value.DateTime);
-            var minDateMonth = _culture.Calendar.GetMonth(minDate.Value.DateTime);
+            var minDate = GetDateTime(min.Value);
+            var minDateYear = _culture.Calendar.GetYear(minDate);
+            var minDateMonth = _culture.Calendar.GetMonth(minDate);
 
             if (_currentYear < minDateYear || (_currentYear == minDateYear && month < minDateMonth)) return true;
         }
@@ -1180,8 +1558,12 @@ private bool IsYearOutOfMinAndMaxDate(int year)
         var maxDate = GetMaxDate();
         var minDate = GetMinDate();
 
-        return (maxDate.HasValue && year > _culture.Calendar.GetYear(maxDate.Value.DateTime))
-            || (minDate.HasValue && year < _culture.Calendar.GetYear(minDate.Value.DateTime));
+        // The years outside of the calendar's own supported range are as unselectable as the ones outside of
+        // MinDate and MaxDate - the year picker can show them at the edges of its ranges.
+        return year < GetMinCalendarYearMonth().Year
+            || year > GetMaxCalendarYearMonth().Year
+            || (maxDate.HasValue && year > _culture.Calendar.GetYear(GetDateTime(maxDate.Value)))
+            || (minDate.HasValue && year < _culture.Calendar.GetYear(GetDateTime(minDate.Value)));
     }
 
     private (string style, string klass) GetDayButtonCss(DateTime date)
@@ -1198,10 +1580,7 @@ private bool IsYearOutOfMinAndMaxDate(int year)
                 klass.Append(' ').Append(Classes?.SelectedDayButton);
             }
 
-            if (Styles?.SelectedDayButton is not null)
-            {
-                style.Append(Styles?.SelectedDayButton);
-            }
+            AppendStyle(style, Styles?.SelectedDayButton);
         }
 
         var month = _culture.Calendar.GetMonth(date);
@@ -1222,14 +1601,11 @@ private bool IsYearOutOfMinAndMaxDate(int year)
                 klass.Append(' ').Append(Classes?.HighlightedDayButton);
             }
 
-            if (Styles?.HighlightedDayButton is not null)
-            {
-                style.Append(' ').Append(Styles?.HighlightedDayButton);
-            }
+            AppendStyle(style, Styles?.HighlightedDayButton);
         }
 
         //Is today
-        if (month == _currentMonth && date == GetToday().Date)
+        if (HighlightToday && month == _currentMonth && date == GetToday().Date)
         {
             klass.Append(" bit-cal-dtd");
 
@@ -1238,10 +1614,7 @@ private bool IsYearOutOfMinAndMaxDate(int year)
                 klass.Append(' ').Append(Classes?.TodayDayButton);
             }
 
-            if (Styles?.TodayDayButton is not null)
-            {
-                style.Append(' ').Append(Styles?.TodayDayButton);
-            }
+            AppendStyle(style, Styles?.TodayDayButton);
         }
 
         var customClass = GetDayClass?.Invoke(GetDateTimeOfDayCell(date));
@@ -1250,9 +1623,28 @@ private bool IsYearOutOfMinAndMaxDate(int year)
             klass.Append(' ').Append(customClass);
         }
 
+        // The style of every day comes last so it wins over the state specific ones, and it goes through the
+        // same appender so it is separated from them by a semicolon.
+        AppendStyle(style, Styles?.DayButton);
+
         return (style.ToString(), klass.ToString());
     }
 
+    // The styles of a day come from more than one state at a time (a selected day that is also today), so each
+    // one is closed with a semicolon before the next is appended - without it the last declaration of one and
+    // the first of the next would run together into a single invalid one.
+    private static void AppendStyle(StringBuilder builder, string? style)
+    {
+        if (style.HasNoValue()) return;
+
+        if (builder.Length > 0 && builder[^1] != ';')
+        {
+            builder.Append(';');
+        }
+
+        builder.Append(style);
+    }
+
     private string GetMonthCellCssClass(int monthIndex, int todayYear, int todayMonth)
     {
         var className = new StringBuilder();
@@ -1276,7 +1668,7 @@ private DateTimeOffset GetDateTimeOfDayCell(DateTime date)
 
     private DateTimeOffset GetDateTimeOfMonthCell(int monthIndex)
     {
-        var date = _culture.Calendar.ToDateTime(_currentYear, monthIndex, 1, 0, 0, 0, 0);
+        var date = GetFirstDayOfMonthOrClamp(_currentYear, monthIndex);
         return new(date, _timeZone.GetUtcOffset(date));
     }
 
@@ -1302,9 +1694,12 @@ private void UpdateTime()
 
     private void BuildEventsLookup()
     {
+        // The events of a day read as its agenda, so they are ordered the way one is: the all-day ones (which
+        // carry no start time) first, then the rest by the time they start at.
         _eventsByDate = Events is null
             ? []
-            : Events.GroupBy(e => e.Date).ToDictionary(g => g.Key, g => g.ToList());
+            : Events.GroupBy(e => e.Date)
+                    .ToDictionary(g => g.Key, g => g.OrderBy(e => e.StartTime ?? TimeOnly.MinValue).ToList());
     }
 
     private void BuildDatesLookups()
@@ -1342,6 +1737,19 @@ private string GetDayButtonId(DateTime date)
         return FormattableString.Invariant($"{_Id}-day-{date.Year:D4}-{date.Month:D2}-{date.Day:D2}");
     }
 
+    private string GetMonthButtonId(int month)
+    {
+        return FormattableString.Invariant($"{_Id}-month-{month:D2}");
+    }
+
+    private string GetYearButtonId(int year)
+    {
+        return FormattableString.Invariant($"{_Id}-year-{year:D4}");
+    }
+
+    // The single day of the grid that is in the tab sequence (the roving tabindex of the APG grid pattern):
+    // the one the keyboard last landed on, otherwise the selection, otherwise today, and as a last resort the
+    // first day that can actually be selected - the grid must never be unreachable.
     private DateTime GetFocusableDay()
     {
         if (_focusedDate.HasValue && IsInCurrentMonth(_focusedDate.Value) && IsDayDisabled(_focusedDate.Value) is false) return _focusedDate.Value;
@@ -1364,7 +1772,204 @@ private DateTime GetFocusableDay()
             }
         }
 
-        return _daysOfCurrentMonth[0, 0].GetValueOrDefault(today);
+        // A month can be disabled from end to end, and a disabled day is not focusable anyway - but the
+        // tabindex still has to land on a day of the month itself: with ShowOutsideDays turned off the days
+        // around it are not rendered as buttons at all, so pointing at one loses the grid entirely.
+        for (var week = 0; week < DEFAULT_WEEK_COUNT; week++)
+        {
+            for (var day = 0; day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
+            {
+                var date = _daysOfCurrentMonth[week, day];
+                if (date.HasValue && IsInCurrentMonth(date.Value)) return date.Value;
+            }
+        }
+
+        return today;
+    }
+
+    // The single month of the month grid that is in the tab sequence: the one the keyboard last landed on,
+    // otherwise the month the calendar displays, and as a last resort the first month the Min/Max range
+    // allows - a month is always returned, so the grid is reachable even when every month is disabled.
+    private int GetFocusableMonth()
+    {
+        var monthsInYear = GetMonthsInCurrentYear();
+
+        if (_focusedMonthCell.HasValue &&
+            _focusedMonthCell.Value >= 1 && _focusedMonthCell.Value <= monthsInYear &&
+            IsMonthOutOfMinAndMaxDate(_focusedMonthCell.Value) is false) return _focusedMonthCell.Value;
+
+        if (_currentMonth >= 1 && _currentMonth <= monthsInYear &&
+            IsMonthOutOfMinAndMaxDate(_currentMonth) is false) return _currentMonth;
+
+        for (var month = 1; month <= monthsInYear; month++)
+        {
+            if (IsMonthOutOfMinAndMaxDate(month) is false) return month;
+        }
+
+        return Math.Clamp(_currentMonth, 1, monthsInYear);
+    }
+
+    // The same roving tabindex for the year grid. The displayed year is not always inside the range the year
+    // picker shows (browsing the ranges moves the range alone), so the first year of the range is what the tab
+    // sequence falls back to.
+    private int GetFocusableYear()
+    {
+        if (_focusedYearCell.HasValue &&
+            _focusedYearCell.Value >= _yearPickerStartYear && _focusedYearCell.Value <= _yearPickerEndYear &&
+            IsYearOutOfMinAndMaxDate(_focusedYearCell.Value) is false) return _focusedYearCell.Value;
+
+        if (_currentYear >= _yearPickerStartYear && _currentYear <= _yearPickerEndYear &&
+            IsYearOutOfMinAndMaxDate(_currentYear) is false) return _currentYear;
+
+        for (var year = _yearPickerStartYear; year <= _yearPickerEndYear; year++)
+        {
+            if (IsYearOutOfMinAndMaxDate(year) is false) return year;
+        }
+
+        return _yearPickerStartYear;
+    }
+
+    // The month grid answers the same keys as the day grid, one row being four months wide, and
+    // PageUp/PageDown moving to the same month of the adjacent year.
+    private async Task HandleMonthKeyDown(KeyboardEventArgs e, int month)
+    {
+        if (IsEnabled is false) return;
+
+        if (e.Key is "PageUp" or "PageDown")
+        {
+            var isNext = e.Key is "PageDown";
+
+            if (CanChangeYear(isNext) is false) return;
+
+            await HandleYearChange(isNext);
+
+            FocusMonthCell(GetFocusableMonth());
+            return;
+        }
+
+        var isRtl = BitCssClasses.IsRtl(Dir, _culture);
+
+        int? target = e.Key switch
+        {
+            "ArrowLeft" => FindEnabledMonth(month, isRtl ? 1 : -1),
+            "ArrowRight" => FindEnabledMonth(month, isRtl ? -1 : 1),
+            "ArrowUp" => FindEnabledMonth(month, -4),
+            "ArrowDown" => FindEnabledMonth(month, 4),
+            "Home" => FindEnabledMonthFrom(1, 1),
+            "End" => FindEnabledMonthFrom(GetMonthsInCurrentYear(), -1),
+            _ => null
+        };
+
+        if (target.HasValue is false) return;
+
+        FocusMonthCell(target.Value);
+    }
+
+    private void FocusMonthCell(int month)
+    {
+        _focusedMonthCell = month;
+        _focusElementIdAfterRender = GetMonthButtonId(month);
+    }
+
+    private int? FindEnabledMonth(int from, int step)
+    {
+        var monthsInYear = GetMonthsInCurrentYear();
+        var month = from + step;
+
+        while (month >= 1 && month <= monthsInYear)
+        {
+            if (IsMonthOutOfMinAndMaxDate(month) is false) return month;
+
+            month += step;
+        }
+
+        return null;
+    }
+
+    private int? FindEnabledMonthFrom(int from, int step)
+    {
+        var monthsInYear = GetMonthsInCurrentYear();
+        var month = from;
+
+        while (month >= 1 && month <= monthsInYear)
+        {
+            if (IsMonthOutOfMinAndMaxDate(month) is false) return month;
+
+            month += step;
+        }
+
+        return null;
+    }
+
+    // The year grid answers the same keys, one row being four years wide, and PageUp/PageDown moving to the
+    // adjacent range of years.
+    private void HandleYearKeyDown(KeyboardEventArgs e, int year)
+    {
+        if (IsEnabled is false) return;
+
+        if (e.Key is "PageUp" or "PageDown")
+        {
+            var isNext = e.Key is "PageDown";
+
+            if (CanChangeYearRange(isNext) is false) return;
+
+            HandleYearRangeChange(isNext);
+
+            _focusedYearCell = null;
+            FocusYearCell(GetFocusableYear());
+            return;
+        }
+
+        var isRtl = BitCssClasses.IsRtl(Dir, _culture);
+
+        int? target = e.Key switch
+        {
+            "ArrowLeft" => FindEnabledYear(year, isRtl ? 1 : -1),
+            "ArrowRight" => FindEnabledYear(year, isRtl ? -1 : 1),
+            "ArrowUp" => FindEnabledYear(year, -4),
+            "ArrowDown" => FindEnabledYear(year, 4),
+            "Home" => FindEnabledYearFrom(_yearPickerStartYear, 1),
+            "End" => FindEnabledYearFrom(_yearPickerEndYear, -1),
+            _ => null
+        };
+
+        if (target.HasValue is false) return;
+
+        FocusYearCell(target.Value);
+    }
+
+    private void FocusYearCell(int year)
+    {
+        _focusedYearCell = year;
+        _focusElementIdAfterRender = GetYearButtonId(year);
+    }
+
+    private int? FindEnabledYear(int from, int step)
+    {
+        var year = from + step;
+
+        while (year >= _yearPickerStartYear && year <= _yearPickerEndYear)
+        {
+            if (IsYearOutOfMinAndMaxDate(year) is false) return year;
+
+            year += step;
+        }
+
+        return null;
+    }
+
+    private int? FindEnabledYearFrom(int from, int step)
+    {
+        var year = from;
+
+        while (year >= _yearPickerStartYear && year <= _yearPickerEndYear)
+        {
+            if (IsYearOutOfMinAndMaxDate(year) is false) return year;
+
+            year += step;
+        }
+
+        return null;
     }
 
     private async Task HandleDayKeyDown(KeyboardEventArgs e, DateTime date)
@@ -1446,7 +2051,7 @@ private async Task MoveFocusToDay(DateTime target)
         }
 
         _focusedDate = target;
-        _focusAfterRender = true;
+        _focusElementIdAfterRender = GetDayButtonId(target);
 
         await NotifyMonthChange(previousYear, previousMonth);
     }
@@ -1456,7 +2061,7 @@ private async Task NotifyMonthChange(int previousYear, int previousMonth)
         if (previousYear == _currentYear && previousMonth == _currentMonth) return;
         if (OnMonthChange.HasDelegate is false) return;
 
-        var date = _culture.Calendar.ToDateTime(_currentYear, _currentMonth, 1, 0, 0, 0, 0);
+        var date = GetFirstDayOfMonthOrClamp(_currentYear, _currentMonth);
 
         await OnMonthChange.InvokeAsync(new(date, _timeZone.GetUtcOffset(date)));
     }
@@ -1482,34 +2087,112 @@ private string FormatEventModalDate(DateOnly date)
         return date.ToDateTime(TimeOnly.MinValue).ToString(DateFormat ?? _culture.DateTimeFormat.ShortDatePattern, _culture);
     }
 
+    // The events of a day as one line each, for the native tooltip of its cell.
     private string GetEventTooltip(IReadOnlyList<BitCalendarEvent> events)
     {
-        return string.Join("\n", events.Select(e =>
-            e.StartTime.HasValue ? $"{e.Title} ({FormatEventTime(e.StartTime.Value)})" : e.Title));
+        return GetEventSummary(events, "\n");
     }
 
     private async Task HandleDayClick(DateTime date, IReadOnlyList<BitCalendarEvent> events)
     {
-        if (events.Count > 0)
+        if (ShowEventDetails && events.Count > 0)
         {
-            OpenEventModal(date, events);
+            OpenEventModal(date);
         }
-        
+
         await SelectDate(date);
     }
 
-    private void OpenEventModal(DateTime date, IReadOnlyList<BitCalendarEvent> events)
+    private void OpenEventModal(DateTime date)
     {
         _eventModalDate = DateOnly.FromDateTime(date);
-        _eventModalEvents = events;
         _showEventModal = true;
     }
 
+    // Only the day is held, never the events of it: the events the dialog lists are read from the lookup on
+    // every render, so a page that loads them for the visible month while the dialog is open shows what it
+    // loaded rather than what the day held when it was opened.
+    private IReadOnlyList<BitCalendarEvent> GetEventModalEvents()
+    {
+        return _eventsByDate.TryGetValue(_eventModalDate, out var list) ? list : [];
+    }
+
     private void CloseEventModal()
     {
         _showEventModal = false;
     }
 
+    // Escape closes the dialog, the way every dismissible surface in the library is left, and hands the
+    // keyboard back to the day that opened it (SyncEventDialogFocus).
+    private void HandleEventDialogKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key is not "Escape") return;
+
+        CloseEventModal();
+    }
+
+    // The dialog takes the keyboard over while it is open: the focus is recorded and moved into it, Tab is kept
+    // cycling inside it, and closing it puts the focus back on the day cell it was opened from. Driven from
+    // OnAfterRenderAsync rather than from the open and close handlers, since the surface has to be in the DOM
+    // before the focus can be placed in it and gone from it before the focus can be handed back.
+    private async Task SyncEventDialogFocus()
+    {
+        if (IsDisposed) return;
+
+        if (_showEventModal)
+        {
+            if (_eventModalFocusTrapped) return;
+
+            _eventModalFocusTrapped = true;
+            _eventModalFocusStored = true;
+
+            try
+            {
+                await _js.BitUtilsStoreFocus(_eventDialogId);
+                await _js.BitUtilsSetupFocusTrap(_eventDialogId);
+                await _js.BitUtilsFocusFirstElement(_eventDialogId);
+            }
+            catch (JSDisconnectedException) { } // we can ignore this exception here
+
+            return;
+        }
+
+        if (_eventModalFocusTrapped is false) return;
+
+        _eventModalFocusTrapped = false;
+
+        try
+        {
+            await _js.BitUtilsDisposeFocusTrap(_eventDialogId);
+
+            if (_eventModalFocusStored)
+            {
+                _eventModalFocusStored = false;
+
+                await _js.BitUtilsRestoreFocus(_eventDialogId);
+            }
+        }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
+    }
+
+    // What a screen reader is told a day is: the date, and the events it carries - the indicator dot and the
+    // tooltip that report them to everyone else are both invisible to it. The label replaces the content of the
+    // button, so the events cannot simply be added to the markup inside it.
+    private string GetDayAriaLabel(DateTime date, IReadOnlyList<BitCalendarEvent> events)
+    {
+        var label = date.ToString(_culture.DateTimeFormat.LongDatePattern, _culture);
+
+        if (events.Count == 0) return label;
+
+        return $"{label}, {GetEventSummary(events, ", ")}";
+    }
+
+    private string GetEventSummary(IReadOnlyList<BitCalendarEvent> events, string separator)
+    {
+        return string.Join(separator, events.Select(e =>
+            e.StartTime.HasValue ? $"{e.Title} ({FormatEventTime(e.StartTime.Value)})" : e.Title));
+    }
+
     private DateTime GetDateTime(DateTimeOffset dateTimeOffset)
     {
         return TimeZoneInfo.ConvertTimeFromUtc(dateTimeOffset.UtcDateTime, _timeZone);
@@ -1727,6 +2410,20 @@ protected override async ValueTask DisposeAsync(bool disposing)
         try
         {
             await _js.BitCalendarsDispose(_Id);
+
+            if (_eventModalFocusTrapped)
+            {
+                _eventModalFocusTrapped = false;
+
+                await _js.BitUtilsDisposeFocusTrap(_eventDialogId);
+            }
+
+            if (_eventModalFocusStored)
+            {
+                _eventModalFocusStored = false;
+
+                await _js.BitUtilsForgetFocus(_eventDialogId);
+            }
         }
         catch (JSDisconnectedException) { } // we can ignore this exception here
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
index f1b0933da31..37a35961701 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
@@ -1,6 +1,57 @@
 @import "../../../Styles/functions.scss";
+@import "../../../Styles/color-role-maps.scss";
+
+// Public CSS variables, read off the root and never declared here, so a value set on :root re-skins every
+// calendar and one set on the Style of an instance re-skins that one alone:
+//   --bit-Calendar-background                background behind the whole calendar          (default: transparent)
+//   --bit-Calendar-radius                    corner radius of the calendar and of the
+//                                            overlay of the event dialog                  (default: $shp-radius-control)
+//   --bit-Calendar-padding                   padding of each picker pane                   (default: spacing(1.5))
+//   --bit-Calendar-color                     text color of the cells and the headers       (default: $clr-fg-pri)
+//   --bit-Calendar-divider-color             color of the rule between the panes, beside
+//                                            the week numbers and between event items     (default: $clr-brd-sec)
+//   --bit-Calendar-focus-color               color of the keyboard focus ring              (default: the role's focus color)
+//   --bit-Calendar-disabled-color            text color of a disabled cell                 (default: $clr-fg-dis)
+//   --bit-Calendar-hover-background          background of a cell on hover                 (default: $clr-bg-pri-hover)
+//   --bit-Calendar-active-background         background of a cell while pressed            (default: $clr-bg-pri-active)
+//   --bit-Calendar-day-size                  width and height of a day cell, which the
+//                                            week numbers, the weekday headers and the
+//                                            navigation buttons line up with              (default: per Size)
+//   --bit-Calendar-day-font-size             text size of the day cells and of the
+//                                            headers that line up with them               (default: per Size)
+//   --bit-Calendar-day-radius                corner radius of a day cell                   (default: $shp-radius-control)
+//   --bit-Calendar-outside-day-color         text color of a day of an adjacent month      (default: $clr-fg-sec)
+//   --bit-Calendar-selected-background       background of the selected day                (default: $clr-bg-sec)
+//   --bit-Calendar-selected-color            text color of the selected day                (default: the cell color)
+//   --bit-Calendar-selected-border-color     color of the ring drawn around the selected
+//                                            day                                          (default: $clr-brd-pri)
+//   --bit-Calendar-today-background          background of today, and of the highlighted
+//                                            current month                                (default: the Color role's main color)
+//   --bit-Calendar-today-color               text color of today                           (default: the Color role's on-color)
+//   --bit-Calendar-today-radius              corner radius of today                        (default: $shp-radius-full)
+//   --bit-Calendar-highlighted-background    background of a HighlightedDates day          (default: $clr-bg-ter)
+//   --bit-Calendar-week-number-color         text color of a week number                   (default: $clr-fg-sec)
+//   --bit-Calendar-week-number-background    background of a week number                   (default: $clr-bg-sec)
+//   --bit-Calendar-event-color               color of the event indicator dot              (default: the Color role's main color)
+//   --bit-Calendar-event-size                diameter of the event indicator dot           (default: spacing(0.5))
+
+// The default size, declared as a mixin so the root can fall back to it without a size class. The two values
+// an author can override are named apart from the ones they feed (see the indirection on .bit-cal below), so
+// a size class and a CSS variable never fight over the same property.
+@mixin cal-size-medium {
+    --bit-cal-cell-size-def: #{spacing(3.5)};
+    --bit-cal-cell-fs-def: #{$tg-fs-xs};
+    --bit-cal-mcell-w: #{spacing(6)};
+    --bit-cal-mcell-h: #{spacing(5.17)};
+    --bit-cal-tcell-size: #{spacing(3.75)};
+    --bit-cal-pane-min-w: #{spacing(26)};
+}
 
 .bit-cal {
+    // The public overrides resolve here, once, so every part that lines up with a day - the week numbers, the
+    // empty cells, the weekday headers, the navigation buttons - stays in step with the day cells.
+    --bit-cal-cell-size: var(--bit-Calendar-day-size, var(--bit-cal-cell-size-def));
+    --bit-cal-cell-fs: var(--bit-Calendar-day-font-size, var(--bit-cal-cell-fs-def));
     margin: 0;
     padding: 0;
     box-shadow: none;
@@ -10,6 +61,9 @@
     box-sizing: border-box;
     font-size: $tg-fs-lg;
     font-family: $tg-font-family;
+    background-color: var(--bit-Calendar-background, transparent);
+
+    @include cal-size-medium;
 
     &.bit-dis {
         .bit-cal-cnt {
@@ -19,13 +73,18 @@
         }
 
         .bit-cal-tdv,
+        .bit-cal-tin,
+        .bit-cal-tbt,
         .bit-cal-pkt,
         .bit-cal-nbt,
+        .bit-cal-gtb,
+        .bit-cal-gtn,
         .bit-cal-wlb,
+        .bit-cal-wnm,
         .bit-cal-dbt,
         .bit-cal-pkb,
         .bit-cal-ptb {
-            color: $clr-fg-dis;
+            color: var(--bit-Calendar-disabled-color, #{$clr-fg-dis});
         }
 
         .bit-cal-dbt {
@@ -34,19 +93,47 @@
             }
         }
     }
+
+    // A value the EditContext rejected: the calendar is a grid rather than a field with a border to redden,
+    // so the rule is drawn around the whole control, and the cells' focus ring follows it into the error
+    // color so a keyboard user is not shown two different states at once.
+    &.bit-inv {
+        .bit-cal-cnt {
+            outline: $shp-border-width $shp-border-style $clr-err;
+        }
+
+        --bit-cal-clr-focus: #{$clr-err-focus};
+    }
 }
 
 .bit-cal-cnt {
     display: flex;
     font-weight: $tg-fw-regular;
-    top: spacing(4.25);
     outline: transparent;
     box-sizing: border-box;
     font-size: $tg-fs-sm;
     font-family: $tg-font-family;
-    border-radius: $shp-radius-control;
+    border-radius: var(--bit-Calendar-radius, #{$shp-radius-control});
 }
 
+// The two slots a calendar can be given content of its own in: a caption above the pickers and a row of
+// actions below them. Both are laid out by whatever is put in them; only the padding is the calendar's.
+.bit-cal-hdr,
+.bit-cal-ftr {
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
+    font-size: $tg-fs-sm;
+    padding: var(--bit-Calendar-padding, #{spacing(1.5)});
+}
+
+.bit-cal-hdr {
+    padding-bottom: 0;
+}
+
+.bit-cal-ftr {
+    padding-top: 0;
+}
+
+// The selection as words, for a screen reader alone.
 .bit-cal-sdt {
     height: 0;
     border: 0;
@@ -61,20 +148,10 @@
     margin: 0;
     display: flex;
     box-shadow: none;
-    padding: spacing(1.5);
-    min-width: spacing(26);
     box-sizing: content-box;
     flex-flow: column nowrap;
-}
-
-.bit-cal-dgd {
-    border-spacing: 0;
-    position: relative;
-    text-align: center;
-    font-size: inherit;
-    table-layout: fixed;
-    margin-top: spacing(0.5);
-    border-collapse: collapse;
+    min-width: var(--bit-cal-pane-min-w);
+    padding: var(--bit-Calendar-padding, #{spacing(1.5)});
 }
 
 .bit-cal-grd {
@@ -87,6 +164,7 @@
     width: 100%;
     display: flex;
     flex-flow: row nowrap;
+    justify-content: space-evenly;
 }
 
 .bit-cal-wlb {
@@ -94,17 +172,17 @@
     padding: 0;
     border: none;
     font-weight: $tg-fw-regular;
-    color: $clr-fg-pri;
     position: relative;
     text-align: center;
-    width: spacing(3.5);
-    height: spacing(3.5);
-    font-size: $tg-fs-xs;
-    line-height: spacing(3.5);
     animation-fill-mode: both;
-    animation-duration: $mot-duration-long;
     animation-name: bit-fade-in;
+    width: var(--bit-cal-cell-size);
+    height: var(--bit-cal-cell-size);
+    font-size: var(--bit-cal-cell-fs);
+    line-height: var(--bit-cal-cell-size);
+    animation-duration: $mot-duration-long;
     animation-timing-function: $mot-easing;
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
 }
 
 .bit-cal-dbt {
@@ -113,73 +191,81 @@
     display: flex;
     cursor: pointer;
     overflow: visible;
-    color: $clr-fg-pri;
     position: relative;
-    width: spacing(3.5);
     align-items: center;
-    height: spacing(3.5);
     outline: transparent;
     font-weight: inherit;
     box-sizing: border-box;
-    font-size: $tg-fs-xs;
-    line-height: spacing(3);
     justify-content: center;
     background-color: transparent;
-    border-radius: $shp-radius-control;
+    width: var(--bit-cal-cell-size);
+    height: var(--bit-cal-cell-size);
+    line-height: var(--bit-cal-cell-size);
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
+    font-size: var(--bit-cal-cell-fs);
+    border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-Calendar-hover-background, #{$clr-bg-pri-hover});
         }
     }
 
     &:active {
-        background-color: $clr-bg-pri-active;
+        background-color: var(--bit-Calendar-active-background, #{$clr-bg-pri-active});
     }
 
     &:disabled {
-        color: $clr-fg-dis;
         pointer-events: none;
         background-color: transparent;
+        color: var(--bit-Calendar-disabled-color, #{$clr-fg-dis});
     }
 
+    // The grid moves the focus with the arrow keys, so the focused day has to be visible as such - and above
+    // its neighbors, whose backgrounds would otherwise clip the ring. The ring is drawn without an offset:
+    // the cells of a week sit against one another, and a gap between the cell and its ring would be filled
+    // with the background of the day next to it.
     &:focus-visible {
         z-index: 1;
-        outline: $shp-border-width $shp-border-style $clr-brd-pri;
+        @include focus-ring(var(--bit-Calendar-focus-color, var(--bit-cal-clr-focus)), 0);
     }
 }
 
+// The placeholder of a day of an adjacent month while ShowOutsideDays is off, and of a day outside the
+// range the calendar can represent: it keeps the columns of the week aligned without rendering a day.
 .bit-cal-dbe {
-    width: spacing(3.5);
-    height: spacing(3.5);
+    width: var(--bit-cal-cell-size);
+    height: var(--bit-cal-cell-size);
 }
 
 .bit-cal-dhl {
     font-weight: $tg-fw-semibold;
-    background-color: $clr-bg-ter;
+    background-color: var(--bit-Calendar-highlighted-background, #{$clr-bg-ter});
 }
 
 .bit-cal-dbs {
-    background-color: $clr-bg-sec;
+    color: var(--bit-Calendar-selected-color, var(--bit-Calendar-color, #{$clr-fg-pri}));
+    background-color: var(--bit-Calendar-selected-background, #{$clr-bg-sec});
 
     &::after {
         inset: 0;
         content: "";
         position: absolute;
-        border: $shp-border-width $shp-border-style $clr-brd-pri;
+        border-radius: inherit;
+        border: $shp-border-width $shp-border-style var(--bit-Calendar-selected-border-color, #{$clr-brd-pri});
     }
 }
 
 .bit-cal-dbo {
     font-weight: $tg-fw-regular;
-    color: $clr-fg-sec;
+    color: var(--bit-Calendar-outside-day-color, #{$clr-fg-sec});
 }
 
 .bit-cal-dtd {
     font-weight: $tg-fw-semibold;
-    border-radius: 50%;
-    color: var(--bit-cal-clr-txt);
-    background-color: var(--bit-cal-clr);
+    border-radius: var(--bit-Calendar-today-radius, #{$shp-radius-full});
+    color: var(--bit-Calendar-today-color, var(--bit-cal-clr-txt));
+    background-color: var(--bit-Calendar-today-background, var(--bit-cal-clr));
 
     @media(hover: hover) {
         &:hover {
@@ -196,24 +282,24 @@
     margin: 0;
     display: flex;
     font-weight: $tg-fw-regular;
-    color: $clr-fg-sec;
-    width: spacing(3.5);
     align-items: center;
-    height: spacing(3.5);
     box-sizing: border-box;
-    font-size: $tg-fs-xs;
     justify-content: center;
     padding: spacing(0.375) 0 0 0;
-    background-color: $clr-bg-sec;
-    border-inline-end: $shp-border-width $shp-border-style $clr-brd-sec;
+    width: var(--bit-cal-cell-size);
+    height: var(--bit-cal-cell-size);
+    font-size: var(--bit-cal-cell-fs);
+    color: var(--bit-Calendar-week-number-color, #{$clr-fg-sec});
+    background-color: var(--bit-Calendar-week-number-background, #{$clr-bg-sec});
+    border-inline-end: $shp-border-width $shp-border-style var(--bit-Calendar-divider-color, #{$clr-brd-sec});
 }
 
 .bit-cal-pkh {
     width: 100%;
     position: relative;
-    height: spacing(3.5);
     display: inline-flex;
-    line-height: spacing(5.5);
+    height: var(--bit-cal-cell-size);
+    line-height: var(--bit-cal-cell-size);
 }
 
 .bit-cal-tph {
@@ -229,7 +315,6 @@
     overflow: hidden;
     font-weight: $tg-fw-semibold;
     text-align: start;
-    color: $clr-fg-pri;
     position: relative;
     white-space: nowrap;
     align-items: center;
@@ -240,13 +325,14 @@
     // without the row having to run past the wrapper - see the header floor at the end of this file.
     padding: 0 spacing(0.75);
     font-size: $tg-fs-sm;
-    line-height: spacing(3.5);
     animation-fill-mode: both;
-    animation-duration: $mot-duration-long;
     animation-name: bit-fade-show;
     background-color: transparent;
-    border-radius: $shp-radius-control;
+    line-height: var(--bit-cal-cell-size);
+    animation-duration: $mot-duration-long;
     animation-timing-function: $mot-easing;
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
+    border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
 }
 
 .bit-cal-ptb {
@@ -254,9 +340,13 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-Calendar-hover-background, #{$clr-bg-pri-hover});
         }
     }
+
+    &:focus-visible {
+        @include focus-ring(var(--bit-Calendar-focus-color, var(--bit-cal-clr-focus)), 0);
+    }
 }
 
 .bit-cal-nbc {
@@ -273,32 +363,41 @@
     display: block;
     cursor: pointer;
     overflow: visible;
-    color: $clr-fg-pri;
     position: relative;
     text-align: center;
-    width: spacing(3.5);
-    height: spacing(3.5);
     outline: transparent;
-    font-size: $tg-fs-xs;
-    min-width: spacing(3.5);
-    min-height: spacing(3.5);
-    line-height: spacing(3.5);
     background-color: transparent;
-    border-radius: $shp-radius-control;
+    width: var(--bit-cal-cell-size);
+    height: var(--bit-cal-cell-size);
+    min-width: var(--bit-cal-cell-size);
+    min-height: var(--bit-cal-cell-size);
+    line-height: var(--bit-cal-cell-size);
+    font-size: var(--bit-cal-cell-fs);
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
+    border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-Calendar-hover-background, #{$clr-bg-pri-hover});
         }
     }
 
+    &:active {
+        background-color: var(--bit-Calendar-active-background, #{$clr-bg-pri-active});
+    }
+
+    &:focus-visible {
+        z-index: 1;
+        @include focus-ring(var(--bit-Calendar-focus-color, var(--bit-cal-clr-focus)), 0);
+    }
+
     &:disabled {
         pointer-events: none;
         background-color: transparent;
 
         .bit-icon,
         .bit-cal-ico {
-            color: $clr-fg-dis;
+            color: var(--bit-Calendar-disabled-color, #{$clr-fg-dis});
         }
     }
 }
@@ -309,24 +408,29 @@
     cursor: pointer;
     aspect-ratio: 1;
     overflow: visible;
-    color: $clr-fg-pri;
     position: relative;
     text-align: center;
-    width: spacing(3.75);
     outline: transparent;
-    line-height: spacing(3.75);
-    font-size: $tg-fs-xs;
     background-color: transparent;
-    border-radius: $shp-radius-control;
+    width: var(--bit-cal-tcell-size);
+    line-height: var(--bit-cal-tcell-size);
+    font-size: var(--bit-cal-cell-fs);
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
+    border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-Calendar-hover-background, #{$clr-bg-pri-hover});
         }
     }
 
     &:active {
-        background-color: $clr-bg-pri-hover;
+        background-color: var(--bit-Calendar-active-background, #{$clr-bg-pri-active});
+    }
+
+    &:focus-visible {
+        z-index: 1;
+        @include focus-ring(var(--bit-Calendar-focus-color, var(--bit-cal-clr-focus)), 0);
     }
 
     i {
@@ -337,30 +441,29 @@
     }
 
     &:disabled {
-        color: $clr-fg-dis;
         pointer-events: none;
         background-color: transparent;
+        color: var(--bit-Calendar-disabled-color, #{$clr-fg-dis});
 
         i {
-            color: $clr-fg-dis;
+            color: var(--bit-Calendar-disabled-color, #{$clr-fg-dis});
         }
     }
 }
 
 .bit-cal-dvd {
     top: 0;
-    border-inline-end: $shp-border-width $shp-border-style $clr-brd-sec;
+    border-inline-end: $shp-border-width $shp-border-style var(--bit-Calendar-divider-color, #{$clr-brd-sec});
 }
 
 .bit-cal-mwp {
     margin: 0;
     display: flex;
-    overflow: hidden;
     box-shadow: none;
-    padding: spacing(1.5);
-    min-width: spacing(26);
     box-sizing: content-box;
     flex-flow: column nowrap;
+    min-width: var(--bit-cal-pane-min-w);
+    padding: var(--bit-Calendar-padding, #{spacing(1.5)});
 }
 
 .bit-cal-pkr {
@@ -378,49 +481,59 @@
     border: none;
     cursor: pointer;
     overflow: hidden;
-    width: spacing(6);
-    color: $clr-fg-pri;
     position: relative;
     white-space: nowrap;
     outline: transparent;
-    max-width: spacing(7);
-    font-size: $tg-fs-xs;
     text-overflow: ellipsis;
-    line-height: spacing(5.17);
     background-color: transparent;
-    border-radius: $shp-radius-control;
+    width: var(--bit-cal-mcell-w);
+    line-height: var(--bit-cal-mcell-h);
+    font-size: var(--bit-cal-cell-fs);
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
+    border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-Calendar-hover-background, #{$clr-bg-pri-hover});
         }
     }
 
+    &:active {
+        background-color: var(--bit-Calendar-active-background, #{$clr-bg-pri-active});
+    }
+
+    // The month and year grids move the focus with the arrow keys just as the day grid does, so the cell the
+    // keyboard is on has to say so.
+    &:focus-visible {
+        z-index: 1;
+        @include focus-ring(var(--bit-Calendar-focus-color, var(--bit-cal-clr-focus)), 0);
+    }
+
     &:disabled {
-        color: $clr-fg-dis;
         pointer-events: none;
         background-color: transparent;
+        color: var(--bit-Calendar-disabled-color, #{$clr-fg-dis});
     }
 }
 
 .bit-cal-psm {
     font-weight: $tg-fw-semibold;
-    background-color: $clr-bg-sec;
+    background-color: var(--bit-Calendar-selected-background, #{$clr-bg-sec});
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-Calendar-hover-background, #{$clr-bg-pri-hover});
         }
     }
 }
 
 .bit-cal-pcm {
-    color: var(--bit-cal-clr-txt);
-    background-color: var(--bit-cal-clr);
+    color: var(--bit-Calendar-today-color, var(--bit-cal-clr-txt));
+    background-color: var(--bit-Calendar-today-background, var(--bit-cal-clr));
 
     @media (hover: hover) {
         &:hover {
-            color: var(--bit-cal-clr-txt);
+            color: var(--bit-Calendar-today-color, var(--bit-cal-clr-txt));
             background-color: var(--bit-cal-clr-hover);
         }
     }
@@ -454,6 +567,7 @@
     font-size: $tg-fs-xl;
     justify-content: center;
     font-weight: $tg-font-weight;
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
 }
 
 .bit-cal-am-pm {
@@ -473,12 +587,13 @@
     overflow: hidden;
     text-align: center;
     align-items: center;
-    width: spacing(3.75);
     box-sizing: border-box;
     justify-content: center;
     font-size: $tg-fs-lg;
     -moz-appearance: textfield; // Firefox
     font-weight: $tg-font-weight;
+    width: var(--bit-cal-tcell-size);
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
     background-color: $clr-bg-pri;
 
     &::-webkit-inner-spin-button, // Chrome, Safari, Edge, Opera
@@ -489,11 +604,11 @@
 
     &:disabled {
         cursor: default;
-        color: $clr-fg-dis;
+        color: var(--bit-Calendar-disabled-color, #{$clr-fg-dis});
     }
 
     &:focus {
-        @include focus-underline-ring;
+        @include focus-underline-ring(var(--bit-Calendar-focus-color, var(--bit-cal-clr-focus)));
         border: none;
     }
 }
@@ -505,8 +620,8 @@
 }
 
 .bit-cal-bns {
-    color: var(--bit-cal-clr-txt);
-    background-color: var(--bit-cal-clr);
+    color: var(--bit-Calendar-today-color, var(--bit-cal-clr-txt));
+    background-color: var(--bit-Calendar-today-background, var(--bit-cal-clr));
 
     &:disabled {
         background-color: $clr-bg-dis;
@@ -528,20 +643,20 @@
     display: flex;
     overflow: hidden;
     box-shadow: none;
-    padding: spacing(1.5);
     box-sizing: content-box;
     flex-flow: column nowrap;
+    padding: var(--bit-Calendar-padding, #{spacing(1.5)});
 }
 
 .bit-cal-evi {
     left: 50%;
     position: absolute;
-    border-radius: 50%;
-    width: spacing(0.5);
-    height: spacing(0.5);
+    border-radius: $shp-radius-full;
     bottom: spacing(0.125);
-    background-color: var(--bit-cal-clr);
     transform: translateX(-50%);
+    width: var(--bit-Calendar-event-size, #{spacing(0.5)});
+    height: var(--bit-Calendar-event-size, #{spacing(0.5)});
+    background-color: var(--bit-Calendar-event-color, var(--bit-cal-clr));
     transition: transform $mot-duration $mot-easing;
 }
 
@@ -553,22 +668,26 @@
     position: absolute;
     align-items: center;
     justify-content: center;
-    border-radius: $shp-radius-control;
     background-color: $clr-bg-overlay;
+    border-radius: var(--bit-Calendar-radius, #{$shp-radius-control});
 }
 
 .bit-cal-emc {
+    @include focus-anchor;
     cursor: default;
     max-height: 80%;
     overflow-y: auto;
-    color: $clr-fg-pri;
-    padding: spacing(1.5);
+    padding: $spa-dialog;
+    box-sizing: border-box;
     min-width: spacing(20);
-    max-width: spacing(30);
+    // The overlay is only as wide as the calendar it covers, which a small one is narrower than the dialog's
+    // own ceiling - so the ceiling is whichever of the two is smaller and the dialog never runs past its edge.
+    max-width: min(#{spacing(30)}, 100%);
+    box-shadow: $box-shadow-dialog;
     background-color: $clr-bg-pri;
-    border-radius: $shp-radius-popup;
-    border: $shp-border-width $shp-border-style $clr-brd-sec;
-    box-shadow: $box-shadow-md;
+    border-radius: $shp-radius-dialog;
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
+    border: $shp-border-width $shp-border-style var(--bit-Calendar-divider-color, #{$clr-brd-sec});
 }
 
 .bit-cal-emh {
@@ -586,19 +705,31 @@
     color: $clr-fg-sec;
     font-size: $tg-fs-sm;
     background-color: transparent;
-    border-radius: $shp-radius-control;
     padding: spacing(0.25) spacing(1);
+    border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-pri-hover;
+            background-color: var(--bit-Calendar-hover-background, #{$clr-bg-pri-hover});
         }
     }
+
+    &:focus-visible {
+        @include focus-ring(var(--bit-Calendar-focus-color, var(--bit-cal-clr-focus)));
+    }
+}
+
+// The events of the day are a list of them, so they are marked up as one - a screen reader then says how
+// many there are before reading the first.
+.bit-cal-eml {
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
 .bit-cal-emi {
     padding: spacing(0.75) 0;
-    border-top: $shp-border-width $shp-border-style $clr-brd-sec;
+    border-top: $shp-border-width $shp-border-style var(--bit-Calendar-divider-color, #{$clr-brd-sec});
 
     &:first-of-type {
         padding-top: 0;
@@ -620,129 +751,45 @@
 
 .bit-cal-eib {
     font-size: $tg-fs-xs;
-    color: $clr-fg-pri;
     white-space: pre-wrap;
+    color: var(--bit-Calendar-color, #{$clr-fg-pri});
 }
 
 
-.bit-cal-pri {
-    --bit-cal-clr: #{$clr-pri};
-    --bit-cal-clr-txt: #{$clr-pri-text};
-    --bit-cal-clr-hover: #{$clr-pri-hover};
-    --bit-cal-clr-active: #{$clr-pri-active};
-}
-
-.bit-cal-sec {
-    --bit-cal-clr: #{$clr-sec};
-    --bit-cal-clr-txt: #{$clr-sec-text};
-    --bit-cal-clr-hover: #{$clr-sec-hover};
-    --bit-cal-clr-active: #{$clr-sec-active};
-}
-
-.bit-cal-ter {
-    --bit-cal-clr: #{$clr-ter};
-    --bit-cal-clr-txt: #{$clr-ter-text};
-    --bit-cal-clr-hover: #{$clr-ter-hover};
-    --bit-cal-clr-active: #{$clr-ter-active};
-}
-
-.bit-cal-inf {
-    --bit-cal-clr: #{$clr-inf};
-    --bit-cal-clr-txt: #{$clr-inf-text};
-    --bit-cal-clr-hover: #{$clr-inf-hover};
-    --bit-cal-clr-active: #{$clr-inf-active};
-}
-
-.bit-cal-suc {
-    --bit-cal-clr: #{$clr-suc};
-    --bit-cal-clr-txt: #{$clr-suc-text};
-    --bit-cal-clr-hover: #{$clr-suc-hover};
-    --bit-cal-clr-active: #{$clr-suc-active};
-}
-
-.bit-cal-wrn {
-    --bit-cal-clr: #{$clr-wrn};
-    --bit-cal-clr-txt: #{$clr-wrn-text};
-    --bit-cal-clr-hover: #{$clr-wrn-hover};
-    --bit-cal-clr-active: #{$clr-wrn-active};
-}
-
-.bit-cal-swr {
-    --bit-cal-clr: #{$clr-swr};
-    --bit-cal-clr-txt: #{$clr-swr-text};
-    --bit-cal-clr-hover: #{$clr-swr-hover};
-    --bit-cal-clr-active: #{$clr-swr-active};
-}
-
-.bit-cal-err {
-    --bit-cal-clr: #{$clr-err};
-    --bit-cal-clr-txt: #{$clr-err-text};
-    --bit-cal-clr-hover: #{$clr-err-hover};
-    --bit-cal-clr-active: #{$clr-err-active};
-}
-
-.bit-cal-pbg {
-    --bit-cal-clr: #{$clr-bg-pri};
-    --bit-cal-clr-txt: #{$clr-fg-pri};
-    --bit-cal-clr-hover: #{$clr-bg-pri-hover};
-    --bit-cal-clr-active: #{$clr-bg-pri-active};
-}
-
-.bit-cal-sbg {
-    --bit-cal-clr: #{$clr-bg-sec};
-    --bit-cal-clr-txt: #{$clr-fg-pri};
-    --bit-cal-clr-hover: #{$clr-bg-sec-hover};
-    --bit-cal-clr-active: #{$clr-bg-sec-active};
-}
-
-.bit-cal-tbg {
-    --bit-cal-clr: #{$clr-bg-ter};
-    --bit-cal-clr-txt: #{$clr-fg-pri};
-    --bit-cal-clr-hover: #{$clr-bg-ter-hover};
-    --bit-cal-clr-active: #{$clr-bg-ter-active};
-}
-
-.bit-cal-pfg {
-    --bit-cal-clr: #{$clr-fg-pri};
-    --bit-cal-clr-txt: #{$clr-bg-pri};
-    --bit-cal-clr-hover: #{$clr-fg-pri-hover};
-    --bit-cal-clr-active: #{$clr-fg-pri-active};
+// Role classes are generated from the shared $bit-color-roles map (see color-role-maps.scss).
+@each $role, $tokens in $bit-color-roles {
+    .bit-cal-#{$role} {
+        --bit-cal-clr: #{role($tokens, main)};
+        --bit-cal-clr-txt: #{role($tokens, on)};
+        --bit-cal-clr-hover: #{role($tokens, hover)};
+        --bit-cal-clr-active: #{role($tokens, active)};
+        --bit-cal-clr-focus: #{role($tokens, focus)};
+    }
 }
 
-.bit-cal-sfg {
-    --bit-cal-clr: #{$clr-fg-sec};
-    --bit-cal-clr-txt: #{$clr-bg-pri};
-    --bit-cal-clr-hover: #{$clr-fg-sec-hover};
-    --bit-cal-clr-active: #{$clr-fg-sec-active};
-}
 
-.bit-cal-tfg {
-    --bit-cal-clr: #{$clr-fg-ter};
-    --bit-cal-clr-txt: #{$clr-bg-pri};
-    --bit-cal-clr-hover: #{$clr-fg-ter-hover};
-    --bit-cal-clr-active: #{$clr-fg-ter-active};
+.bit-cal-sm {
+    --bit-cal-cell-size-def: #{spacing(3)};
+    --bit-cal-cell-fs-def: #{$tg-fs-xs};
+    --bit-cal-mcell-w: #{spacing(5.25)};
+    --bit-cal-mcell-h: #{spacing(4.5)};
+    --bit-cal-tcell-size: #{spacing(3.25)};
+    --bit-cal-pane-min-w: #{spacing(23)};
 }
 
-.bit-cal-pbr {
-    --bit-cal-clr: #{$clr-brd-pri};
-    --bit-cal-clr-txt: #{$clr-fg-pri};
-    --bit-cal-clr-hover: #{$clr-brd-pri-hover};
-    --bit-cal-clr-active: #{$clr-brd-pri-active};
+.bit-cal-md {
+    @include cal-size-medium;
 }
 
-.bit-cal-sbr {
-    --bit-cal-clr: #{$clr-brd-sec};
-    --bit-cal-clr-txt: #{$clr-fg-pri};
-    --bit-cal-clr-hover: #{$clr-brd-sec-hover};
-    --bit-cal-clr-active: #{$clr-brd-sec-active};
+.bit-cal-lg {
+    --bit-cal-cell-size-def: #{spacing(4.25)};
+    --bit-cal-cell-fs-def: #{$tg-fs-sm};
+    --bit-cal-mcell-w: #{spacing(7)};
+    --bit-cal-mcell-h: #{spacing(6)};
+    --bit-cal-tcell-size: #{spacing(4.5)};
+    --bit-cal-pane-min-w: #{spacing(31)};
 }
 
-.bit-cal-tbr {
-    --bit-cal-clr: #{$clr-brd-ter};
-    --bit-cal-clr-txt: #{$clr-fg-pri};
-    --bit-cal-clr-hover: #{$clr-brd-ter-hover};
-    --bit-cal-clr-active: #{$clr-brd-ter-active};
-}
 
 // --- month header floor ---
 // The header of the day view names the month in full, and the day wrapper it sits in is floored by a
@@ -756,3 +803,45 @@
 .bit-cal-dwp .bit-cal-ptb {
     min-width: 8.75em;
 }
+
+
+// Windows High Contrast / forced-colors: the palette is reduced to the system pair, which strips every
+// background the calendar paints - and with them today, the selection, the highlighted days and the
+// meridiem that is in force, all of which are conveyed by a background alone. Each is re-established with
+// a border or a system color, so the states stay distinguishable.
+@media (forced-colors: active) {
+    .bit-cal-dbt,
+    .bit-cal-pkb {
+        &:disabled {
+            color: GrayText;
+        }
+    }
+
+    .bit-cal-dtd,
+    .bit-cal-pcm,
+    .bit-cal-bns {
+        color: HighlightText;
+        background-color: Highlight;
+        forced-color-adjust: none;
+    }
+
+    .bit-cal-dbs::after {
+        border-color: CanvasText;
+    }
+
+    .bit-cal-dhl {
+        outline: $shp-border-width dotted CanvasText;
+        outline-offset: calc(-1 * #{$shp-border-width});
+    }
+
+    .bit-cal-evi {
+        background-color: CanvasText;
+        forced-color-adjust: none;
+    }
+
+    // An outline rather than a border: it gives the calendar an edge in a palette that strips every
+    // background without taking a couple of pixels out of the grid to do it.
+    .bit-cal-cnt {
+        outline: $shp-border-width $shp-border-style CanvasText;
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarClassStyles.cs
index 8954ece1339..c485b718a8d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarClassStyles.cs
@@ -12,6 +12,16 @@ public class BitCalendarClassStyles
     /// </summary>
     public string? Container { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the wrapper of the HeaderTemplate of the BitCalendar.
+    /// </summary>
+    public string? Header { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the wrapper of the FooterTemplate of the BitCalendar.
+    /// </summary>
+    public string? Footer { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the day-picker's wrapper of the BitCalendar.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalendarsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalendarsJsRuntimeExtensions.cs
index a042f7c9388..2bea9b128fe 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalendarsJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/CalendarsJsRuntimeExtensions.cs
@@ -12,8 +12,8 @@ internal static ValueTask BitCalendarsDispose(this IJSRuntime jsRuntime, string
         return jsRuntime.InvokeVoid("BitBlazorUI.Calendars.dispose", id);
     }
 
-    internal static ValueTask BitCalendarsFocusCell(this IJSRuntime jsRuntime, string cellId)
+    internal static ValueTask BitCalendarsFocusCell(this IJSRuntime jsRuntime, string cellId, bool preventScroll = false)
     {
-        return jsRuntime.InvokeVoid("BitBlazorUI.Calendars.focusCell", cellId);
+        return jsRuntime.InvokeVoid("BitBlazorUI.Calendars.focusCell", cellId, preventScroll);
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts
index e022a35ab59..aaaa8e00064 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts
@@ -49,8 +49,8 @@ namespace BitBlazorUI {
             Calendars._handlers.delete(id);
         }
 
-        public static focusCell(cellId: string) {
-            document.getElementById(cellId)?.focus();
+        public static focusCell(cellId: string, preventScroll?: boolean) {
+            document.getElementById(cellId)?.focus({ preventScroll: !!preventScroll });
         }
 
         // Which keys the browser has to be stopped from scrolling the page with depends on what holds the
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
index 940bd8fe884..10795967926 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -5,188 +5,148 @@
             Description="BitCalendar is a fully-featured inline calendar for browsing and selecting a date and time, with day events, custom cultures, time zones, and complete keyboard accessibility." />
 
 <DemoPage Name="Calendar"
-          Description="BitCalendar is a fully-featured inline calendar for browsing and selecting a single date, or a date and time when the built-in time picker is enabled. It offers day, month, and year views, day events with details, and flexible day/week rules such as disabled and highlighted dates, a custom first day of week, and week numbers. It works with any culture and time zone, including right-to-left and non-Gregorian calendars, and is fully keyboard accessible following the WAI-ARIA grid pattern."
-          Parameters="componentParameters" SubClasses="componentSubClasses" SubEnums="componentSubEnums"
+          Description="BitCalendar is a fully-featured inline calendar for browsing and selecting a single date, or a date and time when the built-in time picker is enabled. It offers day, month and year grids, day events with details, and flexible day/week rules such as disabled and highlighted dates, a custom first day of week and week numbers. It works with any culture and time zone, including right-to-left and non-Gregorian calendars, and every grid follows the WAI-ARIA grid pattern for the keyboard."
+          Parameters="componentParameters" PublicMembers="componentPublicMembers"
+          CssVariables="componentCssVariables"
+          SubClasses="componentSubClasses" SubEnums="componentSubEnums"
           GitHubUrl="Inputs/Calendar/BitCalendar.razor" GitHubDemoUrl="Inputs/Calendar/BitCalendarDemo.razor">
+
     <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
         <div>
-            The essential BitCalendar configurations: the default calendar, the disabled state, week numbers,
-            highlighting the current and selected months, starting the view on a specific date and time using
-            <b>StartingValue</b>,
-            overriding the current date using <b>Today</b>, and hiding the GoToToday button using <b>ShowGoToToday</b>.
+            The calendar renders a day grid with a month and year picker beside it. <b>IsEnabled</b> false dims it
+            and stops every interaction; <b>ReadOnly</b> keeps it browsable but stops the value from changing.
+            <b>ShowGoToToday</b> hides the button that returns the view to the current month.
         </div>
         <br /><br />
         <div class="example-content">
-            <div>Basic Calendar:</div>
+            <div>Basic:</div>
             <BitCalendar />
             <br /><br />
-            <div>Disabled:</div>
-            <BitCalendar IsEnabled="false" />
-            <br /><br />
-            <div>Week numbers:</div>
-            <BitCalendar ShowWeekNumbers="true" />
-            <br /><br />
-            <div>Highlight months:</div>
-            <BitCalendar HighlightCurrentMonth="true" HighlightSelectedMonth="true" />
-            <br /><br />
-            <div>StartingValue: December 2020, Time: 20:45:</div>
-            <BitCalendar ShowTimePicker="true" StartingValue="startingValue" />
+            <div>IsEnabled = false:</div>
+            <BitCalendar IsEnabled="false" @bind-Value="readOnlyDate" />
             <br /><br />
-            <div>Custom Today (March 2021):</div>
-            <BitCalendar Today="customToday" />
+            <div>ReadOnly:</div>
+            <BitCalendar ReadOnly @bind-Value="readOnlyDate" />
             <br /><br />
-            <div>Without the GoToToday button:</div>
+            <div>ShowGoToToday = false:</div>
             <BitCalendar ShowGoToToday="false" />
         </div>
     </DemoExample>
 
-    <DemoExample Title="Min & Max" RazorCode="@example2RazorCode" Id="example2">
+    <DemoExample Title="Binding" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <div>
-            Limit the selectable dates using <b>MinDate</b> and <b>MaxDate</b>.
-            Days outside the range are disabled, and the month, year, and year-range navigation stops at the boundaries.
-            <b>DisablePast</b> and <b>DisableFuture</b> bound the range by today exactly as a <b>MinDate</b> or a
-            <b>MaxDate</b> of today would, without having to keep one up to date; where both apply, the narrower
-            of the two wins.
+            Bind the selected date with <b>@@bind-Value</b>, or listen to <b>OnSelectDate</b> to react to each
+            selection. <b>AllowDeselect</b> turns the selected day into a toggle, so clicking it again empties
+            the value without moving the view off its month.
         </div>
         <br /><br />
         <div class="example-content">
-            <div>Min: Now.AddDays(-5)</div>
-            <div>Max: Now.AddDays(+5)</div>
-            <BitCalendar MinDate="DateTimeOffset.Now.AddDays(-5)" MaxDate="DateTimeOffset.Now.AddDays(5)" />
-            <br /><br />
-            <div>Min: Now.AddMonths(-2)</div>
-            <div>Max: Now.AddMonths(+1)</div>
-            <BitCalendar MinDate="DateTimeOffset.Now.AddMonths(-2)" MaxDate="DateTimeOffset.Now.AddMonths(1)" />
-            <br /><br />
-            <div>Min: Now.AddYears(-5)</div>
-            <div>Max: Now.AddYears(+1)</div>
-            <BitCalendar MinDate="DateTimeOffset.Now.AddYears(-5)" MaxDate="DateTimeOffset.Now.AddYears(1)" />
+            <div>@@bind-Value:</div>
+            <BitCalendar @bind-Value="@selectedDate" />
+            <div>Selected date: @selectedDate.ToString()</div>
             <br /><br />
-            <div>DisablePast:</div>
-            <BitCalendar DisablePast />
+            <div>OnSelectDate:</div>
+            <BitCalendar OnSelectDate="HandleOnSelectDate" />
+            <div>Selected date: @(onSelectDate.HasValue ? onSelectDate.ToString() : "-")</div>
             <br /><br />
-            <div>DisableFuture:</div>
-            <BitCalendar DisableFuture />
+            <div>AllowDeselect (click the selected day again):</div>
+            <BitCalendar AllowDeselect @bind-Value="@deselectableDate" />
+            <div>Selected date: @(deselectableDate.HasValue ? deselectableDate.ToString() : "-")</div>
         </div>
     </DemoExample>
 
-    <DemoExample Title="Hour/Minute step" RazorCode="@example3RazorCode" Id="example3">
-        <div>Customize the increment/decrement step of the time picker's hour and minute buttons using <b>HourStep</b>
-            and <b>MinuteStep</b>.
+    <DemoExample Title="Starting view" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+        <div>
+            Without a value the calendar opens on today. <b>StartingValue</b> opens it somewhere else (and seeds
+            the time picker), and <b>Today</b> overrides which day counts as today, for a custom time provider or
+            a test. <b>OnMonthChange</b> reports the first day of the newly displayed month after every
+            navigation, which is where the events of that month are usually loaded.
         </div>
         <br /><br />
         <div class="example-content">
-            <div>HourStep = 2:</div>
-            <br />
-            <BitCalendar ShowTimePicker="true" HourStep="2" />
-            <br />
-            <div>MinuteStep = 15:</div>
-            <br />
-            <BitCalendar ShowTimePicker="true" MinuteStep="15" />
+            <div>StartingValue = December 2020, 20:45:</div>
+            <BitCalendar ShowTimePicker StartingValue="startingValue" />
+            <br /><br />
+            <div>Today = March 15, 2021:</div>
+            <BitCalendar Today="customToday" />
+            <br /><br />
+            <div>OnMonthChange:</div>
+            <BitCalendar OnMonthChange="HandleOnMonthChange" />
+            <div>Displayed month: @(displayedMonth.HasValue ? displayedMonth.Value.ToString("MMMM yyyy") : "-")</div>
         </div>
     </DemoExample>
 
-    <DemoExample Title="Culture" RazorCode="@example4RazorCode" Id="example4">
+    <DemoExample Title="Min & Max" RazorCode="@example4RazorCode" Id="example4">
         <div>
-            By default, BitCalendar uses the current culture of the app, but any custom <b>CultureInfo</b> can be
-            provided
-            to fully localize the calendar: month and day names, the first day of the week, date formats, and even
-            non-Gregorian calendars such as the Persian calendar.
-            <br />
-            You also can use our
-            <BitLink
-                Href="https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Helpers/CultureInfoHelper.cs"
-                Target="_blank">
-                CultureInfoHelper
-            </BitLink> class or check its code to see how to create a custom culture.
+            <b>MinDate</b> and <b>MaxDate</b> bound the selectable range: the days outside it are disabled and the
+            month, year and year-range navigation stops at the edges. <b>DisablePast</b> and <b>DisableFuture</b>
+            do the same against today without a bound to keep up to date; where both apply the narrower wins, and
+            today stays selectable under either.
         </div>
-        <br />
+        <br /><br />
         <div class="example-content">
-            <div>fa-IR culture with Farsi names:</div>
-            <br />
-            <BitCalendar GoToTodayTitle="برو به امروز" Culture="CultureInfoHelper.GetFaIrCultureWithFarsiNames()" />
+            <div>MinDate / MaxDate = &plusmn;5 days:</div>
+            <BitCalendar MinDate="DateTimeOffset.Now.AddDays(-5)" MaxDate="DateTimeOffset.Now.AddDays(5)" />
             <br /><br />
-            <div>fa-IR culture with Fingilish names:</div>
-            <br />
-            <BitCalendar GoToTodayTitle="Boro be emrouz"
-                         Culture="CultureInfoHelper.GetFaIrCultureWithFingilishNames()" />
+            <div>MinDate / MaxDate = -5 years / +1 year:</div>
+            <BitCalendar MinDate="DateTimeOffset.Now.AddYears(-5)" MaxDate="DateTimeOffset.Now.AddYears(1)" />
+            <br /><br />
+            <div>DisablePast:</div>
+            <BitCalendar DisablePast />
+            <br /><br />
+            <div>DisableFuture:</div>
+            <BitCalendar DisableFuture />
         </div>
     </DemoExample>
 
-    <DemoExample Title="TimeZone" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <DemoExample Title="Disabled & highlighted days" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <div>
-            Specify the <b>TimeZone</b> used to interpret and display the selected date and time.
-            <br />
-            Keep in mind that the available time zone data differs between runtimes; it depends on the OS
-            the code is running on and on the project settings (like InvariantTimezone in the project file,
-            <BitLink
-            Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-9.0#timezone-information"
-            Target="_blank">more info</BitLink>).
+            Beyond the bounds, single days can be ruled out with <b>DisabledDates</b>, whole weekdays with
+            <b>DisabledDaysOfWeek</b>, and anything else with the <b>IsDateDisabled</b> predicate. A disabled day
+            is not selectable and the arrow keys skip over it. <b>HighlightedDates</b> marks days without
+            disabling them, and <b>GetDayClass</b> hands any day a class of your own.
         </div>
         <br /><br />
-        <div>Default (local TimeZone):</div><br />
         <div class="example-content">
-            <BitCalendar @bind-Value="@timeZoneDate1" ShowTimePicker />
+            <div>DisabledDaysOfWeek (weekends):</div>
+            <BitCalendar DisabledDaysOfWeek="@weekendDays" />
+            <br /><br />
+            <div>DisabledDates &amp; IsDateDisabled (three dates, plus every odd day):</div>
+            <BitCalendar DisabledDates="@disabledDates" IsDateDisabled="@(d => d.Day % 2 == 1)" />
+            <br /><br />
+            <div>HighlightedDates &amp; GetDayClass (Sundays in red):</div>
+            <BitCalendar HighlightedDates="@highlightedDates"
+                         GetDayClass="@(d => d.DayOfWeek == DayOfWeek.Sunday ? "sunday-cell" : null)" />
         </div>
-        <br />
-        <div>Selected date: @timeZoneDate1?.ToString()</div>
-
-        @{
-            TimeZoneInfo? timeZoneInfo = null;
-            var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
-            if (allTimeZones.Count > 0)
-            {
-                timeZoneInfo = allTimeZones[0];
-            }
-        }
-
-        @if (timeZoneInfo is not null)
-        {
-            <br /><br /><br /><br />
-            <div>"@timeZoneInfo.Id" TimeZone:</div><br />
-            <div class="example-content">
-                <BitCalendar TimeZone="timeZoneInfo" @bind-Value="@timeZoneDate2" ShowTimePicker />
-            </div>
-            <br />
-            <div>Selected date: @timeZoneDate2?.ToString()</div>
-        }
     </DemoExample>
 
-    <DemoExample Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+    <DemoExample Title="Week layout" RazorCode="@example6RazorCode" Id="example6">
         <div>
-            Two-way bind the selected date using <b>@@bind-Value</b> to keep your model and the calendar in sync,
-            or listen to the <b>OnSelectDate</b> event to react to every selection.
+            <b>FirstDayOfWeek</b> overrides the day the week starts on, <b>WeekNumberRule</b> picks how
+            <b>ShowWeekNumbers</b> counts the weeks (Monday plus FirstFourDayWeek is ISO 8601),
+            <b>ShowOutsideDays</b> hides the days of the adjacent months, and <b>FixedWeeks</b> always renders six
+            weeks so the height never changes while browsing.
         </div>
-        <br />
+        <br /><br />
         <div class="example-content">
-            <div>Two-way binding:</div>
-            <BitCalendar @bind-Value="@selectedDate" />
-            <div>Selected date: @selectedDate.ToString()</div>
+            <div>ISO 8601 week numbers:</div>
+            <BitCalendar ShowWeekNumbers FirstDayOfWeek="DayOfWeek.Monday"
+                         WeekNumberRule="CalendarWeekRule.FirstFourDayWeek" />
             <br /><br />
-            <div>OnSelectDate:</div>
-            <BitCalendar OnSelectDate="HandleOnSelectDate" />
-            <div>Selected date: @(onSelectDate.HasValue ? onSelectDate.ToString() : "-")</div>
-        </div>
-    </DemoExample>
-
-    <DemoExample Title="ReadOnly" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-        <div>
-            The <b>ReadOnly</b> parameter displays the calendar in a read-only manner:
-            the value stays visible and the calendar can still be browsed, but the selected date and time cannot be
-            changed.
-        </div>
-        <br />
-        <div class="example-content-standalone">
-            <BitCalendar ReadOnly @bind-Value="readOnlyDate" />
+            <div>ShowOutsideDays = false:</div>
+            <BitCalendar ShowOutsideDays="false" />
             <br /><br />
-            <BitCalendar ReadOnly ShowTimePicker @bind-Value="readOnlyDate" />
+            <div>FixedWeeks:</div>
+            <BitCalendar FixedWeeks />
         </div>
     </DemoExample>
 
-    <DemoExample Title="MonthPicker" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <DemoExample Title="Month & year pickers" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
         <div>
-            Control the month and year pickers: toggle their visibility using <b>ShowMonthPicker</b>,
-            or render them as an overlay on top of the day picker using <b>ShowMonthPickerAsOverlay</b>.
+            <b>ShowMonthPicker</b> toggles the month and year grids, and <b>ShowMonthPickerAsOverlay</b> moves
+            them on top of the day grid, reached from the month title. <b>HighlightSelectedMonth</b> marks the
+            month that is displayed and <b>HighlightCurrentMonth</b> the current one — worth turning on, since
+            otherwise the month grid shows no sign of where you are.
         </div>
         <br /><br />
         <div class="example-content">
@@ -201,80 +161,61 @@
             <BitCalendar ShowMonthPickerAsOverlay="@showMonthPickerAsOverlay" />
             <BitToggleButton OnText="Position Overlay" OffText="Position Besides"
                              @bind-IsChecked="@showMonthPickerAsOverlay" />
+            <br /><br /><br />
+            <div>HighlightSelectedMonth &amp; HighlightCurrentMonth:</div>
+            <BitCalendar HighlightCurrentMonth HighlightSelectedMonth />
         </div>
     </DemoExample>
 
-    <DemoExample Title="TimePicker" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <DemoExample Title="Time picker" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
         <div>
-            Enable the built-in time picker using <b>ShowTimePicker</b> to let users select the time of day along with
-            the date.
-            Switch between the 24-hour and 12-hour clocks using <b>TimeFormat</b>,
-            render the time picker as an overlay using <b>ShowTimePickerAsOverlay</b>,
-            and hide the now button using <b>ShowNowButton</b>.
+            <b>ShowTimePicker</b> adds an hour and minute picker beside the day grid, or on top of it with
+            <b>ShowTimePickerAsOverlay</b>. <b>TimeFormat</b> switches between the 24-hour and 12-hour clocks,
+            <b>ShowNowButton</b> hides the button that jumps to the current time, and <b>HourStep</b> /
+            <b>MinuteStep</b> lay a grid over the day and the hour that the spin buttons land on.
         </div>
-        <br />
+        <br /><br />
         <div class="example-content">
-            <div>Basic time picker (24-hour):</div>
-            <BitCalendar @bind-Value="@selectedDateTime" ShowTimePicker="true" />
-            <div>Selected DateTime: @selectedDateTime.ToString()</div>
+            <div>ShowTimePicker:</div>
+            <BitCalendar @bind-Value="@selectedDateTime" ShowTimePicker />
+            <div>Selected: @selectedDateTime.ToString()</div>
             <br /><br />
-            <div>TimeFormat (12-hour with AM/PM):</div>
-            <BitCalendar ShowTimePicker TimeFormat="BitTimeFormat.TwelveHours" />
+            <div>TimeFormat = TwelveHours, without the now button:</div>
+            <BitCalendar ShowTimePicker ShowNowButton="false" TimeFormat="BitTimeFormat.TwelveHours" />
             <br /><br />
-            <div>ShowTimePickerAsOverlay (toggle it using the clock button):</div>
+            <div>ShowTimePickerAsOverlay (use the clock button):</div>
             <BitCalendar ShowTimePicker ShowTimePickerAsOverlay />
             <br /><br />
-            <div>Without the now button:</div>
-            <BitCalendar ShowTimePicker ShowNowButton="false" />
+            <div>HourStep = 3, MinuteStep = 15:</div>
+            <BitCalendar ShowTimePicker HourStep="3" MinuteStep="15" />
         </div>
     </DemoExample>
 
-    <DemoExample Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <DemoExample Title="Events" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>
-            Attach events to calendar days using the <b>Events</b> parameter.
-            Days with events show a colored indicator dot; hovering the day reveals a quick tooltip,
-            and clicking it opens a modal listing the title, time, and description of each event of that day.
+            <b>Events</b> marks days with an indicator dot and a tooltip, and clicking such a day opens a modal
+            dialog listing the title, time and description of each of them, all-day first. The dialog is
+            dismissed with Escape or its close button and hands the keyboard back to the day it came from.
+            <b>ShowEventDetails</b> false keeps the indicator and the tooltip but leaves the day's events to the
+            page, and <b>EventTimeFromText</b> / <b>EventTimeUntilText</b> localize the one-sided time rows.
         </div>
         <br /><br />
         <div class="example-content">
+            <div>Events (click a marked day):</div>
             <BitCalendar Events="@calendarEvents" />
+            <br /><br />
+            <div>ShowEventDetails = false:</div>
+            <BitCalendar Events="@calendarEvents" ShowEventDetails="false"
+                         OnSelectDate="HandleOnEventDayClick" />
+            <div>Events of the selected day: @eventsOfSelectedDay</div>
         </div>
     </DemoExample>
 
-    <DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-        <div>
-            Use BitCalendar inside an <b>EditForm</b> and validate the selected date with data annotations, just like
-            any other input component.
-        </div>
-        <br />
-        <div>
-            <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
-                <DataAnnotationsValidator />
-
-                <BitCalendar @bind-Value="validationModel.Date" />
-                <ValidationMessage For="@(() => validationModel.Date)" />
-                <br />
-                <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
-                <BitButton ButtonType="BitButtonType.Reset" Variant="BitVariant.Outline"
-                           OnClick="() => { validationModel = new(); SuccessMessage=string.Empty; }">
-                    Reset
-                </BitButton>
-            </EditForm>
-
-            <br />
-
-            @if (string.IsNullOrEmpty(SuccessMessage) is false)
-            {
-                <BitMessage Color="BitColor.Success">@SuccessMessage</BitMessage>
-            }
-        </div>
-    </DemoExample>
-
-    <DemoExample Title="Templates" RazorCode="@example12RazorCode" Id="example12">
+    <DemoExample Title="Templates" RazorCode="@example10RazorCode" Id="example10">
         <div>
-            Take full control of the rendering using <b>DayCellTemplate</b>, <b>MonthCellTemplate</b>, and
-            <b>YearCellTemplate</b>
-            to customize the content of the day, month, and year cells.
+            <b>DayCellTemplate</b>, <b>MonthCellTemplate</b> and <b>YearCellTemplate</b> replace the content of a
+            cell, while <b>HeaderTemplate</b> and <b>FooterTemplate</b> add markup of your own above and below
+            the pickers — a caption, a legend, or the actions a calendar is often given.
         </div>
         <br /><br />
         <div class="example-content">
@@ -293,20 +234,14 @@
                 </DayCellTemplate>
             </BitCalendar>
             <br /><br /><br />
-            <div>MonthCellTemplate:</div>
+            <div>MonthCellTemplate &amp; YearCellTemplate:</div>
             <br />
             <BitCalendar>
                 <MonthCellTemplate>
-                    <div
-                        style="width:28px;padding:3px;color:black;background:@(context.Month == 1 ? "lightcoral" : "yellowgreen")">
+                    <div class="month-cell" style="background:@(context.Month == 1 ? "lightcoral" : "yellowgreen")">
                         @culture.DateTimeFormat.GetAbbreviatedMonthName(context.Month)
                     </div>
                 </MonthCellTemplate>
-            </BitCalendar>
-            <br /><br /><br />
-            <div>YearCellTemplate:</div>
-            <br />
-            <BitCalendar>
                 <YearCellTemplate>
                     <span style="position: relative">
                         @context
@@ -314,121 +249,152 @@
                     </span>
                 </YearCellTemplate>
             </BitCalendar>
+            <br /><br /><br />
+            <div>HeaderTemplate &amp; FooterTemplate:</div>
+            <br />
+            <BitCalendar @bind-Value="@footerDate">
+                <HeaderTemplate>
+                    <b>Pick a delivery date</b>
+                </HeaderTemplate>
+                <FooterTemplate>
+                    <BitStack Horizontal AutoHeight Gap="0.5rem" VerticalAlign="BitAlignment.Center">
+                        <BitButton Size="BitSize.Small" Variant="BitVariant.Text"
+                                   OnClick="() => footerDate = DateTimeOffset.Now">
+                            Today
+                        </BitButton>
+                        <BitButton Size="BitSize.Small" Variant="BitVariant.Text"
+                                   Color="BitColor.SecondaryForeground"
+                                   OnClick="() => footerDate = null">
+                            Clear
+                        </BitButton>
+                    </BitStack>
+                </FooterTemplate>
+            </BitCalendar>
+            <div>Selected: @(footerDate.HasValue ? footerDate.Value.ToString("d") : "-")</div>
         </div>
     </DemoExample>
 
-    <DemoExample Title="Disabled dates" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode"
-                 Id="example13">
+    <DemoExample Title="Culture" RazorCode="@example11RazorCode" Id="example11">
         <div>
-            Disable specific dates beyond MinDate and MaxDate: pass an explicit list using <b>DisabledDates</b>,
-            disable whole days of the week using <b>DisabledDaysOfWeek</b> (e.g. weekends),
-            or provide any custom rule using the <b>IsDateDisabled</b> function.
-            Disabled dates are not selectable and are skipped by the keyboard navigation.
+            The calendar reads the month and day names, the first day of the week, the date format, the AM/PM
+            designators and the calendar system itself off its <b>Culture</b>, defaulting to the culture of the
+            app. A non-Gregorian calendar (Persian, Hebrew — including its thirteen-month leap years) needs
+            nothing else. See our
+            <BitLink Href="https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Helpers/CultureInfoHelper.cs"
+                     Target="_blank">CultureInfoHelper</BitLink> for how such a culture is built.
         </div>
         <br /><br />
         <div class="example-content">
-            <div>DisabledDaysOfWeek (weekends are disabled):</div>
-            <br />
-            <BitCalendar DisabledDaysOfWeek="@weekendDays" />
-            <br /><br />
-            <div>DisabledDates (a few specific upcoming dates are disabled):</div>
+            <div>fa-IR with Farsi names:</div>
             <br />
-            <BitCalendar DisabledDates="@disabledDates" />
+            <BitCalendar GoToTodayTitle="برو به امروز" Culture="CultureInfoHelper.GetFaIrCultureWithFarsiNames()" />
             <br /><br />
-            <div>IsDateDisabled (every odd day of the month is disabled):</div>
+            <div>fa-IR with Fingilish names:</div>
             <br />
-            <BitCalendar IsDateDisabled="@(d => d.Day % 2 == 1)" />
+            <BitCalendar GoToTodayTitle="Boro be emrouz"
+                         Culture="CultureInfoHelper.GetFaIrCultureWithFingilishNames()" />
         </div>
     </DemoExample>
 
-    <DemoExample Title="Highlighted dates" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode"
-                 Id="example14">
+    <DemoExample Title="TimeZone" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
         <div>
-            Mark important dates using <b>HighlightedDates</b>, or provide custom CSS classes for any day using the
-            <b>GetDayClass</b> function.
+            <b>TimeZone</b> is the zone the days and the time picker are read and written in, defaulting to the
+            local one. The available zone data differs between runtimes — it depends on the OS and on project
+            settings such as InvariantTimezone
+            (<BitLink Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-9.0#timezone-information"
+                      Target="_blank">more info</BitLink>).
         </div>
         <br /><br />
+        <div>Local (the default):</div><br />
         <div class="example-content">
-            <div>HighlightedDates:</div>
-            <br />
-            <BitCalendar HighlightedDates="@highlightedDates" />
-            <br /><br />
-            <div>GetDayClass (Sundays get a custom color):</div>
-            <br />
-            <BitCalendar GetDayClass="@(d => d.DayOfWeek == DayOfWeek.Sunday ? "sunday-cell" : null)" />
+            <BitCalendar @bind-Value="@timeZoneDate1" ShowTimePicker />
         </div>
-    </DemoExample>
+        <br />
+        <div>Selected date: @timeZoneDate1?.ToString()</div>
 
-    <DemoExample Title="Week configuration" RazorCode="@example15RazorCode" Id="example15">
-        <div>
-            Customize how weeks are rendered: override the first day of the week using <b>FirstDayOfWeek</b>,
-            choose the week numbering rule using <b>WeekNumberRule</b>,
-            hide the days of the adjacent months using <b>ShowOutsideDays</b>,
-            and keep the calendar height fixed using <b>FixedWeeks</b>.
-        </div>
-        <br /><br />
-        <div class="example-content">
-            <div>FirstDayOfWeek (Monday):</div>
-            <br />
-            <BitCalendar FirstDayOfWeek="DayOfWeek.Monday" />
-            <br /><br />
-            <div>ISO 8601 week numbers (FirstFourDayWeek rule with Monday as the first day of the week):</div>
-            <br />
-            <BitCalendar ShowWeekNumbers WeekNumberRule="CalendarWeekRule.FirstFourDayWeek"
-                         FirstDayOfWeek="DayOfWeek.Monday" />
-            <br /><br />
-            <div>ShowOutsideDays="false" (hides the days of the previous and next months):</div>
-            <br />
-            <BitCalendar ShowOutsideDays="false" />
-            <br /><br />
-            <div>FixedWeeks (always renders six weeks to keep the height fixed):</div>
+        @{
+            TimeZoneInfo? timeZoneInfo = null;
+            var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
+            if (allTimeZones.Count > 0)
+            {
+                timeZoneInfo = allTimeZones[0];
+            }
+        }
+
+        @if (timeZoneInfo is not null)
+        {
+            <br /><br /><br /><br />
+            <div>"@timeZoneInfo.Id":</div><br />
+            <div class="example-content">
+                <BitCalendar TimeZone="timeZoneInfo" @bind-Value="@timeZoneDate2" ShowTimePicker />
+            </div>
             <br />
-            <BitCalendar FixedWeeks />
-        </div>
+            <div>Selected date: @timeZoneDate2?.ToString()</div>
+        }
     </DemoExample>
 
-    <DemoExample Title="OnMonthChange" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+    <DemoExample Title="Validation" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
         <div>
-            The <b>OnMonthChange</b> event fires whenever the displayed month changes (navigation buttons, month/year
-            pickers, GoToToday, or keyboard navigation),
-            receiving the first day of the newly displayed month. It is ideal for lazy-loading the events of the visible
-            month.
+            Inside an <b>EditForm</b> the calendar validates like any other input. A rejected value draws a rule
+            around the control and turns its focus ring red, and the day grid reports <code>aria-invalid</code>
+            along with <code>aria-required</code> for a <b>Required</b> field.
         </div>
         <br /><br />
-        <div class="example-content">
-            <BitCalendar OnMonthChange="HandleOnMonthChange" />
+        <div>
+            <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
+                <DataAnnotationsValidator />
+
+                <BitCalendar Required @bind-Value="validationModel.Date" />
+                <ValidationMessage For="@(() => validationModel.Date)" />
+                <br />
+                <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
+                <BitButton ButtonType="BitButtonType.Reset" Variant="BitVariant.Outline"
+                           OnClick="() => { validationModel = new(); SuccessMessage=string.Empty; }">
+                    Reset
+                </BitButton>
+            </EditForm>
+
             <br />
-            <div>Displayed month: @(displayedMonth.HasValue ? displayedMonth.Value.ToString("MMMM yyyy") : "-")</div>
+
+            @if (string.IsNullOrEmpty(SuccessMessage) is false)
+            {
+                <BitMessage Color="BitColor.Success">@SuccessMessage</BitMessage>
+            }
         </div>
     </DemoExample>
 
-    <DemoExample Title="Keyboard navigation" RazorCode="@example17RazorCode" Id="example17">
+    <DemoExample Title="Accessibility" RazorCode="@example14RazorCode" Id="example14">
         <div>
-            BitCalendar fully supports keyboard navigation following the WAI-ARIA grid pattern.
-            Focus a day using the Tab key, then:
+            Every grid — days, months and years — follows the WAI-ARIA grid pattern: one cell is in the tab
+            sequence and the arrow keys move the focus between the rest.
             <br /><br />
             <ul>
-                <li><b>←</b> / <b>→</b>: previous/next day</li>
-                <li><b>↑</b> / <b>↓</b>: same day of the previous/next week</li>
-                <li><b>Home</b> / <b>End</b>: first/last day of the week</li>
-                <li><b>PageUp</b> / <b>PageDown</b>: same day of the previous/next month</li>
+                <li><b>←</b> / <b>→</b>: previous/next cell, mirrored in right-to-left</li>
+                <li><b>↑</b> / <b>↓</b>: one row up/down — a week in the day grid, four cells in the others</li>
+                <li><b>Home</b> / <b>End</b>: first/last cell of the week, of the year, of the range</li>
+                <li><b>PageUp</b> / <b>PageDown</b>: previous/next month in the day grid, year in the month
+                    grid, year range in the year grid</li>
                 <li><b>Shift+PageUp</b> / <b>Shift+PageDown</b>: same day of the previous/next year</li>
-                <li><b>Enter</b> / <b>Space</b>: select the focused day</li>
+                <li><b>Enter</b> / <b>Space</b>: activate the focused cell</li>
+                <li><b>Escape</b>: close the event details dialog</li>
             </ul>
-            <br />
-            Crossing a month boundary automatically navigates the calendar and keeps the focus on the day, and disabled
-            days are skipped.
+            Crossing a month, year or range boundary navigates the calendar and keeps the focus on the cell, and
+            disabled cells are skipped. Beyond that: <b>AriaLabel</b> names the whole calendar for a screen
+            reader, each day is announced with its full date and its events, today carries
+            <code>aria-current="date"</code>, and every button — the arrows, the spin buttons, the AM/PM pair —
+            has a name and a state of its own, all of them overridable through the <b>*Title</b> parameters.
         </div>
-        <br />
+        <br /><br />
         <div class="example-content">
-            <BitCalendar />
+            <BitCalendar AriaLabel="Departure date" ShowTimePicker ShowWeekNumbers
+                         Events="@calendarEvents" TimeFormat="BitTimeFormat.TwelveHours" />
         </div>
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example18RazorCode" Id="example18">
+    <DemoExample Title="Color" RazorCode="@example15RazorCode" Id="example15">
         <div>
-            Offering a range of specialized color variants with Primary being the default, providing visual cues for
-            specific actions or states within your application.
+            <b>Color</b> paints today, the highlighted current month, the event indicators and the AM/PM button
+            that is in force.
         </div>
         <br /><br />
         <div class="example-content">
@@ -487,16 +453,12 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example19RazorCode" Id="example19">
+    <DemoExample Title="External Icons" RazorCode="@example16RazorCode" Id="example16">
         <div>
-            Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>GoToTodayIcon</b>,
-            <b>NowButtonIcon</b>, <b>PrevMonthNavIcon</b>, <b>NextMonthNavIcon</b>, and other icon parameters.
-            <br /><br />
-            For built-in icons use the <b>IconName</b> variant of each parameter (e.g. <b>GoToTodayIconName</b>).
-            <br /><br />
-            The <b>Icon</b> parameters accept a
-            <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> value, created via helpers like
-            <b>BitIconInfo.Fa(...)</b>, <b>BitIconInfo.Bi(...)</b>, or <b>BitIconInfo.Css(...)</b>.
+            Every icon of the calendar has an <b>*Icon</b> parameter taking a
+            <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> from an external library
+            (<b>BitIconInfo.Fa(...)</b>, <b>BitIconInfo.Bi(...)</b>, <b>BitIconInfo.Css(...)</b>), and an
+            <b>*IconName</b> one taking a built-in Fluent icon. The <b>Icon</b> form wins when both are set.
         </div>
         <br /><br />
 
@@ -524,13 +486,33 @@
                      TimePickerDecreaseMinuteIcon="@BitIconInfo.Bi("chevron-down")" />
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example20RazorCode" Id="example20">
+    <DemoExample Title="Size" RazorCode="@example17RazorCode" Id="example17">
+        <div>
+            <b>Size</b> scales the cells and their text together, so the whole calendar keeps its proportions.
+            The smallest cell still clears the 24&nbsp;px minimum pointer target.
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <div>Small:</div>
+            <BitCalendar Size="BitSize.Small" ShowWeekNumbers />
+            <br /><br />
+            <div>Medium (the default):</div>
+            <BitCalendar Size="BitSize.Medium" ShowWeekNumbers />
+            <br /><br />
+            <div>Large:</div>
+            <BitCalendar Size="BitSize.Large" ShowWeekNumbers />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Style & Class" RazorCode="@example18RazorCode" Id="example18">
         <div>
-            Customize the appearance of BitCalendar: use <b>Style</b> and <b>Class</b> on the root element,
-            or target every individual part of the calendar using the <b>Styles</b> and <b>Classes</b> parameters.
+            <b>Style</b> and <b>Class</b> land on the root, while <b>Styles</b> and <b>Classes</b> reach every
+            part of the calendar on its own — see
+            <BitLink Href="#calendar-class-styles">BitCalendarClassStyles</BitLink>. Prefer <b>Classes</b> when
+            your CSS owns states such as hover and focus, which inline styles cannot express.
         </div>
         <br /><br />
-        <div>Component's Style & Class:</div>
+        <div>Component's Style &amp; Class:</div>
         <br />
         <div class="example-content">
             <BitCalendar Style="margin: 1rem; border-radius: 1rem; background: #a5104457;" />
@@ -538,7 +520,7 @@
             <BitCalendar Class="custom-class" />
         </div>
         <br /><br /><br />
-        <div><b>Styles</b> & <b>Classes</b>:</div>
+        <div><b>Styles</b> &amp; <b>Classes</b>:</div>
         <br />
         <div class="example-content">
             <BitCalendar ShowTimePicker="true" Styles="@(new()
@@ -568,17 +550,40 @@
                              YearMonthPickerWrapper = "custom-year-picker"
                          })" />
         </div>
+        <br /><br /><br />
+        <div>
+            The calendar also reads a set of <BitLink Href="#css-variables-section">CSS variables</BitLink> off
+            its root for what no parameter covers. They inherit, so a value on <code>:root</code> or any ancestor
+            re-skins every calendar below it, and one on the <b>Style</b> of an instance re-skins that one alone.
+        </div>
+        <br />
+        <div>CSS variables:</div>
+        <br />
+        <div class="example-content">
+            <div>A filled selection and a square today:</div>
+            <BitCalendar @bind-Value="@cssVarsDate"
+                         Style="--bit-Calendar-selected-background: var(--bit-clr-pri); --bit-Calendar-selected-color: var(--bit-clr-pri-text); --bit-Calendar-selected-border-color: transparent; --bit-Calendar-today-radius: var(--bit-shp-radius-sm);" />
+            <br /><br />
+            <div>Roomier cells, rounded days, tinted week numbers:</div>
+            <BitCalendar ShowWeekNumbers
+                         Style="--bit-Calendar-day-size: 2.75rem; --bit-Calendar-day-font-size: 0.875rem; --bit-Calendar-day-radius: 999px; --bit-Calendar-week-number-background: transparent; --bit-Calendar-week-number-color: var(--bit-clr-pri);" />
+            <br /><br />
+            <div>Set once on an ancestor, inherited by every calendar inside it:</div>
+            <br />
+            <div class="example-content" style="--bit-Calendar-background: var(--bit-clr-bg-sec); --bit-Calendar-radius: 1rem; --bit-Calendar-hover-background: var(--bit-clr-bg-ter); --bit-Calendar-event-color: var(--bit-clr-suc); --bit-Calendar-event-size: 0.375rem;">
+                <BitCalendar Events="@calendarEvents" />
+            </div>
+        </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example21RazorCode" Id="example21">
+    <DemoExample Title="RTL" RazorCode="@example19RazorCode" Id="example19">
         <div>
-            Render BitCalendar in right-to-left (RTL) using the <b>Dir</b> parameter.
-            Providing an RTL culture (like fa-IR) enables it automatically, and the keyboard navigation adapts to the
-            direction as well.
+            <b>Dir</b> Rtl mirrors the calendar, and the left and right arrow keys swap with it. A culture that
+            reads right to left turns it on by itself.
         </div>
-        <br />
-        <div dir="rtl">
-            <BitCalendar Dir="BitDir.Rtl" />
+        <br /><br />
+        <div dir="rtl" class="example-content">
+            <BitCalendar Dir="BitDir.Rtl" ShowTimePicker ShowWeekNumbers />
         </div>
     </DemoExample>
-</DemoPage>
\ No newline at end of file
+</DemoPage>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
index 6d503ae74f0..a62ac6d2acd 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
@@ -4,6 +4,13 @@ public partial class BitCalendarDemo
 {
     private readonly List<ComponentParameter> componentParameters =
     [
+        new()
+        {
+            Name = "AllowDeselect",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether selecting the already selected day deselects it, clearing the value. The calendar stays on the month the day was deselected in.",
+        },
         new()
         {
             Name = "Classes",
@@ -90,11 +97,18 @@ public partial class BitCalendarDemo
             Name = "Events",
             Type = "IEnumerable<BitCalendarEvent>?",
             DefaultValue = "null",
-            Description = "The list of events to display on calendar days. Days with events show an indicator dot that reveals a tooltip on hover and a detail modal on click.",
+            Description = "The list of events to display on calendar days. Days with events show an indicator dot that reveals a tooltip on hover and a details dialog on click. The events of a day are ordered the way an agenda of it is: the all-day ones first, then the rest by the time they start at.",
             Href = "#calendar-event",
             LinkType = LinkType.Link
         },
         new()
+        {
+            Name = "EventDetailsCloseButtonTitle",
+            Type = "string",
+            DefaultValue = "Close",
+            Description = "The title (tooltip) and the accessible name of the close button of the event details dialog."
+        },
+        new()
         {
             Name = "EventTimeFromText",
             Type = "string",
@@ -123,6 +137,13 @@ public partial class BitCalendarDemo
             Description = "Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months, to keep the calendar height fixed while navigating between months."
         },
         new()
+        {
+            Name = "FooterTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "Rendered under the pickers, inside the root of the calendar: the place for the actions a calendar is often given of its own, such as a Clear button or a summary of the selection."
+        },
+        new()
         {
             Name = "GetDayClass",
             Type = "Func<DateTimeOffset, string?>?",
@@ -222,6 +243,13 @@ public partial class BitCalendarDemo
             Description = "The title of the GoToToday button (tooltip)."
         },
         new()
+        {
+            Name = "HeaderTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "Rendered above the pickers, inside the root of the calendar: the place for a caption or a legend of its own, before the day, month and year grids."
+        },
+        new()
         {
             Name = "HideTimePickerIcon",
             Type = "BitIconInfo?",
@@ -268,6 +296,13 @@ public partial class BitCalendarDemo
             Description = "Whether the month picker should highlight the selected month."
         },
         new()
+        {
+            Name = "HighlightToday",
+            Type = "bool",
+            DefaultValue = "true",
+            Description = "Whether the day picker should highlight today's day. It only affects the visual style of the day cell; the accessibility attributes still report the day as the current date."
+        },
+        new()
         {
             Name = "HourStep",
             Type = "int",
@@ -448,7 +483,14 @@ public partial class BitCalendarDemo
             Name = "SelectedDateAriaAtomic",
             Type = "string",
             DefaultValue = "Selected date {0}",
-            Description = "The text of selected date aria-atomic of the calendar."
+            Description = "The template of the text a screen reader is given when the selection changes, where {0} is the selected date written with the DateFormat. Nothing is announced while no date is selected."
+        },
+        new()
+        {
+            Name = "ShowEventDetails",
+            Type = "bool",
+            DefaultValue = "true",
+            Description = "Whether clicking a day that carries events opens the modal dialog listing them. The day is selected either way; turning this off leaves the events to the indicator, the tooltip and whatever the page itself shows for the selected day."
         },
         new()
         {
@@ -532,6 +574,15 @@ public partial class BitCalendarDemo
             Description = "Whether the week number (weeks 1 to 53) should be shown before each week row."
         },
         new()
+        {
+            Name = "Size",
+            Type = "BitSize?",
+            DefaultValue = "null",
+            Description = "The size of the calendar, which scales its cells and their text.",
+            LinkType = LinkType.Link,
+            Href = "#size-enum",
+        },
+        new()
         {
             Name = "StartingValue",
             Type = "DateTimeOffset?",
@@ -629,6 +680,48 @@ public partial class BitCalendarDemo
             Href = "https://blazorui.bitplatform.dev/iconography"
         },
         new()
+        {
+            Name = "TimePickerDecreaseHourTitle",
+            Type = "string",
+            DefaultValue = "Decrease hour",
+            Description = "The title (tooltip) and the accessible name of the time-picker's decrease-hour button."
+        },
+        new()
+        {
+            Name = "TimePickerDecreaseMinuteTitle",
+            Type = "string",
+            DefaultValue = "Decrease minute",
+            Description = "The title (tooltip) and the accessible name of the time-picker's decrease-minute button."
+        },
+        new()
+        {
+            Name = "TimePickerHourTitle",
+            Type = "string",
+            DefaultValue = "Hour",
+            Description = "The title (tooltip) and the accessible name of the time-picker's hour input."
+        },
+        new()
+        {
+            Name = "TimePickerIncreaseHourTitle",
+            Type = "string",
+            DefaultValue = "Increase hour",
+            Description = "The title (tooltip) and the accessible name of the time-picker's increase-hour button."
+        },
+        new()
+        {
+            Name = "TimePickerIncreaseMinuteTitle",
+            Type = "string",
+            DefaultValue = "Increase minute",
+            Description = "The title (tooltip) and the accessible name of the time-picker's increase-minute button."
+        },
+        new()
+        {
+            Name = "TimePickerMinuteTitle",
+            Type = "string",
+            DefaultValue = "Minute",
+            Description = "The title (tooltip) and the accessible name of the time-picker's minute input."
+        },
+        new()
         {
             Name = "TimeZone",
             Type = "TimeZoneInfo?",
@@ -839,6 +932,33 @@ public partial class BitCalendarDemo
                     Value="1"
                 }
         ]
+        },
+        new()
+        {
+            Id = "size-enum",
+            Name = "BitSize",
+            Description = "",
+            Items =
+            [
+                new()
+                {
+                    Name= "Small",
+                    Description="The small size calendar.",
+                    Value="0",
+                },
+                new()
+                {
+                    Name= "Medium",
+                    Description="The medium size calendar.",
+                    Value="1",
+                },
+                new()
+                {
+                    Name= "Large",
+                    Description="The large size calendar.",
+                    Value="2",
+                }
+            ]
         }
     ];
 
@@ -865,6 +985,20 @@ public partial class BitCalendarDemo
                     Description = "Custom CSS classes/styles for the main container of the BitCalendar."
                 },
                 new()
+                {
+                    Name = "Header",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the wrapper of the HeaderTemplate of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "Footer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the wrapper of the FooterTemplate of the BitCalendar."
+                },
+                new()
                 {
                     Name = "DayPickerWrapper",
                     Type = "string?",
@@ -921,6 +1055,34 @@ public partial class BitCalendarDemo
                     Description = "Custom CSS classes/styles for the Go to today icon of the BitCalendar."
                 },
                 new()
+                {
+                    Name = "NowButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the Go to now button of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "NowButtonIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the Go to now icon of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "HideTimePickerButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the hide time-picker button of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "HideTimePickerIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the hide time-picker icon of the BitCalendar."
+                },
+                new()
                 {
                     Name = "NextMonthNavButton",
                     Type = "string?",
@@ -1006,10 +1168,24 @@ public partial class BitCalendarDemo
                 },
                 new()
                 {
-                    Name = "TimePickerContainer",
+                    Name = "TimeInputContainer",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's main container of the BitCalendar."
+                    Description = "Custom CSS classes/styles for the time-picker's input container of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "HourInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's hour input container of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "MinuteInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's minute input container of the BitCalendar."
                 },
                 new()
                 {
@@ -1040,6 +1216,83 @@ public partial class BitCalendarDemo
                     Description = "Custom CSS classes/styles for the time-picker's minute input of the BitCalendar."
                 },
                 new()
+                {
+                    Name = "TimePickerIncreaseHourButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's increase hour button of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerIncreaseHourIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's increase hour icon of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerDecreaseHourButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's decrease hour button of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerDecreaseHourIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's decrease hour icon of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerIncreaseMinuteButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's increase minute button of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerIncreaseMinuteIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's increase minute icon of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerDecreaseMinuteButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's decrease minute button of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerDecreaseMinuteIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's decrease minute icon of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerAmPmContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's Am Pm container of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerAmButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's Am button of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "TimePickerPmButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's Pm button of the BitCalendar."
+                },
+                new()
                 {
                     Name = "Divider",
                     Type = "string?",
@@ -1061,6 +1314,13 @@ public partial class BitCalendarDemo
                     Description = "Custom CSS classes/styles for the month-picker's header of the BitCalendar."
                 },
                 new()
+                {
+                    Name = "TimePickerHeader",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time-picker's header of the BitCalendar."
+                },
+                new()
                 {
                     Name = "YearPickerToggleButton",
                     Type = "string?",
@@ -1068,6 +1328,20 @@ public partial class BitCalendarDemo
                     Description = "Custom CSS classes/styles for the year-picker's toggle button of the BitCalendar."
                 },
                 new()
+                {
+                    Name = "ShowTimePickerButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the show time-picker button of the BitCalendar."
+                },
+                new()
+                {
+                    Name = "ShowTimePickerIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the show time-picker icon of the BitCalendar."
+                },
+                new()
                 {
                     Name = "MonthPickerNavWrapper",
                     Type = "string?",
@@ -1075,6 +1349,13 @@ public partial class BitCalendarDemo
                     Description = "Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitCalendar."
                 },
                 new()
+                {
+                    Name = "TimePickerNavWrapper",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the wrapper of the time-picker's nav buttons of the BitCalendar."
+                },
+                new()
                 {
                     Name = "PrevYearNavButton",
                     Type = "string?",
@@ -1321,8 +1602,177 @@ public partial class BitCalendarDemo
 
 
 
+    private readonly List<ComponentParameter> componentPublicMembers =
+    [
+        new()
+        {
+            Name = "FocusAsync",
+            Type = "ValueTask",
+            Description = "Gives focus to the calendar: the day of the day grid that is in the tab sequence, or the month, the year or the hour input when the day grid is not the picker on screen.",
+        },
+    ];
+
+    private readonly List<ComponentCssVariable> componentCssVariables =
+    [
+        new()
+        {
+            Name = "--bit-Calendar-background",
+            DefaultValue = "transparent",
+            Description = "Background behind the whole calendar, including the area around the pickers.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-radius",
+            DefaultValue = "--bit-shp-radius-control",
+            Description = "Corner radius of the calendar, which the overlay of the event details dialog follows.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-padding",
+            DefaultValue = "8px * 1.5 (the spacing unit)",
+            Description = "Padding of each picker pane - the day grid, the month and year grids, the time picker - and of the HeaderTemplate and FooterTemplate wrappers.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Text color of the cells, the headers and the navigation buttons. The selected day, today and a disabled cell paint their own through the variables below.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-divider-color",
+            DefaultValue = "--bit-clr-brd-sec",
+            Description = "Color of the rule between the panes, of the one beside the week numbers, and of the borders inside the event details dialog.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-focus-color",
+            DefaultValue = "The Color role's focus color (--bit-clr-err-focus while the value is invalid)",
+            Description = "Color of the keyboard focus ring drawn around every cell and button of the calendar.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-disabled-color",
+            DefaultValue = "--bit-clr-fg-dis",
+            Description = "Text color of a disabled cell, and of every part of a calendar whose IsEnabled is false.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-hover-background",
+            DefaultValue = "--bit-clr-bg-pri-hover",
+            Description = "Background of a cell or button on hover (pointer devices only).",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-active-background",
+            DefaultValue = "--bit-clr-bg-pri-active",
+            Description = "Background of a cell or button while pressed.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-day-size",
+            DefaultValue = "Per Size: 24px / 28px / 34px at the Fluent defaults",
+            Description = "Width and height of a day cell. The week numbers, the weekday headers, the empty cells and the navigation buttons all take it, so the whole day grid stays in step.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-day-font-size",
+            DefaultValue = "Per Size: --bit-tpg-fs-xs / -xs / -sm",
+            Description = "Text size of the day cells and of the headers and week numbers that line up with them.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-day-radius",
+            DefaultValue = "--bit-shp-radius-control",
+            Description = "Corner radius of a day cell, which the month, year, navigation and time-picker buttons share. Set it to 999px for round days.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-outside-day-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "Text color of a day of the previous or next month while ShowOutsideDays is on.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-selected-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Background of the selected day, and of the displayed month while HighlightSelectedMonth is on.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-selected-color",
+            DefaultValue = "--bit-Calendar-color",
+            Description = "Text color of the selected day, for a filled selection that needs its own contrast.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-selected-border-color",
+            DefaultValue = "--bit-clr-brd-pri",
+            Description = "Color of the ring drawn around the selected day. Set it to transparent for a selection carried by its background alone.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-today-background",
+            DefaultValue = "The Color role's main color",
+            Description = "Background of today, of the current month while HighlightCurrentMonth is on, and of the AM/PM button that is in force.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-today-color",
+            DefaultValue = "The Color role's on-color",
+            Description = "Text color of today, of the highlighted current month and of the AM/PM button that is in force.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-today-radius",
+            DefaultValue = "--bit-shp-radius-full",
+            Description = "Corner radius of today, which is a circle by default.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-highlighted-background",
+            DefaultValue = "--bit-clr-bg-ter",
+            Description = "Background of a day listed in HighlightedDates.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-week-number-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "Text color of a week number.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-week-number-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Background of the week-number column.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-event-color",
+            DefaultValue = "The Color role's main color",
+            Description = "Color of the indicator dot on a day that carries events.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-event-size",
+            DefaultValue = "8px * 0.5 (the spacing unit)",
+            Description = "Diameter of the indicator dot on a day that carries events.",
+        },
+    ];
+
+
+
+
     private DateTimeOffset? selectedDate = new DateTimeOffset(2023, 8, 19, 0, 0, 0, DateTimeOffset.Now.Offset);
 
+    private DateTimeOffset? deselectableDate = DateTimeOffset.Now;
+
+    private DateTimeOffset? footerDate;
+
+    // Two days on from today, so the sample below shows the filled selection and the square today as two
+    // different cells rather than as one cell wearing both.
+    private DateTimeOffset? cssVarsDate = DateTimeOffset.Now.AddDays(2);
+
     private DateTimeOffset? onSelectDate;
 
     private void HandleOnSelectDate(DateTimeOffset? date)
@@ -1330,6 +1780,22 @@ private void HandleOnSelectDate(DateTimeOffset? date)
         onSelectDate = date;
     }
 
+    private string eventsOfSelectedDay = "-";
+
+    private void HandleOnEventDayClick(DateTimeOffset? date)
+    {
+        if (date is null)
+        {
+            eventsOfSelectedDay = "-";
+            return;
+        }
+
+        var day = DateOnly.FromDateTime(date.Value.DateTime);
+        var titles = calendarEvents.Where(e => e.Date == day).Select(e => e.Title).ToArray();
+
+        eventsOfSelectedDay = titles.Length == 0 ? "none" : string.Join(", ", titles);
+    }
+
     private List<BitCalendarEvent> calendarEvents =
     [
         new() { Title = "Team standup",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
index 4810985815f..d629a805161 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
@@ -4,100 +4,131 @@ public partial class BitCalendarDemo
 {
     private readonly string example1RazorCode = @"
 <BitCalendar />
-<BitCalendar IsEnabled=""false"" />
-<BitCalendar ShowWeekNumbers=""true"" />
-<BitCalendar HighlightCurrentMonth=""true"" HighlightSelectedMonth=""true"" />
-<BitCalendar ShowTimePicker=""true"" StartingValue=""startingValue"" />
-<BitCalendar Today=""customToday"" />
+
+<BitCalendar IsEnabled=""false"" @bind-Value=""readOnlyDate"" />
+
+<BitCalendar ReadOnly @bind-Value=""readOnlyDate"" />
+
 <BitCalendar ShowGoToToday=""false"" />";
     private readonly string example1CsharpCode = @"
-private DateTimeOffset? startingValue = new DateTimeOffset(2020, 12, 4, 20, 45, 0, DateTimeOffset.Now.Offset);
-private DateTimeOffset? customToday = new DateTimeOffset(2021, 3, 15, 0, 0, 0, DateTimeOffset.Now.Offset);";
+private DateTimeOffset? readOnlyDate = DateTimeOffset.Now;";
 
     private readonly string example2RazorCode = @"
+<BitCalendar @bind-Value=""@selectedDate"" />
+<div>Selected date: @selectedDate.ToString()</div>
+
+<BitCalendar OnSelectDate=""HandleOnSelectDate"" />
+<div>Selected date: @(onSelectDate.HasValue ? onSelectDate.ToString() : ""-"")</div>
+
+<BitCalendar AllowDeselect @bind-Value=""@deselectableDate"" />
+<div>Selected date: @(deselectableDate.HasValue ? deselectableDate.ToString() : ""-"")</div>";
+    private readonly string example2CsharpCode = @"
+private DateTimeOffset? selectedDate = new DateTimeOffset(2023, 8, 19, 0, 0, 0, DateTimeOffset.Now.Offset);
+
+private DateTimeOffset? deselectableDate = DateTimeOffset.Now;
+
+private DateTimeOffset? onSelectDate;
+
+private void HandleOnSelectDate(DateTimeOffset? date)
+{
+    onSelectDate = date;
+}";
+
+    private readonly string example3RazorCode = @"
+<BitCalendar ShowTimePicker StartingValue=""startingValue"" />
+
+<BitCalendar Today=""customToday"" />
+
+<BitCalendar OnMonthChange=""HandleOnMonthChange"" />
+<div>Displayed month: @(displayedMonth.HasValue ? displayedMonth.Value.ToString(""MMMM yyyy"") : ""-"")</div>";
+    private readonly string example3CsharpCode = @"
+private DateTimeOffset? startingValue = new DateTimeOffset(2020, 12, 4, 20, 45, 0, DateTimeOffset.Now.Offset);
+private DateTimeOffset? customToday = new DateTimeOffset(2021, 3, 15, 0, 0, 0, DateTimeOffset.Now.Offset);
+
+private DateTimeOffset? displayedMonth;
+
+private void HandleOnMonthChange(DateTimeOffset month)
+{
+    displayedMonth = month;
+}";
+
+    private readonly string example4RazorCode = @"
 <BitCalendar MinDate=""DateTimeOffset.Now.AddDays(-5)"" MaxDate=""DateTimeOffset.Now.AddDays(5)"" />
-<BitCalendar MinDate=""DateTimeOffset.Now.AddMonths(-2)"" MaxDate=""DateTimeOffset.Now.AddMonths(1)"" />
+
 <BitCalendar MinDate=""DateTimeOffset.Now.AddYears(-5)"" MaxDate=""DateTimeOffset.Now.AddYears(1)"" />
 
 <BitCalendar DisablePast />
+
 <BitCalendar DisableFuture />";
 
-    private readonly string example3RazorCode = @"
-<BitCalendar ShowTimePicker=""true"" HourStep=""2"" />
-<BitCalendar ShowTimePicker=""true"" MinuteStep=""15"" />";
+    private readonly string example5RazorCode = @"
+<style>
+    .sunday-cell {
+        color: red;
+    }
+</style>
 
-    private readonly string example4RazorCode = @"
-<BitCalendar GoToTodayTitle=""برو به امروز"" Culture=""CultureInfoHelper.GetFaIrCultureWithFarsiNames()"" />
-<BitCalendar GoToTodayTitle=""Boro be emrouz"" Culture=""CultureInfoHelper.GetFaIrCultureWithFingilishNames()"" />";
+<BitCalendar DisabledDaysOfWeek=""@weekendDays"" />
 
-    private readonly string example5RazorCode = @"
-<BitCalendar @bind-Value=""@timeZoneDate1"" ShowTimePicker />
-<div>Selected date: @timeZoneDate1?.ToString()</div>
+<BitCalendar DisabledDates=""@disabledDates"" IsDateDisabled=""@(d => d.Day % 2 == 1)"" />
 
-@{
-    TimeZoneInfo? timeZoneInfo = null;
-    var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
-    if (allTimeZones.Count > 0)
-    {
-        timeZoneInfo = allTimeZones[0];
-    }
-}
-@if (timeZoneInfo is not null) {
-    <div>""@timeZoneInfo.Id"" TimeZone:</div><br/>
-    <BitCalendar TimeZone=""timeZoneInfo"" @bind-Value=""@timeZoneDate2"" ShowTimePicker />
-    <div>Selected date: @timeZoneDate2?.ToString()</div>
-}";
+<BitCalendar HighlightedDates=""@highlightedDates""
+             GetDayClass=""@(d => d.DayOfWeek == DayOfWeek.Sunday ? ""sunday-cell"" : null)"" />";
     private readonly string example5CsharpCode = @"
-private DateTimeOffset? timeZoneDate1;
-private DateTimeOffset? timeZoneDate2;";
+private DayOfWeek[] weekendDays = [DayOfWeek.Saturday, DayOfWeek.Sunday];
 
-    private readonly string example6RazorCode = @"
-<BitCalendar @bind-Value=""@selectedDate"" />
-<div>Selected date: @selectedDate.ToString()</div>
+private DateTimeOffset[] disabledDates =
+[
+    DateTimeOffset.Now.AddDays(1),
+    DateTimeOffset.Now.AddDays(2),
+    DateTimeOffset.Now.AddDays(5)
+];
 
-<BitCalendar OnSelectDate=""HandleOnSelectDate"" />
-<div>Selected date: @(onSelectDate.HasValue ? onSelectDate.ToString() : ""-"")</div>";
-    private readonly string example6CsharpCode = @"
-private DateTimeOffset? selectedDate = new DateTimeOffset(2023, 8, 19, 0, 0, 0, DateTimeOffset.Now.Offset);
+private DateTimeOffset[] highlightedDates =
+[
+    DateTimeOffset.Now.AddDays(3),
+    DateTimeOffset.Now.AddDays(7),
+    DateTimeOffset.Now.AddDays(14)
+];";
 
-private DateTimeOffset? onSelectDate;
+    private readonly string example6RazorCode = @"
+<BitCalendar ShowWeekNumbers FirstDayOfWeek=""DayOfWeek.Monday""
+             WeekNumberRule=""CalendarWeekRule.FirstFourDayWeek"" />
 
-private void HandleOnSelectDate(DateTimeOffset? date)
-{
-    onSelectDate = date;
-}";
+<BitCalendar ShowOutsideDays=""false"" />
 
-    private readonly string example7RazorCode = @"
-<BitCalendar ReadOnly @bind-Value=""readOnlyDate"" />
-<BitCalendar ReadOnly ShowTimePicker @bind-Value=""readOnlyDate"" />";
-    private readonly string example7CsharpCode = @"
-private DateTimeOffset? readOnlyDate = DateTimeOffset.Now;";
+<BitCalendar FixedWeeks />";
 
-    private readonly string example8RazorCode = @"
+    private readonly string example7RazorCode = @"
 <BitCalendar ShowMonthPicker=""@showMonthPicker"" />
 <BitToggleButton OnText=""MonthPicker visible"" OffText=""MonthPicker invisible"" @bind-IsChecked=""@showMonthPicker"" />
 
 <BitCalendar ShowMonthPickerAsOverlay=""@showMonthPickerAsOverlay"" />
-<BitToggleButton OnText=""Position Overlay"" OffText=""Position Besides"" @bind-IsChecked=""@showMonthPickerAsOverlay"" />";
-    private readonly string example8CsharpCode = @"
+<BitToggleButton OnText=""Position Overlay"" OffText=""Position Besides"" @bind-IsChecked=""@showMonthPickerAsOverlay"" />
+
+<BitCalendar HighlightCurrentMonth HighlightSelectedMonth />";
+    private readonly string example7CsharpCode = @"
 private bool showMonthPicker = true;
 private bool showMonthPickerAsOverlay;";
 
-    private readonly string example9RazorCode = @"
-<BitCalendar @bind-Value=""@selectedDateTime"" ShowTimePicker=""true"" />
-<div>Selected DateTime: @selectedDateTime.ToString()</div>
+    private readonly string example8RazorCode = @"
+<BitCalendar @bind-Value=""@selectedDateTime"" ShowTimePicker />
+<div>Selected: @selectedDateTime.ToString()</div>
 
-<BitCalendar ShowTimePicker TimeFormat=""BitTimeFormat.TwelveHours"" />
+<BitCalendar ShowTimePicker ShowNowButton=""false"" TimeFormat=""BitTimeFormat.TwelveHours"" />
 
 <BitCalendar ShowTimePicker ShowTimePickerAsOverlay />
 
-<BitCalendar ShowTimePicker ShowNowButton=""false"" />";
-    private readonly string example9CsharpCode = @"
+<BitCalendar ShowTimePicker HourStep=""3"" MinuteStep=""15"" />";
+    private readonly string example8CsharpCode = @"
 private DateTimeOffset? selectedDateTime = DateTimeOffset.Now;";
 
-    private readonly string example10RazorCode = @"
-<BitCalendar Events=""@calendarEvents"" />";
-    private readonly string example10CsharpCode = @"
+    private readonly string example9RazorCode = @"
+<BitCalendar Events=""@calendarEvents"" />
+
+<BitCalendar Events=""@calendarEvents"" ShowEventDetails=""false"" OnSelectDate=""HandleOnEventDayClick"" />
+<div>Events of the selected day: @eventsOfSelectedDay</div>";
+    private readonly string example9CsharpCode = @"
 private List<BitCalendarEvent> calendarEvents =
 [
     new() { Title = ""Team standup"",
@@ -106,7 +137,7 @@ private void HandleOnSelectDate(DateTimeOffset? date)
             StartTime = new TimeOnly(9, 0),
             EndTime = new TimeOnly(9, 30) },
     new() { Title = ""Product review"",
-            Body = ""Quarterly product review \u2014 prepare slides beforehand."",
+            Body = ""Quarterly product review — prepare slides beforehand."",
             Date = DateOnly.FromDateTime(DateTime.Today),
             StartTime = new TimeOnly(14, 0),
             EndTime = new TimeOnly(15, 0) },
@@ -117,56 +148,25 @@ private void HandleOnSelectDate(DateTimeOffset? date)
             Body = ""Introductory call with the new client."",
             Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
             StartTime = new TimeOnly(11, 30) }
-];";
-
-    private readonly string example11RazorCode = @"
-<style>
-    .validation-message {
-        color: red;
-    }
-</style>
-
-<EditForm Model=""validationModel"" OnValidSubmit=""HandleValidSubmit"" OnInvalidSubmit=""HandleInvalidSubmit"">
-    <DataAnnotationsValidator />
+];
 
-    <BitCalendar @bind-Value=""validationModel.Date"" />
-    <ValidationMessage For=""@(() => validationModel.Date)"" />
-    
-    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
-    <BitButton ButtonType=""BitButtonType.Reset"" Variant=""BitVariant.Outline""
-               OnClick=""() => { validationModel = new(); SuccessMessage=string.Empty; }"">
-        Reset
-    </BitButton>
-</EditForm>
+private string eventsOfSelectedDay = ""-"";
 
-@if (string.IsNullOrEmpty(SuccessMessage) is false)
-{
-    <BitMessage Color=""BitColor.Success"">@SuccessMessage</BitMessage>
-}";
-    private readonly string example11CsharpCode = @"
-public class BitCalendarValidationModel
+private void HandleOnEventDayClick(DateTimeOffset? date)
 {
-    [Required]
-    public DateTimeOffset? Date { get; set; }
-}
-
-private string SuccessMessage = string.Empty;
-private BitCalendarValidationModel validationModel = new();
+    if (date is null)
+    {
+        eventsOfSelectedDay = ""-"";
+        return;
+    }
 
-private async Task HandleValidSubmit()
-{
-    SuccessMessage = ""Form was submitted successfully!"";
-    await Task.Delay(3000);
-    SuccessMessage = string.Empty;
-    StateHasChanged();
-}
+    var day = DateOnly.FromDateTime(date.Value.DateTime);
+    var titles = calendarEvents.Where(e => e.Date == day).Select(e => e.Title).ToArray();
 
-private void HandleInvalidSubmit()
-{
-    SuccessMessage = string.Empty;
+    eventsOfSelectedDay = titles.Length == 0 ? ""none"" : string.Join("", "", titles);
 }";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example10RazorCode = @"
 <style>
     .day-cell {
         width: 28px;
@@ -188,6 +188,12 @@ private void HandleInvalidSubmit()
         background-color: red;
     }
 
+    .month-cell {
+        width: 28px;
+        padding: 3px;
+        color: black;
+    }
+
     .year-suffix {
         position: absolute;
         bottom: 10px;
@@ -213,79 +219,116 @@ private void HandleInvalidSubmit()
 
 <BitCalendar>
     <MonthCellTemplate>
-        <div style=""width:28px;padding:3px;color:black;background:@(context.Month == 1 ? ""lightcoral"" : ""yellowgreen"")"">
+        <div class=""month-cell"" style=""background:@(context.Month == 1 ? ""lightcoral"" : ""yellowgreen"")"">
             @culture.DateTimeFormat.GetAbbreviatedMonthName(context.Month)
         </div>
     </MonthCellTemplate>
-</BitCalendar>
-
-<BitCalendar>
     <YearCellTemplate>
         <span style=""position: relative"">
             @context
             <span class=""year-suffix"">AC</span>
         </span>
     </YearCellTemplate>
-</BitCalendar>";
+</BitCalendar>
 
-    private readonly string example13RazorCode = @"
-<BitCalendar DisabledDaysOfWeek=""@weekendDays"" />
+<BitCalendar @bind-Value=""@footerDate"">
+    <HeaderTemplate>
+        <b>Pick a delivery date</b>
+    </HeaderTemplate>
+    <FooterTemplate>
+        <BitStack Horizontal AutoHeight Gap=""0.5rem"" VerticalAlign=""BitAlignment.Center"">
+            <BitButton Size=""BitSize.Small"" Variant=""BitVariant.Text""
+                       OnClick=""() => footerDate = DateTimeOffset.Now"">
+                Today
+            </BitButton>
+            <BitButton Size=""BitSize.Small"" Variant=""BitVariant.Text""
+                       Color=""BitColor.SecondaryForeground""
+                       OnClick=""() => footerDate = null"">
+                Clear
+            </BitButton>
+        </BitStack>
+    </FooterTemplate>
+</BitCalendar>
+<div>Selected: @(footerDate.HasValue ? footerDate.Value.ToString(""d"") : ""-"")</div>";
 
-<BitCalendar DisabledDates=""@disabledDates"" />
+    private readonly string example11RazorCode = @"
+<BitCalendar GoToTodayTitle=""برو به امروز"" Culture=""CultureInfoHelper.GetFaIrCultureWithFarsiNames()"" />
 
-<BitCalendar IsDateDisabled=""@(d => d.Day % 2 == 1)"" />";
-    private readonly string example13CsharpCode = @"
-private DayOfWeek[] weekendDays = [DayOfWeek.Saturday, DayOfWeek.Sunday];
+<BitCalendar GoToTodayTitle=""Boro be emrouz"" Culture=""CultureInfoHelper.GetFaIrCultureWithFingilishNames()"" />";
 
-private DateTimeOffset[] disabledDates =
-[
-    DateTimeOffset.Now.AddDays(1),
-    DateTimeOffset.Now.AddDays(2),
-    DateTimeOffset.Now.AddDays(5)
-];";
+    private readonly string example12RazorCode = @"
+<BitCalendar @bind-Value=""@timeZoneDate1"" ShowTimePicker />
+<div>Selected date: @timeZoneDate1?.ToString()</div>
 
-    private readonly string example14RazorCode = @"
+@{
+    TimeZoneInfo? timeZoneInfo = null;
+    var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
+    if (allTimeZones.Count > 0)
+    {
+        timeZoneInfo = allTimeZones[0];
+    }
+}
+@if (timeZoneInfo is not null) {
+    <div>""@timeZoneInfo.Id"":</div><br/>
+    <BitCalendar TimeZone=""timeZoneInfo"" @bind-Value=""@timeZoneDate2"" ShowTimePicker />
+    <div>Selected date: @timeZoneDate2?.ToString()</div>
+}";
+    private readonly string example12CsharpCode = @"
+private DateTimeOffset? timeZoneDate1;
+private DateTimeOffset? timeZoneDate2;";
+
+    private readonly string example13RazorCode = @"
 <style>
-    .sunday-cell {
+    .validation-message {
         color: red;
     }
 </style>
 
-<BitCalendar HighlightedDates=""@highlightedDates"" />
-
-<BitCalendar GetDayClass=""@(d => d.DayOfWeek == DayOfWeek.Sunday ? ""sunday-cell"" : null)"" />";
-    private readonly string example14CsharpCode = @"
-private DateTimeOffset[] highlightedDates =
-[
-    DateTimeOffset.Now.AddDays(3),
-    DateTimeOffset.Now.AddDays(7),
-    DateTimeOffset.Now.AddDays(14)
-];";
+<EditForm Model=""validationModel"" OnValidSubmit=""HandleValidSubmit"" OnInvalidSubmit=""HandleInvalidSubmit"">
+    <DataAnnotationsValidator />
 
-    private readonly string example15RazorCode = @"
-<BitCalendar FirstDayOfWeek=""DayOfWeek.Monday"" />
+    <BitCalendar Required @bind-Value=""validationModel.Date"" />
+    <ValidationMessage For=""@(() => validationModel.Date)"" />
 
-<BitCalendar ShowWeekNumbers WeekNumberRule=""CalendarWeekRule.FirstFourDayWeek"" FirstDayOfWeek=""DayOfWeek.Monday"" />
+    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
+    <BitButton ButtonType=""BitButtonType.Reset"" Variant=""BitVariant.Outline""
+               OnClick=""() => { validationModel = new(); SuccessMessage=string.Empty; }"">
+        Reset
+    </BitButton>
+</EditForm>
 
-<BitCalendar ShowOutsideDays=""false"" />
+@if (string.IsNullOrEmpty(SuccessMessage) is false)
+{
+    <BitMessage Color=""BitColor.Success"">@SuccessMessage</BitMessage>
+}";
+    private readonly string example13CsharpCode = @"
+public class BitCalendarValidationModel
+{
+    [Required]
+    public DateTimeOffset? Date { get; set; }
+}
 
-<BitCalendar FixedWeeks />";
+private string SuccessMessage = string.Empty;
+private BitCalendarValidationModel validationModel = new();
 
-    private readonly string example16RazorCode = @"
-<BitCalendar OnMonthChange=""HandleOnMonthChange"" />
-<div>Displayed month: @(displayedMonth.HasValue ? displayedMonth.Value.ToString(""MMMM yyyy"") : ""-"")</div>";
-    private readonly string example16CsharpCode = @"
-private DateTimeOffset? displayedMonth;
+private async Task HandleValidSubmit()
+{
+    SuccessMessage = ""Form was submitted successfully!"";
+    await Task.Delay(3000);
+    SuccessMessage = string.Empty;
+    StateHasChanged();
+}
 
-private void HandleOnMonthChange(DateTimeOffset month)
+private void HandleInvalidSubmit()
 {
-    displayedMonth = month;
+    SuccessMessage = string.Empty;
 }";
 
-    private readonly string example17RazorCode = @"
-<BitCalendar />";
+    private readonly string example14RazorCode = @"
+<BitCalendar AriaLabel=""Departure date"" ShowTimePicker ShowWeekNumbers
+             Events=""@calendarEvents"" TimeFormat=""BitTimeFormat.TwelveHours"" />";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitCalendar Color=""BitColor.Primary"" HighlightCurrentMonth />
 
 <BitCalendar Color=""BitColor.Secondary"" HighlightCurrentMonth />
@@ -320,7 +363,7 @@ private void HandleOnMonthChange(DateTimeOffset month)
 
 <BitCalendar Color=""BitColor.TertiaryBorder"" HighlightCurrentMonth />";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example16RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitCalendar GoToTodayIcon=""@BitIconInfo.Fa(""solid calendar-day"")""
@@ -340,7 +383,14 @@ private void HandleOnMonthChange(DateTimeOffset month)
              TimePickerIncreaseMinuteIcon=""@BitIconInfo.Bi(""chevron-up"")""
              TimePickerDecreaseMinuteIcon=""@BitIconInfo.Bi(""chevron-down"")"" />";
 
-    private readonly string example20RazorCode = @"
+    private readonly string example17RazorCode = @"
+<BitCalendar Size=""BitSize.Small"" ShowWeekNumbers />
+
+<BitCalendar Size=""BitSize.Medium"" ShowWeekNumbers />
+
+<BitCalendar Size=""BitSize.Large"" ShowWeekNumbers />";
+
+    private readonly string example18RazorCode = @"
 <style>
     .custom-class {
         margin: 1rem;
@@ -420,16 +470,38 @@ private void HandleOnMonthChange(DateTimeOffset month)
                                TimePickerDecreaseMinuteButton = ""background-color: limegreen;"" })"" />
 
 <BitCalendar Classes=""@(new() { Root = ""custom-root"",
-                             DayPickerWrapper = ""custom-day-picker"",
-                             DayButton = ""custom-day"",
-                             TodayDayButton = ""custom-today-day"",
-                             PrevMonthNavButton = ""custom-prev-month"",
-                             NextMonthNavButton = ""custom-next-month"",
-                             DayPickerMonth = ""custom-day-month"",
-                             DayPickerHeader = ""custom-day-header"",
-                             WeekNumbersHeader = ""custom-week-header"",
-                             YearMonthPickerWrapper = ""custom-year-picker"" })"" />";
-
-    private readonly string example21RazorCode = @"
-<BitCalendar Dir=""BitDir.Rtl"" />";
+                                DayPickerWrapper = ""custom-day-picker"",
+                                DayButton = ""custom-day"",
+                                TodayDayButton = ""custom-today-day"",
+                                PrevMonthNavButton = ""custom-prev-month"",
+                                NextMonthNavButton = ""custom-next-month"",
+                                DayPickerMonth = ""custom-day-month"",
+                                DayPickerHeader = ""custom-day-header"",
+                                WeekNumbersHeader = ""custom-week-header"",
+                                YearMonthPickerWrapper = ""custom-year-picker"" })"" />
+
+
+<BitCalendar @bind-Value=""@cssVarsDate""
+             Style=""--bit-Calendar-selected-background: var(--bit-clr-pri);
+                    --bit-Calendar-selected-color: var(--bit-clr-pri-text);
+                    --bit-Calendar-selected-border-color: transparent;
+                    --bit-Calendar-today-radius: var(--bit-shp-radius-sm);"" />
+
+<BitCalendar ShowWeekNumbers
+             Style=""--bit-Calendar-day-size: 2.75rem;
+                    --bit-Calendar-day-font-size: 0.875rem;
+                    --bit-Calendar-day-radius: 999px;
+                    --bit-Calendar-week-number-background: transparent;
+                    --bit-Calendar-week-number-color: var(--bit-clr-pri);"" />
+
+<div style=""--bit-Calendar-background: var(--bit-clr-bg-sec);
+            --bit-Calendar-radius: 1rem;
+            --bit-Calendar-hover-background: var(--bit-clr-bg-ter);
+            --bit-Calendar-event-color: var(--bit-clr-suc);
+            --bit-Calendar-event-size: 0.375rem;"">
+    <BitCalendar Events=""@calendarEvents"" />
+</div>";
+
+    private readonly string example19RazorCode = @"
+<BitCalendar Dir=""BitDir.Rtl"" ShowTimePicker ShowWeekNumbers />";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.scss
index 44fd014d284..9b6bda0f690 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.scss
@@ -25,6 +25,12 @@
     background-color: red;
 }
 
+.month-cell {
+    width: 28px;
+    padding: 3px;
+    color: black;
+}
+
 .year-suffix {
     position: absolute;
     bottom: 10px;
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
index c61773fa7e6..053183e56f2 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
@@ -1,6 +1,7 @@
 using System;
 using System.Linq;
 using System.Globalization;
+using System.Reflection;
 using System.Threading.Tasks;
 using Bunit;
 using Microsoft.AspNetCore.Components;
@@ -1474,6 +1475,9 @@ public void BitCalendarHourStepShouldLayAGridOverTheDay()
         {
             parameters.Add(p => p.HourStep, 3);
             parameters.Add(p => p.ShowTimePicker, true);
+            // The time picker reads the hour of the value in the TimeZone of the component, so the test pins
+            // it rather than letting the machine's own zone decide which hour the grid is stepped from.
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
             parameters.Bind(p => p.Value, value, v => value = v);
         });
 
@@ -1500,6 +1504,7 @@ public async Task BitCalendarShouldNotStartTheContinuousSpinBeforeTheContinuousS
             // and the continuous spin never starts.
             parameters.Add(p => p.ContinuousSpinDelay, 60_000);
             parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
             parameters.Bind(p => p.Value, value, v => value = v);
         });
 
@@ -1524,6 +1529,7 @@ public void BitCalendarMinuteStepShouldLayAGridOverTheHour()
         {
             parameters.Add(p => p.MinuteStep, 15);
             parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
             parameters.Bind(p => p.Value, value, v => value = v);
         });
 
@@ -1533,4 +1539,436 @@ public void BitCalendarMinuteStepShouldLayAGridOverTheHour()
 
         Assert.AreEqual(0, value!.Value.Minute);
     }
+
+    [TestMethod,
+        DataRow("ArrowRight", "Feb"),
+        DataRow("ArrowLeft", "Jan"),
+        DataRow("ArrowDown", "May"),
+        DataRow("End", "Dec")]
+    public void BitCalendarMonthGridShouldMoveFocusWithTheArrowKeys(string key, string expectedMonth)
+    {
+        // The month grid is four cells wide, so ArrowDown moves four months on, and it wraps at neither end:
+        // January is the first cell of the first row, so ArrowLeft from it moves nowhere.
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var focusedMonth = component.Find(".bit-cal-pkb[tabindex='0']");
+
+        Assert.AreEqual("Jan", focusedMonth.TextContent.Trim());
+
+        focusedMonth.KeyDown(new KeyboardEventArgs { Key = key });
+
+        Assert.AreEqual(expectedMonth, component.Find(".bit-cal-pkb[tabindex='0']").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthGridShouldChangeYearOnPageDown()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        component.Find(".bit-cal-pkb[tabindex='0']").KeyDown(new KeyboardEventArgs { Key = "PageDown" });
+
+        Assert.AreEqual("2027", component.Find(".bit-cal-ptb").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarYearGridShouldMoveFocusWithTheArrowKeys()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        // The year picker replaces the month grid when the header of the month picker is activated.
+        component.Find(".bit-cal-ptb").Click();
+
+        var focusedYear = component.Find(".bit-cal-pkb[tabindex='0']");
+
+        Assert.AreEqual("2026", focusedYear.TextContent.Trim());
+
+        focusedYear.KeyDown(new KeyboardEventArgs { Key = "ArrowRight" });
+
+        Assert.AreEqual("2027", component.Find(".bit-cal-pkb[tabindex='0']").TextContent.Trim());
+
+        component.Find(".bit-cal-pkb[tabindex='0']").KeyDown(new KeyboardEventArgs { Key = "ArrowDown" });
+
+        Assert.AreEqual("2031", component.Find(".bit-cal-pkb[tabindex='0']").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthGridShouldSkipTheMonthsOutOfRange()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.MinDate, new DateTimeOffset(2026, 1, 1, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.MaxDate, new DateTimeOffset(2026, 3, 31, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        // April onwards is out of range, so End lands on the last month that is not.
+        component.Find(".bit-cal-pkb[tabindex='0']").KeyDown(new KeyboardEventArgs { Key = "End" });
+
+        Assert.AreEqual("Mar", component.Find(".bit-cal-pkb[tabindex='0']").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldRespectAllowDeselect()
+    {
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.AllowDeselect, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15").Click();
+
+        Assert.IsNull(value);
+        // The month the day was deselected in stays on screen rather than jumping back onto today.
+        Assert.Contains("January 2026", component.Find(".bit-cal-pkt, .bit-cal-ptb").TextContent);
+    }
+
+    [TestMethod]
+    public void BitCalendarWithoutAllowDeselectShouldKeepTheValueOnReselect()
+    {
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15").Click();
+
+        Assert.IsNotNull(value);
+    }
+
+    [TestMethod,
+        DataRow(true),
+        DataRow(false)]
+    public void BitCalendarShouldRespectHighlightToday(bool highlightToday)
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.HighlightToday, highlightToday);
+        });
+
+        Assert.AreEqual(highlightToday, component.FindAll(".bit-cal-dtd").Count > 0);
+    }
+
+    [TestMethod,
+        DataRow(BitSize.Small, "bit-cal-sm"),
+        DataRow(BitSize.Medium, "bit-cal-md"),
+        DataRow(BitSize.Large, "bit-cal-lg")]
+    public void BitCalendarShouldRespectSize(BitSize size, string expectedClass)
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Size, size);
+        });
+
+        Assert.IsTrue(component.Find(".bit-cal").ClassList.Contains(expectedClass));
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldRenderHeaderAndFooterTemplates()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.HeaderTemplate, (RenderFragment)(builder => builder.AddContent(0, "the-header")));
+            parameters.Add(p => p.FooterTemplate, (RenderFragment)(builder => builder.AddContent(0, "the-footer")));
+        });
+
+        Assert.AreEqual("the-header", component.Find(".bit-cal-hdr").TextContent.Trim());
+        Assert.AreEqual("the-footer", component.Find(".bit-cal-ftr").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarEventDialogShouldBeAModalDialogNamedByItsHeading()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.Events, [
+                new BitCalendarEvent { Title = "Meeting", Date = new DateOnly(2026, 1, 15) }
+            ]);
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15").Click();
+
+        var dialog = component.Find(".bit-cal-emc");
+
+        Assert.AreEqual("dialog", dialog.GetAttribute("role"));
+        Assert.AreEqual("true", dialog.GetAttribute("aria-modal"));
+        Assert.AreEqual("-1", dialog.GetAttribute("tabindex"));
+
+        var labelId = dialog.GetAttribute("aria-labelledby");
+
+        Assert.IsFalse(string.IsNullOrEmpty(labelId));
+        // An attribute selector rather than "#id": the generated id can start with a digit, which is not a
+        // valid CSS id selector.
+        Assert.IsNotNull(component.Find($"[id='{labelId}']"));
+        Assert.IsFalse(string.IsNullOrEmpty(component.Find(".bit-cal-emx").GetAttribute("aria-label")));
+    }
+
+    [TestMethod]
+    public void BitCalendarEventDialogShouldCloseOnEscape()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.Events, [
+                new BitCalendarEvent { Title = "Meeting", Date = new DateOnly(2026, 1, 15) }
+            ]);
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15").Click();
+
+        component.Find(".bit-cal-emc").KeyDown(new KeyboardEventArgs { Key = "Escape" });
+
+        Assert.IsEmpty(component.FindAll(".bit-cal-eov"));
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldRespectShowEventDetails()
+    {
+        DateTimeOffset? value = null;
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowEventDetails, false);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Bind(p => p.Value, value, v => value = v);
+            parameters.Add(p => p.Events, [
+                new BitCalendarEvent { Title = "Meeting", Date = new DateOnly(2026, 1, 15) }
+            ]);
+        });
+
+        var day = component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15");
+
+        Assert.IsFalse(day.HasAttribute("aria-haspopup"));
+
+        day.Click();
+
+        // The dialog stays away, but the day is selected all the same and the indicator still reports the event.
+        Assert.IsEmpty(component.FindAll(".bit-cal-eov"));
+        Assert.AreEqual(15, value!.Value.Day);
+        Assert.IsNotEmpty(component.FindAll(".bit-cal-evi"));
+    }
+
+    [TestMethod]
+    public void BitCalendarDayShouldNameItsEventsForScreenReaders()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.Events, [
+                new BitCalendarEvent { Title = "Standup", Date = new DateOnly(2026, 1, 15), StartTime = new TimeOnly(9, 0) }
+            ]);
+        });
+
+        var day = component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15");
+        var label = day.GetAttribute("aria-label");
+
+        Assert.Contains("Standup", label!);
+        Assert.AreEqual("dialog", day.GetAttribute("aria-haspopup"));
+        // The indicator dot says the same thing to everyone else, so it is not read out a second time.
+        Assert.AreEqual("true", component.Find(".bit-cal-evi").GetAttribute("aria-hidden"));
+    }
+
+    [TestMethod]
+    public void BitCalendarEventsShouldBeOrderedLikeAnAgenda()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.Events, [
+                new BitCalendarEvent { Title = "Afternoon", Date = new DateOnly(2026, 1, 15), StartTime = new TimeOnly(15, 0) },
+                new BitCalendarEvent { Title = "Morning", Date = new DateOnly(2026, 1, 15), StartTime = new TimeOnly(9, 0) },
+                new BitCalendarEvent { Title = "AllDay", Date = new DateOnly(2026, 1, 15) }
+            ]);
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15").Click();
+
+        var titles = component.FindAll(".bit-cal-eit").Select(t => t.TextContent.Trim()).ToList();
+
+        CollectionAssert.AreEqual(new[] { "AllDay", "Morning", "Afternoon" }, titles);
+    }
+
+    [TestMethod]
+    public void BitCalendarTimePickerButtonsShouldHaveAccessibleNames()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimePickerIncreaseHourTitle, "Up an hour");
+        });
+
+        var buttons = component.FindAll(".bit-cal-tbt");
+
+        Assert.AreEqual("Up an hour", buttons[0].GetAttribute("aria-label"));
+
+        foreach (var button in buttons)
+        {
+            Assert.IsFalse(string.IsNullOrEmpty(button.GetAttribute("aria-label")) && button.TextContent.Trim().Length == 0,
+                "every spin button of the time picker has a name of its own");
+        }
+    }
+
+    [TestMethod]
+    public void BitCalendarAmPmButtonsShouldReportTheirPressedState()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, new CultureInfo("en-US"));
+            parameters.Add(p => p.TimeFormat, BitTimeFormat.TwelveHours);
+            parameters.Add(p => p.Value, new DateTimeOffset(2026, 1, 15, 9, 0, 0, TimeSpan.Zero));
+        });
+
+        Assert.AreEqual("true", component.Find(".bit-cal-bam").GetAttribute("aria-pressed"));
+        Assert.AreEqual("false", component.Find(".bit-cal-bpm").GetAttribute("aria-pressed"));
+
+        component.Find(".bit-cal-bpm").Click();
+
+        Assert.AreEqual("false", component.Find(".bit-cal-bam").GetAttribute("aria-pressed"));
+        Assert.AreEqual("true", component.Find(".bit-cal-bpm").GetAttribute("aria-pressed"));
+    }
+
+    [TestMethod]
+    public void BitCalendarTimePickerOverlayShouldStayOpenWhileTheTimeIsChanged()
+    {
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 10, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.ShowTimePickerAsOverlay, true);
+            parameters.Add(p => p.ShowMonthPicker, false);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // The clock button of the day picker's header opens the overlay, which is the last of its nav buttons.
+        component.FindAll(".bit-cal-dwp .bit-cal-nbt").Last().Click();
+
+        Assert.IsNotEmpty(component.FindAll(".bit-cal-twp"));
+
+        var increaseHour = component.FindAll(".bit-cal-tbt")[0];
+        increaseHour.PointerDown();
+        increaseHour.PointerUp();
+
+        // Picking a time is not a parameter change, so the overlay it was picked in is still on screen.
+        Assert.AreEqual(11, value!.Value.Hour);
+        Assert.IsNotEmpty(component.FindAll(".bit-cal-twp"));
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldReportItsStateOnTheDaysGrid()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ReadOnly, true);
+            parameters.Add(p => p.Required, true);
+        });
+
+        var grid = component.Find(".bit-cal-grd");
+
+        Assert.AreEqual("true", grid.GetAttribute("aria-readonly"));
+        Assert.AreEqual("true", grid.GetAttribute("aria-required"));
+        // A read-only day still browses, so it stays focusable and reports that it selects nothing instead.
+        Assert.AreEqual("true", component.Find(".bit-cal-dbt").GetAttribute("aria-disabled"));
+        Assert.IsFalse(component.Find(".bit-cal-dbt").HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldBeANamedGroupOnlyWhenItIsGivenAName()
+    {
+        var component = RenderComponent<BitCalendar>();
+
+        Assert.IsFalse(component.Find(".bit-cal").HasAttribute("role"));
+
+        component.Render(parameters => parameters.Add(p => p.AriaLabel, "Departure date"));
+
+        Assert.AreEqual("group", component.Find(".bit-cal").GetAttribute("role"));
+        Assert.AreEqual("Departure date", component.Find(".bit-cal").GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldSeparateTheStylesOfTheStatesOfADay()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Value, DateTimeOffset.Now);
+            parameters.Add(p => p.Styles, new BitCalendarClassStyles
+            {
+                DayButton = "opacity:1",
+                TodayDayButton = "color:red",
+                SelectedDayButton = "background:blue"
+            });
+        });
+
+        // Today and the selection are the same day here, so three styles land on one cell: without a semicolon
+        // between them the last declaration of one and the first of the next run into a single invalid one.
+        var style = component.Find(".bit-cal-dbt.bit-cal-dbs").GetAttribute("style");
+
+        Assert.Contains("background:blue;", style!);
+        Assert.Contains("color:red;", style!);
+        Assert.Contains("opacity:1", style!);
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldRenderEveryMonthOfACalendarWithThirteenOfThem()
+    {
+        // A leap year of the Hebrew calendar has thirteen months, and a grid that hardcodes twelve either loses
+        // one of them or reads past the end of the year. The calendar of a CultureInfo is read-only, so it is
+        // replaced the same way the demo's CultureInfoHelper replaces it for the Persian calendar.
+        var culture = CultureInfo.CreateSpecificCulture("he-IL");
+        culture.GetType().GetField("_calendar", BindingFlags.NonPublic | BindingFlags.Instance)!
+               .SetValue(culture, new HebrewCalendar());
+        culture.DateTimeFormat.Calendar = new HebrewCalendar();
+
+        // 15 March 2024 falls in the Hebrew year 5784, which is one of the leap years of the cycle.
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, culture);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2024, 3, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        Assert.AreEqual(13, component.FindAll(".bit-cal-pkb").Count);
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldSurviveACultureWithoutShortestDayNames()
+    {
+        var culture = (CultureInfo)CultureInfo.InvariantCulture.Clone();
+        culture.DateTimeFormat.ShortestDayNames = ["", "", "", "", "", "", ""];
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, culture);
+        });
+
+        Assert.AreEqual(7, component.FindAll(".bit-cal-dgh .bit-cal-wlb").Count);
+    }
 }

From e5c07f8a4cb1c05110c6c20dd69bd623fa5bd399 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 20 Sep 2026 08:08:07 +0330
Subject: [PATCH 2/9] resolve review comments

---
 .../Inputs/Calendar/BitCalendarDemo.razor     |  4 +--
 .../Calendar/BitCalendarDemo.razor.samples.cs | 29 +++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
index 10795967926..a00e58b7df9 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -211,7 +211,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Templates" RazorCode="@example10RazorCode" Id="example10">
+    <DemoExample Title="Templates" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
         <div>
             <b>DayCellTemplate</b>, <b>MonthCellTemplate</b> and <b>YearCellTemplate</b> replace the content of a
             cell, while <b>HeaderTemplate</b> and <b>FooterTemplate</b> add markup of your own above and below
@@ -504,7 +504,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example18RazorCode" Id="example18">
+    <DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
         <div>
             <b>Style</b> and <b>Class</b> land on the root, while <b>Styles</b> and <b>Classes</b> reach every
             part of the calendar on its own — see
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
index d629a805161..75468b2ba57 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
@@ -251,6 +251,11 @@ private void HandleOnEventDayClick(DateTimeOffset? date)
 </BitCalendar>
 <div>Selected: @(footerDate.HasValue ? footerDate.Value.ToString(""d"") : ""-"")</div>";
 
+    private readonly string example10CsharpCode = @"
+private CultureInfo culture = CultureInfo.CurrentUICulture;
+
+private DateTimeOffset? footerDate;";
+
     private readonly string example11RazorCode = @"
 <BitCalendar GoToTodayTitle=""برو به امروز"" Culture=""CultureInfoHelper.GetFaIrCultureWithFarsiNames()"" />
 
@@ -502,6 +507,30 @@ private void HandleInvalidSubmit()
     <BitCalendar Events=""@calendarEvents"" />
 </div>";
 
+    private readonly string example18CsharpCode = @"
+private DateTimeOffset? cssVarsDate = DateTimeOffset.Now.AddDays(2);
+
+private List<BitCalendarEvent> calendarEvents =
+[
+    new() { Title = ""Team standup"",
+            Body = ""Daily sync with the engineering team."",
+            Date = DateOnly.FromDateTime(DateTime.Today),
+            StartTime = new TimeOnly(9, 0),
+            EndTime = new TimeOnly(9, 30) },
+    new() { Title = ""Product review"",
+            Body = ""Quarterly product review — prepare slides beforehand."",
+            Date = DateOnly.FromDateTime(DateTime.Today),
+            StartTime = new TimeOnly(14, 0),
+            EndTime = new TimeOnly(15, 0) },
+    new() { Title = ""All-day workshop"",
+            Body = ""Full-day frontend architecture workshop."",
+            Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)) },
+    new() { Title = ""Client call"",
+            Body = ""Introductory call with the new client."",
+            Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
+            StartTime = new TimeOnly(11, 30) }
+];";
+
     private readonly string example19RazorCode = @"
 <BitCalendar Dir=""BitDir.Rtl"" ShowTimePicker ShowWeekNumbers />";
 }

From b28c862d3aa08b87f5c812f37657b0d99359a531 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 20 Sep 2026 11:01:01 +0330
Subject: [PATCH 3/9] improve further

---
 .../Inputs/Calendar/BitCalendar.razor         |  61 +++-
 .../Inputs/Calendar/BitCalendar.razor.cs      | 213 ++++++++++--
 .../Inputs/Calendar/BitCalendar.scss          |  63 +++-
 .../Inputs/Calendar/BitCalendarClassStyles.cs |  12 +-
 .../Inputs/Calendar/BitCalendarEvent.cs       |   6 +
 .../Inputs/Calendar/BitCalendarDemo.razor     |  32 +-
 .../Inputs/Calendar/BitCalendarDemo.razor.cs  |  67 +++-
 .../Calendar/BitCalendarDemo.razor.samples.cs |  36 +-
 .../Inputs/Calendar/BitCalendarTests.cs       | 309 +++++++++++++++++-
 9 files changed, 725 insertions(+), 74 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
index 0ff2453398a..1ff9501e81d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
@@ -145,7 +145,12 @@
                     <div role="row" style="@Styles?.DaysHeaderRow" class="bit-cal-dgh @Classes?.DaysHeaderRow">
                         @if (ShowWeekNumbers)
                         {
-                            <div role="columnheader" style="@Styles?.WeekNumbersHeader" class="bit-cal-wlb @Classes?.WeekNumbersHeader"></div>
+                            @* The corner above the week numbers is empty, so it is named rather than read out
+                               as a blank column header before the first weekday of every row. *@
+                            <div role="columnheader"
+                                 aria-label="@WeekNumbersHeaderTitle"
+                                 style="@Styles?.WeekNumbersHeader"
+                                 class="bit-cal-wlb @Classes?.WeekNumbersHeader"></div>
                         }
 
                         @for (var index = 0; index < 7; index++)
@@ -157,9 +162,7 @@
                                  aria-label="@_culture.DateTimeFormat.GetDayName(dayOfWeek)"
                                  style="@Styles?.DayNameHeader"
                                  class="bit-cal-wlb @Classes?.DayNameHeader">
-                                @* A culture is free to leave the shortest day names empty, and the header of
-                                   the column would then be an index out of range. *@
-                                @(dayOfWeekName.HasValue() ? dayOfWeekName[0].ToString() : string.Empty)
+                                @GetNarrowDayName(dayOfWeekName)
                             </div>
                         }
                     </div>
@@ -223,7 +226,10 @@
                                         style="@style"
                                         class="bit-cal-dbt@(klass) @Classes?.DayButton"
                                         tabindex="@(date == focusableDay ? 0 : -1)"
-                                        aria-selected="@(isSelected ? "true" : "false")">
+                                        @* Only the selected cell carries the state, the way the APG's own date
+                                           picker does: an explicit false on the other forty-one would have a
+                                           screen reader say "not selected" on every day arrowed over. *@
+                                        aria-selected="@(isSelected ? "true" : null)">
                                     @if (DayCellTemplate is not null)
                                     {
                                         @DayCellTemplate(GetDateTimeOfDayCell(date))
@@ -234,9 +240,19 @@
                                     }
                                     @if (dayEvents.Count > 0)
                                     {
+                                        @* One dot per event rather than one dot per day, so a day with three
+                                           things on it does not look like a day with one - capped, since past
+                                           a few the row of dots says no more than "several" and the count is
+                                           in the label a screen reader is given and in the tooltip. *@
                                         <span aria-hidden="true"
-                                              style="@Styles?.EventIndicator"
-                                              class="bit-cal-evi @Classes?.EventIndicator">
+                                              style="@Styles?.EventIndicators"
+                                              class="bit-cal-evc @Classes?.EventIndicators">
+                                            @foreach (var evt in GetIndicatorEvents(dayEvents))
+                                            {
+                                                <span style="@Styles?.EventIndicator"
+                                                      class="bit-cal-evi @GetEventIndicatorColorClass(evt) @Classes?.EventIndicator">
+                                                </span>
+                                            }
                                         </span>
                                     }
                                 </button>
@@ -358,10 +374,14 @@
                                             aria-label="@monthName"
                                             disabled="@disabled"
                                             aria-disabled="@(disabled ? "true" : null)"
+                                            @* The current month and year are reported whether or not they are
+                                               painted: HighlightCurrentMonth decides how the grid looks, not
+                                               what a screen reader is able to find in it. *@
+                                            aria-current="@((todayYear == _currentYear && month == todayMonth) ? "date" : null)"
                                             tabindex="@(month == focusableMonth ? 0 : -1)"
-                                            aria-selected="@(selected ? "true" : "false")"
                                             style="@Styles?.MonthButton"
-                                            class="bit-cal-pkb@(GetMonthCellCssClass(month, todayYear, todayMonth)) @Classes?.MonthButton">
+                                            class="bit-cal-pkb@(GetMonthCellCssClass(month, todayYear, todayMonth)) @Classes?.MonthButton"
+                                            aria-selected="@(selected ? "true" : null)">
                                         @if (MonthCellTemplate is not null)
                                         {
                                             @MonthCellTemplate(GetDateTimeOfMonthCell(month))
@@ -457,10 +477,11 @@
                                             aria-label="@year"
                                             disabled="@disabled"
                                             aria-disabled="@(disabled ? "true" : null)"
+                                            aria-current="@(year == todayYear ? "date" : null)"
                                             tabindex="@(year == focusableYear ? 0 : -1)"
                                             style="@Styles?.YearButton"
                                             class="bit-cal-pkb @Classes?.YearButton"
-                                            aria-selected="@(selected ? "true" : "false")">
+                                            aria-selected="@(selected ? "true" : null)">
                                         @if (YearCellTemplate is not null)
                                         {
                                             @YearCellTemplate(year)
@@ -485,17 +506,23 @@
                 <div style="@Styles?.Divider" class="bit-cal-dvd @Classes?.Divider"></div>
             }
 
-            <div style="@Styles?.TimePickerWrapper" class="bit-cal-twp @Classes?.TimePickerWrapper">
+            <div @onkeydown="HandleTimePickerKeyDown"
+                 style="@Styles?.TimePickerWrapper"
+                 class="bit-cal-twp @Classes?.TimePickerWrapper">
                 <div style="@Styles?.TimePickerHeader" class="bit-cal-pkh bit-cal-tph @Classes?.TimePickerHeader">
                     <div style="@Styles?.TimePickerNavWrapper" class="bit-cal-nbc @Classes?.TimePickerNavWrapper">
                         @if (ShowNowButton)
                         {
+                            @* A read-only calendar browses but does not change: the buttons that would set the
+                               time stay focusable, and say that they are unavailable rather than looking
+                               pressable and doing nothing. *@
                             <button @onclick="HandleNowButtonClick"
                                     type="button"
                                     title="@NowButtonTitle"
                                     aria-label="@NowButtonTitle"
                                     style="@Styles?.NowButton"
                                     disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(ReadOnly ? "true" : null)"
                                     class="bit-cal-gtn @Classes?.NowButton">
                                 <i aria-hidden="true"
                                    style="@Styles?.NowButtonIcon"
@@ -527,6 +554,7 @@
                                 title="@TimePickerIncreaseHourTitle"
                                 aria-label="@TimePickerIncreaseHourTitle"
                                 disabled="@(IsEnabled is false)"
+                                aria-disabled="@(ReadOnly ? "true" : null)"
                                 style="@Styles?.TimePickerIncreaseHourButton"
                                 class="bit-cal-tbt @Classes?.TimePickerIncreaseHourButton">
                             <i aria-hidden="true"
@@ -537,7 +565,8 @@
                                @bind="@_hourView"
                                @bind:event="oninput"
                                @onfocus="HandleOnTimeHourFocus"
-                               min="0"
+                               @onkeydown="e => HandleOnTimeInputKeyDown(e, true)"
+                               min="@(TimeFormat == BitTimeFormat.TwelveHours ? "1" : "0")"
                                max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")"
                                type="number"
                                inputmode="numeric"
@@ -555,6 +584,7 @@
                                 title="@TimePickerDecreaseHourTitle"
                                 aria-label="@TimePickerDecreaseHourTitle"
                                 disabled="@(IsEnabled is false)"
+                                aria-disabled="@(ReadOnly ? "true" : null)"
                                 style="@Styles?.TimePickerDecreaseHourButton"
                                 class="bit-cal-tbt @Classes?.TimePickerDecreaseHourButton">
                             <i aria-hidden="true"
@@ -571,6 +601,7 @@
                                 title="@TimePickerIncreaseMinuteTitle"
                                 aria-label="@TimePickerIncreaseMinuteTitle"
                                 disabled="@(IsEnabled is false)"
+                                aria-disabled="@(ReadOnly ? "true" : null)"
                                 style="@Styles?.TimePickerIncreaseMinuteButton"
                                 class="bit-cal-tbt @Classes?.TimePickerIncreaseMinuteButton">
                             <i aria-hidden="true"
@@ -581,6 +612,7 @@
                                @bind="@_minuteView"
                                @bind:event="oninput"
                                @onfocus="HandleOnTimeMinuteFocus"
+                               @onkeydown="e => HandleOnTimeInputKeyDown(e, false)"
                                min="0"
                                max="59"
                                type="number"
@@ -599,6 +631,7 @@
                                 title="@TimePickerDecreaseMinuteTitle"
                                 aria-label="@TimePickerDecreaseMinuteTitle"
                                 disabled="@(IsEnabled is false)"
+                                aria-disabled="@(ReadOnly ? "true" : null)"
                                 style="@Styles?.TimePickerDecreaseMinuteButton"
                                 class="bit-cal-tbt @Classes?.TimePickerDecreaseMinuteButton">
                             <i aria-hidden="true"
@@ -615,6 +648,7 @@
                             <button @onclick="HandleOnAmClick"
                                     type="button"
                                     disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(ReadOnly ? "true" : null)"
                                     aria-pressed="@(IsAm() is true ? "true" : "false")"
                                     style="@Styles?.TimePickerAmButton"
                                     class="bit-cal-tbt bit-cal-bam @(IsAm() is true ? "bit-cal-bns" : string.Empty) @Classes?.TimePickerAmButton">
@@ -624,6 +658,7 @@
                             <button @onclick="HandleOnPmClick"
                                     type="button"
                                     disabled="@(IsEnabled is false)"
+                                    aria-disabled="@(ReadOnly ? "true" : null)"
                                     aria-pressed="@(IsAm() is false ? "true" : "false")"
                                     style="@Styles?.TimePickerPmButton"
                                     class="bit-cal-tbt bit-cal-bpm @(IsAm() is false ? "bit-cal-bns" : string.Empty) @Classes?.TimePickerPmButton">
@@ -670,7 +705,7 @@
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
-                <ul class="bit-cal-eml">
+                <ul style="@Styles?.EventList" class="bit-cal-eml @Classes?.EventList">
                     @foreach (var evt in GetEventModalEvents())
                     {
                         <li class="bit-cal-emi @Classes?.EventItem"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
index 57306506792..c899ac6f6ce 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
@@ -73,19 +73,28 @@ private int _hourView
         }
         set
         {
-            if (value > 23)
-            {
-                _hour = 23;
-            }
-            else if (value < 0)
+            if (IsEnabled is false || ReadOnly) return;
+
+            int candidate;
+
+            if (TimeFormat == BitTimeFormat.TwelveHours)
             {
-                _hour = 0;
+                // A value typed into the hour is an hour of the clock face (1-12), so it lands in the half of
+                // the day the picker is already on: typing 5 into an afternoon time means 17:00, not a silent
+                // flip to the morning - which half the time is in is what the AM/PM pair is there to change.
+                // Both 12 and 0 mean the top of the clock, which is hour zero of the half.
+                candidate = BitTimeSteps.Wrap(value, 12) + (_hour >= 12 ? 12 : 0);
             }
             else
             {
-                _hour = value;
+                candidate = Math.Clamp(value, 0, 23);
             }
 
+            // What the spin buttons produce is held to the HourStep grid, so what is typed - and what the
+            // arrow keys of the number input produce, which is a typed value of one more or one less - is
+            // held to it too, instead of the two halves of the same control disagreeing about the same hour.
+            _hour = BitTimeSteps.FindAllowedNear(candidate, _hour, 24, IsHourOnGrid) ?? _hour;
+
             UpdateTime();
         }
     }
@@ -96,18 +105,10 @@ private int _minuteView
         get => _minute;
         set
         {
-            if (value > 59)
-            {
-                _minute = 59;
-            }
-            else if (value < 0)
-            {
-                _minute = 0;
-            }
-            else
-            {
-                _minute = value;
-            }
+            if (IsEnabled is false || ReadOnly) return;
+
+            // Held to the MinuteStep grid for the same reason the hour above is held to its own.
+            _minute = BitTimeSteps.FindAllowedNear(Math.Clamp(value, 0, 59), _minute, 60, IsMinuteOnGrid) ?? _minute;
 
             UpdateTime();
         }
@@ -347,9 +348,9 @@ private int _minuteView
     /// The step, in hours, the spin buttons of the time picker move the hour by.
     /// </summary>
     /// <remarks>
-    /// A step greater than 1 lays a grid over the day that every hour the buttons produce sits on, starting at
-    /// midnight, so a picker that only accepts times on a three-hour grid can say so. A time entered as text is
-    /// not held to it. Values below 1 are treated as 1.
+    /// A step greater than 1 lays a grid over the day that every hour the picker produces sits on, starting at
+    /// midnight, so a picker that only accepts times on a three-hour grid can say so. The buttons, the keys and
+    /// what is typed into the hour are all held to it. Values below 1 are treated as 1.
     /// </remarks>
     [Parameter] public int HourStep { get; set; } = 1;
 
@@ -381,9 +382,9 @@ private int _minuteView
     /// The step, in minutes, the spin buttons of the time picker move the minute by.
     /// </summary>
     /// <remarks>
-    /// A step greater than 1 lays a grid over the hour that every minute the buttons produce sits on, starting
-    /// at the top of the hour, which is what turns it into a five-minute or quarter-hour picker. A time entered
-    /// as text is not held to it. Values below 1 are treated as 1.
+    /// A step greater than 1 lays a grid over the hour that every minute the picker produces sits on, starting
+    /// at the top of the hour, which is what turns it into a five-minute or quarter-hour picker. The buttons,
+    /// the keys and what is typed into the minute are all held to it. Values below 1 are treated as 1.
     /// </remarks>
     [Parameter] public int MinuteStep { get; set; } = 1;
 
@@ -661,6 +662,11 @@ private int _minuteView
     /// </summary>
     [Parameter] public CalendarWeekRule? WeekNumberRule { get; set; }
 
+    /// <summary>
+    /// The accessible name of the empty column header above the week numbers.
+    /// </summary>
+    [Parameter] public string WeekNumbersHeaderTitle { get; set; } = "Week";
+
     /// <summary>
     /// The title of the week number (tooltip).
     /// </summary>
@@ -1349,6 +1355,16 @@ private DayOfWeek GetDayOfWeek(int index)
         return (DayOfWeek)dayOfWeek;
     }
 
+    // The single letter each weekday column is headed with, taken off the culture's shortest day name. A
+    // culture is free to leave those empty, which would be an index out of range, and the first character of
+    // one that is written as a surrogate pair is two of them - half of it is not a character at all.
+    private static string GetNarrowDayName(string name)
+    {
+        if (name.HasNoValue()) return string.Empty;
+
+        return char.IsHighSurrogate(name[0]) && name.Length > 1 ? name[..2] : name[..1];
+    }
+
     private int GetWeekNumber(int weekIndex)
     {
         // The first cells of the week can be empty at the very edge of the calendar's supported range, so the
@@ -1381,6 +1397,26 @@ private void ToggleTimePickerOverlay()
         MoveFocusToTheVisiblePicker();
     }
 
+    // A picker laid over the day grid is a surface the keyboard was sent into, so Escape is what leaves it -
+    // the same way it leaves every other dismissible surface in the library - and the day grid underneath
+    // takes the focus back. A picker that sits beside the day grid is not covering anything and stays put.
+    private void DismissMonthPickerOverlay()
+    {
+        if (ShowMonthPickerAsOverlay is false && (ShowTimePicker && ShowTimePickerAsOverlay is false) is false) return;
+
+        ToggleMonthPickerOverlay();
+    }
+
+    /// <inheritdoc cref="DismissMonthPickerOverlay"/>
+    private void HandleTimePickerKeyDown(KeyboardEventArgs e)
+    {
+        if (IsEnabled is false) return;
+        if (e.Key is not "Escape") return;
+        if (ShowTimePickerAsOverlay is false) return;
+
+        ToggleTimePickerOverlay();
+    }
+
     private void MoveFocusToTheVisiblePicker()
     {
         if (DayPickerIsVisible())
@@ -1835,6 +1871,12 @@ private async Task HandleMonthKeyDown(KeyboardEventArgs e, int month)
     {
         if (IsEnabled is false) return;
 
+        if (e.Key is "Escape")
+        {
+            DismissMonthPickerOverlay();
+            return;
+        }
+
         if (e.Key is "PageUp" or "PageDown")
         {
             var isNext = e.Key is "PageDown";
@@ -1907,6 +1949,15 @@ private void HandleYearKeyDown(KeyboardEventArgs e, int year)
     {
         if (IsEnabled is false) return;
 
+        // Escape leaves the year grid the way it was reached: back to the months of the year it is showing,
+        // and from there - a second Escape - out of the overlay entirely.
+        if (e.Key is "Escape")
+        {
+            ToggleBetweenMonthAndYearPicker();
+            FocusMonthCell(GetFocusableMonth());
+            return;
+        }
+
         if (e.Key is "PageUp" or "PageDown")
         {
             var isNext = e.Key is "PageDown";
@@ -1985,9 +2036,9 @@ private async Task HandleDayKeyDown(KeyboardEventArgs e, DateTime date)
             "ArrowUp" => FindEnabledDay(date, -7),
             "ArrowDown" => FindEnabledDay(date, 7),
             "Home" => FindEnabledDayTowards(GetStartOfWeek(date), date),
-            "End" => FindEnabledDayTowards(GetStartOfWeek(date).AddDays(6), date),
-            "PageUp" => FindEnabledDayTowards(e.ShiftKey ? _culture.Calendar.AddYears(date, -1) : _culture.Calendar.AddMonths(date, -1), date),
-            "PageDown" => FindEnabledDayTowards(e.ShiftKey ? _culture.Calendar.AddYears(date, 1) : _culture.Calendar.AddMonths(date, 1), date),
+            "End" => FindEnabledDayTowards(GetEndOfWeek(date), date),
+            "PageUp" => FindEnabledDayTowards(e.ShiftKey ? TryAddYears(date, -1) : TryAddMonths(date, -1), date),
+            "PageDown" => FindEnabledDayTowards(e.ShiftKey ? TryAddYears(date, 1) : TryAddMonths(date, 1), date),
             _ => null
         };
 
@@ -1996,13 +2047,57 @@ private async Task HandleDayKeyDown(KeyboardEventArgs e, DateTime date)
         await MoveFocusToDay(target.Value);
     }
 
+    // A step that runs off the end of what a DateTime, or of what the culture's own calendar, can represent
+    // has nowhere to land - so it is refused rather than thrown, and the key simply moves the focus nowhere.
+    // The days at the very edge of the range are reachable all the same: every step that does land is taken.
+    private static DateTime? TryAddDays(DateTime date, int days)
+    {
+        try
+        {
+            return date.AddDays(days);
+        }
+        catch (ArgumentOutOfRangeException)
+        {
+            return null;
+        }
+    }
+
+    /// <inheritdoc cref="TryAddDays"/>
+    private DateTime? TryAddMonths(DateTime date, int months)
+    {
+        try
+        {
+            return _culture.Calendar.AddMonths(date, months);
+        }
+        catch (ArgumentException)
+        {
+            return null;
+        }
+    }
+
+    /// <inheritdoc cref="TryAddDays"/>
+    private DateTime? TryAddYears(DateTime date, int years)
+    {
+        try
+        {
+            return _culture.Calendar.AddYears(date, years);
+        }
+        catch (ArgumentException)
+        {
+            return null;
+        }
+    }
+
     private DateTime? FindEnabledDay(DateTime from, int stepDays)
     {
         var date = from;
 
         for (var i = 0; i < 366; i++)
         {
-            date = date.AddDays(stepDays);
+            var next = TryAddDays(date, stepDays);
+            if (next.HasValue is false) return null;
+
+            date = next.Value;
 
             if (IsWeekDayOutOfMinAndMaxDate(date)) return null;
 
@@ -2012,11 +2107,14 @@ private async Task HandleDayKeyDown(KeyboardEventArgs e, DateTime date)
         return null;
     }
 
-    private DateTime? FindEnabledDayTowards(DateTime target, DateTime origin)
+    private DateTime? FindEnabledDayTowards(DateTime? target, DateTime origin)
     {
-        var step = target < origin ? 1 : -1;
-        var date = target;
+        if (target.HasValue is false) return null;
 
+        var step = target.Value < origin ? 1 : -1;
+        var date = target.Value;
+
+        // Both ends are days the calendar can represent, so every day walked between them is one too.
         while (date != origin)
         {
             if (IsDayDisabled(date) is false) return date;
@@ -2027,11 +2125,19 @@ private async Task HandleDayKeyDown(KeyboardEventArgs e, DateTime date)
         return null;
     }
 
-    private DateTime GetStartOfWeek(DateTime date)
+    private DateTime? GetStartOfWeek(DateTime date)
     {
         var diff = ((int)date.DayOfWeek - (int)GetFirstDayOfWeek() + 7) % 7;
 
-        return date.AddDays(-diff);
+        return TryAddDays(date, -diff);
+    }
+
+    /// <inheritdoc cref="GetStartOfWeek"/>
+    private DateTime? GetEndOfWeek(DateTime date)
+    {
+        var start = GetStartOfWeek(date);
+
+        return start.HasValue ? TryAddDays(start.Value, 6) : null;
     }
 
     private async Task MoveFocusToDay(DateTime target)
@@ -2066,6 +2172,21 @@ private async Task NotifyMonthChange(int previousYear, int previousMonth)
         await OnMonthChange.InvokeAsync(new(date, _timeZone.GetUtcOffset(date)));
     }
 
+    // How many dots a day can wear before the row of them stops saying anything a shorter row does not.
+    private const int MAX_EVENT_INDICATORS = 3;
+
+    private static IEnumerable<BitCalendarEvent> GetIndicatorEvents(IReadOnlyList<BitCalendarEvent> events)
+    {
+        return events.Take(MAX_EVENT_INDICATORS);
+    }
+
+    // An event of its own color paints its dot with it; one without takes whatever the calendar's event color
+    // is, which is the Color role unless --bit-Calendar-event-color says otherwise.
+    private static string? GetEventIndicatorColorClass(BitCalendarEvent evt)
+    {
+        return evt.Color.HasValue ? BitCssClasses.Color(evt.Color, "bit-cal-evi") : null;
+    }
+
     private IReadOnlyList<BitCalendarEvent> GetDayEvents(DateTime date)
     {
         var dateOnly = DateOnly.FromDateTime(date);
@@ -2348,7 +2469,7 @@ private void ResetCts()
     // one, and a step that does not divide the day wraps to the top of the grid instead of drifting off it.
     private void ChangeHour(bool isNext)
     {
-        _hour = BitTimeSteps.StepToAllowed(_hour, isNext, 24, h => BitTimeSteps.IsOnGrid(h, HourStep, 0, 24)) ?? _hour;
+        _hour = BitTimeSteps.StepToAllowed(_hour, isNext, 24, IsHourOnGrid) ?? _hour;
 
         UpdateTime();
     }
@@ -2356,11 +2477,31 @@ private void ChangeHour(bool isNext)
     /// <inheritdoc cref="ChangeHour"/>
     private void ChangeMinute(bool isNext)
     {
-        _minute = BitTimeSteps.StepToAllowed(_minute, isNext, 60, m => BitTimeSteps.IsOnGrid(m, MinuteStep, 0, 60)) ?? _minute;
+        _minute = BitTimeSteps.StepToAllowed(_minute, isNext, 60, IsMinuteOnGrid) ?? _minute;
 
         UpdateTime();
     }
 
+    // The grid HourStep and MinuteStep lay over the day and over the hour, which everything that moves the
+    // time - the spin buttons, the keys, what is typed - is held to, so no two of them can disagree about
+    // which times the picker offers.
+    private bool IsHourOnGrid(int hour) => BitTimeSteps.IsOnGrid(hour, HourStep, 0, 24);
+
+    /// <inheritdoc cref="IsHourOnGrid"/>
+    private bool IsMinuteOnGrid(int minute) => BitTimeSteps.IsOnGrid(minute, MinuteStep, 0, 60);
+
+    // The hour and the minute answer PageUp and PageDown with the same step the spin buttons next to them
+    // move by, so the time can be set without leaving the keyboard or the field. (The arrow keys are the
+    // number input's own, and the setter above snaps the one-step move they make onto the grid.)
+    private void HandleOnTimeInputKeyDown(KeyboardEventArgs e, bool isHour)
+    {
+        if (IsEnabled is false || ReadOnly) return;
+
+        if (e.Key is not ("PageUp" or "PageDown")) return;
+
+        ChangeTime(e.Key is "PageUp", isHour);
+    }
+
     public bool DayPickerIsVisible()
     {
         if (_showMonthPicker is false && _showTimePicker is false) return true;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
index 37a35961701..c92ec92a047 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
@@ -32,8 +32,11 @@
 //   --bit-Calendar-highlighted-background    background of a HighlightedDates day          (default: $clr-bg-ter)
 //   --bit-Calendar-week-number-color         text color of a week number                   (default: $clr-fg-sec)
 //   --bit-Calendar-week-number-background    background of a week number                   (default: $clr-bg-sec)
-//   --bit-Calendar-event-color               color of the event indicator dot              (default: the Color role's main color)
-//   --bit-Calendar-event-size                diameter of the event indicator dot           (default: spacing(0.5))
+//   --bit-Calendar-event-color               color of an event indicator dot the event
+//                                            itself named no color for                    (default: the Color role's main color)
+//   --bit-Calendar-event-size                diameter of an event indicator dot            (default: spacing(0.5))
+//   --bit-Calendar-event-gap                 space between the dots of a day carrying
+//                                            more than one event                          (default: spacing(0.25))
 
 // The default size, declared as a mixin so the root can fall back to it without a size class. The two values
 // an author can override are named apart from the ones they feed (see the indirection on .bit-cal below), so
@@ -204,6 +207,10 @@
     color: var(--bit-Calendar-color, #{$clr-fg-pri});
     font-size: var(--bit-cal-cell-fs);
     border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
+    // Only what a state actually changes is transitioned, so the cell that is hovered or selected eases
+    // rather than snapping - and collapses to nothing under prefers-reduced-motion, which the duration
+    // token carries on its own.
+    transition: background-color $mot-duration-short $mot-easing, color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
@@ -337,6 +344,7 @@
 
 .bit-cal-ptb {
     cursor: pointer;
+    transition: background-color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
@@ -375,6 +383,7 @@
     font-size: var(--bit-cal-cell-fs);
     color: var(--bit-Calendar-color, #{$clr-fg-pri});
     border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
+    transition: background-color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
@@ -417,6 +426,7 @@
     font-size: var(--bit-cal-cell-fs);
     color: var(--bit-Calendar-color, #{$clr-fg-pri});
     border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
+    transition: background-color $mot-duration-short $mot-easing, color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
@@ -491,6 +501,7 @@
     font-size: var(--bit-cal-cell-fs);
     color: var(--bit-Calendar-color, #{$clr-fg-pri});
     border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
+    transition: background-color $mot-duration-short $mot-easing, color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
@@ -594,7 +605,9 @@
     font-weight: $tg-font-weight;
     width: var(--bit-cal-tcell-size);
     color: var(--bit-Calendar-color, #{$clr-fg-pri});
-    background-color: $clr-bg-pri;
+    // Transparent like every other part of the calendar, so the two number inputs sit on whatever surface
+    // the calendar itself is painted with rather than punching two opaque squares through a tinted one.
+    background-color: transparent;
 
     &::-webkit-inner-spin-button, // Chrome, Safari, Edge, Opera
     &::-webkit-outer-spin-button {
@@ -613,10 +626,14 @@
     }
 }
 
+// The two halves of the day are labelled buttons, so they carry the tracking and the case a design system
+// gives the label of an interactive control (Material upper-cases them; Fluent leaves both alone).
 .bit-cal-bam,
 .bit-cal-bpm {
     font-size: $tg-fs-sm;
     font-weight: $tg-font-weight;
+    letter-spacing: $tg-ctrl-letter-spacing;
+    text-transform: $tg-ctrl-text-transform;
 }
 
 .bit-cal-bns {
@@ -648,16 +665,31 @@
     padding: var(--bit-Calendar-padding, #{spacing(1.5)});
 }
 
-.bit-cal-evi {
+// The dots of a day sit in a row of their own along the bottom of its cell, so a second and a third stay
+// centered under the number instead of each having to know where the others are.
+.bit-cal-evc {
     left: 50%;
+    display: flex;
     position: absolute;
-    border-radius: $shp-radius-full;
+    pointer-events: none;
+    gap: var(--bit-Calendar-event-gap, #{spacing(0.25)});
     bottom: spacing(0.125);
     transform: translateX(-50%);
+}
+
+.bit-cal-evi {
+    flex: none;
+    border-radius: $shp-radius-full;
     width: var(--bit-Calendar-event-size, #{spacing(0.5)});
     height: var(--bit-Calendar-event-size, #{spacing(0.5)});
-    background-color: var(--bit-Calendar-event-color, var(--bit-cal-clr));
-    transition: transform $mot-duration $mot-easing;
+    background-color: var(--bit-cal-evt-clr, var(--bit-Calendar-event-color, var(--bit-cal-clr)));
+}
+
+// Today is painted with the Color role's main color, which is what a dot of no color of its own is painted
+// with too - so on today the dot falls back to the color that reads against it instead of disappearing into
+// it. An event that named a color keeps it, here as everywhere else.
+.bit-cal-dtd .bit-cal-evi {
+    background-color: var(--bit-cal-evt-clr, var(--bit-Calendar-event-color, var(--bit-cal-clr-txt)));
 }
 
 .bit-cal-eov {
@@ -701,12 +733,19 @@
 
 .bit-cal-emx {
     border: none;
+    display: flex;
     cursor: pointer;
+    align-items: center;
     color: $clr-fg-sec;
     font-size: $tg-fs-sm;
+    justify-content: center;
     background-color: transparent;
     padding: spacing(0.25) spacing(1);
+    // The 24px floor of WCAG 2.2's target-size minimum: the glyph alone is a few pixels short of it.
+    min-width: spacing(3);
+    min-height: spacing(3);
     border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
+    transition: background-color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
@@ -765,6 +804,11 @@
         --bit-cal-clr-active: #{role($tokens, active)};
         --bit-cal-clr-focus: #{role($tokens, focus)};
     }
+
+    // The color of a single event, set on its own dot, so a day can carry dots of several colors at once.
+    .bit-cal-evi-#{$role} {
+        --bit-cal-evt-clr: #{role($tokens, main)};
+    }
 }
 
 
@@ -839,6 +883,11 @@
         forced-color-adjust: none;
     }
 
+    // Today is painted Highlight in this palette, which CanvasText does not have to read against.
+    .bit-cal-dtd .bit-cal-evi {
+        background-color: HighlightText;
+    }
+
     // An outline rather than a border: it gives the calendar an edge in a palette that strips every
     // background without taking a couple of pixels out of the grid to do it.
     .bit-cal-cnt {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarClassStyles.cs
index c485b718a8d..361f1291262 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarClassStyles.cs
@@ -353,7 +353,12 @@ public class BitCalendarClassStyles
     public string? YearButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the event indicator dot of the BitCalendar.
+    /// Custom CSS classes/styles for the row of event indicator dots on a day of the BitCalendar.
+    /// </summary>
+    public string? EventIndicators { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for each event indicator dot of the BitCalendar.
     /// </summary>
     public string? EventIndicator { get; set; }
 
@@ -377,6 +382,11 @@ public class BitCalendarClassStyles
     /// </summary>
     public string? EventModalCloseButton { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the list of events in the event modal of the BitCalendar.
+    /// </summary>
+    public string? EventList { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for each event item in the event modal of the BitCalendar.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarEvent.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarEvent.cs
index 6c0b578c460..941e998ca51 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarEvent.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarEvent.cs
@@ -20,6 +20,12 @@ public class BitCalendarEvent
     /// </summary>
     public DateOnly Date { get; set; }
 
+    /// <summary>
+    /// The color of the indicator dot the event puts on its day. Without one the dot takes the color of the
+    /// calendar itself, so a calendar whose events are all of a kind needs to say nothing here.
+    /// </summary>
+    public BitColor? Color { get; set; }
+
     /// <summary>
     /// The optional start time of the event.
     /// </summary>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
index a00e58b7df9..0e9563fd478 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -172,7 +172,8 @@
             <b>ShowTimePicker</b> adds an hour and minute picker beside the day grid, or on top of it with
             <b>ShowTimePickerAsOverlay</b>. <b>TimeFormat</b> switches between the 24-hour and 12-hour clocks,
             <b>ShowNowButton</b> hides the button that jumps to the current time, and <b>HourStep</b> /
-            <b>MinuteStep</b> lay a grid over the day and the hour that the spin buttons land on.
+            <b>MinuteStep</b> lay a grid over the day and the hour that everything the picker produces lands on —
+            the spin buttons, the arrow and page keys, and what is typed.
         </div>
         <br /><br />
         <div class="example-content">
@@ -193,17 +194,21 @@
 
     <DemoExample Title="Events" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>
-            <b>Events</b> marks days with an indicator dot and a tooltip, and clicking such a day opens a modal
-            dialog listing the title, time and description of each of them, all-day first. The dialog is
-            dismissed with Escape or its close button and hands the keyboard back to the day it came from.
-            <b>ShowEventDetails</b> false keeps the indicator and the tooltip but leaves the day's events to the
-            page, and <b>EventTimeFromText</b> / <b>EventTimeUntilText</b> localize the one-sided time rows.
+            <b>Events</b> marks a day with one dot per event (up to three) and a tooltip, and clicking such a day
+            opens a modal dialog listing the title, time and description of each of them, all-day first. An event
+            can name its own <b>Color</b>; the rest take the calendar's. The dialog is dismissed with Escape or
+            its close button and hands the keyboard back to the day it came from. <b>ShowEventDetails</b> false
+            keeps the dots and the tooltip but leaves the day's events to the page, and <b>EventTimeFromText</b> /
+            <b>EventTimeUntilText</b> localize the one-sided time rows.
         </div>
         <br /><br />
         <div class="example-content">
             <div>Events (click a marked day):</div>
             <BitCalendar Events="@calendarEvents" />
             <br /><br />
+            <div>Color per event:</div>
+            <BitCalendar Events="@coloredEvents" />
+            <br /><br />
             <div>ShowEventDetails = false:</div>
             <BitCalendar Events="@calendarEvents" ShowEventDetails="false"
                          OnSelectDate="HandleOnEventDayClick" />
@@ -376,13 +381,18 @@
                     grid, year range in the year grid</li>
                 <li><b>Shift+PageUp</b> / <b>Shift+PageDown</b>: same day of the previous/next year</li>
                 <li><b>Enter</b> / <b>Space</b>: activate the focused cell</li>
-                <li><b>Escape</b>: close the event details dialog</li>
+                <li><b>Escape</b>: leave the event details dialog, the year grid, or a picker laid over the
+                    day grid</li>
             </ul>
+            In the time picker the arrow keys move the hour and the minute by one step of the grid and
+            <b>PageUp</b> / <b>PageDown</b> do the same from anywhere in the field.
+            <br /><br />
             Crossing a month, year or range boundary navigates the calendar and keeps the focus on the cell, and
             disabled cells are skipped. Beyond that: <b>AriaLabel</b> names the whole calendar for a screen
-            reader, each day is announced with its full date and its events, today carries
-            <code>aria-current="date"</code>, and every button — the arrows, the spin buttons, the AM/PM pair —
-            has a name and a state of its own, all of them overridable through the <b>*Title</b> parameters.
+            reader, each day is announced with its full date and its events, today and the current month and
+            year carry <code>aria-current="date"</code>, and every button — the arrows, the spin buttons, the
+            AM/PM pair — has a name and a state of its own, all of them overridable through the <b>*Title</b>
+            parameters.
         </div>
         <br /><br />
         <div class="example-content">
@@ -570,7 +580,7 @@
             <br /><br />
             <div>Set once on an ancestor, inherited by every calendar inside it:</div>
             <br />
-            <div class="example-content" style="--bit-Calendar-background: var(--bit-clr-bg-sec); --bit-Calendar-radius: 1rem; --bit-Calendar-hover-background: var(--bit-clr-bg-ter); --bit-Calendar-event-color: var(--bit-clr-suc); --bit-Calendar-event-size: 0.375rem;">
+            <div class="example-content" style="--bit-Calendar-background: var(--bit-clr-bg-sec); --bit-Calendar-radius: 1rem; --bit-Calendar-hover-background: var(--bit-clr-bg-ter); --bit-Calendar-event-color: var(--bit-clr-suc); --bit-Calendar-event-size: 0.375rem; --bit-Calendar-event-gap: 0.1875rem;">
                 <BitCalendar Events="@calendarEvents" />
             </div>
         </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
index a62ac6d2acd..b3d02646ac7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
@@ -743,6 +743,13 @@ public partial class BitCalendarDemo
             Description = "The rule used to calculate the week numbers. Defaults to the FirstFullWeek rule."
         },
         new()
+        {
+            Name = "WeekNumbersHeaderTitle",
+            Type = "string",
+            DefaultValue = "Week",
+            Description = "The accessible name of the empty column header above the week numbers."
+        },
+        new()
         {
             Name = "WeekNumberTitle",
             Type = "string",
@@ -1461,11 +1468,18 @@ public partial class BitCalendarDemo
                     Description = "Custom CSS classes/styles for each year button of the BitCalendar."
                 },
                 new()
+                {
+                    Name = "EventIndicators",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the row of event indicator dots on a day of the BitCalendar."
+                },
+                new()
                 {
                     Name = "EventIndicator",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the event indicator dot of the BitCalendar."
+                    Description = "Custom CSS classes/styles for each event indicator dot of the BitCalendar."
                 },
                 new()
                 {
@@ -1496,6 +1510,13 @@ public partial class BitCalendarDemo
                     Description = "Custom CSS classes/styles for the event modal close button of the BitCalendar."
                 },
                 new()
+                {
+                    Name = "EventList",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the list of events in the event modal of the BitCalendar."
+                },
+                new()
                 {
                     Name = "EventItem",
                     Type = "string?",
@@ -1553,6 +1574,13 @@ public partial class BitCalendarDemo
                     Description = "The date on which the event occurs."
                 },
                 new()
+                {
+                    Name = "Color",
+                    Type = "BitColor?",
+                    DefaultValue = "null",
+                    Description = "The color of the indicator dot the event puts on its day. Without one the dot takes the color of the calendar itself."
+                },
+                new()
                 {
                     Name = "StartTime",
                     Type = "TimeOnly?",
@@ -1750,13 +1778,19 @@ public partial class BitCalendarDemo
         {
             Name = "--bit-Calendar-event-color",
             DefaultValue = "The Color role's main color",
-            Description = "Color of the indicator dot on a day that carries events.",
+            Description = "Color of an indicator dot whose event named no Color of its own. On today it falls to the on-color instead, which is what reads against the cell.",
         },
         new()
         {
             Name = "--bit-Calendar-event-size",
             DefaultValue = "8px * 0.5 (the spacing unit)",
-            Description = "Diameter of the indicator dot on a day that carries events.",
+            Description = "Diameter of each indicator dot on a day that carries events.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-event-gap",
+            DefaultValue = "8px * 0.25 (the spacing unit)",
+            Description = "Space between the dots of a day that carries more than one event.",
         },
     ];
 
@@ -1811,12 +1845,39 @@ private void HandleOnEventDayClick(DateTimeOffset? date)
         new() { Title = "All-day workshop",
                 Body = "Full-day frontend architecture workshop.",
                 Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)) },
+        new() { Title = "Retro",
+                Body = "Sprint retrospective.",
+                Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)),
+                StartTime = new TimeOnly(16, 0),
+                EndTime = new TimeOnly(17, 0) },
         new() { Title = "Client call",
                 Body = "Introductory call with the new client.",
                 Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
                 StartTime = new TimeOnly(11, 30) }
     ];
 
+    // The same week seen through a page that sorts its events by kind, so each dot says which kind it is.
+    private List<BitCalendarEvent> coloredEvents =
+    [
+        new() { Title = "Release 2.4",
+                Body = "Ship the release once the pipeline is green.",
+                Color = BitColor.Success,
+                Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)) },
+        new() { Title = "On-call handover",
+                Color = BitColor.Warning,
+                Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)),
+                StartTime = new TimeOnly(10, 0) },
+        new() { Title = "Incident review",
+                Color = BitColor.Error,
+                Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)),
+                StartTime = new TimeOnly(15, 0),
+                EndTime = new TimeOnly(16, 0) },
+        new() { Title = "Design sync",
+                Color = BitColor.Info,
+                Date = DateOnly.FromDateTime(DateTime.Today.AddDays(4)),
+                StartTime = new TimeOnly(13, 0) }
+    ];
+
     private CultureInfo culture = CultureInfo.CurrentUICulture;
 
     private bool showMonthPicker = true;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
index 75468b2ba57..8ced34c54dc 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
@@ -126,6 +126,8 @@ private void HandleOnMonthChange(DateTimeOffset month)
     private readonly string example9RazorCode = @"
 <BitCalendar Events=""@calendarEvents"" />
 
+<BitCalendar Events=""@coloredEvents"" />
+
 <BitCalendar Events=""@calendarEvents"" ShowEventDetails=""false"" OnSelectDate=""HandleOnEventDayClick"" />
 <div>Events of the selected day: @eventsOfSelectedDay</div>";
     private readonly string example9CsharpCode = @"
@@ -144,12 +146,38 @@ private void HandleOnMonthChange(DateTimeOffset month)
     new() { Title = ""All-day workshop"",
             Body = ""Full-day frontend architecture workshop."",
             Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)) },
+    new() { Title = ""Retro"",
+            Body = ""Sprint retrospective."",
+            Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)),
+            StartTime = new TimeOnly(16, 0),
+            EndTime = new TimeOnly(17, 0) },
     new() { Title = ""Client call"",
             Body = ""Introductory call with the new client."",
             Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
             StartTime = new TimeOnly(11, 30) }
 ];
 
+private List<BitCalendarEvent> coloredEvents =
+[
+    new() { Title = ""Release 2.4"",
+            Body = ""Ship the release once the pipeline is green."",
+            Color = BitColor.Success,
+            Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)) },
+    new() { Title = ""On-call handover"",
+            Color = BitColor.Warning,
+            Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)),
+            StartTime = new TimeOnly(10, 0) },
+    new() { Title = ""Incident review"",
+            Color = BitColor.Error,
+            Date = DateOnly.FromDateTime(DateTime.Today.AddDays(1)),
+            StartTime = new TimeOnly(15, 0),
+            EndTime = new TimeOnly(16, 0) },
+    new() { Title = ""Design sync"",
+            Color = BitColor.Info,
+            Date = DateOnly.FromDateTime(DateTime.Today.AddDays(4)),
+            StartTime = new TimeOnly(13, 0) }
+];
+
 private string eventsOfSelectedDay = ""-"";
 
 private void HandleOnEventDayClick(DateTimeOffset? date)
@@ -503,7 +531,8 @@ private void HandleInvalidSubmit()
             --bit-Calendar-radius: 1rem;
             --bit-Calendar-hover-background: var(--bit-clr-bg-ter);
             --bit-Calendar-event-color: var(--bit-clr-suc);
-            --bit-Calendar-event-size: 0.375rem;"">
+            --bit-Calendar-event-size: 0.375rem;
+            --bit-Calendar-event-gap: 0.1875rem;"">
     <BitCalendar Events=""@calendarEvents"" />
 </div>";
 
@@ -525,6 +554,11 @@ private void HandleInvalidSubmit()
     new() { Title = ""All-day workshop"",
             Body = ""Full-day frontend architecture workshop."",
             Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)) },
+    new() { Title = ""Retro"",
+            Body = ""Sprint retrospective."",
+            Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)),
+            StartTime = new TimeOnly(16, 0),
+            EndTime = new TimeOnly(17, 0) },
     new() { Title = ""Client call"",
             Body = ""Introductory call with the new client."",
             Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
index 053183e56f2..b877c7c57ed 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
@@ -1788,8 +1788,8 @@ public void BitCalendarDayShouldNameItsEventsForScreenReaders()
 
         Assert.Contains("Standup", label!);
         Assert.AreEqual("dialog", day.GetAttribute("aria-haspopup"));
-        // The indicator dot says the same thing to everyone else, so it is not read out a second time.
-        Assert.AreEqual("true", component.Find(".bit-cal-evi").GetAttribute("aria-hidden"));
+        // The indicator dots say the same thing to everyone else, so they are not read out a second time.
+        Assert.AreEqual("true", component.Find(".bit-cal-evc").GetAttribute("aria-hidden"));
     }
 
     [TestMethod]
@@ -1971,4 +1971,309 @@ public void BitCalendarShouldSurviveACultureWithoutShortestDayNames()
 
         Assert.AreEqual(7, component.FindAll(".bit-cal-dgh .bit-cal-wlb").Count);
     }
+
+    [TestMethod]
+    public void BitCalendarShouldShowOneIndicatorPerEventUpToThree()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.Events, [
+                new BitCalendarEvent { Title = "One", Date = new DateOnly(2026, 1, 15) },
+                new BitCalendarEvent { Title = "Two", Date = new DateOnly(2026, 1, 15) },
+                new BitCalendarEvent { Title = "Three", Date = new DateOnly(2026, 1, 16) },
+                new BitCalendarEvent { Title = "Four", Date = new DateOnly(2026, 1, 16) },
+                new BitCalendarEvent { Title = "Five", Date = new DateOnly(2026, 1, 16) },
+                new BitCalendarEvent { Title = "Six", Date = new DateOnly(2026, 1, 16) }
+            ]);
+        });
+
+        var two = component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim().StartsWith("15"));
+        var six = component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim().StartsWith("16"));
+
+        Assert.AreEqual(2, two.QuerySelectorAll(".bit-cal-evi").Length);
+        // Past three the row of dots says no more than "several"; the count stays in the label and the tooltip.
+        Assert.AreEqual(3, six.QuerySelectorAll(".bit-cal-evi").Length);
+    }
+
+    [TestMethod]
+    public void BitCalendarEventShouldPaintItsIndicatorWithItsOwnColor()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.Events, [
+                new BitCalendarEvent { Title = "Colored", Date = new DateOnly(2026, 1, 15), Color = BitColor.Success },
+                new BitCalendarEvent { Title = "Plain", Date = new DateOnly(2026, 1, 16) }
+            ]);
+        });
+
+        var colored = component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim().StartsWith("15"));
+        var plain = component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim().StartsWith("16"));
+
+        Assert.IsTrue(colored.QuerySelector(".bit-cal-evi")!.ClassList.Contains("bit-cal-evi-suc"));
+        // An event of no color of its own takes the calendar's, which is a fallback rather than a class.
+        Assert.IsFalse(plain.QuerySelector(".bit-cal-evi")!.ClassList.Any(c => c.StartsWith("bit-cal-evi-")));
+    }
+
+    [TestMethod]
+    public void BitCalendarTypedHourShouldStayInTheHalfOfTheDayItIsIn()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 15, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeFormat, BitTimeFormat.TwelveHours);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // 4 typed into an afternoon time is 16:00, not a silent flip to the morning: which half of the day
+        // the time is in is what the AM/PM pair is there to change.
+        component.Find(".bit-cal-tin").Input("4");
+
+        Assert.AreEqual(16, value!.Value.Hour);
+    }
+
+    [TestMethod]
+    public void BitCalendarTypedTimeShouldBeHeldToTheStepGrid()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 9, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.MinuteStep, 15);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // What the spin buttons produce is on the grid, so what is typed is held to it too - 20 is nearer to
+        // 15 than to 30.
+        component.FindAll(".bit-cal-tin")[1].Input("20");
+
+        Assert.AreEqual(15, value!.Value.Minute);
+    }
+
+    [TestMethod]
+    public void BitCalendarTimeInputShouldStepWithPageKeys()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 9, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.HourStep, 3);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.Find(".bit-cal-tin").KeyDown(new KeyboardEventArgs { Key = "PageUp" });
+
+        Assert.AreEqual(12, value!.Value.Hour);
+    }
+
+    [TestMethod]
+    public void BitCalendarEscapeShouldLeaveTheMonthPickerOverlay()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.ShowMonthPickerAsOverlay, true);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        component.Find(".bit-cal-ptb").Click();
+        Assert.IsNotEmpty(component.FindAll(".bit-cal-pkb"));
+
+        component.Find(".bit-cal-pkb[tabindex='0']").KeyDown(new KeyboardEventArgs { Key = "Escape" });
+
+        Assert.IsEmpty(component.FindAll(".bit-cal-pkb"));
+        Assert.IsNotEmpty(component.FindAll(".bit-cal-dbt"));
+    }
+
+    [TestMethod]
+    public void BitCalendarEscapeShouldLeaveTheYearGridForTheMonthGrid()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        // The year toggle of the month pane, which swaps the months for the years of the range.
+        component.FindAll(".bit-cal-ptb").Last().Click();
+        Assert.Contains("2026", component.FindAll(".bit-cal-pkb").Select(b => b.TextContent.Trim()).ToList());
+
+        component.Find(".bit-cal-pkb[tabindex='0']").KeyDown(new KeyboardEventArgs { Key = "Escape" });
+
+        Assert.Contains("Jan", component.FindAll(".bit-cal-pkb").Select(b => b.TextContent.Trim()).ToList());
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldReportTheCurrentMonthAndYearToScreenReaders()
+    {
+        var today = new DateTimeOffset(2026, 5, 20, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Today, today);
+            parameters.Add(p => p.StartingValue, today);
+            // The current month is reported whether or not it is painted.
+            parameters.Add(p => p.HighlightCurrentMonth, false);
+        });
+
+        var months = component.FindAll(".bit-cal-pkb");
+        Assert.AreEqual("date", months[4].GetAttribute("aria-current"));
+        Assert.IsNull(months[3].GetAttribute("aria-current"));
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldNameTheWeekNumbersColumnHeader()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.ShowWeekNumbers, true);
+            parameters.Add(p => p.WeekNumbersHeaderTitle, "Wk");
+        });
+
+        Assert.AreEqual("Wk", component.Find(".bit-cal-dgh .bit-cal-wlb").GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldMarkOnlyTheSelectedCellAsSelected()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Value, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var selected = component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15");
+        var other = component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "16");
+
+        Assert.AreEqual("true", selected.GetAttribute("aria-selected"));
+        // An explicit false on the other forty-one would be read out on every day arrowed over.
+        Assert.IsNull(other.GetAttribute("aria-selected"));
+    }
+
+    [TestMethod]
+    public void BitCalendarReadOnlyShouldReportItsTimeControlsAsUnavailable()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ReadOnly, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeFormat, BitTimeFormat.TwelveHours);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Value, new DateTimeOffset(2026, 1, 15, 9, 0, 0, TimeSpan.Zero));
+        });
+
+        // Every control that would set the time - the spin buttons, the meridiem pair, the now button - says
+        // it is unavailable rather than looking pressable and doing nothing.
+        foreach (var button in component.FindAll(".bit-cal-tbt, .bit-cal-gtn"))
+        {
+            Assert.AreEqual("true", button.GetAttribute("aria-disabled"));
+        }
+
+        Assert.IsTrue(component.FindAll(".bit-cal-tin").All(i => i.HasAttribute("readonly")));
+    }
+
+    [TestMethod]
+    public void BitCalendarReadOnlyTimeInputShouldNotChangeTheValue()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 9, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ReadOnly, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.Find(".bit-cal-tin").Input("11");
+        component.Find(".bit-cal-tin").KeyDown(new KeyboardEventArgs { Key = "PageUp" });
+
+        Assert.AreEqual(9, value!.Value.Hour);
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldNotCutASurrogatePairOutOfADayNameHeader()
+    {
+        var culture = (CultureInfo)CultureInfo.InvariantCulture.Clone();
+        // A name whose first character is written as a surrogate pair: half of it is not a character at all.
+        culture.DateTimeFormat.ShortestDayNames = ["\U0001D400a", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, culture);
+            parameters.Add(p => p.FirstDayOfWeek, DayOfWeek.Sunday);
+        });
+
+        Assert.AreEqual("\U0001D400", component.FindAll(".bit-cal-dgh .bit-cal-wlb")[0].TextContent.Trim());
+    }
+
+    [TestMethod,
+        DataRow("ArrowLeft"),
+        DataRow("ArrowUp"),
+        DataRow("Home"),
+        DataRow("PageUp")]
+    public void BitCalendarKeyboardNavigationShouldStopAtTheEdgeOfTheSupportedRange(string key)
+    {
+        // The first day a DateTime can represent: every one of these keys steps off the end of the range,
+        // which has to leave the focus where it is rather than throw.
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(1, 1, 1, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var focused = component.Find(".bit-cal-dbt[tabindex='0']");
+        var day = focused.TextContent.Trim();
+
+        focused.KeyDown(new KeyboardEventArgs { Key = key });
+
+        Assert.AreEqual(day, component.Find(".bit-cal-dbt[tabindex='0']").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarShiftPageUpShouldStopAtTheEdgeOfTheSupportedRange()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(1, 1, 1, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var focused = component.Find(".bit-cal-dbt[tabindex='0']");
+        var day = focused.TextContent.Trim();
+
+        focused.KeyDown(new KeyboardEventArgs { Key = "PageUp", ShiftKey = true });
+
+        Assert.AreEqual(day, component.Find(".bit-cal-dbt[tabindex='0']").TextContent.Trim());
+    }
 }

From 0c22170d8242375911a14835c496bb0f6c98e941 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 20 Sep 2026 12:05:00 +0330
Subject: [PATCH 4/9] code review

---
 .../Inputs/Calendar/BitCalendar.razor         |   6 +-
 .../Inputs/Calendar/BitCalendar.razor.cs      | 136 +++++++++++++-----
 .../Inputs/Calendar/BitCalendar.scss          |  22 ++-
 .../Inputs/Calendar/BitCalendarDemo.razor     |  16 +--
 .../Inputs/Calendar/BitCalendarDemo.razor.cs  |  16 ++-
 .../Calendar/BitCalendarDemo.razor.samples.cs |   8 +-
 .../Inputs/Calendar/BitCalendarTests.cs       | 129 ++++++++++++++++-
 7 files changed, 268 insertions(+), 65 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
index 1ff9501e81d..9ea0bd2983b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
@@ -362,7 +362,7 @@
 
                                     if (month > monthsInYear) continue;
 
-                                    var monthName = _culture.DateTimeFormat.GetMonthName(month);
+                                    var monthName = GetMonthName(_currentYear, month);
                                     var disabled = IsEnabled is false || IsMonthOutOfMinAndMaxDate(month);
                                     var selected = month == _currentMonth;
                                     <button @onclick="() => SelectMonth(month)"
@@ -388,7 +388,7 @@
                                         }
                                         else
                                         {
-                                            @_culture.DateTimeFormat.GetAbbreviatedMonthName(month)
+                                            @GetAbbreviatedMonthName(_currentYear, month)
                                         }
                                     </button>
                                 }
@@ -564,6 +564,7 @@
                         <input @ref="_inputTimeHourRef"
                                @bind="@_hourView"
                                @bind:event="oninput"
+                               @onchange="() => HandleOnTimeInputChange(true)"
                                @onfocus="HandleOnTimeHourFocus"
                                @onkeydown="e => HandleOnTimeInputKeyDown(e, true)"
                                min="@(TimeFormat == BitTimeFormat.TwelveHours ? "1" : "0")"
@@ -611,6 +612,7 @@
                         <input @ref="_inputTimeMinuteRef"
                                @bind="@_minuteView"
                                @bind:event="oninput"
+                               @onchange="() => HandleOnTimeInputChange(false)"
                                @onfocus="HandleOnTimeMinuteFocus"
                                @onkeydown="e => HandleOnTimeInputKeyDown(e, false)"
                                min="0"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
index c899ac6f6ce..09037ccd390 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
@@ -52,6 +52,7 @@ public partial class BitCalendar : BitInputBase<DateTimeOffset?>
 
 
     private int _hour;
+    private int _hourBeforeInput;
     private int _hourView
     {
         get
@@ -75,31 +76,31 @@ private int _hourView
         {
             if (IsEnabled is false || ReadOnly) return;
 
-            int candidate;
+            _hourBeforeInput = _hour;
 
+            // The field is bound on every keystroke, so what lands here is whatever has been typed so far -
+            // the first digit of a two-digit hour among it. It is only brought into the day here; the
+            // HourStep grid is laid over it once the field is committed (HandleOnTimeInputChange), which is
+            // what lets 12 be typed into a picker whose step is 3.
             if (TimeFormat == BitTimeFormat.TwelveHours)
             {
                 // A value typed into the hour is an hour of the clock face (1-12), so it lands in the half of
                 // the day the picker is already on: typing 5 into an afternoon time means 17:00, not a silent
                 // flip to the morning - which half the time is in is what the AM/PM pair is there to change.
                 // Both 12 and 0 mean the top of the clock, which is hour zero of the half.
-                candidate = BitTimeSteps.Wrap(value, 12) + (_hour >= 12 ? 12 : 0);
+                _hour = BitTimeSteps.Wrap(value, 12) + (_hour >= 12 ? 12 : 0);
             }
             else
             {
-                candidate = Math.Clamp(value, 0, 23);
+                _hour = Math.Clamp(value, 0, 23);
             }
 
-            // What the spin buttons produce is held to the HourStep grid, so what is typed - and what the
-            // arrow keys of the number input produce, which is a typed value of one more or one less - is
-            // held to it too, instead of the two halves of the same control disagreeing about the same hour.
-            _hour = BitTimeSteps.FindAllowedNear(candidate, _hour, 24, IsHourOnGrid) ?? _hour;
-
             UpdateTime();
         }
     }
 
     private int _minute;
+    private int _minuteBeforeInput;
     private int _minuteView
     {
         get => _minute;
@@ -107,8 +108,10 @@ private int _minuteView
         {
             if (IsEnabled is false || ReadOnly) return;
 
-            // Held to the MinuteStep grid for the same reason the hour above is held to its own.
-            _minute = BitTimeSteps.FindAllowedNear(Math.Clamp(value, 0, 59), _minute, 60, IsMinuteOnGrid) ?? _minute;
+            // Brought into the hour here and held to the MinuteStep grid on commit, for the same reason the
+            // hour above is.
+            _minuteBeforeInput = _minute;
+            _minute = Math.Clamp(value, 0, 59);
 
             UpdateTime();
         }
@@ -873,23 +876,26 @@ private void OnSetParameters(bool resetPickers)
 
         var value = CurrentValue.GetValueOrDefault(StartingValue.GetValueOrDefault(GetNow()));
 
-        var minDate = GetMinDate();
-        var maxDate = GetMaxDate();
+        // Everything the calendar shows - the month it opens on, the time in the time picker - belongs to the
+        // TimeZone of the component, not to the offset the value happens to carry.
+        var dateTime = GetDateTime(value);
 
-        if (minDate.HasValue && minDate > value)
+        // The bounds rule out days rather than instants, the way every other comparison against them does, so
+        // a value falling on the MinDate's or the MaxDate's own day is already in range: comparing the two as
+        // instants would pull today's midnight up to a DisablePast bound of now and overwrite the time of day
+        // with the bound's on every value the user picks.
+        var minDate = GetMinDate();
+        if (minDate.HasValue && GetDateTime(minDate.Value).Date > dateTime.Date)
         {
-            value = minDate.Value;
+            dateTime = GetDateTime(minDate.Value);
         }
 
-        if (maxDate.HasValue && maxDate < value)
+        var maxDate = GetMaxDate();
+        if (maxDate.HasValue && GetDateTime(maxDate.Value).Date < dateTime.Date)
         {
-            value = maxDate.Value;
+            dateTime = GetDateTime(maxDate.Value);
         }
 
-        // Everything the calendar shows - the month it opens on, the time in the time picker - belongs to the
-        // TimeZone of the component, not to the offset the value happens to carry.
-        var dateTime = GetDateTime(value);
-
         _hour = CurrentValue.HasValue || StartingValue.HasValue ? dateTime.Hour : 0;
         _minute = CurrentValue.HasValue || StartingValue.HasValue ? dateTime.Minute : 0;
 
@@ -909,22 +915,30 @@ private async Task SelectDate(DateTime selectedDate)
         // the user is looking at rather than jumping back onto today the way an emptied value otherwise would.
         if (AllowDeselect && IsSelectedDate(selectedDate))
         {
-            var deselectedYear = _culture.Calendar.GetYear(selectedDate);
-            var deselectedMonth = _culture.Calendar.GetMonth(selectedDate);
+            // Emptying the value runs the whole of OnSetParameters, which rebuilds the view around today (or
+            // around StartingValue) - the displayed month, the range the year picker offers and the time in
+            // the time picker alike. None of that is what the user asked for by clearing a day, so all of it
+            // is put back: what a deselection changes is the value and nothing else.
+            var hour = _hour;
+            var minute = _minute;
+            var yearPickerEndYear = _yearPickerEndYear;
+            var yearPickerStartYear = _yearPickerStartYear;
 
             _focusedDate = selectedDate;
 
             CurrentValue = null;
 
-            _currentYear = deselectedYear;
-            _currentMonth = deselectedMonth;
+            _hour = hour;
+            _minute = minute;
+            _currentYear = previousYear;
+            _currentMonth = previousMonth;
+            _yearPickerEndYear = yearPickerEndYear;
+            _yearPickerStartYear = yearPickerStartYear;
 
             GenerateMonthData(_currentYear, _currentMonth);
 
             await OnSelectDate.InvokeAsync(CurrentValue);
 
-            await NotifyMonthChange(previousYear, previousMonth);
-
             return;
         }
 
@@ -1129,7 +1143,7 @@ private void GenerateCalendarData(DateTime dateTime)
 
     private void GenerateMonthData(int year, int month)
     {
-        _monthTitle = $"{_culture.DateTimeFormat.GetMonthName(month)} {year}";
+        _monthTitle = $"{GetMonthName(year, month)} {year}";
 
         var calendar = _culture.Calendar;
         int daysInMonth = calendar.GetDaysInMonth(year, month);
@@ -1271,7 +1285,35 @@ private DateTime GetFirstDayOfMonthOrClamp(int year, int month)
     private int GetMonthsInCurrentYear()
     {
         // Not every calendar has twelve months: a leap year of the Hebrew calendar has thirteen.
-        return _culture.Calendar.GetMonthsInYear(_currentYear);
+        return GetMonthsInYear(_currentYear);
+    }
+
+    /// <inheritdoc cref="GetMonthsInCurrentYear"/>
+    private int GetMonthsInYear(int year)
+    {
+        return _culture.Calendar.GetMonthsInYear(year);
+    }
+
+    // A culture whose month names are the thirteen of a Hebrew leap year names the months of a common year
+    // one place further along that table from the seventh on - the thirteenth name is the second Adar, which
+    // a common year does not have. .NET's own formatter makes the same shift, so a month read off the names
+    // directly would be spelled differently from the very date the calendar is showing.
+    private string GetMonthName(int year, int month) => _culture.DateTimeFormat.GetMonthName(GetMonthNameIndex(year, month));
+
+    /// <inheritdoc cref="GetMonthName"/>
+    private string GetAbbreviatedMonthName(int year, int month) => _culture.DateTimeFormat.GetAbbreviatedMonthName(GetMonthNameIndex(year, month));
+
+    /// <inheritdoc cref="GetMonthName"/>
+    private int GetMonthNameIndex(int year, int month)
+    {
+        if (month < 7) return month;
+
+        // Only a culture whose table really does hold thirteen names shifts: everywhere else the thirteenth
+        // entry is the empty string every DateTimeFormatInfo pads its twelve names with.
+        var monthNames = _culture.DateTimeFormat.MonthNames;
+        if (monthNames.Length < 13 || monthNames[12].HasNoValue()) return month;
+
+        return GetMonthsInYear(year) == 13 ? month : month + 1;
     }
 
     private bool IsWeekRowEmpty(int weekIndex)
@@ -2219,6 +2261,11 @@ private async Task HandleDayClick(DateTime date, IReadOnlyList<BitCalendarEvent>
         if (ShowEventDetails && events.Count > 0)
         {
             OpenEventModal(date);
+
+            // Opening the details of the day the value is already on is a second look at its events, not a
+            // second press of a toggle: the day stays selected, so its dialog can be opened as often as the
+            // user likes. Without this, AllowDeselect would empty the value on every other look.
+            if (AllowDeselect && IsSelectedDate(date)) return;
         }
 
         await SelectDate(date);
@@ -2333,14 +2380,6 @@ private async Task HandleOnTimeMinuteFocus()
         await _js.BitUtilsSelectText(_inputTimeMinuteRef);
     }
 
-    private void ToggleAmPmTime()
-    {
-        if (ReadOnly) return;
-        if (IsEnabled is false) return;
-
-        _hourView = _hour + (_hour >= 12 ? -12 : 12);
-    }
-
     private void HandleOnAmClick()
     {
         if (ReadOnly) return;
@@ -2490,9 +2529,30 @@ private void ChangeMinute(bool isNext)
     /// <inheritdoc cref="IsHourOnGrid"/>
     private bool IsMinuteOnGrid(int minute) => BitTimeSteps.IsOnGrid(minute, MinuteStep, 0, 60);
 
+    // A committed hour or minute - the field left, Enter pressed, an arrow key or a spinner of the number
+    // input stepped, each of which fires a change of its own - is held to the HourStep/MinuteStep grid, so
+    // the two halves of the same control cannot disagree about which times the picker offers. The value
+    // typed on the way there was left alone (see the setters above), so the grid never rewrites a half-typed
+    // number; the value the editing started from is what tells a move of exactly one - an arrow key - from
+    // a number that was typed, so a step of a sparser grid moves on rather than sitting still.
+    private void HandleOnTimeInputChange(bool isHour)
+    {
+        if (IsEnabled is false || ReadOnly) return;
+
+        if (isHour)
+        {
+            _hour = BitTimeSteps.FindAllowedNear(_hour, _hourBeforeInput, 24, IsHourOnGrid) ?? _hour;
+        }
+        else
+        {
+            _minute = BitTimeSteps.FindAllowedNear(_minute, _minuteBeforeInput, 60, IsMinuteOnGrid) ?? _minute;
+        }
+
+        UpdateTime();
+    }
+
     // The hour and the minute answer PageUp and PageDown with the same step the spin buttons next to them
-    // move by, so the time can be set without leaving the keyboard or the field. (The arrow keys are the
-    // number input's own, and the setter above snaps the one-step move they make onto the grid.)
+    // move by, so the time can be set without leaving the keyboard or the field.
     private void HandleOnTimeInputKeyDown(KeyboardEventArgs e, bool isHour)
     {
         if (IsEnabled is false || ReadOnly) return;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
index c92ec92a047..1fa33b64673 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
@@ -28,6 +28,11 @@
 //   --bit-Calendar-today-background          background of today, and of the highlighted
 //                                            current month                                (default: the Color role's main color)
 //   --bit-Calendar-today-color               text color of today                           (default: the Color role's on-color)
+//   --bit-Calendar-today-hover-background    background of today on hover, and of the
+//                                            highlighted current month and the selected
+//                                            AM/PM button                                  (default: the Color role's hover color)
+//   --bit-Calendar-today-active-background   background of today while pressed, and of
+//                                            the selected AM/PM button                     (default: the Color role's active color)
 //   --bit-Calendar-today-radius              corner radius of today                        (default: $shp-radius-full)
 //   --bit-Calendar-highlighted-background    background of a HighlightedDates day          (default: $clr-bg-ter)
 //   --bit-Calendar-week-number-color         text color of a week number                   (default: $clr-fg-sec)
@@ -43,7 +48,7 @@
 // a size class and a CSS variable never fight over the same property.
 @mixin cal-size-medium {
     --bit-cal-cell-size-def: #{spacing(3.5)};
-    --bit-cal-cell-fs-def: #{$tg-fs-xs};
+    --bit-cal-cell-fs-def: #{$tg-fs-sm};
     --bit-cal-mcell-w: #{spacing(6)};
     --bit-cal-mcell-h: #{spacing(5.17)};
     --bit-cal-tcell-size: #{spacing(3.75)};
@@ -64,6 +69,9 @@
     box-sizing: border-box;
     font-size: $tg-fs-lg;
     font-family: $tg-font-family;
+    // The radius sits on the element the background is painted on, so it is the calendar's own surface that
+    // is rounded - the header and footer slots inside it included, which is more than the pickers alone.
+    border-radius: var(--bit-Calendar-radius, #{$shp-radius-control});
     background-color: var(--bit-Calendar-background, transparent);
 
     @include cal-size-medium;
@@ -276,12 +284,12 @@
 
     @media(hover: hover) {
         &:hover {
-            background-color: var(--bit-cal-clr-hover);
+            background-color: var(--bit-Calendar-today-hover-background, var(--bit-cal-clr-hover));
         }
     }
 
     &:active {
-        background-color: var(--bit-cal-clr-active);
+        background-color: var(--bit-Calendar-today-active-background, var(--bit-cal-clr-active));
     }
 }
 
@@ -545,7 +553,7 @@
     @media (hover: hover) {
         &:hover {
             color: var(--bit-Calendar-today-color, var(--bit-cal-clr-txt));
-            background-color: var(--bit-cal-clr-hover);
+            background-color: var(--bit-Calendar-today-hover-background, var(--bit-cal-clr-hover));
         }
     }
 }
@@ -646,12 +654,12 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: var(--bit-cal-clr-hover);
+            background-color: var(--bit-Calendar-today-hover-background, var(--bit-cal-clr-hover));
         }
     }
 
     &:active {
-        background-color: var(--bit-cal-clr-active);
+        background-color: var(--bit-Calendar-today-active-background, var(--bit-cal-clr-active));
     }
 }
 
@@ -827,7 +835,7 @@
 
 .bit-cal-lg {
     --bit-cal-cell-size-def: #{spacing(4.25)};
-    --bit-cal-cell-fs-def: #{$tg-fs-sm};
+    --bit-cal-cell-fs-def: #{$tg-fs-md};
     --bit-cal-mcell-w: #{spacing(7)};
     --bit-cal-mcell-h: #{spacing(6)};
     --bit-cal-tcell-size: #{spacing(4.5)};
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
index 0e9563fd478..b61ef16902c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -11,7 +11,7 @@
           SubClasses="componentSubClasses" SubEnums="componentSubEnums"
           GitHubUrl="Inputs/Calendar/BitCalendar.razor" GitHubDemoUrl="Inputs/Calendar/BitCalendarDemo.razor">
 
-    <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <div>
             The calendar renders a day grid with a month and year picker beside it. <b>IsEnabled</b> false dims it
             and stops every interaction; <b>ReadOnly</b> keeps it browsable but stops the value from changing.
@@ -23,10 +23,10 @@
             <BitCalendar />
             <br /><br />
             <div>IsEnabled = false:</div>
-            <BitCalendar IsEnabled="false" @bind-Value="readOnlyDate" />
+            <BitCalendar IsEnabled="false" />
             <br /><br />
             <div>ReadOnly:</div>
-            <BitCalendar ReadOnly @bind-Value="readOnlyDate" />
+            <BitCalendar ReadOnly />
             <br /><br />
             <div>ShowGoToToday = false:</div>
             <BitCalendar ShowGoToToday="false" />
@@ -58,14 +58,14 @@
     <DemoExample Title="Starting view" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
         <div>
             Without a value the calendar opens on today. <b>StartingValue</b> opens it somewhere else (and seeds
-            the time picker), and <b>Today</b> overrides which day counts as today, for a custom time provider or
-            a test. <b>OnMonthChange</b> reports the first day of the newly displayed month after every
-            navigation, which is where the events of that month are usually loaded.
+            the time picker further down this page), and <b>Today</b> overrides which day counts as today, for a
+            custom time provider or a test. <b>OnMonthChange</b> reports the first day of the newly displayed
+            month after every navigation, which is where the events of that month are usually loaded.
         </div>
         <br /><br />
         <div class="example-content">
-            <div>StartingValue = December 2020, 20:45:</div>
-            <BitCalendar ShowTimePicker StartingValue="startingValue" />
+            <div>StartingValue = December 2020:</div>
+            <BitCalendar StartingValue="startingValue" />
             <br /><br />
             <div>Today = March 15, 2021:</div>
             <BitCalendar Today="customToday" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
index b3d02646ac7..6de7fc626a4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
@@ -1705,7 +1705,7 @@ public partial class BitCalendarDemo
         new()
         {
             Name = "--bit-Calendar-day-font-size",
-            DefaultValue = "Per Size: --bit-tpg-fs-xs / -xs / -sm",
+            DefaultValue = "Per Size: --bit-tpg-fs-xs / -sm / -md",
             Description = "Text size of the day cells and of the headers and week numbers that line up with them.",
         },
         new()
@@ -1751,6 +1751,18 @@ public partial class BitCalendarDemo
             Description = "Text color of today, of the highlighted current month and of the AM/PM button that is in force.",
         },
         new()
+        {
+            Name = "--bit-Calendar-today-hover-background",
+            DefaultValue = "The Color role's hover color",
+            Description = "Background of today on hover (pointer devices only), which the highlighted current month and the AM/PM button that is in force share. Set it alongside --bit-Calendar-today-background so the hover does not fall back to the Color role.",
+        },
+        new()
+        {
+            Name = "--bit-Calendar-today-active-background",
+            DefaultValue = "The Color role's active color",
+            Description = "Background of today while pressed, which the AM/PM button that is in force shares.",
+        },
+        new()
         {
             Name = "--bit-Calendar-today-radius",
             DefaultValue = "--bit-shp-radius-full",
@@ -1913,8 +1925,6 @@ private void HandleOnMonthChange(DateTimeOffset month)
     private DateTimeOffset? timeZoneDate1;
     private DateTimeOffset? timeZoneDate2;
 
-    private DateTimeOffset? readOnlyDate = DateTimeOffset.Now;
-
     private string SuccessMessage = string.Empty;
     private BitCalendarValidationModel validationModel = new();
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
index 8ced34c54dc..3a58ded9ef1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
@@ -5,13 +5,11 @@ public partial class BitCalendarDemo
     private readonly string example1RazorCode = @"
 <BitCalendar />
 
-<BitCalendar IsEnabled=""false"" @bind-Value=""readOnlyDate"" />
+<BitCalendar IsEnabled=""false"" />
 
-<BitCalendar ReadOnly @bind-Value=""readOnlyDate"" />
+<BitCalendar ReadOnly />
 
 <BitCalendar ShowGoToToday=""false"" />";
-    private readonly string example1CsharpCode = @"
-private DateTimeOffset? readOnlyDate = DateTimeOffset.Now;";
 
     private readonly string example2RazorCode = @"
 <BitCalendar @bind-Value=""@selectedDate"" />
@@ -35,7 +33,7 @@ private void HandleOnSelectDate(DateTimeOffset? date)
 }";
 
     private readonly string example3RazorCode = @"
-<BitCalendar ShowTimePicker StartingValue=""startingValue"" />
+<BitCalendar StartingValue=""startingValue"" />
 
 <BitCalendar Today=""customToday"" />
 
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
index b877c7c57ed..ece6b6fde6a 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
@@ -1464,6 +1464,38 @@ public void BitCalendarShouldDisableThePastAndTheFutureLikeTheBounds()
         Assert.IsTrue(future.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "16").HasAttribute("disabled"));
     }
 
+    [TestMethod]
+    public void BitCalendarDisablePastShouldNotOverwriteTheTimeOfTheValue()
+    {
+        var now = new DateTime(2026, 1, 15, 14, 30, 0);
+        var today = new DateTimeOffset(now, TimeSpan.Zero);
+
+        DateTimeOffset? value = null;
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Today, today);
+            parameters.Add(p => p.DisablePast, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // The bound rules out the days before today, not the hours before this instant: today's midnight is
+        // in range, so it is left where it is rather than being pulled up to 14:30 - which the next day
+        // picked would then silently be given too.
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "15").Click();
+
+        Assert.AreEqual(0, value!.Value.Hour);
+        Assert.AreEqual(0, value!.Value.Minute);
+
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "16").Click();
+
+        Assert.AreEqual(16, value!.Value.Day);
+        Assert.AreEqual(0, value!.Value.Hour);
+        Assert.AreEqual(0, value!.Value.Minute);
+    }
+
     [TestMethod]
     public void BitCalendarHourStepShouldLayAGridOverTheDay()
     {
@@ -1641,6 +1673,32 @@ public void BitCalendarShouldRespectAllowDeselect()
         Assert.Contains("January 2026", component.Find(".bit-cal-pkt, .bit-cal-ptb").TextContent);
     }
 
+    [TestMethod]
+    public void BitCalendarDeselectShouldChangeNothingButTheValue()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        DateTimeOffset? value = new DateTimeOffset(2050, 6, 10, 8, 45, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.AllowDeselect, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim() == "10").Click();
+
+        Assert.IsNull(value);
+        // Emptying the value rebuilds the whole view around today, so everything a deselection is not about -
+        // the month on screen and the time the picker holds - is put back the way the user left it.
+        Assert.Contains("June 2050", component.Find(".bit-cal-pkt, .bit-cal-ptb").TextContent);
+        Assert.AreEqual("8", component.FindAll(".bit-cal-tin")[0].GetAttribute("value"));
+        Assert.AreEqual("45", component.FindAll(".bit-cal-tin")[1].GetAttribute("value"));
+    }
+
     [TestMethod]
     public void BitCalendarWithoutAllowDeselectShouldKeepTheValueOnReselect()
     {
@@ -1771,6 +1829,39 @@ public void BitCalendarShouldRespectShowEventDetails()
         Assert.IsNotEmpty(component.FindAll(".bit-cal-evi"));
     }
 
+    [TestMethod]
+    public void BitCalendarEventDetailsShouldNotDeselectTheDayItIsOpenedFrom()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        DateTimeOffset? value = null;
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.AllowDeselect, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+            parameters.Bind(p => p.Value, value, v => value = v);
+            parameters.Add(p => p.Events, [
+                new BitCalendarEvent { Title = "Meeting", Date = new DateOnly(2026, 1, 15) }
+            ]);
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim().StartsWith("15")).Click();
+
+        Assert.AreEqual(15, value!.Value.Day);
+
+        component.Find(".bit-cal-emc").KeyDown(new KeyboardEventArgs { Key = "Escape" });
+
+        // Opening the details of the selected day again is a second look at its events, not a second press of
+        // the deselect toggle, so the value survives it.
+        component.FindAll(".bit-cal-dbt").First(b => b.TextContent.Trim().StartsWith("15")).Click();
+
+        Assert.IsNotNull(value);
+        Assert.IsNotEmpty(component.FindAll(".bit-cal-eov"));
+    }
+
     [TestMethod]
     public void BitCalendarDayShouldNameItsEventsForScreenReaders()
     {
@@ -1958,6 +2049,35 @@ public void BitCalendarShouldRenderEveryMonthOfACalendarWithThirteenOfThem()
         Assert.AreEqual(13, component.FindAll(".bit-cal-pkb").Count);
     }
 
+    [TestMethod]
+    public void BitCalendarShouldNameTheMonthsOfACommonYearOfAThirteenMonthCalendar()
+    {
+        // The month names of a Hebrew culture are the thirteen of a leap year, so a common year names its
+        // seventh month onwards one place further along that table - as .NET's own formatter does. 5785 is a
+        // common year, and the tenth of April 2025 falls in its seventh month, which is Nisan.
+        var culture = CultureInfo.CreateSpecificCulture("he-IL");
+        culture.GetType().GetField("_calendar", BindingFlags.NonPublic | BindingFlags.Instance)!
+               .SetValue(culture, new HebrewCalendar());
+        culture.DateTimeFormat.Calendar = new HebrewCalendar();
+
+        var inNisan = new DateTime(2025, 4, 10);
+        var nisan = inNisan.ToString("MMMM", culture);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Culture, culture);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(inNisan, TimeSpan.Zero));
+        });
+
+        // The seventh name of the table is the second Adar, which a common year does not have at all: reading
+        // the names straight off it would spell the month differently from the date the calendar is showing.
+        Assert.AreNotEqual(nisan, culture.DateTimeFormat.GetMonthName(7));
+        Assert.AreEqual(12, component.FindAll(".bit-cal-pkb").Count);
+        Assert.AreEqual(nisan, component.FindAll(".bit-cal-pkb")[6].GetAttribute("title"));
+        Assert.Contains(nisan, component.Find(".bit-cal-pkt, .bit-cal-ptb").TextContent);
+    }
+
     [TestMethod]
     public void BitCalendarShouldSurviveACultureWithoutShortestDayNames()
     {
@@ -2055,10 +2175,15 @@ public void BitCalendarTypedTimeShouldBeHeldToTheStepGrid()
             parameters.Bind(p => p.Value, value, v => value = v);
         });
 
-        // What the spin buttons produce is on the grid, so what is typed is held to it too - 20 is nearer to
-        // 15 than to 30.
+        // What is typed is left alone while it is being typed, so a two-digit value can be reached a digit at
+        // a time, and is held to the grid once the field is committed - 20 is nearer to 15 than to 30.
+        component.FindAll(".bit-cal-tin")[1].Input("2");
+        Assert.AreEqual(2, value!.Value.Minute);
+
         component.FindAll(".bit-cal-tin")[1].Input("20");
+        Assert.AreEqual(20, value!.Value.Minute);
 
+        component.FindAll(".bit-cal-tin")[1].Change("20");
         Assert.AreEqual(15, value!.Value.Minute);
     }
 

From 4c473c7bfb61dcf8c5c9a692af502cacfbc8bbdf Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 20 Sep 2026 12:25:58 +0330
Subject: [PATCH 5/9] resolve review comments

---
 .../Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
index 6de7fc626a4..f75f16ca7fa 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
@@ -307,7 +307,7 @@ public partial class BitCalendarDemo
             Name = "HourStep",
             Type = "int",
             DefaultValue = "1",
-            Description = "The step, in hours, the spin buttons move the hour by. A step greater than 1 lays a grid over the day, starting at midnight, that every hour the buttons produce sits on. A time entered as text is not held to it.",
+            Description = "The step, in hours, the spin buttons move the hour by. A step greater than 1 lays a grid over the day, starting at midnight, that every hour the picker produces sits on. The buttons, the keys and what is typed into the hour are all held to it.",
         },
         new()
         {
@@ -342,7 +342,7 @@ public partial class BitCalendarDemo
             Name = "MinuteStep",
             Type = "int",
             DefaultValue = "1",
-            Description = "The step, in minutes, the spin buttons move the minute by. A step greater than 1 lays a grid over the hour, starting at the top of it, that every minute the buttons produce sits on - which is what turns it into a five-minute or quarter-hour picker. A time entered as text is not held to it.",
+            Description = "The step, in minutes, the spin buttons move the minute by. A step greater than 1 lays a grid over the hour, starting at the top of it, that every minute the picker produces sits on - which is what turns it into a five-minute or quarter-hour picker. The buttons, the keys and what is typed into the minute are all held to it.",
         },
         new()
         {

From b46e9e06629fb12cadff9da2b241eb36b6b8b071 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Sun, 20 Sep 2026 13:48:59 +0330
Subject: [PATCH 6/9] improve further

---
 .../Inputs/Calendar/BitCalendar.razor         | 405 ++++++++-------
 .../Inputs/Calendar/BitCalendar.razor.cs      | 490 +++++++++++++++---
 .../Inputs/Calendar/BitCalendar.scss          |  16 +-
 .../Inputs/Calendar/BitCalendarDemo.razor     |  57 +-
 .../Inputs/Calendar/BitCalendarDemo.razor.cs  |  40 +-
 .../Calendar/BitCalendarDemo.razor.samples.cs |  49 +-
 .../Inputs/Calendar/BitCalendarTests.cs       | 283 ++++++++++
 7 files changed, 1040 insertions(+), 300 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
index 9ea0bd2983b..695e253b6ae 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
@@ -49,218 +49,234 @@
 
         @if (DayPickerIsVisible())
         {
-            <div style="@Styles?.DayPickerWrapper" class="bit-cal-dwp @Classes?.DayPickerWrapper">
-                <div style="@Styles?.DayPickerHeader" class="bit-cal-pkh @Classes?.DayPickerHeader">
-                    @if (ShowMonthPicker && (ShowMonthPickerAsOverlay || (ShowTimePicker && ShowTimePickerAsOverlay is false)))
-                    {
-                        var title = string.Format(MonthPickerToggleTitle, _monthTitle);
-                        <button @onclick="@ToggleMonthPickerOverlay"
-                                type="button"
-                                title="@title"
-                                aria-live="polite"
-                                aria-atomic="true"
-                                aria-label="@title"
-                                style="@Styles?.DayPickerMonth"
-                                disabled="@(IsEnabled is false)"
-                                class="bit-cal-ptb @Classes?.DayPickerMonth">
-                            @_monthTitle
-                        </button>
-                    }
-                    else
-                    {
-                        <div aria-live="polite"
-                             aria-atomic="true"
-                             style="@Styles?.DayPickerMonth"
-                             class="bit-cal-pkt @Classes?.DayPickerMonth">
-                            @_monthTitle
-                        </div>
-                    }
-                    @{
-                        var prevDisabled = CanChangeMonth(false) is false;
-                        var nextDisabled = CanChangeMonth(true) is false;
-                    }
-                    <div style="@Styles?.DayPickerNavWrapper" class="bit-cal-nbc @Classes?.DayPickerNavWrapper">
-                        <button @onclick="() => HandleMonthChange(false)"
-                                type="button"
-                                title="@GoToPrevMonthTitle"
-                                aria-label="@GoToPrevMonthTitle"
-                                style="@Styles?.PrevMonthNavButton"
-                                class="bit-cal-nbt @Classes?.PrevMonthNavButton"
-                                disabled="@prevDisabled">
-                            <i aria-hidden="true"
-                               style="@Styles?.PrevMonthNavIcon"
-                               class="bit-cal-ico @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
-                        </button>
-                        @if (ShowGoToToday && (ShowMonthPickerAsOverlay || ShowMonthPicker is false))
-                        {
-                            var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
+            var prevDisabled = CanChangeMonth(false) is false;
+            var nextDisabled = CanChangeMonth(true) is false;
 
-                            <button @onclick="HandleGoToToday"
-                                    type="button"
-                                    title="@GoToTodayTitle"
-                                    aria-label="@GoToTodayTitle"
-                                    disabled="@goToTodayDisabled"
-                                    style="@Styles?.GoToTodayButton"
-                                    class="bit-cal-gtb @Classes?.GoToTodayButton">
-                                <i aria-hidden="true"
-                                   style="@Styles?.GoToTodayIcon"
-                                   class="bit-cal-ico @goToTodayIconCss @Classes?.GoToTodayIcon" />
-                            </button>
-                        }
-                        <button @onclick="() => HandleMonthChange(true)"
-                                type="button"
-                                style="@Styles?.NextMonthNavButton"
-                                class="bit-cal-nbt @Classes?.NextMonthNavButton"
-                                title="@GoToNextMonthTitle"
-                                aria-label="@GoToNextMonthTitle"
-                                disabled="@nextDisabled">
-                            <i aria-hidden="true"
-                               style="@Styles?.NextMonthNavIcon"
-                               class="bit-cal-ico @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
-                        </button>
-                        @if (ShowTimePicker && ShowTimePickerAsOverlay && (ShowMonthPicker is false || ShowMonthPickerAsOverlay))
+            @* A calendar showing more than one month is the same day picker once per month, side by side:
+               only the first of them heads the navigation backwards and the month picker's toggle, and only
+               the last the navigation forwards, so the strip reads as one calendar rather than three. *@
+            @for (var monthIndex = 0; monthIndex < _monthCount; monthIndex++)
+            {
+                var index = monthIndex;
+                var isFirstMonth = index == 0;
+                var isLastMonth = index == _monthCount - 1;
+                var monthTitle = _monthTitles[index];
+
+                <div style="@Styles?.DayPickerWrapper" class="bit-cal-dwp @Classes?.DayPickerWrapper">
+                    <div style="@Styles?.DayPickerHeader" class="bit-cal-pkh @Classes?.DayPickerHeader">
+                        @if (isFirstMonth && ShowMonthPicker && (ShowMonthPickerAsOverlay || (ShowTimePicker && ShowTimePickerAsOverlay is false)))
                         {
-                            <button @onclick="@ToggleTimePickerOverlay"
+                            var title = string.Format(MonthPickerToggleTitle, monthTitle);
+                            <button @onclick="@ToggleMonthPickerOverlay"
                                     type="button"
-                                    title="@ShowTimePickerTitle"
+                                    title="@title"
+                                    aria-live="polite"
+                                    aria-atomic="true"
+                                    aria-label="@title"
+                                    style="@Styles?.DayPickerMonth"
                                     disabled="@(IsEnabled is false)"
-                                    aria-label="@ShowTimePickerTitle"
-                                    style="@Styles?.ShowTimePickerButton"
-                                    class="bit-cal-nbt @Classes?.ShowTimePickerButton">
-                                <i aria-hidden="true"
-                                   style="@Styles?.ShowTimePickerIcon"
-                                   class="bit-cal-ico @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
+                                    class="bit-cal-ptb @Classes?.DayPickerMonth">
+                                @monthTitle
                             </button>
                         }
-                    </div>
-                </div>
-                <div role="grid"
-                     aria-label="@_monthTitle"
-                     aria-readonly="@(ReadOnly ? "true" : null)"
-                     aria-disabled="@(IsEnabled is false ? "true" : null)"
-                     aria-required="@(Required ? "true" : null)"
-                     aria-invalid="@(isInvalid ? "true" : null)"
-                     style="@Styles?.DaysGrid"
-                     class="bit-cal-grd @Classes?.DaysGrid">
-                    <div role="row" style="@Styles?.DaysHeaderRow" class="bit-cal-dgh @Classes?.DaysHeaderRow">
-                        @if (ShowWeekNumbers)
-                        {
-                            @* The corner above the week numbers is empty, so it is named rather than read out
-                               as a blank column header before the first weekday of every row. *@
-                            <div role="columnheader"
-                                 aria-label="@WeekNumbersHeaderTitle"
-                                 style="@Styles?.WeekNumbersHeader"
-                                 class="bit-cal-wlb @Classes?.WeekNumbersHeader"></div>
-                        }
-
-                        @for (var index = 0; index < 7; index++)
+                        else
                         {
-                            var dayOfWeek = GetDayOfWeek(index);
-                            var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(dayOfWeek);
-                            <div role="columnheader"
-                                 title="@dayOfWeekName"
-                                 aria-label="@_culture.DateTimeFormat.GetDayName(dayOfWeek)"
-                                 style="@Styles?.DayNameHeader"
-                                 class="bit-cal-wlb @Classes?.DayNameHeader">
-                                @GetNarrowDayName(dayOfWeekName)
+                            <div aria-live="polite"
+                                 aria-atomic="true"
+                                 style="@Styles?.DayPickerMonth"
+                                 class="bit-cal-pkt @Classes?.DayPickerMonth">
+                                @monthTitle
                             </div>
                         }
-                    </div>
-
-                    @for (var week = 0; week < 6; week++)
-                    {
-                        @* The weeks past the end of the month (FixedWeeks off) hold no days at all. The check
-                           spans the whole row: at the very edge of the calendar's supported range a row can
-                           start with empty cells and still hold days to show. *@
-                        if (IsWeekRowEmpty(week)) continue;
+                        <div style="@Styles?.DayPickerNavWrapper" class="bit-cal-nbc @Classes?.DayPickerNavWrapper">
+                            @if (isFirstMonth)
+                            {
+                                <button @onclick="() => HandleMonthChange(false)"
+                                        type="button"
+                                        title="@GoToPrevMonthTitle"
+                                        aria-label="@GoToPrevMonthTitle"
+                                        style="@Styles?.PrevMonthNavButton"
+                                        class="bit-cal-nbt @Classes?.PrevMonthNavButton"
+                                        disabled="@prevDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.PrevMonthNavIcon"
+                                       class="bit-cal-ico @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
+                                </button>
+                            }
+                            @if (isLastMonth && ShowGoToToday && (ShowMonthPickerAsOverlay || ShowMonthPicker is false))
+                            {
+                                var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
 
-                        <div role="row" style="@Styles?.DaysRow" class="bit-cal-dgr @Classes?.DaysRow">
+                                <button @onclick="HandleGoToToday"
+                                        type="button"
+                                        title="@GoToTodayTitle"
+                                        aria-label="@GoToTodayTitle"
+                                        disabled="@goToTodayDisabled"
+                                        style="@Styles?.GoToTodayButton"
+                                        class="bit-cal-gtb @Classes?.GoToTodayButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.GoToTodayIcon"
+                                       class="bit-cal-ico @goToTodayIconCss @Classes?.GoToTodayIcon" />
+                                </button>
+                            }
+                            @if (isLastMonth)
+                            {
+                                <button @onclick="() => HandleMonthChange(true)"
+                                        type="button"
+                                        style="@Styles?.NextMonthNavButton"
+                                        class="bit-cal-nbt @Classes?.NextMonthNavButton"
+                                        title="@GoToNextMonthTitle"
+                                        aria-label="@GoToNextMonthTitle"
+                                        disabled="@nextDisabled">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.NextMonthNavIcon"
+                                       class="bit-cal-ico @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
+                                </button>
+                            }
+                            @if (isLastMonth && ShowTimePicker && ShowTimePickerAsOverlay && (ShowMonthPicker is false || ShowMonthPickerAsOverlay))
+                            {
+                                <button @onclick="@ToggleTimePickerOverlay"
+                                        type="button"
+                                        title="@ShowTimePickerTitle"
+                                        disabled="@(IsEnabled is false)"
+                                        aria-label="@ShowTimePickerTitle"
+                                        style="@Styles?.ShowTimePickerButton"
+                                        class="bit-cal-nbt @Classes?.ShowTimePickerButton">
+                                    <i aria-hidden="true"
+                                       style="@Styles?.ShowTimePickerIcon"
+                                       class="bit-cal-ico @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
+                                </button>
+                            }
+                        </div>
+                    </div>
+                    <div role="grid"
+                         aria-label="@monthTitle"
+                         aria-readonly="@(ReadOnly ? "true" : null)"
+                         aria-disabled="@(IsEnabled is false ? "true" : null)"
+                         aria-required="@(Required ? "true" : null)"
+                         aria-invalid="@(isInvalid ? "true" : null)"
+                         style="@Styles?.DaysGrid"
+                         class="bit-cal-grd @Classes?.DaysGrid">
+                        <div role="row" style="@Styles?.DaysHeaderRow" class="bit-cal-dgh @Classes?.DaysHeaderRow">
                             @if (ShowWeekNumbers)
                             {
-                                var weekNumber = GetWeekNumber(week);
-                                var title = string.Format(WeekNumberTitle, weekNumber);
-                                <div role="rowheader"
-                                     title="@title"
-                                     aria-label="@title"
-                                     style="@Styles?.WeekNumber"
-                                     class="bit-cal-wnm @Classes?.WeekNumber">
-                                    @weekNumber
-                                </div>
+                                @* The corner above the week numbers is empty, so it is named rather than read out
+                                   as a blank column header before the first weekday of every row. *@
+                                <div role="columnheader"
+                                     aria-label="@WeekNumbersHeaderTitle"
+                                     style="@Styles?.WeekNumbersHeader"
+                                     class="bit-cal-wlb @Classes?.WeekNumbersHeader"></div>
                             }
-                            @for (var day = 0; day < 7; day++)
+
+                            @for (var dayIndex = 0; dayIndex < 7; dayIndex++)
                             {
-                                var nullableDate = _daysOfCurrentMonth[week, day];
+                                var dayOfWeek = GetDayOfWeek(dayIndex);
+                                var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(dayOfWeek);
+                                <div role="columnheader"
+                                     title="@dayOfWeekName"
+                                     aria-label="@_culture.DateTimeFormat.GetDayName(dayOfWeek)"
+                                     style="@Styles?.DayNameHeader"
+                                     class="bit-cal-wlb @Classes?.DayNameHeader">
+                                    @GetNarrowDayName(dayOfWeekName)
+                                </div>
+                            }
+                        </div>
+
+                        @for (var week = 0; week < 6; week++)
+                        {
+                            @* The weeks past the end of the month (FixedWeeks off) hold no days at all. The check
+                               spans the whole row: at the very edge of the calendar's supported range a row can
+                               start with empty cells and still hold days to show. *@
+                            if (IsWeekRowEmpty(index, week)) continue;
 
-                                @* A day out of the calendar's supported range has no date to offer, so it
-                                   stays an empty cell keeping the columns of the week aligned, exactly like
-                                   an outside day hidden by ShowOutsideDays. *@
-                                if (nullableDate.HasValue is false ||
-                                    (ShowOutsideDays is false && IsInCurrentMonth(nullableDate.Value) is false))
+                            <div role="row" style="@Styles?.DaysRow" class="bit-cal-dgr @Classes?.DaysRow">
+                                @if (ShowWeekNumbers)
                                 {
-                                    <div role="gridcell" style="@Styles?.DayButton" class="bit-cal-dbe @Classes?.DayButton"></div>
-                                    continue;
+                                    var weekNumber = GetWeekNumber(index, week);
+                                    var title = string.Format(WeekNumberTitle, weekNumber);
+                                    <div role="rowheader"
+                                         title="@title"
+                                         aria-label="@title"
+                                         style="@Styles?.WeekNumber"
+                                         class="bit-cal-wnm @Classes?.WeekNumber">
+                                        @weekNumber
+                                    </div>
                                 }
+                                @for (var day = 0; day < 7; day++)
+                                {
+                                    var nullableDate = _daysOfMonths[index][week, day];
 
-                                var date = nullableDate.Value;
-
-                                var disabled = IsEnabled is false || IsDayDisabled(date);
-                                var isSelected = IsSelectedDate(date);
-                                var isToday = IsInCurrentMonth(date) && date == today.Date;
-                                var (style, klass) = GetDayButtonCss(date);
-                                var dayEvents = GetDayEvents(date);
-                                var opensEventDialog = ShowEventDetails && dayEvents.Count > 0;
-                                @* A read-only calendar still browses, so its days stay focusable - but they no
-                                   longer select anything, which aria-disabled is what reports. *@
-                                <button @onclick="() => HandleDayClick(date, dayEvents)"
-                                        @onkeydown="e => HandleDayKeyDown(e, date)"
-                                        type="button"
-                                        role="gridcell"
-                                        id="@GetDayButtonId(date)"
-                                        disabled="@disabled"
-                                        aria-readonly="@(ReadOnly ? "true" : null)"
-                                        aria-disabled="@((disabled || ReadOnly) ? "true" : null)"
-                                        aria-label="@GetDayAriaLabel(date, dayEvents)"
-                                        aria-current="@(isToday ? "date" : null)"
-                                        aria-haspopup="@(opensEventDialog ? "dialog" : null)"
-                                        title="@(dayEvents.Count > 0 ? GetEventTooltip(dayEvents) : null)"
-                                        style="@style"
-                                        class="bit-cal-dbt@(klass) @Classes?.DayButton"
-                                        tabindex="@(date == focusableDay ? 0 : -1)"
-                                        @* Only the selected cell carries the state, the way the APG's own date
-                                           picker does: an explicit false on the other forty-one would have a
-                                           screen reader say "not selected" on every day arrowed over. *@
-                                        aria-selected="@(isSelected ? "true" : null)">
-                                    @if (DayCellTemplate is not null)
-                                    {
-                                        @DayCellTemplate(GetDateTimeOfDayCell(date))
-                                    }
-                                    else
+                                    @* A day out of the calendar's supported range has no date to offer, so it
+                                       stays an empty cell keeping the columns of the week aligned, exactly like
+                                       an outside day hidden by ShowOutsideDays. *@
+                                    if (nullableDate.HasValue is false ||
+                                        (ShowOutsideDaysOfMonth() is false && IsInMonth(nullableDate.Value, index) is false))
                                     {
-                                        @GetDayOfCurrentMonth(date)
+                                        <div role="gridcell" style="@Styles?.DayButton" class="bit-cal-dbe @Classes?.DayButton"></div>
+                                        continue;
                                     }
-                                    @if (dayEvents.Count > 0)
-                                    {
-                                        @* One dot per event rather than one dot per day, so a day with three
-                                           things on it does not look like a day with one - capped, since past
-                                           a few the row of dots says no more than "several" and the count is
-                                           in the label a screen reader is given and in the tooltip. *@
-                                        <span aria-hidden="true"
-                                              style="@Styles?.EventIndicators"
-                                              class="bit-cal-evc @Classes?.EventIndicators">
-                                            @foreach (var evt in GetIndicatorEvents(dayEvents))
-                                            {
-                                                <span style="@Styles?.EventIndicator"
-                                                      class="bit-cal-evi @GetEventIndicatorColorClass(evt) @Classes?.EventIndicator">
-                                                </span>
-                                            }
-                                        </span>
-                                    }
-                                </button>
-                            }
-                        </div>
-                    }
+
+                                    var date = nullableDate.Value;
+
+                                    var disabled = IsEnabled is false || IsDayDisabled(date);
+                                    var isSelected = IsSelectedDate(date);
+                                    var isToday = IsInMonth(date, index) && date == today.Date;
+                                    var (style, klass) = GetDayButtonCss(date, index);
+                                    var dayEvents = GetDayEvents(date);
+                                    var opensEventDialog = ShowEventDetails && dayEvents.Count > 0;
+                                    @* A read-only calendar still browses, so its days stay focusable - but they no
+                                       longer select anything, which aria-disabled is what reports. *@
+                                    <button @onclick="() => HandleDayClick(date, dayEvents)"
+                                            @onkeydown="e => HandleDayKeyDown(e, date)"
+                                            type="button"
+                                            role="gridcell"
+                                            id="@GetDayButtonId(date)"
+                                            disabled="@disabled"
+                                            aria-readonly="@(ReadOnly ? "true" : null)"
+                                            aria-disabled="@((disabled || ReadOnly) ? "true" : null)"
+                                            aria-label="@GetDayAriaLabel(date, dayEvents)"
+                                            aria-current="@(isToday ? "date" : null)"
+                                            aria-haspopup="@(opensEventDialog ? "dialog" : null)"
+                                            title="@(dayEvents.Count > 0 ? GetEventTooltip(dayEvents) : null)"
+                                            style="@style"
+                                            class="bit-cal-dbt@(klass) @Classes?.DayButton"
+                                            tabindex="@(date == focusableDay ? 0 : -1)"
+                                            @* Only the selected cell carries the state, the way the APG's own date
+                                               picker does: an explicit false on the other forty-one would have a
+                                               screen reader say "not selected" on every day arrowed over. *@
+                                            aria-selected="@(isSelected ? "true" : null)">
+                                        @if (DayCellTemplate is not null)
+                                        {
+                                            @DayCellTemplate(GetDateTimeOfDayCell(date))
+                                        }
+                                        else
+                                        {
+                                            @GetDayOfCurrentMonth(date)
+                                        }
+                                        @if (dayEvents.Count > 0)
+                                        {
+                                            @* One dot per event rather than one dot per day, so a day with three
+                                               things on it does not look like a day with one - capped, since past
+                                               a few the row of dots says no more than "several" and the count is
+                                               in the label a screen reader is given and in the tooltip. *@
+                                            <span aria-hidden="true"
+                                                  style="@Styles?.EventIndicators"
+                                                  class="bit-cal-evc @Classes?.EventIndicators">
+                                                @foreach (var evt in GetIndicatorEvents(dayEvents))
+                                                {
+                                                    <span style="@Styles?.EventIndicator"
+                                                          class="bit-cal-evi @GetEventIndicatorColorClass(evt) @Classes?.EventIndicator">
+                                                    </span>
+                                                }
+                                            </span>
+                                        }
+                                    </button>
+                                }
+                            </div>
+                        }
+                    </div>
                 </div>
-            </div>
+            }
         }
 
         @if (MonthPickerIsVisible())
@@ -712,6 +728,12 @@
                     {
                         <li class="bit-cal-emi @Classes?.EventItem"
                             style="@Styles?.EventItem">
+                            @if (EventTemplate is not null)
+                            {
+                                @EventTemplate(evt)
+                            }
+                            else
+                            {
                             <div class="bit-cal-eit @Classes?.EventItemTitle"
                                  style="@Styles?.EventItemTitle">@evt.Title</div>
                             @if (evt.StartTime.HasValue || evt.EndTime.HasValue)
@@ -737,6 +759,7 @@
                                 <div class="bit-cal-eib @Classes?.EventItemBody"
                                      style="@Styles?.EventItemBody">@evt.Body</div>
                             }
+                            }
                         </li>
                     }
                 </ul>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
index 09037ccd390..9138dd4ec92 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
@@ -13,11 +13,13 @@ public partial class BitCalendar : BitInputBase<DateTimeOffset?>
 {
     private const int DEFAULT_WEEK_COUNT = 6;
     private const int DEFAULT_DAY_COUNT_PER_WEEK = 7;
+    private const int MAX_MONTH_COUNT = 3;
 
 
 
     private int _currentYear;
     private int _currentMonth;
+    private int _monthCount = 1;
     private bool _showYearPicker;
     private bool _showTimePicker;
     private bool _showMonthPicker;
@@ -36,13 +38,19 @@ public partial class BitCalendar : BitInputBase<DateTimeOffset?>
     private Dictionary<DateOnly, List<BitCalendarEvent>> _eventsByDate = [];
     private int _yearPickerEndYear;
     private int _yearPickerStartYear;
-    private string _monthTitle = string.Empty;
     private ElementReference _inputTimeHourRef = default!;
     private ElementReference _inputTimeMinuteRef = default!;
     private TimeZoneInfo _timeZone = TimeZoneInfo.Local;
     private CultureInfo _culture = CultureInfo.CurrentUICulture;
     private CancellationTokenSource _cancellationTokenSource = new();
-    private readonly DateTime?[,] _daysOfCurrentMonth = new DateTime?[DEFAULT_WEEK_COUNT, DEFAULT_DAY_COUNT_PER_WEEK];
+
+    // One grid, one title and one (year, month) pair per rendered month: a calendar showing a quarter at a
+    // time is the same day picker three times over, and everything each of them draws is read out of these
+    // by the index of its pane. The first of them is the month the navigation, the month picker and the
+    // year picker all work on - the rest follow it.
+    private string[] _monthTitles = [string.Empty];
+    private (int Year, int Month)[] _monthsOfView = [default];
+    private DateTime?[][,] _daysOfMonths = [new DateTime?[DEFAULT_WEEK_COUNT, DEFAULT_DAY_COUNT_PER_WEEK]];
 
     // The parts of the event dialog that have to name one another: the surface the focus is trapped in and
     // restored from, and the heading it takes its accessible name from.
@@ -170,17 +178,25 @@ private int _minuteView
     [Parameter] public RenderFragment<DateTimeOffset>? DayCellTemplate { get; set; }
 
     /// <summary>
-    /// Disables every day after today, exactly as a <see cref="MaxDate"/> of today would.
+    /// Disables every day after today, exactly as a <see cref="MaxDate"/> of now would.
     /// When both are set, the earlier of the two bounds wins.
     /// </summary>
+    /// <remarks>
+    /// Today stays selectable, and a time picker on screen is held to the hours of it up to this very
+    /// minute: the bound is an instant, so a calendar refusing the future refuses the rest of today too.
+    /// </remarks>
     [Parameter]
     [CallOnSet(nameof(OnSetParameters))]
     public bool DisableFuture { get; set; }
 
     /// <summary>
-    /// Disables every day before today, exactly as a <see cref="MinDate"/> of today would.
+    /// Disables every day before today, exactly as a <see cref="MinDate"/> of now would.
     /// When both are set, the later of the two bounds wins.
     /// </summary>
+    /// <remarks>
+    /// Today stays selectable, and a time picker on screen is held to the hours of it from this very
+    /// minute on: the bound is an instant, so a calendar refusing the past refuses this morning too.
+    /// </remarks>
     [Parameter]
     [CallOnSet(nameof(OnSetParameters))]
     public bool DisablePast { get; set; }
@@ -206,6 +222,12 @@ private int _minuteView
     /// </summary>
     [Parameter] public string EventDetailsCloseButtonTitle { get; set; } = "Close";
 
+    /// <summary>
+    /// Used to customize how an event is rendered in the details dialog, in place of its title, its time and
+    /// its body - the place for a link to whatever the event stands for in the application.
+    /// </summary>
+    [Parameter] public RenderFragment<BitCalendarEvent>? EventTemplate { get; set; }
+
     /// <summary>
     /// The text shown before the start time of an event when only a start time is present (e.g. "From 09:00").
     /// </summary>
@@ -231,7 +253,8 @@ private int _minuteView
 
     /// <summary>
     /// Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months,
-    /// to keep the calendar height fixed while navigating between months.
+    /// to keep the calendar height fixed while navigating between months. It is always on when <see cref="MonthCount"/>
+    /// renders more than one month, so the months keep an even height next to each other.
     /// </summary>
     [Parameter]
     [CallOnSet(nameof(OnSetParameters))]
@@ -370,6 +393,11 @@ private int _minuteView
     /// <summary>
     /// The maximum allowable date of the calendar.
     /// </summary>
+    /// <remarks>
+    /// The days after it are ruled out as a whole, and the day it itself falls on stays selectable. Where a
+    /// time picker is on screen, the time it carries bounds the hours of that day too, so the calendar
+    /// cannot produce an instant past the bound.
+    /// </remarks>
     [Parameter]
     [CallOnSet(nameof(OnSetParameters))]
     public DateTimeOffset? MaxDate { get; set; }
@@ -377,6 +405,7 @@ private int _minuteView
     /// <summary>
     /// The minimum allowable date of the calendar.
     /// </summary>
+    /// <inheritdoc cref="MaxDate" path="/remarks"/>
     [Parameter]
     [CallOnSet(nameof(OnSetParameters))]
     public DateTimeOffset? MinDate { get; set; }
@@ -392,7 +421,21 @@ private int _minuteView
     [Parameter] public int MinuteStep { get; set; } = 1;
 
     /// <summary>
-    /// Used to customize how content inside the month cell is rendered. 
+    /// The number of consecutive months rendered side by side in the day picker (1 to 3), which turns the
+    /// calendar into a view of a whole season - the arrow keys, the selection and the events carry on
+    /// across the months of it.
+    /// </summary>
+    /// <remarks>
+    /// More than one month always renders six week rows, so the months keep an even height next to each
+    /// other, and never renders the days of the adjacent months, since each of them is a day of the pane
+    /// beside it. The months stack instead of overflowing when the width they are given cannot fit them.
+    /// </remarks>
+    [Parameter, ResetClassBuilder]
+    [CallOnSet(nameof(OnSetParameters))]
+    public int MonthCount { get; set; } = 1;
+
+    /// <summary>
+    /// Used to customize how content inside the month cell is rendered.
     /// </summary>
     [Parameter] public RenderFragment<DateTimeOffset>? MonthCellTemplate { get; set; }
 
@@ -445,6 +488,13 @@ private int _minuteView
     /// </summary>
     [Parameter] public EventCallback<DateTimeOffset?> OnSelectDate { get; set; }
 
+    /// <summary>
+    /// Whether the previous and next navigation buttons move the calendar by all of its rendered months
+    /// instead of one, so consecutive pages of a multi-month calendar never overlap.
+    /// It has no effect when <see cref="MonthCount"/> renders a single month.
+    /// </summary>
+    [Parameter] public bool PagedNavigation { get; set; }
+
     /// <summary>
     /// Gets or sets the icon to display in the Go to previous month button using custom CSS classes for external icon libraries.
     /// Takes precedence over <see cref="PrevMonthNavIconName"/> when both are set.
@@ -515,6 +565,8 @@ private int _minuteView
 
     /// <summary>
     /// Whether the days of the previous and next months should be shown in the day picker.
+    /// It has no effect when <see cref="MonthCount"/> renders more than one month, since those days would
+    /// then show up in two grids at once.
     /// </summary>
     [Parameter] public bool ShowOutsideDays { get; set; } = true;
 
@@ -702,6 +754,10 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => BitCssClasses.Size(Size, "bit-cal"));
 
+        // A strip of months is given the width of all of them, so it says it is one: what it is given is not
+        // always what it asks for, and the months then stack instead of overflowing whatever holds them.
+        ClassBuilder.Register(() => Math.Clamp(MonthCount, 1, MAX_MONTH_COUNT) > 1 ? "bit-cal-mcv" : null);
+
         // A culture that writes right to left implies the direction of the calendar as well, so one that was
         // given no explicit Dir still lays itself out the way its culture reads.
         ClassBuilder.Register(() => BitCssClasses.CultureRtl(Dir, _culture));
@@ -873,6 +929,7 @@ private void OnSetParameters(bool resetPickers)
 
         _timeZone = TimeZone ?? TimeZoneInfo.Local;
         _culture = Culture ?? CultureInfo.CurrentUICulture;
+        _monthCount = Math.Clamp(MonthCount, 1, MAX_MONTH_COUNT);
 
         var value = CurrentValue.GetValueOrDefault(StartingValue.GetValueOrDefault(GetNow()));
 
@@ -899,7 +956,16 @@ private void OnSetParameters(bool resetPickers)
         _hour = CurrentValue.HasValue || StartingValue.HasValue ? dateTime.Hour : 0;
         _minute = CurrentValue.HasValue || StartingValue.HasValue ? dateTime.Minute : 0;
 
-        GenerateCalendarData(dateTime);
+        // A value falling inside the months already on screen leaves the view where it is: a calendar
+        // showing a season is not paged by picking a day of its second or its third month.
+        if (_monthCount > 1 && _monthsOfView.Length == _monthCount && IsInDisplayedMonths(dateTime.Date))
+        {
+            GenerateMonthData(_currentYear, _currentMonth);
+        }
+        else
+        {
+            GenerateCalendarData(dateTime);
+        }
     }
 
     private async Task SelectDate(DateTime selectedDate)
@@ -944,13 +1010,24 @@ private async Task SelectDate(DateTime selectedDate)
 
         _focusedDate = selectedDate;
 
+        // The time the picker is holding travels onto the day being selected, where a bound carrying a time
+        // of day can allow less of it than the day it came from did - the morning of a calendar bounded at
+        // "now", for one. So it arrives inside what this day allows rather than pushing the value past it.
+        ClampTimeToBounds(selectedDate);
+
         selectedDate = selectedDate.AddHours(_hour);
         selectedDate = selectedDate.AddMinutes(_minute);
 
         CurrentValue = new DateTimeOffset(selectedDate, _timeZone.GetUtcOffset(selectedDate));
 
-        _currentYear = _culture.Calendar.GetYear(selectedDate);
-        _currentMonth = _culture.Calendar.GetMonth(selectedDate);
+        // A day of a month the view already shows leaves the view where it is - which is what keeps a
+        // multi-month calendar still while its second and third months are picked from. Only a day outside
+        // of them, one of the adjacent months filling the grid, scrolls the calendar onto its own month.
+        if (IsInDisplayedMonths(selectedDate.Date) is false)
+        {
+            _currentYear = _culture.Calendar.GetYear(selectedDate);
+            _currentMonth = _culture.Calendar.GetMonth(selectedDate);
+        }
 
         if (_currentYear != previousYear || _currentMonth != previousMonth)
         {
@@ -1030,29 +1107,15 @@ private async Task HandleMonthChange(bool isNext)
         var previousYear = _currentYear;
         var previousMonth = _currentMonth;
 
-        if (isNext)
-        {
-            if (_currentMonth < GetMonthsInCurrentYear())
-            {
-                _currentMonth++;
-            }
-            else
-            {
-                _currentYear++;
-                _currentMonth = 1;
-            }
-        }
-        else
+        // With PagedNavigation the calendar moves a whole page of months at once, but never past the point
+        // where the single-month navigation would have stopped.
+        var steps = PagedNavigation ? _monthCount : 1;
+
+        for (var i = 0; i < steps; i++)
         {
-            if (_currentMonth > 1)
-            {
-                _currentMonth--;
-            }
-            else
-            {
-                _currentYear--;
-                _currentMonth = GetMonthsInCurrentYear();
-            }
+            if (i > 0 && CanChangeMonth(isNext) is false) break;
+
+            (_currentYear, _currentMonth) = AddCalendarMonths(_currentYear, _currentMonth, isNext ? 1 : -1);
         }
 
         GenerateMonthData(_currentYear, _currentMonth);
@@ -1114,6 +1177,9 @@ private void HandleNowButtonClick()
         _hour = now.Hour;
         _minute = now.Minute;
 
+        // "Now" is a time like any other the picker produces, so the bounds have the same say over it.
+        ClampTimeToBounds();
+
         UpdateTime();
     }
 
@@ -1141,10 +1207,94 @@ private void GenerateCalendarData(DateTime dateTime)
         GenerateMonthData(_currentYear, _currentMonth);
     }
 
+    // Fills the grid of every rendered month, starting from the given one.
     private void GenerateMonthData(int year, int month)
     {
-        _monthTitle = $"{GetMonthName(year, month)} {year}";
+        // The last page of a multi-month view is a full one. A start so late that the months following it
+        // are past the end of the calendar would repeat the last of them - two panes of the same month,
+        // down to the ids of its days - so the view is pulled back far enough to hold as many as it shows.
+        if (_monthCount > 1)
+        {
+            var (maxYear, maxMonth) = GetMaxCalendarYearMonth();
+            var (latestStartYear, latestStartMonth) = AddCalendarMonths(maxYear, maxMonth, -(_monthCount - 1));
+
+            if (CompareYearMonth(year, month, latestStartYear, latestStartMonth) > 0)
+            {
+                (year, month) = (latestStartYear, latestStartMonth);
+                (_currentYear, _currentMonth) = (year, month);
+            }
+        }
+
+        if (_daysOfMonths.Length != _monthCount)
+        {
+            _daysOfMonths = new DateTime?[_monthCount][,];
+            for (var i = 0; i < _monthCount; i++)
+            {
+                _daysOfMonths[i] = new DateTime?[DEFAULT_WEEK_COUNT, DEFAULT_DAY_COUNT_PER_WEEK];
+            }
+
+            _monthTitles = new string[_monthCount];
+            _monthsOfView = new (int, int)[_monthCount];
+        }
+
+        for (var i = 0; i < _monthCount; i++)
+        {
+            var (y, m) = AddCalendarMonths(year, month, i);
+
+            GenerateSingleMonthData(i, y, m);
+        }
+    }
+
+    // Walks the (year, month) pair the given number of months forward or backward, through the months of
+    // the culture's own calendar: a leap year of the Hebrew calendar has thirteen of them, so the count of
+    // each year is asked for rather than assumed. A pair that walks off the supported range comes back
+    // resting on its edge, the way every other move of the calendar does.
+    private (int Year, int Month) AddCalendarMonths(int year, int month, int offset)
+    {
+        var (minYear, minMonth) = GetMinCalendarYearMonth();
+        var (maxYear, maxMonth) = GetMaxCalendarYearMonth();
+
+        for (var i = 0; i < Math.Abs(offset); i++)
+        {
+            if (offset > 0)
+            {
+                if (year > maxYear || (year == maxYear && month >= maxMonth)) return (maxYear, maxMonth);
+
+                if (month < GetMonthsInYear(year))
+                {
+                    month++;
+                }
+                else
+                {
+                    year++;
+                    month = 1;
+                }
+            }
+            else
+            {
+                if (year < minYear || (year == minYear && month <= minMonth)) return (minYear, minMonth);
+
+                if (month > 1)
+                {
+                    month--;
+                }
+                else
+                {
+                    year--;
+                    month = GetMonthsInYear(year);
+                }
+            }
+        }
 
+        return (year, month);
+    }
+
+    private void GenerateSingleMonthData(int monthIndex, int year, int month)
+    {
+        _monthsOfView[monthIndex] = (year, month);
+        _monthTitles[monthIndex] = $"{GetMonthName(year, month)} {year}";
+
+        var days = _daysOfMonths[monthIndex];
         var calendar = _culture.Calendar;
         int daysInMonth = calendar.GetDaysInMonth(year, month);
         int firstDayOfWeek = (int)GetFirstDayOfWeek();
@@ -1197,35 +1347,35 @@ private void GenerateMonthData(int year, int month)
 
         int day = daysInPreviousMonth - dayOfWeek + 1;
 
-        for (int i = 0; i < 1; i++)
+        for (int j = 0; j < dayOfWeek; j++)
         {
-            for (int j = 0; j < dayOfWeek; j++)
-            {
-                _daysOfCurrentMonth[i, j] = TryCreateDate(previousYear, previousMonth, day);
-                day++;
-            }
+            days[0, j] = TryCreateDate(previousYear, previousMonth, day);
+            day++;
         }
 
         day = 1;
         var ended = false;
-        for (int i = 0; i < 6; i++)
+        // Months of unequal height would make a multi-month strip ragged, so the six rows are always laid
+        // out there even when FixedWeeks is off.
+        var fixedWeeks = FixedWeeks || _monthCount > 1;
+        for (int i = 0; i < DEFAULT_WEEK_COUNT; i++)
         {
-            for (int j = 0; j < 7; j++)
+            for (int j = 0; j < DEFAULT_DAY_COUNT_PER_WEEK; j++)
             {
                 if (i == 0 && j < dayOfWeek) continue;
 
                 if (day <= daysInMonth)
                 {
-                    _daysOfCurrentMonth[i, j] = TryCreateDate(year, month, day);
+                    days[i, j] = TryCreateDate(year, month, day);
                     day++;
                 }
                 else
                 {
-                    if (j == 0 && FixedWeeks is false)
+                    if (j == 0 && fixedWeeks is false)
                     {
                         ended = true;
                     }
-                    _daysOfCurrentMonth[i, j] = ended ? null : TryCreateDate(nextYear, nextMonth, day - daysInMonth);
+                    days[i, j] = ended ? null : TryCreateDate(nextYear, nextMonth, day - daysInMonth);
                     day++;
                 }
             }
@@ -1316,11 +1466,11 @@ private int GetMonthNameIndex(int year, int month)
         return GetMonthsInYear(year) == 13 ? month : month + 1;
     }
 
-    private bool IsWeekRowEmpty(int weekIndex)
+    private bool IsWeekRowEmpty(int monthIndex, int weekIndex)
     {
         for (var day = 0; day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
         {
-            if (_daysOfCurrentMonth[weekIndex, day].HasValue) return false;
+            if (_daysOfMonths[monthIndex][weekIndex, day].HasValue) return false;
         }
 
         return true;
@@ -1407,14 +1557,14 @@ private static string GetNarrowDayName(string name)
         return char.IsHighSurrogate(name[0]) && name.Length > 1 ? name[..2] : name[..1];
     }
 
-    private int GetWeekNumber(int weekIndex)
+    private int GetWeekNumber(int monthIndex, int weekIndex)
     {
         // The first cells of the week can be empty at the very edge of the calendar's supported range, so the
         // number of the week is read off the first day of it that actually exists.
-        var date = _daysOfCurrentMonth[weekIndex, 0];
+        var date = _daysOfMonths[monthIndex][weekIndex, 0];
         for (var day = 1; date.HasValue is false && day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
         {
-            date = _daysOfCurrentMonth[weekIndex, day];
+            date = _daysOfMonths[monthIndex][weekIndex, day];
         }
 
         return _culture.Calendar.GetWeekOfYear(date!.Value, WeekNumberRule ?? CalendarWeekRule.FirstFullWeek, GetFirstDayOfWeek());
@@ -1487,8 +1637,12 @@ private bool CanChangeMonth(bool isNext)
 
         if (isNext)
         {
+            // What the next button runs into is the last month of the view rather than the first: a
+            // calendar showing a quarter has already reached the bound once its third pane is on it.
+            var (lastYear, lastMonth) = GetLastDisplayedMonth();
+
             var (maxCalendarYear, maxCalendarMonth) = GetMaxCalendarYearMonth();
-            if (_currentYear == maxCalendarYear && _currentMonth >= maxCalendarMonth) return false;
+            if (CompareYearMonth(lastYear, lastMonth, maxCalendarYear, maxCalendarMonth) >= 0) return false;
 
             var max = GetMaxDate();
             if (max.HasValue)
@@ -1497,13 +1651,13 @@ private bool CanChangeMonth(bool isNext)
                 var maxDateYear = _culture.Calendar.GetYear(maxDate);
                 var maxDateMonth = _culture.Calendar.GetMonth(maxDate);
 
-                if (maxDateYear == _currentYear && maxDateMonth == _currentMonth) return false;
+                if (CompareYearMonth(lastYear, lastMonth, maxDateYear, maxDateMonth) >= 0) return false;
             }
         }
         else
         {
             var (minCalendarYear, minCalendarMonth) = GetMinCalendarYearMonth();
-            if (_currentYear == minCalendarYear && _currentMonth <= minCalendarMonth) return false;
+            if (CompareYearMonth(_currentYear, _currentMonth, minCalendarYear, minCalendarMonth) <= 0) return false;
 
             var min = GetMinDate();
             if (min.HasValue)
@@ -1512,13 +1666,26 @@ private bool CanChangeMonth(bool isNext)
                 var minDateYear = _culture.Calendar.GetYear(minDate);
                 var minDateMonth = _culture.Calendar.GetMonth(minDate);
 
-                if (minDateYear == _currentYear && minDateMonth == _currentMonth) return false;
+                if (CompareYearMonth(_currentYear, _currentMonth, minDateYear, minDateMonth) <= 0) return false;
             }
         }
 
         return true;
     }
 
+    // The month of the last pane of the day picker, which is the one the next button runs into.
+    private (int Year, int Month) GetLastDisplayedMonth()
+    {
+        return _monthCount == 1 ? (_currentYear, _currentMonth) : AddCalendarMonths(_currentYear, _currentMonth, _monthCount - 1);
+    }
+
+    // Two months of the same calendar in order, so a bound that falls anywhere before or after the view -
+    // not only on the very month it is showing - stops the navigation.
+    private static int CompareYearMonth(int year, int month, int otherYear, int otherMonth)
+    {
+        return year != otherYear ? year.CompareTo(otherYear) : month.CompareTo(otherMonth);
+    }
+
     private bool CanChangeYear(bool isNext)
     {
         if (IsEnabled is false) return false;
@@ -1644,7 +1811,7 @@ private bool IsYearOutOfMinAndMaxDate(int year)
             || (minDate.HasValue && year < _culture.Calendar.GetYear(GetDateTime(minDate.Value)));
     }
 
-    private (string style, string klass) GetDayButtonCss(DateTime date)
+    private (string style, string klass) GetDayButtonCss(DateTime date, int monthIndex)
     {
         StringBuilder klass = new StringBuilder();
         StringBuilder style = new StringBuilder();
@@ -1661,10 +1828,10 @@ private bool IsYearOutOfMinAndMaxDate(int year)
             AppendStyle(style, Styles?.SelectedDayButton);
         }
 
-        var month = _culture.Calendar.GetMonth(date);
+        var isInMonth = IsInMonth(date, monthIndex);
 
-        //Isn't in current month
-        if (month != _currentMonth)
+        //Isn't in the month of this pane
+        if (isInMonth is false)
         {
             klass.Append(" bit-cal-dbo");
         }
@@ -1683,7 +1850,7 @@ private bool IsYearOutOfMinAndMaxDate(int year)
         }
 
         //Is today
-        if (HighlightToday && month == _currentMonth && date == GetToday().Date)
+        if (HighlightToday && isInMonth && date == GetToday().Date)
         {
             klass.Append(" bit-cal-dtd");
 
@@ -1805,9 +1972,24 @@ private DateTime GetToday()
         return GetDateTime(Today ?? DateTimeOffset.Now);
     }
 
-    private bool IsInCurrentMonth(DateTime date)
+    // Whether the date is a day of the month the given pane of the day picker is headed with, rather than one
+    // of the adjacent months that fill the first and the last row of its grid.
+    private bool IsInMonth(DateTime date, int monthIndex)
     {
-        return _culture.Calendar.GetYear(date) == _currentYear && _culture.Calendar.GetMonth(date) == _currentMonth;
+        var (year, month) = _monthsOfView[monthIndex];
+
+        return _culture.Calendar.GetYear(date) == year && _culture.Calendar.GetMonth(date) == month;
+    }
+
+    /// <inheritdoc cref="IsInMonth"/>
+    private bool IsInDisplayedMonths(DateTime date)
+    {
+        for (var monthIndex = 0; monthIndex < _monthCount; monthIndex++)
+        {
+            if (IsInMonth(date, monthIndex)) return true;
+        }
+
+        return false;
     }
 
     private string GetDayButtonId(DateTime date)
@@ -1825,40 +2007,50 @@ private string GetYearButtonId(int year)
         return FormattableString.Invariant($"{_Id}-year-{year:D4}");
     }
 
+    // A day of the previous or the next month is a day of the pane beside it in a multi-month view, so it is
+    // never drawn twice: what fills the first and the last row of every grid there is an empty cell.
+    private bool ShowOutsideDaysOfMonth() => ShowOutsideDays && _monthCount == 1;
+
     // The single day of the grid that is in the tab sequence (the roving tabindex of the APG grid pattern):
     // the one the keyboard last landed on, otherwise the selection, otherwise today, and as a last resort the
     // first day that can actually be selected - the grid must never be unreachable.
     private DateTime GetFocusableDay()
     {
-        if (_focusedDate.HasValue && IsInCurrentMonth(_focusedDate.Value) && IsDayDisabled(_focusedDate.Value) is false) return _focusedDate.Value;
+        if (_focusedDate.HasValue && IsInDisplayedMonths(_focusedDate.Value) && IsDayDisabled(_focusedDate.Value) is false) return _focusedDate.Value;
 
         if (CurrentValue.HasValue)
         {
             var selectedDate = GetDateTime(CurrentValue.Value).Date;
-            if (IsInCurrentMonth(selectedDate) && IsDayDisabled(selectedDate) is false) return selectedDate;
+            if (IsInDisplayedMonths(selectedDate) && IsDayDisabled(selectedDate) is false) return selectedDate;
         }
 
         var today = GetToday().Date;
-        if (IsInCurrentMonth(today) && IsDayDisabled(today) is false) return today;
+        if (IsInDisplayedMonths(today) && IsDayDisabled(today) is false) return today;
 
-        for (var week = 0; week < DEFAULT_WEEK_COUNT; week++)
+        for (var monthIndex = 0; monthIndex < _monthCount; monthIndex++)
         {
-            for (var day = 0; day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
+            for (var week = 0; week < DEFAULT_WEEK_COUNT; week++)
             {
-                var date = _daysOfCurrentMonth[week, day];
-                if (date.HasValue && IsInCurrentMonth(date.Value) && IsDayDisabled(date.Value) is false) return date.Value;
+                for (var day = 0; day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
+                {
+                    var date = _daysOfMonths[monthIndex][week, day];
+                    if (date.HasValue && IsInMonth(date.Value, monthIndex) && IsDayDisabled(date.Value) is false) return date.Value;
+                }
             }
         }
 
         // A month can be disabled from end to end, and a disabled day is not focusable anyway - but the
-        // tabindex still has to land on a day of the month itself: with ShowOutsideDays turned off the days
-        // around it are not rendered as buttons at all, so pointing at one loses the grid entirely.
-        for (var week = 0; week < DEFAULT_WEEK_COUNT; week++)
+        // tabindex still has to land on a day of a month of the view itself: the days around them are either
+        // not rendered as buttons at all (ShowOutsideDays turned off) or belong to the pane next door.
+        for (var monthIndex = 0; monthIndex < _monthCount; monthIndex++)
         {
-            for (var day = 0; day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
+            for (var week = 0; week < DEFAULT_WEEK_COUNT; week++)
             {
-                var date = _daysOfCurrentMonth[week, day];
-                if (date.HasValue && IsInCurrentMonth(date.Value)) return date.Value;
+                for (var day = 0; day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
+                {
+                    var date = _daysOfMonths[monthIndex][week, day];
+                    if (date.HasValue && IsInMonth(date.Value, monthIndex)) return date.Value;
+                }
             }
         }
 
@@ -2187,13 +2379,18 @@ private async Task MoveFocusToDay(DateTime target)
         var previousYear = _currentYear;
         var previousMonth = _currentMonth;
 
-        var year = _culture.Calendar.GetYear(target);
-        var month = _culture.Calendar.GetMonth(target);
-
-        if (year != _currentYear || month != _currentMonth)
+        // A day the view already shows is reached without moving the calendar - the arrow keys cross from
+        // one month of a multi-month view into the next without paging it. A day outside of the view scrolls
+        // it by the least that brings the day into it: onto its month going back, onto the page ending with
+        // its month going forward, so the day the keyboard lands on is where it was reached from.
+        if (IsInDisplayedMonths(target) is false)
         {
-            _currentYear = year;
-            _currentMonth = month;
+            var year = _culture.Calendar.GetYear(target);
+            var month = _culture.Calendar.GetMonth(target);
+
+            (_currentYear, _currentMonth) = CompareYearMonth(year, month, _currentYear, _currentMonth) < 0
+                ? (year, month)
+                : AddCalendarMonths(year, month, -(_monthCount - 1));
 
             GenerateMonthData(_currentYear, _currentMonth);
         }
@@ -2386,6 +2583,10 @@ private void HandleOnAmClick()
         if (IsEnabled is false) return;
 
         _hour %= 12;  // "12:-- am" is "00:--" in 24h
+
+        // Half a day is a wide move, so it can land outside of what a bound on this day allows.
+        ClampTimeToBounds();
+
         UpdateTime();
     }
 
@@ -2400,6 +2601,9 @@ private void HandleOnPmClick()
         }
 
         _hour %= 24;
+
+        ClampTimeToBounds();
+
         UpdateTime();
     }
 
@@ -2508,7 +2712,10 @@ private void ResetCts()
     // one, and a step that does not divide the day wraps to the top of the grid instead of drifting off it.
     private void ChangeHour(bool isNext)
     {
-        _hour = BitTimeSteps.StepToAllowed(_hour, isNext, 24, IsHourOnGrid) ?? _hour;
+        _hour = BitTimeSteps.StepToAllowed(_hour, isNext, 24, IsHourAllowed) ?? _hour;
+
+        // Stepping onto the hour a bound falls in can leave the minute past the bound, so it comes along.
+        _minute = BitTimeSteps.FindNearestAllowed(_minute, 60, IsMinuteAllowed) ?? _minute;
 
         UpdateTime();
     }
@@ -2516,7 +2723,7 @@ private void ChangeHour(bool isNext)
     /// <inheritdoc cref="ChangeHour"/>
     private void ChangeMinute(bool isNext)
     {
-        _minute = BitTimeSteps.StepToAllowed(_minute, isNext, 60, IsMinuteOnGrid) ?? _minute;
+        _minute = BitTimeSteps.StepToAllowed(_minute, isNext, 60, IsMinuteAllowed) ?? _minute;
 
         UpdateTime();
     }
@@ -2529,6 +2736,114 @@ private void ChangeMinute(bool isNext)
     /// <inheritdoc cref="IsHourOnGrid"/>
     private bool IsMinuteOnGrid(int minute) => BitTimeSteps.IsOnGrid(minute, MinuteStep, 0, 60);
 
+    // MinDate and MaxDate rule out whole days everywhere else in the calendar and the very hours of one day
+    // here: the day a bound falls on stays selectable, but only from the time of day the bound carries. So
+    // the time picker of a calendar bounded at "now" cannot be wound back into this morning, the way its day
+    // grid cannot be wound back to yesterday. Everything that moves the time is held to it alongside the
+    // step grid, since both are simply which times this picker offers.
+    private bool IsHourAllowed(int hour)
+    {
+        if (IsHourOnGrid(hour) is false) return false;
+
+        var (min, max) = GetTimeBounds();
+
+        if (min.HasValue && hour < min.Value.Hours) return false;
+        if (max.HasValue && hour > max.Value.Hours) return false;
+
+        return true;
+    }
+
+    /// <inheritdoc cref="IsHourAllowed"/>
+    private bool IsMinuteAllowed(int minute)
+    {
+        if (IsMinuteOnGrid(minute) is false) return false;
+
+        var (min, max) = GetTimeBounds();
+
+        // Only the hour a bound falls in is bounded by its minutes: every later hour of the day the minimum
+        // falls on, and every earlier one of the day the maximum does, is in range from end to end.
+        if (min.HasValue && _hour == min.Value.Hours && minute < min.Value.Minutes) return false;
+        if (max.HasValue && _hour == max.Value.Hours && minute > max.Value.Minutes) return false;
+
+        return true;
+    }
+
+    /// <inheritdoc cref="IsHourAllowed"/>
+    private (TimeSpan? Min, TimeSpan? Max) GetTimeBounds()
+    {
+        // The picker writes into the value, so the day it is setting the time of is the day the value is on.
+        // Without one it produces nothing and nothing constrains it.
+        return CurrentValue.HasValue ? GetTimeBounds(GetDateTime(CurrentValue.Value).Date) : (null, null);
+    }
+
+    /// <inheritdoc cref="IsHourAllowed"/>
+    private (TimeSpan? Min, TimeSpan? Max) GetTimeBounds(DateTime day)
+    {
+        TimeSpan? min = null;
+        TimeSpan? max = null;
+
+        // Only a calendar carrying a time picker picks a time at all. Without one the time of the value is
+        // whatever it was given rather than something the user chose here, and a day bound rules out days:
+        // pulling today's midnight up to this very minute would hand the same minute to every later day
+        // picked afterwards, none of it ever shown.
+        if (ShowTimePicker is false) return (min, max);
+
+        var minDate = GetMinDate();
+        if (minDate.HasValue)
+        {
+            // The seconds of a bound are dropped rather than rounded up, so the minute it falls in - the one
+            // a bound of "now" is in - is a minute the picker can still be set to.
+            var date = GetDateTime(minDate.Value);
+            if (date.Date == day.Date)
+            {
+                min = new TimeSpan(date.Hour, date.Minute, 0);
+            }
+        }
+
+        var maxDate = GetMaxDate();
+        if (maxDate.HasValue)
+        {
+            var date = GetDateTime(maxDate.Value);
+            if (date.Date == day.Date)
+            {
+                max = new TimeSpan(date.Hour, date.Minute, 0);
+            }
+        }
+
+        return (min, max);
+    }
+
+    /// <inheritdoc cref="ClampTimeToBounds(DateTime)"/>
+    private void ClampTimeToBounds()
+    {
+        if (CurrentValue.HasValue is false) return;
+
+        ClampTimeToBounds(GetDateTime(CurrentValue.Value).Date);
+    }
+
+    // The time brought into what the bounds allow on the given day. The bound itself is where an out of
+    // range time lands, whether or not it sits on the step grid: a time the application declared is a time
+    // the picker may produce.
+    private void ClampTimeToBounds(DateTime day)
+    {
+        var (min, max) = GetTimeBounds(day);
+
+        if (min.HasValue is false && max.HasValue is false) return;
+
+        var time = new TimeSpan(_hour, _minute, 0);
+
+        if (min.HasValue && time < min.Value)
+        {
+            _hour = min.Value.Hours;
+            _minute = min.Value.Minutes;
+        }
+        else if (max.HasValue && time > max.Value)
+        {
+            _hour = max.Value.Hours;
+            _minute = max.Value.Minutes;
+        }
+    }
+
     // A committed hour or minute - the field left, Enter pressed, an arrow key or a spinner of the number
     // input stepped, each of which fires a change of its own - is held to the HourStep/MinuteStep grid, so
     // the two halves of the same control cannot disagree about which times the picker offers. The value
@@ -2539,13 +2854,19 @@ private void HandleOnTimeInputChange(bool isHour)
     {
         if (IsEnabled is false || ReadOnly) return;
 
+        // A typed number is brought inside the bounds before the grid has its say: distance on a clock is
+        // measured around it, so the allowed value nearest to a number below the minimum can be the one late
+        // on the other side of the day - while what was meant is plainly the earliest time on offer.
+        ClampTimeToBounds();
+
         if (isHour)
         {
-            _hour = BitTimeSteps.FindAllowedNear(_hour, _hourBeforeInput, 24, IsHourOnGrid) ?? _hour;
+            _hour = BitTimeSteps.FindAllowedNear(_hour, _hourBeforeInput, 24, IsHourAllowed) ?? _hour;
+            _minute = BitTimeSteps.FindNearestAllowed(_minute, 60, IsMinuteAllowed) ?? _minute;
         }
         else
         {
-            _minute = BitTimeSteps.FindAllowedNear(_minute, _minuteBeforeInput, 60, IsMinuteOnGrid) ?? _minute;
+            _minute = BitTimeSteps.FindAllowedNear(_minute, _minuteBeforeInput, 60, IsMinuteAllowed) ?? _minute;
         }
 
         UpdateTime();
@@ -2562,7 +2883,10 @@ private void HandleOnTimeInputKeyDown(KeyboardEventArgs e, bool isHour)
         ChangeTime(e.Key is "PageUp", isHour);
     }
 
-    public bool DayPickerIsVisible()
+    // Which of the pickers is on screen is the calendar's own business: what the day picker, the month and
+    // year picker and the time picker leave room for one another depends on which of them are shown at all,
+    // which of them are laid over the others, and which of the overlays is currently up.
+    private bool DayPickerIsVisible()
     {
         if (_showMonthPicker is false && _showTimePicker is false) return true;
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
index 1fa33b64673..62718f05363 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
@@ -165,6 +165,13 @@
     padding: var(--bit-Calendar-padding, #{spacing(1.5)});
 }
 
+// A strip of months is wider than a single one, and what holds it is not always as wide as it asks for -
+// a phone, a column of a form - so the months wrap onto the next line instead of overflowing it. Each of
+// them keeps its own padding, which is what leaves them evenly apart however they end up laid out.
+.bit-cal-mcv .bit-cal-cnt {
+    flex-wrap: wrap;
+}
+
 .bit-cal-grd {
     display: flex;
     flex-flow: column nowrap;
@@ -849,10 +856,13 @@
 // longest month name already overruns that floor at the Fluent 14px base ("September 2024" wants 125px
 // of the 124px the arrows leave it) and overruns it further under a preset that sets a larger one, so
 // the label was silently ellipsised. The button therefore carries its own floor in em: it is read
-// against the button's own font, so it tracks whatever step the active ramp puts here, and the day
+// against the label's own font, so it tracks whatever step the active ramp puts here, and the day
 // rows distribute the few extra pixels evenly (space-evenly) rather than leaving a gap at one end.
-// Only the day view takes it - the month view's header is a bare year and needs none of the room.
-.bit-cal-dwp .bit-cal-ptb {
+// Both spellings of the header take it - the button that opens the month picker and the plain label
+// standing in for it - since either of them can be the one naming the month. Only the day view does:
+// the month view's header is a bare year and needs none of the room.
+.bit-cal-dwp .bit-cal-ptb,
+.bit-cal-dwp .bit-cal-pkt {
     min-width: 8.75em;
 }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
index b61ef16902c..2ac03cd03ee 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -173,7 +173,9 @@
             <b>ShowTimePickerAsOverlay</b>. <b>TimeFormat</b> switches between the 24-hour and 12-hour clocks,
             <b>ShowNowButton</b> hides the button that jumps to the current time, and <b>HourStep</b> /
             <b>MinuteStep</b> lay a grid over the day and the hour that everything the picker produces lands on —
-            the spin buttons, the arrow and page keys, and what is typed.
+            the spin buttons, the arrow and page keys, and what is typed. A <b>MinDate</b> or <b>MaxDate</b>
+            carrying a time of day bounds the hours of the very day it falls on, so the picker cannot produce
+            an instant outside of them.
         </div>
         <br /><br />
         <div class="example-content">
@@ -189,6 +191,11 @@
             <br /><br />
             <div>HourStep = 3, MinuteStep = 15:</div>
             <BitCalendar ShowTimePicker HourStep="3" MinuteStep="15" />
+            <br /><br />
+            <div>MinDate / MaxDate with a time of day (from 09:30 today, until 17:00 in two days):</div>
+            <BitCalendar ShowTimePicker @bind-Value="@boundedDateTime"
+                         MinDate="boundedMinDate" MaxDate="boundedMaxDate" />
+            <div>Selected: @boundedDateTime.ToString()</div>
         </div>
     </DemoExample>
 
@@ -198,8 +205,9 @@
             opens a modal dialog listing the title, time and description of each of them, all-day first. An event
             can name its own <b>Color</b>; the rest take the calendar's. The dialog is dismissed with Escape or
             its close button and hands the keyboard back to the day it came from. <b>ShowEventDetails</b> false
-            keeps the dots and the tooltip but leaves the day's events to the page, and <b>EventTimeFromText</b> /
-            <b>EventTimeUntilText</b> localize the one-sided time rows.
+            keeps the dots and the tooltip but leaves the day's events to the page, <b>EventTemplate</b> renders
+            an event's row in the dialog itself, and <b>EventTimeFromText</b> / <b>EventTimeUntilText</b>
+            localize the one-sided time rows.
         </div>
         <br /><br />
         <div class="example-content">
@@ -213,6 +221,20 @@
             <BitCalendar Events="@calendarEvents" ShowEventDetails="false"
                          OnSelectDate="HandleOnEventDayClick" />
             <div>Events of the selected day: @eventsOfSelectedDay</div>
+            <br /><br />
+            <div>EventTemplate:</div>
+            <BitCalendar Events="@calendarEvents">
+                <EventTemplate>
+                    <BitStack Horizontal AutoHeight Gap="0.5rem" VerticalAlign="BitAlignment.Center">
+                        <b>@context.Title</b>
+                        <BitButton Size="BitSize.Small" Variant="BitVariant.Text"
+                                   OnClick="() => openedEvent = context.Title">
+                            Open
+                        </BitButton>
+                    </BitStack>
+                </EventTemplate>
+            </BitCalendar>
+            <div>Opened: @(openedEvent ?? "-")</div>
         </div>
     </DemoExample>
 
@@ -401,7 +423,26 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example15RazorCode" Id="example15">
+    <DemoExample Title="Multiple months" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+        <div>
+            <b>MonthCount</b> renders up to three consecutive months side by side, which browses a whole season
+            at once — the arrow keys, the selection and the events carry on across them. Such a strip always
+            draws six week rows, never draws the days of the adjacent months (each of them is a day of the pane
+            beside it), and wraps onto the next line when it is given less width than it asks for.
+            <b>PagedNavigation</b> makes the arrows move a whole page of months instead of one.
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <div>MonthCount = 2:</div>
+            <BitCalendar MonthCount="2" ShowMonthPicker="false" @bind-Value="@seasonDate" />
+            <div>Selected: @(seasonDate.HasValue ? seasonDate.Value.ToString("d") : "-")</div>
+            <br /><br />
+            <div>MonthCount = 3, paged navigation, month picker as an overlay:</div>
+            <BitCalendar MonthCount="3" PagedNavigation ShowMonthPickerAsOverlay Events="@calendarEvents" />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Color" RazorCode="@example16RazorCode" Id="example16">
         <div>
             <b>Color</b> paints today, the highlighted current month, the event indicators and the AM/PM button
             that is in force.
@@ -463,7 +504,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example16RazorCode" Id="example16">
+    <DemoExample Title="External Icons" RazorCode="@example17RazorCode" Id="example17">
         <div>
             Every icon of the calendar has an <b>*Icon</b> parameter taking a
             <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> from an external library
@@ -496,7 +537,7 @@
                      TimePickerDecreaseMinuteIcon="@BitIconInfo.Bi("chevron-down")" />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example17RazorCode" Id="example17">
+    <DemoExample Title="Size" RazorCode="@example18RazorCode" Id="example18">
         <div>
             <b>Size</b> scales the cells and their text together, so the whole calendar keeps its proportions.
             The smallest cell still clears the 24&nbsp;px minimum pointer target.
@@ -514,7 +555,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+    <DemoExample Title="Style & Class" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
         <div>
             <b>Style</b> and <b>Class</b> land on the root, while <b>Styles</b> and <b>Classes</b> reach every
             part of the calendar on its own — see
@@ -586,7 +627,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example19RazorCode" Id="example19">
+    <DemoExample Title="RTL" RazorCode="@example20RazorCode" Id="example20">
         <div>
             <b>Dir</b> Rtl mirrors the calendar, and the left and right arrow keys swap with it. A culture that
             reads right to left turns it on by itself.
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
index f75f16ca7fa..81d96ce8c21 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
@@ -69,14 +69,14 @@ public partial class BitCalendarDemo
             Name = "DisableFuture",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Disables every day after today, exactly as a MaxDate of today would. When both are set, the earlier of the two bounds wins.",
+            Description = "Disables every day after today, exactly as a MaxDate of now would. When both are set, the earlier of the two bounds wins. Today stays selectable, and a time picker on screen is held to the hours of it up to this very minute.",
         },
         new()
         {
             Name = "DisablePast",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Disables every day before today, exactly as a MinDate of today would. When both are set, the later of the two bounds wins.",
+            Description = "Disables every day before today, exactly as a MinDate of now would. When both are set, the later of the two bounds wins. Today stays selectable, and a time picker on screen is held to the hours of it from this very minute on.",
         },
         new()
         {
@@ -109,6 +109,15 @@ public partial class BitCalendarDemo
             Description = "The title (tooltip) and the accessible name of the close button of the event details dialog."
         },
         new()
+        {
+            Name = "EventTemplate",
+            Type = "RenderFragment<BitCalendarEvent>?",
+            DefaultValue = "null",
+            Description = "Used to customize how an event is rendered in the details dialog, in place of its title, its time and its body - the place for a link to whatever the event stands for in the application.",
+            Href = "#calendar-event",
+            LinkType = LinkType.Link
+        },
+        new()
         {
             Name = "EventTimeFromText",
             Type = "string",
@@ -134,7 +143,7 @@ public partial class BitCalendarDemo
             Name = "FixedWeeks",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months, to keep the calendar height fixed while navigating between months."
+            Description = "Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months, to keep the calendar height fixed while navigating between months. It is always on when MonthCount renders more than one month, so the months keep an even height next to each other."
         },
         new()
         {
@@ -328,14 +337,14 @@ public partial class BitCalendarDemo
             Name = "MaxDate",
             Type = "DateTimeOffset?",
             DefaultValue = "null",
-            Description = "The maximum allowable date of the calendar."
+            Description = "The maximum allowable date of the calendar. The days after it are ruled out as a whole, and the day it itself falls on stays selectable; where a time picker is on screen, the time the bound carries bounds the hours of that day too."
         },
         new()
         {
             Name = "MinDate",
             Type = "DateTimeOffset?",
             DefaultValue = "null",
-            Description = "The minimum allowable date of the calendar."
+            Description = "The minimum allowable date of the calendar. The days before it are ruled out as a whole, and the day it itself falls on stays selectable; where a time picker is on screen, the time the bound carries bounds the hours of that day too."
         },
         new()
         {
@@ -352,6 +361,13 @@ public partial class BitCalendarDemo
             Description = "Used to customize how content inside the month cell is rendered."
         },
         new()
+        {
+            Name = "MonthCount",
+            Type = "int",
+            DefaultValue = "1",
+            Description = "The number of consecutive months rendered side by side in the day picker (1 to 3), which turns the calendar into a view of a whole season - the arrow keys, the selection and the events carry on across the months of it. More than one month always renders six week rows and never the days of the adjacent months, and the months stack instead of overflowing when the width they are given cannot fit them.",
+        },
+        new()
         {
             Name = "MonthPickerToggleTitle",
             Type = "string",
@@ -425,6 +441,13 @@ public partial class BitCalendarDemo
             Description = "Callback for when the user selects a date."
         },
         new()
+        {
+            Name = "PagedNavigation",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the previous and next navigation buttons move the calendar by all of its rendered months instead of one, so consecutive pages of a multi-month calendar never overlap. It has no effect when MonthCount renders a single month.",
+        },
+        new()
         {
             Name = "PrevMonthNavIcon",
             Type = "BitIconInfo?",
@@ -525,7 +548,7 @@ public partial class BitCalendarDemo
             Name = "ShowOutsideDays",
             Type = "bool",
             DefaultValue = "true",
-            Description = "Whether the days of the previous and next months should be shown in the day picker."
+            Description = "Whether the days of the previous and next months should be shown in the day picker. It has no effect when MonthCount renders more than one month, since those days would then show up in two grids at once."
         },
         new()
         {
@@ -1826,6 +1849,7 @@ private void HandleOnSelectDate(DateTimeOffset? date)
         onSelectDate = date;
     }
 
+    private string? openedEvent;
     private string eventsOfSelectedDay = "-";
 
     private void HandleOnEventDayClick(DateTimeOffset? date)
@@ -1895,7 +1919,11 @@ private void HandleOnEventDayClick(DateTimeOffset? date)
     private bool showMonthPicker = true;
     private bool showMonthPickerAsOverlay;
 
+    private DateTimeOffset? seasonDate;
     private DateTimeOffset? selectedDateTime = DateTimeOffset.Now;
+    private DateTimeOffset? boundedDateTime = DateTime.Today.AddHours(12);
+    private DateTimeOffset boundedMinDate = DateTime.Today.AddHours(9).AddMinutes(30);
+    private DateTimeOffset boundedMaxDate = DateTime.Today.AddDays(2).AddHours(17);
     private DateTimeOffset? startingValue = new DateTimeOffset(2020, 12, 4, 20, 45, 0, DateTimeOffset.Now.Offset);
     private DateTimeOffset? customToday = new DateTimeOffset(2021, 3, 15, 0, 0, 0, DateTimeOffset.Now.Offset);
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
index 3a58ded9ef1..3e371401117 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
@@ -117,9 +117,17 @@ private void HandleOnMonthChange(DateTimeOffset month)
 
 <BitCalendar ShowTimePicker ShowTimePickerAsOverlay />
 
-<BitCalendar ShowTimePicker HourStep=""3"" MinuteStep=""15"" />";
+<BitCalendar ShowTimePicker HourStep=""3"" MinuteStep=""15"" />
+
+<BitCalendar ShowTimePicker @bind-Value=""@boundedDateTime""
+             MinDate=""boundedMinDate"" MaxDate=""boundedMaxDate"" />
+<div>Selected: @boundedDateTime.ToString()</div>";
     private readonly string example8CsharpCode = @"
-private DateTimeOffset? selectedDateTime = DateTimeOffset.Now;";
+private DateTimeOffset? selectedDateTime = DateTimeOffset.Now;
+
+private DateTimeOffset? boundedDateTime = DateTime.Today.AddHours(12);
+private DateTimeOffset boundedMinDate = DateTime.Today.AddHours(9).AddMinutes(30);
+private DateTimeOffset boundedMaxDate = DateTime.Today.AddDays(2).AddHours(17);";
 
     private readonly string example9RazorCode = @"
 <BitCalendar Events=""@calendarEvents"" />
@@ -127,7 +135,20 @@ private void HandleOnMonthChange(DateTimeOffset month)
 <BitCalendar Events=""@coloredEvents"" />
 
 <BitCalendar Events=""@calendarEvents"" ShowEventDetails=""false"" OnSelectDate=""HandleOnEventDayClick"" />
-<div>Events of the selected day: @eventsOfSelectedDay</div>";
+<div>Events of the selected day: @eventsOfSelectedDay</div>
+
+<BitCalendar Events=""@calendarEvents"">
+    <EventTemplate>
+        <BitStack Horizontal AutoHeight Gap=""0.5rem"" VerticalAlign=""BitAlignment.Center"">
+            <b>@context.Title</b>
+            <BitButton Size=""BitSize.Small"" Variant=""BitVariant.Text""
+                       OnClick=""() => openedEvent = context.Title"">
+                Open
+            </BitButton>
+        </BitStack>
+    </EventTemplate>
+</BitCalendar>
+<div>Opened: @(openedEvent ?? ""-"")</div>";
     private readonly string example9CsharpCode = @"
 private List<BitCalendarEvent> calendarEvents =
 [
@@ -190,7 +211,9 @@ private void HandleOnEventDayClick(DateTimeOffset? date)
     var titles = calendarEvents.Where(e => e.Date == day).Select(e => e.Title).ToArray();
 
     eventsOfSelectedDay = titles.Length == 0 ? ""none"" : string.Join("", "", titles);
-}";
+}
+
+private string? openedEvent;";
 
     private readonly string example10RazorCode = @"
 <style>
@@ -360,6 +383,14 @@ private void HandleInvalidSubmit()
              Events=""@calendarEvents"" TimeFormat=""BitTimeFormat.TwelveHours"" />";
 
     private readonly string example15RazorCode = @"
+<BitCalendar MonthCount=""2"" ShowMonthPicker=""false"" @bind-Value=""@seasonDate"" />
+<div>Selected: @(seasonDate.HasValue ? seasonDate.Value.ToString(""d"") : ""-"")</div>
+
+<BitCalendar MonthCount=""3"" PagedNavigation ShowMonthPickerAsOverlay Events=""@calendarEvents"" />";
+    private readonly string example15CsharpCode = @"
+private DateTimeOffset? seasonDate;";
+
+    private readonly string example16RazorCode = @"
 <BitCalendar Color=""BitColor.Primary"" HighlightCurrentMonth />
 
 <BitCalendar Color=""BitColor.Secondary"" HighlightCurrentMonth />
@@ -394,7 +425,7 @@ private void HandleInvalidSubmit()
 
 <BitCalendar Color=""BitColor.TertiaryBorder"" HighlightCurrentMonth />";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example17RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitCalendar GoToTodayIcon=""@BitIconInfo.Fa(""solid calendar-day"")""
@@ -414,14 +445,14 @@ private void HandleInvalidSubmit()
              TimePickerIncreaseMinuteIcon=""@BitIconInfo.Bi(""chevron-up"")""
              TimePickerDecreaseMinuteIcon=""@BitIconInfo.Bi(""chevron-down"")"" />";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example18RazorCode = @"
 <BitCalendar Size=""BitSize.Small"" ShowWeekNumbers />
 
 <BitCalendar Size=""BitSize.Medium"" ShowWeekNumbers />
 
 <BitCalendar Size=""BitSize.Large"" ShowWeekNumbers />";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example19RazorCode = @"
 <style>
     .custom-class {
         margin: 1rem;
@@ -534,7 +565,7 @@ private void HandleInvalidSubmit()
     <BitCalendar Events=""@calendarEvents"" />
 </div>";
 
-    private readonly string example18CsharpCode = @"
+    private readonly string example19CsharpCode = @"
 private DateTimeOffset? cssVarsDate = DateTimeOffset.Now.AddDays(2);
 
 private List<BitCalendarEvent> calendarEvents =
@@ -563,6 +594,6 @@ private void HandleInvalidSubmit()
             StartTime = new TimeOnly(11, 30) }
 ];";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example20RazorCode = @"
 <BitCalendar Dir=""BitDir.Rtl"" ShowTimePicker ShowWeekNumbers />";
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
index ece6b6fde6a..04a241e711e 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
@@ -2401,4 +2401,287 @@ public void BitCalendarShiftPageUpShouldStopAtTheEdgeOfTheSupportedRange()
 
         Assert.AreEqual(day, component.Find(".bit-cal-dbt[tabindex='0']").TextContent.Trim());
     }
+
+    [TestMethod,
+        DataRow(1, 1),
+        DataRow(2, 2),
+        DataRow(3, 3),
+        DataRow(7, 3),
+        DataRow(0, 1)]
+    public void BitCalendarMonthCountShouldRenderConsecutiveMonths(int monthCount, int expectedCount)
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, monthCount);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var titles = component.FindAll(".bit-cal-pkt");
+
+        Assert.AreEqual(expectedCount, component.FindAll(".bit-cal-dwp").Count);
+        Assert.AreEqual(expectedCount, titles.Count);
+
+        var expectedTitles = new[] { "January 2026", "February 2026", "March 2026" };
+        for (var i = 0; i < expectedCount; i++)
+        {
+            Assert.AreEqual(expectedTitles[i], titles[i].TextContent.Trim());
+        }
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthCountShouldNotRenderTheDaysOfTheAdjacentMonthsTwice()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, 3);
+            parameters.Add(p => p.ShowOutsideDays, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        // January, February and March of 2026, each day of them once: a day of the adjacent months would
+        // be a day of the pane beside it, so the grids render nothing but their own months.
+        Assert.AreEqual(31 + 28 + 31, component.FindAll(".bit-cal-dbt").Count);
+
+        // And the months keep an even height beside one another, whatever FixedWeeks says.
+        Assert.AreEqual(3 * 6, component.FindAll(".bit-cal-dgr").Count);
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthCountShouldNavigateAcrossItsMonthsWithoutPagingThem()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.Value, new DateTimeOffset(2026, 1, 31, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        component.Find(".bit-cal-dbt[tabindex='0']").KeyDown(new KeyboardEventArgs { Key = "ArrowRight" });
+
+        // The last day of the first month is next to the first day of the second, which the view already
+        // shows - so the focus crosses into it and the calendar stays where it is.
+        Assert.IsTrue(component.Find(".bit-cal-dbt[tabindex='0']").Id!.EndsWith("day-2026-02-01"));
+        Assert.AreEqual("January 2026", component.FindAll(".bit-cal-pkt")[0].TextContent.Trim());
+        Assert.AreEqual("February 2026", component.FindAll(".bit-cal-pkt")[1].TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthCountShouldScrollTheViewOntoADayBeyondIt()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.Value, new DateTimeOffset(2026, 2, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        component.Find(".bit-cal-dbt[tabindex='0']").KeyDown(new KeyboardEventArgs { Key = "PageDown" });
+
+        // March is past the end of the view, so it scrolls by the least that brings it in - which leaves
+        // the day the keyboard landed on in the pane it was reached from, the last one.
+        Assert.AreEqual("February 2026", component.FindAll(".bit-cal-pkt")[0].TextContent.Trim());
+        Assert.AreEqual("March 2026", component.FindAll(".bit-cal-pkt")[1].TextContent.Trim());
+        Assert.IsTrue(component.Find(".bit-cal-dbt[tabindex='0']").Id!.EndsWith("day-2026-03-15"));
+    }
+
+    [TestMethod,
+        DataRow(false, "February 2026", "March 2026"),
+        DataRow(true, "March 2026", "April 2026")]
+    public void BitCalendarPagedNavigationShouldMoveAWholePageOfMonths(bool pagedNavigation, string firstTitle, string secondTitle)
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.PagedNavigation, pagedNavigation);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        // The first pane heads the navigation backwards and the last one forwards, so the next button is
+        // the last of them.
+        component.FindAll(".bit-cal-dwp .bit-cal-nbt").Last().Click();
+
+        Assert.AreEqual(firstTitle, component.FindAll(".bit-cal-pkt")[0].TextContent.Trim());
+        Assert.AreEqual(secondTitle, component.FindAll(".bit-cal-pkt")[1].TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthCountShouldStopTheNavigationAtTheBoundOfItsLastMonth()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.MaxDate, new DateTimeOffset(2026, 2, 20, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        // The bound is already in view - in the second of the two months - so there is nowhere to go next.
+        Assert.IsTrue(component.FindAll(".bit-cal-dwp .bit-cal-nbt").Last().HasAttribute("disabled"));
+        Assert.IsFalse(component.FindAll(".bit-cal-dwp .bit-cal-nbt").First().HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthCountShouldKeepTheViewWhenADayOfAnotherOfItsMonthsIsSelected()
+    {
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.Id!.EndsWith("day-2026-02-10")).Click();
+
+        Assert.AreEqual(new DateTime(2026, 2, 10), value!.Value.DateTime);
+        Assert.AreEqual("January 2026", component.FindAll(".bit-cal-pkt")[0].TextContent.Trim());
+        Assert.AreEqual("February 2026", component.FindAll(".bit-cal-pkt")[1].TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthCountShouldFollowTheMonthsOfTheCultureOwnCalendar()
+    {
+        // The thirteenth month of a Hebrew leap year is a month like any other, so the strip walks through
+        // it rather than over it: the last month of 5784 is followed by the first of 5785.
+        var culture = CultureInfo.CreateSpecificCulture("he-IL");
+        culture.GetType().GetField("_calendar", BindingFlags.NonPublic | BindingFlags.Instance)!
+               .SetValue(culture, new HebrewCalendar());
+        culture.DateTimeFormat.Calendar = new HebrewCalendar();
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, 3);
+            parameters.Add(p => p.Culture, culture);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(2024, 3, 15, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var titles = component.FindAll(".bit-cal-pkt").Select(t => t.TextContent.Trim()).ToArray();
+
+        Assert.AreEqual(3, titles.Length);
+        Assert.AreEqual(3, titles.Distinct().Count());
+
+        // Every pane holds its own month from end to end, whatever its length.
+        var days = component.FindAll(".bit-cal-dbt").Count;
+        Assert.AreEqual(days, component.FindAll(".bit-cal-dbt").Select(b => b.Id).Distinct().Count());
+    }
+
+    [TestMethod]
+    public void BitCalendarMonthCountShouldNotRepeatTheLastMonthOfTheSupportedRange()
+    {
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.MonthCount, 3);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.StartingValue, new DateTimeOffset(9999, 12, 31, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        // The months after the last one the calendar can represent do not exist, so the view holds the last
+        // three rather than the last one three times - which would repeat the ids of its days.
+        var titles = component.FindAll(".bit-cal-pkt").Select(t => t.TextContent.Trim()).ToArray();
+
+        Assert.AreEqual(3, titles.Distinct().Count());
+        Assert.AreEqual("October 9999", titles[0]);
+        Assert.AreEqual("December 9999", titles[2]);
+    }
+
+    [TestMethod]
+    public void BitCalendarEventTemplateShouldReplaceTheRowsOfTheDetailsDialog()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var day = DateTime.Today;
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.Events,
+            [
+                new BitCalendarEvent { Title = "Retro", Body = "Sprint retrospective.", Date = DateOnly.FromDateTime(day) }
+            ]);
+            parameters.Add(p => p.EventTemplate, (BitCalendarEvent evt) => builder =>
+            {
+                builder.OpenElement(0, "span");
+                builder.AddAttribute(1, "class", "custom-event");
+                builder.AddContent(2, evt.Title);
+                builder.CloseElement();
+            });
+        });
+
+        component.FindAll(".bit-cal-dbt").First(b => b.Id!.EndsWith($"day-{day:yyyy-MM-dd}")).Click();
+
+        Assert.AreEqual("Retro", component.Find(".bit-cal-emi .custom-event").TextContent.Trim());
+
+        // The template is the whole of the row, so the default title and body it replaces are gone.
+        Assert.IsEmpty(component.FindAll(".bit-cal-eit"));
+        Assert.IsEmpty(component.FindAll(".bit-cal-eib"));
+    }
+
+    [TestMethod]
+    public void BitCalendarTimePickerShouldStayInsideTheBoundsOfTheSelectedDay()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 14, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.MinDate, new DateTimeOffset(2026, 1, 15, 9, 30, 0, TimeSpan.Zero));
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // A bound carrying a time of day bounds the hours of the very day it falls on, so an hour typed
+        // below it lands on it rather than producing an instant the bound rules out.
+        var hourInput = component.FindAll(".bit-cal-tin")[0];
+        hourInput.Input("3");
+        hourInput.Change("3");
+
+        Assert.AreEqual(9, value!.Value.Hour);
+        Assert.AreEqual(30, value!.Value.Minute);
+
+        // And the minute is bounded alongside it, but only within the hour the bound falls in.
+        var minuteInput = component.FindAll(".bit-cal-tin")[1];
+        minuteInput.Input("5");
+        minuteInput.Change("5");
+
+        Assert.AreEqual(9, value!.Value.Hour);
+        Assert.AreEqual(30, value!.Value.Minute);
+    }
+
+    [TestMethod]
+    public void BitCalendarTimePickerShouldBringTheCarriedTimeIntoTheBoundsOfTheDayPicked()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        DateTimeOffset? value = new DateTimeOffset(2026, 1, 15, 18, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitCalendar>(parameters =>
+        {
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeZone, TimeZoneInfo.Utc);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
+            parameters.Add(p => p.MaxDate, new DateTimeOffset(2026, 1, 20, 10, 0, 0, TimeSpan.Zero));
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // The evening the picker is holding is past what the last allowed day allows, so it arrives at the
+        // bound instead of pushing the value beyond it.
+        component.FindAll(".bit-cal-dbt").First(b => b.Id!.EndsWith("day-2026-01-20")).Click();
+
+        Assert.AreEqual(new DateTime(2026, 1, 20, 10, 0, 0), value!.Value.DateTime);
+    }
 }

From 1f05a2c13df1e444afaed09fb8805875872e4991 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 22 Sep 2026 08:01:19 +0330
Subject: [PATCH 7/9] fix demo

---
 .../Inputs/Calendar/BitCalendar.razor         |  25 ++--
 .../Inputs/Calendar/BitCalendar.razor.cs      |  15 +-
 .../Inputs/Calendar/BitCalendar.scss          | 135 +++++++++++++++---
 .../Components/Extras/Map/BitMapDemo.razor    |   4 +-
 .../Components/Extras/Map/BitMapDemo.razor.cs |   6 +-
 .../BitRichTextEditorDemo.razor.cs            |   2 +-
 .../Inputs/Calendar/BitCalendarDemo.razor     |  22 +--
 .../Calendar/BitCalendarDemo.razor.samples.cs |   4 +-
 8 files changed, 161 insertions(+), 52 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
index 695e253b6ae..808082b1733 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor
@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @inherits BitInputBase<DateTimeOffset?>
 
 @{
@@ -225,7 +225,11 @@
                                     var dayEvents = GetDayEvents(date);
                                     var opensEventDialog = ShowEventDetails && dayEvents.Count > 0;
                                     @* A read-only calendar still browses, so its days stay focusable - but they no
-                                       longer select anything, which aria-disabled is what reports. *@
+                                       longer select anything, which aria-disabled is what reports.
+
+                                       Only the selected cell carries aria-selected, the way the APG's own date
+                                       picker does: an explicit false on the other forty-one would have a screen
+                                       reader say "not selected" on every day arrowed over. *@
                                     <button @onclick="() => HandleDayClick(date, dayEvents)"
                                             @onkeydown="e => HandleDayKeyDown(e, date)"
                                             type="button"
@@ -241,9 +245,6 @@
                                             style="@style"
                                             class="bit-cal-dbt@(klass) @Classes?.DayButton"
                                             tabindex="@(date == focusableDay ? 0 : -1)"
-                                            @* Only the selected cell carries the state, the way the APG's own date
-                                               picker does: an explicit false on the other forty-one would have a
-                                               screen reader say "not selected" on every day arrowed over. *@
                                             aria-selected="@(isSelected ? "true" : null)">
                                         @if (DayCellTemplate is not null)
                                         {
@@ -381,6 +382,10 @@
                                     var monthName = GetMonthName(_currentYear, month);
                                     var disabled = IsEnabled is false || IsMonthOutOfMinAndMaxDate(month);
                                     var selected = month == _currentMonth;
+
+                                    @* The current month and year are reported whether or not they are painted:
+                                       HighlightCurrentMonth decides how the grid looks, not what a screen reader
+                                       is able to find in it. *@
                                     <button @onclick="() => SelectMonth(month)"
                                             @onkeydown="e => HandleMonthKeyDown(e, month)"
                                             type="button"
@@ -390,9 +395,6 @@
                                             aria-label="@monthName"
                                             disabled="@disabled"
                                             aria-disabled="@(disabled ? "true" : null)"
-                                            @* The current month and year are reported whether or not they are
-                                               painted: HighlightCurrentMonth decides how the grid looks, not
-                                               what a screen reader is able to find in it. *@
                                             aria-current="@((todayYear == _currentYear && month == todayMonth) ? "date" : null)"
                                             tabindex="@(month == focusableMonth ? 0 : -1)"
                                             style="@Styles?.MonthButton"
@@ -726,8 +728,11 @@
                 <ul style="@Styles?.EventList" class="bit-cal-eml @Classes?.EventList">
                     @foreach (var evt in GetEventModalEvents())
                     {
-                        <li class="bit-cal-emi @Classes?.EventItem"
-                            style="@Styles?.EventItem">
+                        @* The card of an event is painted with its own color, the same one its dot on the
+                           day cell was; the default template adds the layout of its three parts, which a
+                           template of the app's own lays out itself. *@
+                        <li style="@Styles?.EventItem"
+                            class="bit-cal-emi @(EventTemplate is null ? "bit-cal-emi-dft" : null) @GetEventItemColorClass(evt) @Classes?.EventItem">
                             @if (EventTemplate is not null)
                             {
                                 @EventTemplate(evt)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
index 9138dd4ec92..fc9c8fef7eb 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
@@ -561,7 +561,9 @@ private int _minuteView
     /// <summary>
     /// Show month picker on top of date picker when visible.
     /// </summary>
-    [Parameter] public bool ShowMonthPickerAsOverlay { get; set; }
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public bool ShowMonthPickerAsOverlay { get; set; }
 
     /// <summary>
     /// Whether the days of the previous and next months should be shown in the day picker.
@@ -580,7 +582,9 @@ private int _minuteView
     /// <summary>
     /// Show time picker on top of date picker when visible.
     /// </summary>
-    [Parameter] public bool ShowTimePickerAsOverlay { get; set; }
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public bool ShowTimePickerAsOverlay { get; set; }
 
     /// <summary>
     /// Gets or sets the icon to display in the ShowTimePicker button using custom CSS classes for external icon libraries.
@@ -2426,6 +2430,13 @@ private static IEnumerable<BitCalendarEvent> GetIndicatorEvents(IReadOnlyList<Bi
         return evt.Color.HasValue ? BitCssClasses.Color(evt.Color, "bit-cal-evi") : null;
     }
 
+    // The card of an event in the details dialog is painted with the same color as its dot, so the stripe
+    // down its side is the dot said again beside what the dot stood for.
+    private static string? GetEventItemColorClass(BitCalendarEvent evt)
+    {
+        return evt.Color.HasValue ? BitCssClasses.Color(evt.Color, "bit-cal-emi") : null;
+    }
+
     private IReadOnlyList<BitCalendarEvent> GetDayEvents(DateTime date)
     {
         var dateOnly = DateOnly.FromDateTime(date);
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
index 62718f05363..08a6c2eaf40 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss
@@ -717,16 +717,23 @@
     justify-content: center;
     background-color: $clr-bg-overlay;
     border-radius: var(--bit-Calendar-radius, #{$shp-radius-control});
+    animation: bit-cal-eov-in $mot-duration-short $mot-easing-decelerate;
 }
 
+// The dialog is a header that stays put above a list that scrolls, rather than one box that scrolls whole:
+// the date it is headed with is the only thing on the surface that says which day is open, so it is the one
+// thing that must not scroll away from the events it names.
 .bit-cal-emc {
     @include focus-anchor;
+    display: flex;
     cursor: default;
+    overflow: hidden;
     max-height: 80%;
-    overflow-y: auto;
+    gap: spacing(1);
     padding: $spa-dialog;
     box-sizing: border-box;
     min-width: spacing(20);
+    flex-flow: column nowrap;
     // The overlay is only as wide as the calendar it covers, which a small one is narrower than the dialog's
     // own ceiling - so the ceiling is whichever of the two is smaller and the dialog never runs past its edge.
     max-width: min(#{spacing(30)}, 100%);
@@ -735,35 +742,42 @@
     border-radius: $shp-radius-dialog;
     color: var(--bit-Calendar-color, #{$clr-fg-pri});
     border: $shp-border-width $shp-border-style var(--bit-Calendar-divider-color, #{$clr-brd-sec});
+    animation: bit-cal-emc-in $mot-duration-short $mot-easing-decelerate;
 }
 
 .bit-cal-emh {
+    flex: none;
     display: flex;
-    font-weight: $tg-fw-semibold;
+    gap: spacing(1);
     align-items: center;
-    font-size: $tg-fs-sm;
-    margin-bottom: spacing(1);
+    font-size: $tg-fs-md;
+    font-weight: $tg-fw-semibold;
     justify-content: space-between;
+    padding-bottom: spacing(0.75);
+    border-bottom: $shp-border-width $shp-border-style var(--bit-Calendar-divider-color, #{$clr-brd-sec});
 }
 
 .bit-cal-emx {
+    padding: 0;
+    flex: none;
     border: none;
     display: flex;
     cursor: pointer;
+    line-height: 1;
     align-items: center;
     color: $clr-fg-sec;
-    font-size: $tg-fs-sm;
+    font-size: $tg-fs-md;
     justify-content: center;
     background-color: transparent;
-    padding: spacing(0.25) spacing(1);
     // The 24px floor of WCAG 2.2's target-size minimum: the glyph alone is a few pixels short of it.
-    min-width: spacing(3);
-    min-height: spacing(3);
-    border-radius: var(--bit-Calendar-day-radius, #{$shp-radius-control});
-    transition: background-color $mot-duration-short $mot-easing;
+    width: spacing(3);
+    height: spacing(3);
+    border-radius: $shp-radius-full;
+    transition: color $mot-duration-short $mot-easing, background-color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
+            color: var(--bit-Calendar-color, #{$clr-fg-pri});
             background-color: var(--bit-Calendar-hover-background, #{$clr-bg-pri-hover});
         }
     }
@@ -774,41 +788,107 @@
 }
 
 // The events of the day are a list of them, so they are marked up as one - a screen reader then says how
-// many there are before reading the first.
+// many there are before reading the first. The list is also what scrolls, so a day with a dozen events keeps
+// its date and its close button on screen.
 .bit-cal-eml {
     margin: 0;
     padding: 0;
+    display: flex;
+    flex: 1 1 auto;
     list-style: none;
+    overflow-y: auto;
+    gap: spacing(0.5);
+    scrollbar-width: thin;
+    flex-flow: column nowrap;
 }
 
+// Each event is a card of its own with a stripe of its color down its side - the dot of the day cell, said
+// again beside the event the dot stood for - rather than a hairline between one run of three lines and the
+// next.
 .bit-cal-emi {
-    padding: spacing(0.75) 0;
-    border-top: $shp-border-width $shp-border-style var(--bit-Calendar-divider-color, #{$clr-brd-sec});
+    position: relative;
+    padding: spacing(0.75) spacing(1);
+    padding-inline-start: spacing(1.5);
+    background-color: $clr-bg-sec;
+    border-radius: $shp-radius-surface;
 
-    &:first-of-type {
-        padding-top: 0;
-        border-top: none;
+    &::before {
+        content: '';
+        position: absolute;
+        inset-block: spacing(0.75);
+        inset-inline-start: spacing(0.5);
+        width: spacing(0.375);
+        border-radius: $shp-radius-full;
+        background-color: var(--bit-cal-evt-clr, var(--bit-Calendar-event-color, var(--bit-cal-clr)));
     }
 }
 
+// The default template lays the title out beside the time it runs at, with the body under both, so a list of
+// events reads as a column of titles rather than as three lines each. Only the default one: a template of an
+// app's own is laid out by the app, so the card stops at the surface and the stripe.
+.bit-cal-emi-dft {
+    display: grid;
+    align-items: baseline;
+    column-gap: spacing(1);
+    grid-template-columns: minmax(0, 1fr) auto;
+}
+
 .bit-cal-eit {
-    font-weight: $tg-fw-semibold;
+    min-width: 0;
+    grid-column: 1;
     font-size: $tg-fs-sm;
-    margin-bottom: spacing(0.25);
+    overflow-wrap: break-word;
+    font-weight: $tg-fw-semibold;
 }
 
+// The time is a chip of the dialog's own background on the card's, so it reads as a tag on the title rather
+// than as a second line of it, and its digits are tabular so the times of a list line up under one another.
 .bit-cal-eis {
+    grid-column: 2;
+    justify-self: end;
+    white-space: nowrap;
     color: $clr-fg-sec;
     font-size: $tg-fs-xs;
-    margin-bottom: spacing(0.25);
+    background-color: $clr-bg-pri;
+    border-radius: $shp-radius-chip;
+    font-variant-numeric: tabular-nums;
+    padding: spacing(0.125) spacing(0.5);
 }
 
 .bit-cal-eib {
     font-size: $tg-fs-xs;
     white-space: pre-wrap;
+    grid-column: 1 / -1;
+    margin-top: spacing(0.5);
+    overflow-wrap: break-word;
     color: var(--bit-Calendar-color, #{$clr-fg-pri});
 }
 
+// The details are put on top of the calendar rather than appearing in its place: the overlay fades the days
+// back and the dialog grows the last of the way in over them. Both are timed by the motion token, so
+// prefers-reduced-motion collapses them to nothing on its own.
+@keyframes bit-cal-eov-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes bit-cal-emc-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.96);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
 
 // Role classes are generated from the shared $bit-color-roles map (see color-role-maps.scss).
 @each $role, $tokens in $bit-color-roles {
@@ -820,8 +900,10 @@
         --bit-cal-clr-focus: #{role($tokens, focus)};
     }
 
-    // The color of a single event, set on its own dot, so a day can carry dots of several colors at once.
-    .bit-cal-evi-#{$role} {
+    // The color of a single event, set on its own dot and on the stripe of its card in the details dialog,
+    // so a day can carry several colors at once in both places.
+    .bit-cal-evi-#{$role},
+    .bit-cal-emi-#{$role} {
         --bit-cal-evt-clr: #{role($tokens, main)};
     }
 }
@@ -906,6 +988,17 @@
         background-color: HighlightText;
     }
 
+    // The card of an event and the stripe down its side are both a background, which this palette strips:
+    // the card is given an edge of its own instead and the stripe keeps a system color.
+    .bit-cal-emi {
+        border: $shp-border-width $shp-border-style CanvasText;
+
+        &::before {
+            background-color: CanvasText;
+            forced-color-adjust: none;
+        }
+    }
+
     // An outline rather than a border: it gives the calendar an edge in a palette that strips every
     // background without taking a couple of pixels out of the grid to do it.
     .bit-cal-cnt {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Map/BitMapDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Map/BitMapDemo.razor
index ca1ed5a89d3..0c03d49ee3e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Map/BitMapDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Map/BitMapDemo.razor
@@ -366,8 +366,8 @@
             </div>
             <br />
             <div>
-                Centre <b>@boundCenter?.Latitude.ToString("F4")</b>, <b>@boundCenter?.Longitude.ToString("F4")</b> —
-                zoom <b>@boundZoom?.ToString("F1")</b> — <b>@boundMarkers.Count</b> marker(s)
+                Centre <b>@boundCenter?.Latitude.ToString("F4")</b>, <b>@boundCenter?.Longitude.ToString("F4")</b> -
+                zoom <b>@boundZoom?.ToString("F1")</b> - <b>@boundMarkers.Count</b> marker(s)
             </div>
         </DemoExample>
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Map/BitMapDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Map/BitMapDemo.razor.cs
index f940b5b5700..dfdb6e16c80 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Map/BitMapDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Map/BitMapDemo.razor.cs
@@ -1427,7 +1427,7 @@ private Task OnGeoMapClick(BitMapLatLng point)
         geoLog = $"""
             Probe {point.Latitude:F5}, {point.Longitude:F5}
             {km:F2} km from Big Ben, {inside} the markers' bounding box
-            Box centre {box.Center.Latitude:F5}, {box.Center.Longitude:F5} — {box.LatitudeSpan:F4}° x {box.LongitudeSpan:F4}°
+            Box centre {box.Center.Latitude:F5}, {box.Center.Longitude:F5} - {box.LatitudeSpan:F4}° x {box.LongitudeSpan:F4}°
             """;
         return Task.CompletedTask;
     }
@@ -2067,8 +2067,8 @@ private string FormatAnnouncement(BitMapViewState view)
             Markers=""boundMarkers"" />
 </div>
 <div>
-    Centre @boundCenter?.Latitude.ToString(""F4""), @boundCenter?.Longitude.ToString(""F4"") —
-    zoom @boundZoom?.ToString(""F1"") — @boundMarkers.Count marker(s)
+    Centre @boundCenter?.Latitude.ToString(""F4""), @boundCenter?.Longitude.ToString(""F4"") -
+    zoom @boundZoom?.ToString(""F1"") - @boundMarkers.Count marker(s)
 </div>";
     private readonly string example11CsharpCode = @"
 private BitMapLatLng? boundCenter = new(41.9028, 12.4964);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor.cs
index b2640042c4e..a1865d34b09 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor.cs
@@ -614,7 +614,7 @@ private void HandleLinkHtmlChanged(string? value)
         ["ctrl+shift+1"] = "h1",
     };
 
-    private string? emojiHtml = "<p>Add a little ✨ to your text — or a → arrow, a ½ fraction, or π.</p>";
+    private string? emojiHtml = "<p>Add a little ✨ to your text - or a → arrow, a ½ fraction, or π.</p>";
 
     private string? countHtml = "<p>Counting characters and words.</p>";
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
index 2ac03cd03ee..4a2e5521614 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -145,7 +145,7 @@
         <div>
             <b>ShowMonthPicker</b> toggles the month and year grids, and <b>ShowMonthPickerAsOverlay</b> moves
             them on top of the day grid, reached from the month title. <b>HighlightSelectedMonth</b> marks the
-            month that is displayed and <b>HighlightCurrentMonth</b> the current one — worth turning on, since
+            month that is displayed and <b>HighlightCurrentMonth</b> the current one - worth turning on, since
             otherwise the month grid shows no sign of where you are.
         </div>
         <br /><br />
@@ -172,7 +172,7 @@
             <b>ShowTimePicker</b> adds an hour and minute picker beside the day grid, or on top of it with
             <b>ShowTimePickerAsOverlay</b>. <b>TimeFormat</b> switches between the 24-hour and 12-hour clocks,
             <b>ShowNowButton</b> hides the button that jumps to the current time, and <b>HourStep</b> /
-            <b>MinuteStep</b> lay a grid over the day and the hour that everything the picker produces lands on —
+            <b>MinuteStep</b> lay a grid over the day and the hour that everything the picker produces lands on -
             the spin buttons, the arrow and page keys, and what is typed. A <b>MinDate</b> or <b>MaxDate</b>
             carrying a time of day bounds the hours of the very day it falls on, so the picker cannot produce
             an instant outside of them.
@@ -242,7 +242,7 @@
         <div>
             <b>DayCellTemplate</b>, <b>MonthCellTemplate</b> and <b>YearCellTemplate</b> replace the content of a
             cell, while <b>HeaderTemplate</b> and <b>FooterTemplate</b> add markup of your own above and below
-            the pickers — a caption, a legend, or the actions a calendar is often given.
+            the pickers - a caption, a legend, or the actions a calendar is often given.
         </div>
         <br /><br />
         <div class="example-content">
@@ -305,7 +305,7 @@
         <div>
             The calendar reads the month and day names, the first day of the week, the date format, the AM/PM
             designators and the calendar system itself off its <b>Culture</b>, defaulting to the culture of the
-            app. A non-Gregorian calendar (Persian, Hebrew — including its thirteen-month leap years) needs
+            app. A non-Gregorian calendar (Persian, Hebrew - including its thirteen-month leap years) needs
             nothing else. See our
             <BitLink Href="https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Helpers/CultureInfoHelper.cs"
                      Target="_blank">CultureInfoHelper</BitLink> for how such a culture is built.
@@ -326,7 +326,7 @@
     <DemoExample Title="TimeZone" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
         <div>
             <b>TimeZone</b> is the zone the days and the time picker are read and written in, defaulting to the
-            local one. The available zone data differs between runtimes — it depends on the OS and on project
+            local one. The available zone data differs between runtimes - it depends on the OS and on project
             settings such as InvariantTimezone
             (<BitLink Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-9.0#timezone-information"
                       Target="_blank">more info</BitLink>).
@@ -392,12 +392,12 @@
 
     <DemoExample Title="Accessibility" RazorCode="@example14RazorCode" Id="example14">
         <div>
-            Every grid — days, months and years — follows the WAI-ARIA grid pattern: one cell is in the tab
+            Every grid - days, months and years - follows the WAI-ARIA grid pattern: one cell is in the tab
             sequence and the arrow keys move the focus between the rest.
             <br /><br />
             <ul>
                 <li><b>←</b> / <b>→</b>: previous/next cell, mirrored in right-to-left</li>
-                <li><b>↑</b> / <b>↓</b>: one row up/down — a week in the day grid, four cells in the others</li>
+                <li><b>↑</b> / <b>↓</b>: one row up/down - a week in the day grid, four cells in the others</li>
                 <li><b>Home</b> / <b>End</b>: first/last cell of the week, of the year, of the range</li>
                 <li><b>PageUp</b> / <b>PageDown</b>: previous/next month in the day grid, year in the month
                     grid, year range in the year grid</li>
@@ -412,8 +412,8 @@
             Crossing a month, year or range boundary navigates the calendar and keeps the focus on the cell, and
             disabled cells are skipped. Beyond that: <b>AriaLabel</b> names the whole calendar for a screen
             reader, each day is announced with its full date and its events, today and the current month and
-            year carry <code>aria-current="date"</code>, and every button — the arrows, the spin buttons, the
-            AM/PM pair — has a name and a state of its own, all of them overridable through the <b>*Title</b>
+            year carry <code>aria-current="date"</code>, and every button - the arrows, the spin buttons, the
+            AM/PM pair - has a name and a state of its own, all of them overridable through the <b>*Title</b>
             parameters.
         </div>
         <br /><br />
@@ -426,7 +426,7 @@
     <DemoExample Title="Multiple months" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
         <div>
             <b>MonthCount</b> renders up to three consecutive months side by side, which browses a whole season
-            at once — the arrow keys, the selection and the events carry on across them. Such a strip always
+            at once - the arrow keys, the selection and the events carry on across them. Such a strip always
             draws six week rows, never draws the days of the adjacent months (each of them is a day of the pane
             beside it), and wraps onto the next line when it is given less width than it asks for.
             <b>PagedNavigation</b> makes the arrows move a whole page of months instead of one.
@@ -558,7 +558,7 @@
     <DemoExample Title="Style & Class" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
         <div>
             <b>Style</b> and <b>Class</b> land on the root, while <b>Styles</b> and <b>Classes</b> reach every
-            part of the calendar on its own — see
+            part of the calendar on its own - see
             <BitLink Href="#calendar-class-styles">BitCalendarClassStyles</BitLink>. Prefer <b>Classes</b> when
             your CSS owns states such as hover and focus, which inline styles cannot express.
         </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
index 3e371401117..933ee36d200 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
@@ -158,7 +158,7 @@ private void HandleOnMonthChange(DateTimeOffset month)
             StartTime = new TimeOnly(9, 0),
             EndTime = new TimeOnly(9, 30) },
     new() { Title = ""Product review"",
-            Body = ""Quarterly product review — prepare slides beforehand."",
+            Body = ""Quarterly product review - prepare slides beforehand."",
             Date = DateOnly.FromDateTime(DateTime.Today),
             StartTime = new TimeOnly(14, 0),
             EndTime = new TimeOnly(15, 0) },
@@ -576,7 +576,7 @@ private void HandleInvalidSubmit()
             StartTime = new TimeOnly(9, 0),
             EndTime = new TimeOnly(9, 30) },
     new() { Title = ""Product review"",
-            Body = ""Quarterly product review — prepare slides beforehand."",
+            Body = ""Quarterly product review - prepare slides beforehand."",
             Date = DateOnly.FromDateTime(DateTime.Today),
             StartTime = new TimeOnly(14, 0),
             EndTime = new TimeOnly(15, 0) },

From ec444e67e46224510327b53f2896640f68eb5381 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 22 Sep 2026 09:53:01 +0330
Subject: [PATCH 8/9] add params

---
 .../Inputs/Calendar/BitCalendar.razor.cs      |   20 +-
 .../Inputs/Calendar/BitCalendarParams.cs      | 1134 +++++++++++++++++
 .../Inputs/Calendar/BitCalendarDemo.razor     |   38 +-
 .../Inputs/Calendar/BitCalendarDemo.razor.cs  |   14 +
 .../Calendar/BitCalendarDemo.razor.samples.cs |   37 +-
 .../Inputs/Calendar/BitCalendarTests.cs       |  317 +++++
 6 files changed, 1549 insertions(+), 11 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarParams.cs

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
index fc9c8fef7eb..bb41b22bfe2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs
@@ -131,6 +131,19 @@ private int _minuteView
 
 
 
+    /// <summary>
+    /// Gets or sets the cascading parameters for the calendar component.
+    /// </summary>
+    /// <remarks>
+    /// This property receives its value from an ancestor component via Blazor's cascading parameter mechanism.
+    /// <br />
+    /// The intended use is to allow shared configuration or settings to be applied to multiple calendar components through the <see cref="BitParams"/> component.
+    /// </remarks>
+    [CascadingParameter(Name = BitCalendarParams.ParamName)]
+    public BitCalendarParams? CascadingParameters { get; set; }
+
+
+
     /// <summary>
     /// Whether selecting the already selected day deselects it, clearing the value.
     /// </summary>
@@ -783,8 +796,11 @@ protected override void OnInitialized()
         base.OnInitialized();
     }
 
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitCalendarParams))]
     protected override void OnParametersSet()
     {
+        CascadingParameters?.UpdateParameters(this);
+
         base.OnParametersSet();
 
         BuildEventsLookup();
@@ -921,7 +937,9 @@ private void HandleOnValueChanged(object? sender, EventArgs args)
         OnSetParameters(resetPickers: false);
     }
 
-    private void OnSetParameters() => OnSetParameters(true);
+    // Internal rather than private so that BitCalendarParams can run the pass again after it has filled in the
+    // parameters the view is built from: the cascade reaches the component after OnInitialized has already run it.
+    internal void OnSetParameters() => OnSetParameters(true);
 
     private void OnSetParameters(bool resetPickers)
     {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarParams.cs
new file mode 100644
index 00000000000..d8610f70690
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendarParams.cs
@@ -0,0 +1,1134 @@
+using System.Globalization;
+
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The parameters for <see cref="BitCalendar"/> component.
+/// </summary>
+public class BitCalendarParams : BitComponentBaseParams, IBitComponentParams
+{
+    /// <summary>
+    /// Represents the parameter name used to identify the <see cref="BitCalendar"/> cascading parameters within <see cref="BitParams"/>.
+    /// </summary>
+    /// <remarks>
+    /// This constant is typically used when referencing or accessing the BitCalendar value in
+    /// parameterized APIs or configuration settings. Using this constant helps ensure consistency and reduces the risk
+    /// of typographical errors.
+    /// </remarks>
+    public const string ParamName = $"{nameof(BitParams)}.{nameof(BitCalendar)}";
+
+
+
+    public string Name => ParamName;
+
+
+
+    /// <summary>
+    /// Whether selecting the already selected day deselects it, clearing the value.
+    /// </summary>
+    public bool? AllowDeselect { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the BitCalendar component.
+    /// </summary>
+    public BitCalendarClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// The general color of the calendar that applies to the today day button, the highlighted current month,
+    /// the selected AM/PM button, and the event indicators.
+    /// </summary>
+    public BitColor? Color { get; set; }
+
+    /// <summary>
+    /// The delay in milliseconds before the hour/minute of the time picker starts changing continuously while an
+    /// increase/decrease button is held down.
+    /// </summary>
+    public int? ContinuousSpinDelay { get; set; }
+
+    /// <summary>
+    /// The interval in milliseconds between two consecutive changes while an increase/decrease button is held down.
+    /// </summary>
+    public int? ContinuousSpinInterval { get; set; }
+
+    /// <summary>
+    /// CultureInfo for the Calendar.
+    /// </summary>
+    public CultureInfo? Culture { get; set; }
+
+    /// <summary>
+    /// The format of the date in the Calendar.
+    /// </summary>
+    public string? DateFormat { get; set; }
+
+    /// <summary>
+    /// Used to customize how content inside the day cell is rendered.
+    /// </summary>
+    public RenderFragment<DateTimeOffset>? DayCellTemplate { get; set; }
+
+    /// <summary>
+    /// Disables every day after today, exactly as a <see cref="MaxDate"/> of now would.
+    /// When both are set, the earlier of the two bounds wins.
+    /// </summary>
+    public bool? DisableFuture { get; set; }
+
+    /// <summary>
+    /// Disables every day before today, exactly as a <see cref="MinDate"/> of now would.
+    /// When both are set, the later of the two bounds wins.
+    /// </summary>
+    public bool? DisablePast { get; set; }
+
+    /// <summary>
+    /// The list of dates that are disabled (not selectable) in the calendar, in addition to MinDate and MaxDate.
+    /// </summary>
+    public IEnumerable<DateTimeOffset>? DisabledDates { get; set; }
+
+    /// <summary>
+    /// The days of the week that are disabled (not selectable) in the calendar (e.g. weekends).
+    /// </summary>
+    public IEnumerable<DayOfWeek>? DisabledDaysOfWeek { get; set; }
+
+    /// <summary>
+    /// The list of events to display on calendar days.
+    /// </summary>
+    public IEnumerable<BitCalendarEvent>? Events { get; set; }
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the close button of the event details dialog.
+    /// </summary>
+    public string? EventDetailsCloseButtonTitle { get; set; }
+
+    /// <summary>
+    /// Used to customize how an event is rendered in the details dialog, in place of its title, its time and its body.
+    /// </summary>
+    public RenderFragment<BitCalendarEvent>? EventTemplate { get; set; }
+
+    /// <summary>
+    /// The text shown before the start time of an event when only a start time is present (e.g. "From 09:00").
+    /// </summary>
+    public string? EventTimeFromText { get; set; }
+
+    /// <summary>
+    /// The text shown before the end time of an event when only an end time is present (e.g. "Until 17:00").
+    /// </summary>
+    public string? EventTimeUntilText { get; set; }
+
+    /// <summary>
+    /// Rendered under the pickers, inside the root of the calendar.
+    /// </summary>
+    public RenderFragment? FooterTemplate { get; set; }
+
+    /// <summary>
+    /// Overrides the first day of the week in the day picker. If not set, the first day of the week of the Culture is used.
+    /// </summary>
+    public DayOfWeek? FirstDayOfWeek { get; set; }
+
+    /// <summary>
+    /// Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months.
+    /// </summary>
+    public bool? FixedWeeks { get; set; }
+
+    /// <summary>
+    /// Custom function to provide additional CSS classes for each day button of the calendar.
+    /// </summary>
+    public Func<DateTimeOffset, string?>? GetDayClass { get; set; }
+
+    /// <summary>
+    /// Rendered above the pickers, inside the root of the calendar.
+    /// </summary>
+    public RenderFragment? HeaderTemplate { get; set; }
+
+    /// <summary>
+    /// The title of the Go to next month button (tooltip).
+    /// </summary>
+    public string? GoToNextMonthTitle { get; set; }
+
+    /// <summary>
+    /// The title of the Go to next year range button (tooltip).
+    /// </summary>
+    public string? GoToNextYearRangeTitle { get; set; }
+
+    /// <summary>
+    /// The title of the Go to next year button (tooltip).
+    /// </summary>
+    public string? GoToNextYearTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the now button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="NowButtonIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? NowButtonIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the now button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? NowButtonIconName { get; set; }
+
+    /// <summary>
+    /// The title of the now button (tooltip).
+    /// </summary>
+    public string? NowButtonTitle { get; set; }
+
+    /// <summary>
+    /// The title of the Go to previous month button (tooltip).
+    /// </summary>
+    public string? GoToPrevMonthTitle { get; set; }
+
+    /// <summary>
+    /// The title of the Go to previous year range button (tooltip).
+    /// </summary>
+    public string? GoToPrevYearRangeTitle { get; set; }
+
+    /// <summary>
+    /// The title of the Go to previous year button (tooltip).
+    /// </summary>
+    public string? GoToPrevYearTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the GoToToday button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="GoToTodayIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? GoToTodayIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the GoToToday button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? GoToTodayIconName { get; set; }
+
+    /// <summary>
+    /// The title of the GoToToday button (tooltip).
+    /// </summary>
+    public string? GoToTodayTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the HideTimePicker button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="HideTimePickerIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? HideTimePickerIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the HideTimePicker button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? HideTimePickerIconName { get; set; }
+
+    /// <summary>
+    /// The title of the HideTimePicker button (tooltip).
+    /// </summary>
+    public string? HideTimePickerTitle { get; set; }
+
+    /// <summary>
+    /// Whether the month picker should highlight the current month.
+    /// </summary>
+    public bool? HighlightCurrentMonth { get; set; }
+
+    /// <summary>
+    /// The list of dates that are highlighted (marked) in the day picker.
+    /// </summary>
+    public IEnumerable<DateTimeOffset>? HighlightedDates { get; set; }
+
+    /// <summary>
+    /// Whether the month picker should highlight the selected month.
+    /// </summary>
+    public bool? HighlightSelectedMonth { get; set; }
+
+    /// <summary>
+    /// Whether the day picker should highlight today's day.
+    /// </summary>
+    public bool? HighlightToday { get; set; }
+
+    /// <summary>
+    /// The step, in hours, the spin buttons of the time picker move the hour by.
+    /// </summary>
+    public int? HourStep { get; set; }
+
+    /// <summary>
+    /// The custom validation error message for the invalid value.
+    /// </summary>
+    public string? InvalidErrorMessage { get; set; }
+
+    /// <summary>
+    /// Custom function to determine if a specific date is disabled (not selectable) in the calendar.
+    /// </summary>
+    public Func<DateTimeOffset, bool>? IsDateDisabled { get; set; }
+
+    /// <summary>
+    /// The maximum allowable date of the calendar.
+    /// </summary>
+    public DateTimeOffset? MaxDate { get; set; }
+
+    /// <summary>
+    /// The minimum allowable date of the calendar.
+    /// </summary>
+    public DateTimeOffset? MinDate { get; set; }
+
+    /// <summary>
+    /// The step, in minutes, the spin buttons of the time picker move the minute by.
+    /// </summary>
+    public int? MinuteStep { get; set; }
+
+    /// <summary>
+    /// The number of consecutive months rendered side by side in the day picker (1 to 3).
+    /// </summary>
+    public int? MonthCount { get; set; }
+
+    /// <summary>
+    /// Used to customize how content inside the month cell is rendered.
+    /// </summary>
+    public RenderFragment<DateTimeOffset>? MonthCellTemplate { get; set; }
+
+    /// <summary>
+    /// The title of the month picker's toggle (tooltip).
+    /// </summary>
+    public string? MonthPickerToggleTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the Go to next month button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="NextMonthNavIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? NextMonthNavIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the Go to next month button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? NextMonthNavIconName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the Go to next year button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="NextYearNavIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? NextYearNavIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the Go to next year button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? NextYearNavIconName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the Go to next year range button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="NextYearRangeNavIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? NextYearRangeNavIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the Go to next year range button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? NextYearRangeNavIconName { get; set; }
+
+    /// <summary>
+    /// Whether the previous and next navigation buttons move the calendar by all of its rendered months instead of one.
+    /// </summary>
+    public bool? PagedNavigation { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the Go to previous month button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="PrevMonthNavIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? PrevMonthNavIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the Go to previous month button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? PrevMonthNavIconName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the Go to previous year button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="PrevYearNavIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? PrevYearNavIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the Go to previous year button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? PrevYearNavIconName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the Go to previous year range button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="PrevYearRangeNavIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? PrevYearRangeNavIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the Go to previous year range button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? PrevYearRangeNavIconName { get; set; }
+
+    /// <summary>
+    /// The template of the text a screen reader is given when the selection changes, where {0} is the selected
+    /// date written with the <see cref="DateFormat"/>.
+    /// </summary>
+    public string? SelectedDateAriaAtomic { get; set; }
+
+    /// <summary>
+    /// Whether the now button should be shown or not.
+    /// </summary>
+    public bool? ShowNowButton { get; set; }
+
+    /// <summary>
+    /// Whether the GoToToday button should be shown or not.
+    /// </summary>
+    public bool? ShowGoToToday { get; set; }
+
+    /// <summary>
+    /// Whether clicking a day that carries events opens the dialog listing them.
+    /// </summary>
+    public bool? ShowEventDetails { get; set; }
+
+    /// <summary>
+    /// Whether the month picker is shown or hidden.
+    /// </summary>
+    public bool? ShowMonthPicker { get; set; }
+
+    /// <summary>
+    /// Show month picker on top of date picker when visible.
+    /// </summary>
+    public bool? ShowMonthPickerAsOverlay { get; set; }
+
+    /// <summary>
+    /// Whether the days of the previous and next months should be shown in the day picker.
+    /// </summary>
+    public bool? ShowOutsideDays { get; set; }
+
+    /// <summary>
+    /// Whether the time picker should be shown or not.
+    /// </summary>
+    public bool? ShowTimePicker { get; set; }
+
+    /// <summary>
+    /// Show time picker on top of date picker when visible.
+    /// </summary>
+    public bool? ShowTimePickerAsOverlay { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the ShowTimePicker button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="ShowTimePickerIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? ShowTimePickerIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the ShowTimePicker button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? ShowTimePickerIconName { get; set; }
+
+    /// <summary>
+    /// The title of the ShowTimePicker button (tooltip).
+    /// </summary>
+    public string? ShowTimePickerTitle { get; set; }
+
+    /// <summary>
+    /// Whether the week number (weeks 1 to 53) should be shown before each week row.
+    /// </summary>
+    public bool? ShowWeekNumbers { get; set; }
+
+    /// <summary>
+    /// The size of the calendar, which scales its cells and their text.
+    /// </summary>
+    public BitSize? Size { get; set; }
+
+    /// <summary>
+    /// Specifies the date and time of the calendar when it is showing without any selected value.
+    /// </summary>
+    public DateTimeOffset? StartingValue { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the BitCalendar component.
+    /// </summary>
+    public BitCalendarClassStyles? Styles { get; set; }
+
+    /// <summary>
+    /// The time format of the time-picker, 24H or 12H.
+    /// </summary>
+    public BitTimeFormat? TimeFormat { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the decrease-hour button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="TimePickerDecreaseHourIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? TimePickerDecreaseHourIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the decrease-hour button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? TimePickerDecreaseHourIconName { get; set; }
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's decrease-hour button.
+    /// </summary>
+    public string? TimePickerDecreaseHourTitle { get; set; }
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's decrease-minute button.
+    /// </summary>
+    public string? TimePickerDecreaseMinuteTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the decrease-minute button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="TimePickerDecreaseMinuteIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? TimePickerDecreaseMinuteIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the decrease-minute button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? TimePickerDecreaseMinuteIconName { get; set; }
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's hour input.
+    /// </summary>
+    public string? TimePickerHourTitle { get; set; }
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's minute input.
+    /// </summary>
+    public string? TimePickerMinuteTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the increase-hour button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="TimePickerIncreaseHourIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? TimePickerIncreaseHourIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the increase-hour button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? TimePickerIncreaseHourIconName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to display in the increase-minute button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="TimePickerIncreaseMinuteIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? TimePickerIncreaseMinuteIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to display in the increase-minute button from the built-in Fluent UI icons.
+    /// </summary>
+    public string? TimePickerIncreaseMinuteIconName { get; set; }
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's increase-hour button.
+    /// </summary>
+    public string? TimePickerIncreaseHourTitle { get; set; }
+
+    /// <summary>
+    /// The title (tooltip) and the accessible name of the time-picker's increase-minute button.
+    /// </summary>
+    public string? TimePickerIncreaseMinuteTitle { get; set; }
+
+    /// <summary>
+    /// TimeZone for the Calendar.
+    /// </summary>
+    public TimeZoneInfo? TimeZone { get; set; }
+
+    /// <summary>
+    /// Overrides the current date and time considered as "today" and "now" in the calendar.
+    /// </summary>
+    public DateTimeOffset? Today { get; set; }
+
+    /// <summary>
+    /// The rule used to calculate the week numbers. Defaults to the FirstFullWeek rule.
+    /// </summary>
+    public CalendarWeekRule? WeekNumberRule { get; set; }
+
+    /// <summary>
+    /// The accessible name of the empty column header above the week numbers.
+    /// </summary>
+    public string? WeekNumbersHeaderTitle { get; set; }
+
+    /// <summary>
+    /// The title of the week number (tooltip).
+    /// </summary>
+    public string? WeekNumberTitle { get; set; }
+
+    /// <summary>
+    /// Used to customize how content inside the year cell is rendered.
+    /// </summary>
+    public RenderFragment<int>? YearCellTemplate { get; set; }
+
+    /// <summary>
+    /// The title of the year picker's toggle (tooltip).
+    /// </summary>
+    public string? YearPickerToggleTitle { get; set; }
+
+    /// <summary>
+    /// The title of the year range picker's toggle (tooltip).
+    /// </summary>
+    public string? YearRangePickerToggleTitle { get; set; }
+
+
+
+    /// <summary>
+    /// Updates the properties of the specified <see cref="BitCalendar"/> instance with any values that have been set on
+    /// this object, if those properties have not already been set on the <see cref="BitCalendar"/>.
+    /// </summary>
+    /// <remarks>
+    /// Only properties that have a value set and have not already been set on the <paramref name="bitCalendar"/> will be updated.
+    /// This method does not overwrite existing values on <paramref name="bitCalendar"/>.
+    /// </remarks>
+    /// <param name="bitCalendar">
+    /// The <see cref="BitCalendar"/> instance whose properties will be updated. Cannot be null.
+    /// </param>
+    public void UpdateParameters(BitCalendar bitCalendar)
+    {
+        if (bitCalendar is null) return;
+
+        UpdateBaseParameters(bitCalendar);
+
+        // The parameters the calendar rebuilds its view from are the ones carrying a [CallOnSet(OnSetParameters)] on
+        // the component, and the component has already run that pass in OnInitialized - before anything cascaded
+        // here reached it. So whichever of them the cascade fills in, the pass is run once more at the end.
+        var rebuildView = false;
+
+        if (AllowDeselect.HasValue && bitCalendar.HasNotBeenSet(nameof(AllowDeselect)))
+        {
+            bitCalendar.AllowDeselect = AllowDeselect.Value;
+        }
+
+        if (Classes is not null && bitCalendar.HasNotBeenSet(nameof(Classes)))
+        {
+            bitCalendar.Classes = Classes;
+
+            bitCalendar.ClassBuilder.Reset();
+        }
+
+        if (Color.HasValue && bitCalendar.HasNotBeenSet(nameof(Color)))
+        {
+            bitCalendar.Color = Color.Value;
+
+            bitCalendar.ClassBuilder.Reset();
+        }
+
+        if (ContinuousSpinDelay.HasValue && bitCalendar.HasNotBeenSet(nameof(ContinuousSpinDelay)))
+        {
+            bitCalendar.ContinuousSpinDelay = ContinuousSpinDelay.Value;
+        }
+
+        if (ContinuousSpinInterval.HasValue && bitCalendar.HasNotBeenSet(nameof(ContinuousSpinInterval)))
+        {
+            bitCalendar.ContinuousSpinInterval = ContinuousSpinInterval.Value;
+        }
+
+        if (Culture is not null && bitCalendar.HasNotBeenSet(nameof(Culture)))
+        {
+            bitCalendar.Culture = Culture;
+
+            bitCalendar.ClassBuilder.Reset();
+
+            rebuildView = true;
+        }
+
+        if (DateFormat.HasValue() && bitCalendar.HasNotBeenSet(nameof(DateFormat)))
+        {
+            bitCalendar.DateFormat = DateFormat;
+        }
+
+        if (DayCellTemplate is not null && bitCalendar.HasNotBeenSet(nameof(DayCellTemplate)))
+        {
+            bitCalendar.DayCellTemplate = DayCellTemplate;
+        }
+
+        if (DisableFuture.HasValue && bitCalendar.HasNotBeenSet(nameof(DisableFuture)))
+        {
+            bitCalendar.DisableFuture = DisableFuture.Value;
+
+            rebuildView = true;
+        }
+
+        if (DisablePast.HasValue && bitCalendar.HasNotBeenSet(nameof(DisablePast)))
+        {
+            bitCalendar.DisablePast = DisablePast.Value;
+
+            rebuildView = true;
+        }
+
+        if (DisabledDates is not null && bitCalendar.HasNotBeenSet(nameof(DisabledDates)))
+        {
+            bitCalendar.DisabledDates = DisabledDates;
+        }
+
+        if (DisabledDaysOfWeek is not null && bitCalendar.HasNotBeenSet(nameof(DisabledDaysOfWeek)))
+        {
+            bitCalendar.DisabledDaysOfWeek = DisabledDaysOfWeek;
+        }
+
+        if (Events is not null && bitCalendar.HasNotBeenSet(nameof(Events)))
+        {
+            bitCalendar.Events = Events;
+        }
+
+        if (EventDetailsCloseButtonTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(EventDetailsCloseButtonTitle)))
+        {
+            bitCalendar.EventDetailsCloseButtonTitle = EventDetailsCloseButtonTitle!;
+        }
+
+        if (EventTemplate is not null && bitCalendar.HasNotBeenSet(nameof(EventTemplate)))
+        {
+            bitCalendar.EventTemplate = EventTemplate;
+        }
+
+        if (EventTimeFromText.HasValue() && bitCalendar.HasNotBeenSet(nameof(EventTimeFromText)))
+        {
+            bitCalendar.EventTimeFromText = EventTimeFromText!;
+        }
+
+        if (EventTimeUntilText.HasValue() && bitCalendar.HasNotBeenSet(nameof(EventTimeUntilText)))
+        {
+            bitCalendar.EventTimeUntilText = EventTimeUntilText!;
+        }
+
+        if (FooterTemplate is not null && bitCalendar.HasNotBeenSet(nameof(FooterTemplate)))
+        {
+            bitCalendar.FooterTemplate = FooterTemplate;
+        }
+
+        if (FirstDayOfWeek.HasValue && bitCalendar.HasNotBeenSet(nameof(FirstDayOfWeek)))
+        {
+            bitCalendar.FirstDayOfWeek = FirstDayOfWeek.Value;
+
+            rebuildView = true;
+        }
+
+        if (FixedWeeks.HasValue && bitCalendar.HasNotBeenSet(nameof(FixedWeeks)))
+        {
+            bitCalendar.FixedWeeks = FixedWeeks.Value;
+
+            rebuildView = true;
+        }
+
+        if (GetDayClass is not null && bitCalendar.HasNotBeenSet(nameof(GetDayClass)))
+        {
+            bitCalendar.GetDayClass = GetDayClass;
+        }
+
+        if (HeaderTemplate is not null && bitCalendar.HasNotBeenSet(nameof(HeaderTemplate)))
+        {
+            bitCalendar.HeaderTemplate = HeaderTemplate;
+        }
+
+        if (GoToNextMonthTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(GoToNextMonthTitle)))
+        {
+            bitCalendar.GoToNextMonthTitle = GoToNextMonthTitle!;
+        }
+
+        if (GoToNextYearRangeTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(GoToNextYearRangeTitle)))
+        {
+            bitCalendar.GoToNextYearRangeTitle = GoToNextYearRangeTitle!;
+        }
+
+        if (GoToNextYearTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(GoToNextYearTitle)))
+        {
+            bitCalendar.GoToNextYearTitle = GoToNextYearTitle!;
+        }
+
+        if (NowButtonIcon is not null && bitCalendar.HasNotBeenSet(nameof(NowButtonIcon)))
+        {
+            bitCalendar.NowButtonIcon = NowButtonIcon;
+        }
+
+        if (NowButtonIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(NowButtonIconName)))
+        {
+            bitCalendar.NowButtonIconName = NowButtonIconName;
+        }
+
+        if (NowButtonTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(NowButtonTitle)))
+        {
+            bitCalendar.NowButtonTitle = NowButtonTitle!;
+        }
+
+        if (GoToPrevMonthTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(GoToPrevMonthTitle)))
+        {
+            bitCalendar.GoToPrevMonthTitle = GoToPrevMonthTitle!;
+        }
+
+        if (GoToPrevYearRangeTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(GoToPrevYearRangeTitle)))
+        {
+            bitCalendar.GoToPrevYearRangeTitle = GoToPrevYearRangeTitle!;
+        }
+
+        if (GoToPrevYearTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(GoToPrevYearTitle)))
+        {
+            bitCalendar.GoToPrevYearTitle = GoToPrevYearTitle!;
+        }
+
+        if (GoToTodayIcon is not null && bitCalendar.HasNotBeenSet(nameof(GoToTodayIcon)))
+        {
+            bitCalendar.GoToTodayIcon = GoToTodayIcon;
+        }
+
+        if (GoToTodayIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(GoToTodayIconName)))
+        {
+            bitCalendar.GoToTodayIconName = GoToTodayIconName;
+        }
+
+        if (GoToTodayTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(GoToTodayTitle)))
+        {
+            bitCalendar.GoToTodayTitle = GoToTodayTitle!;
+        }
+
+        if (HideTimePickerIcon is not null && bitCalendar.HasNotBeenSet(nameof(HideTimePickerIcon)))
+        {
+            bitCalendar.HideTimePickerIcon = HideTimePickerIcon;
+        }
+
+        if (HideTimePickerIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(HideTimePickerIconName)))
+        {
+            bitCalendar.HideTimePickerIconName = HideTimePickerIconName;
+        }
+
+        if (HideTimePickerTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(HideTimePickerTitle)))
+        {
+            bitCalendar.HideTimePickerTitle = HideTimePickerTitle!;
+        }
+
+        if (HighlightCurrentMonth.HasValue && bitCalendar.HasNotBeenSet(nameof(HighlightCurrentMonth)))
+        {
+            bitCalendar.HighlightCurrentMonth = HighlightCurrentMonth.Value;
+        }
+
+        if (HighlightedDates is not null && bitCalendar.HasNotBeenSet(nameof(HighlightedDates)))
+        {
+            bitCalendar.HighlightedDates = HighlightedDates;
+        }
+
+        if (HighlightSelectedMonth.HasValue && bitCalendar.HasNotBeenSet(nameof(HighlightSelectedMonth)))
+        {
+            bitCalendar.HighlightSelectedMonth = HighlightSelectedMonth.Value;
+        }
+
+        if (HighlightToday.HasValue && bitCalendar.HasNotBeenSet(nameof(HighlightToday)))
+        {
+            bitCalendar.HighlightToday = HighlightToday.Value;
+        }
+
+        if (HourStep.HasValue && bitCalendar.HasNotBeenSet(nameof(HourStep)))
+        {
+            bitCalendar.HourStep = HourStep.Value;
+        }
+
+        if (InvalidErrorMessage.HasValue() && bitCalendar.HasNotBeenSet(nameof(InvalidErrorMessage)))
+        {
+            bitCalendar.InvalidErrorMessage = InvalidErrorMessage;
+        }
+
+        if (IsDateDisabled is not null && bitCalendar.HasNotBeenSet(nameof(IsDateDisabled)))
+        {
+            bitCalendar.IsDateDisabled = IsDateDisabled;
+        }
+
+        if (MaxDate.HasValue && bitCalendar.HasNotBeenSet(nameof(MaxDate)))
+        {
+            bitCalendar.MaxDate = MaxDate.Value;
+
+            rebuildView = true;
+        }
+
+        if (MinDate.HasValue && bitCalendar.HasNotBeenSet(nameof(MinDate)))
+        {
+            bitCalendar.MinDate = MinDate.Value;
+
+            rebuildView = true;
+        }
+
+        if (MinuteStep.HasValue && bitCalendar.HasNotBeenSet(nameof(MinuteStep)))
+        {
+            bitCalendar.MinuteStep = MinuteStep.Value;
+        }
+
+        if (MonthCount.HasValue && bitCalendar.HasNotBeenSet(nameof(MonthCount)))
+        {
+            bitCalendar.MonthCount = MonthCount.Value;
+
+            bitCalendar.ClassBuilder.Reset();
+
+            rebuildView = true;
+        }
+
+        if (MonthCellTemplate is not null && bitCalendar.HasNotBeenSet(nameof(MonthCellTemplate)))
+        {
+            bitCalendar.MonthCellTemplate = MonthCellTemplate;
+        }
+
+        if (MonthPickerToggleTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(MonthPickerToggleTitle)))
+        {
+            bitCalendar.MonthPickerToggleTitle = MonthPickerToggleTitle!;
+        }
+
+        if (NextMonthNavIcon is not null && bitCalendar.HasNotBeenSet(nameof(NextMonthNavIcon)))
+        {
+            bitCalendar.NextMonthNavIcon = NextMonthNavIcon;
+        }
+
+        if (NextMonthNavIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(NextMonthNavIconName)))
+        {
+            bitCalendar.NextMonthNavIconName = NextMonthNavIconName;
+        }
+
+        if (NextYearNavIcon is not null && bitCalendar.HasNotBeenSet(nameof(NextYearNavIcon)))
+        {
+            bitCalendar.NextYearNavIcon = NextYearNavIcon;
+        }
+
+        if (NextYearNavIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(NextYearNavIconName)))
+        {
+            bitCalendar.NextYearNavIconName = NextYearNavIconName;
+        }
+
+        if (NextYearRangeNavIcon is not null && bitCalendar.HasNotBeenSet(nameof(NextYearRangeNavIcon)))
+        {
+            bitCalendar.NextYearRangeNavIcon = NextYearRangeNavIcon;
+        }
+
+        if (NextYearRangeNavIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(NextYearRangeNavIconName)))
+        {
+            bitCalendar.NextYearRangeNavIconName = NextYearRangeNavIconName;
+        }
+
+        if (PagedNavigation.HasValue && bitCalendar.HasNotBeenSet(nameof(PagedNavigation)))
+        {
+            bitCalendar.PagedNavigation = PagedNavigation.Value;
+        }
+
+        if (PrevMonthNavIcon is not null && bitCalendar.HasNotBeenSet(nameof(PrevMonthNavIcon)))
+        {
+            bitCalendar.PrevMonthNavIcon = PrevMonthNavIcon;
+        }
+
+        if (PrevMonthNavIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(PrevMonthNavIconName)))
+        {
+            bitCalendar.PrevMonthNavIconName = PrevMonthNavIconName;
+        }
+
+        if (PrevYearNavIcon is not null && bitCalendar.HasNotBeenSet(nameof(PrevYearNavIcon)))
+        {
+            bitCalendar.PrevYearNavIcon = PrevYearNavIcon;
+        }
+
+        if (PrevYearNavIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(PrevYearNavIconName)))
+        {
+            bitCalendar.PrevYearNavIconName = PrevYearNavIconName;
+        }
+
+        if (PrevYearRangeNavIcon is not null && bitCalendar.HasNotBeenSet(nameof(PrevYearRangeNavIcon)))
+        {
+            bitCalendar.PrevYearRangeNavIcon = PrevYearRangeNavIcon;
+        }
+
+        if (PrevYearRangeNavIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(PrevYearRangeNavIconName)))
+        {
+            bitCalendar.PrevYearRangeNavIconName = PrevYearRangeNavIconName;
+        }
+
+        if (SelectedDateAriaAtomic.HasValue() && bitCalendar.HasNotBeenSet(nameof(SelectedDateAriaAtomic)))
+        {
+            bitCalendar.SelectedDateAriaAtomic = SelectedDateAriaAtomic!;
+        }
+
+        if (ShowNowButton.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowNowButton)))
+        {
+            bitCalendar.ShowNowButton = ShowNowButton.Value;
+        }
+
+        if (ShowGoToToday.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowGoToToday)))
+        {
+            bitCalendar.ShowGoToToday = ShowGoToToday.Value;
+        }
+
+        if (ShowEventDetails.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowEventDetails)))
+        {
+            bitCalendar.ShowEventDetails = ShowEventDetails.Value;
+        }
+
+        if (ShowMonthPicker.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowMonthPicker)))
+        {
+            bitCalendar.ShowMonthPicker = ShowMonthPicker.Value;
+
+            rebuildView = true;
+        }
+
+        if (ShowMonthPickerAsOverlay.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowMonthPickerAsOverlay)))
+        {
+            bitCalendar.ShowMonthPickerAsOverlay = ShowMonthPickerAsOverlay.Value;
+
+            rebuildView = true;
+        }
+
+        if (ShowOutsideDays.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowOutsideDays)))
+        {
+            bitCalendar.ShowOutsideDays = ShowOutsideDays.Value;
+        }
+
+        if (ShowTimePicker.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowTimePicker)))
+        {
+            bitCalendar.ShowTimePicker = ShowTimePicker.Value;
+
+            rebuildView = true;
+        }
+
+        if (ShowTimePickerAsOverlay.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowTimePickerAsOverlay)))
+        {
+            bitCalendar.ShowTimePickerAsOverlay = ShowTimePickerAsOverlay.Value;
+
+            rebuildView = true;
+        }
+
+        if (ShowTimePickerIcon is not null && bitCalendar.HasNotBeenSet(nameof(ShowTimePickerIcon)))
+        {
+            bitCalendar.ShowTimePickerIcon = ShowTimePickerIcon;
+        }
+
+        if (ShowTimePickerIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(ShowTimePickerIconName)))
+        {
+            bitCalendar.ShowTimePickerIconName = ShowTimePickerIconName;
+        }
+
+        if (ShowTimePickerTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(ShowTimePickerTitle)))
+        {
+            bitCalendar.ShowTimePickerTitle = ShowTimePickerTitle!;
+        }
+
+        if (ShowWeekNumbers.HasValue && bitCalendar.HasNotBeenSet(nameof(ShowWeekNumbers)))
+        {
+            bitCalendar.ShowWeekNumbers = ShowWeekNumbers.Value;
+        }
+
+        if (Size.HasValue && bitCalendar.HasNotBeenSet(nameof(Size)))
+        {
+            bitCalendar.Size = Size.Value;
+
+            bitCalendar.ClassBuilder.Reset();
+        }
+
+        if (StartingValue.HasValue && bitCalendar.HasNotBeenSet(nameof(StartingValue)))
+        {
+            bitCalendar.StartingValue = StartingValue.Value;
+
+            rebuildView = true;
+        }
+
+        if (Styles is not null && bitCalendar.HasNotBeenSet(nameof(Styles)))
+        {
+            bitCalendar.Styles = Styles;
+
+            bitCalendar.StyleBuilder.Reset();
+        }
+
+        if (TimeFormat.HasValue && bitCalendar.HasNotBeenSet(nameof(TimeFormat)))
+        {
+            bitCalendar.TimeFormat = TimeFormat.Value;
+        }
+
+        if (TimePickerDecreaseHourIcon is not null && bitCalendar.HasNotBeenSet(nameof(TimePickerDecreaseHourIcon)))
+        {
+            bitCalendar.TimePickerDecreaseHourIcon = TimePickerDecreaseHourIcon;
+        }
+
+        if (TimePickerDecreaseHourIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerDecreaseHourIconName)))
+        {
+            bitCalendar.TimePickerDecreaseHourIconName = TimePickerDecreaseHourIconName;
+        }
+
+        if (TimePickerDecreaseHourTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerDecreaseHourTitle)))
+        {
+            bitCalendar.TimePickerDecreaseHourTitle = TimePickerDecreaseHourTitle!;
+        }
+
+        if (TimePickerDecreaseMinuteTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerDecreaseMinuteTitle)))
+        {
+            bitCalendar.TimePickerDecreaseMinuteTitle = TimePickerDecreaseMinuteTitle!;
+        }
+
+        if (TimePickerDecreaseMinuteIcon is not null && bitCalendar.HasNotBeenSet(nameof(TimePickerDecreaseMinuteIcon)))
+        {
+            bitCalendar.TimePickerDecreaseMinuteIcon = TimePickerDecreaseMinuteIcon;
+        }
+
+        if (TimePickerDecreaseMinuteIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerDecreaseMinuteIconName)))
+        {
+            bitCalendar.TimePickerDecreaseMinuteIconName = TimePickerDecreaseMinuteIconName;
+        }
+
+        if (TimePickerHourTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerHourTitle)))
+        {
+            bitCalendar.TimePickerHourTitle = TimePickerHourTitle!;
+        }
+
+        if (TimePickerMinuteTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerMinuteTitle)))
+        {
+            bitCalendar.TimePickerMinuteTitle = TimePickerMinuteTitle!;
+        }
+
+        if (TimePickerIncreaseHourIcon is not null && bitCalendar.HasNotBeenSet(nameof(TimePickerIncreaseHourIcon)))
+        {
+            bitCalendar.TimePickerIncreaseHourIcon = TimePickerIncreaseHourIcon;
+        }
+
+        if (TimePickerIncreaseHourIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerIncreaseHourIconName)))
+        {
+            bitCalendar.TimePickerIncreaseHourIconName = TimePickerIncreaseHourIconName;
+        }
+
+        if (TimePickerIncreaseMinuteIcon is not null && bitCalendar.HasNotBeenSet(nameof(TimePickerIncreaseMinuteIcon)))
+        {
+            bitCalendar.TimePickerIncreaseMinuteIcon = TimePickerIncreaseMinuteIcon;
+        }
+
+        if (TimePickerIncreaseMinuteIconName.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerIncreaseMinuteIconName)))
+        {
+            bitCalendar.TimePickerIncreaseMinuteIconName = TimePickerIncreaseMinuteIconName;
+        }
+
+        if (TimePickerIncreaseHourTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerIncreaseHourTitle)))
+        {
+            bitCalendar.TimePickerIncreaseHourTitle = TimePickerIncreaseHourTitle!;
+        }
+
+        if (TimePickerIncreaseMinuteTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(TimePickerIncreaseMinuteTitle)))
+        {
+            bitCalendar.TimePickerIncreaseMinuteTitle = TimePickerIncreaseMinuteTitle!;
+        }
+
+        if (TimeZone is not null && bitCalendar.HasNotBeenSet(nameof(TimeZone)))
+        {
+            bitCalendar.TimeZone = TimeZone;
+
+            rebuildView = true;
+        }
+
+        if (Today.HasValue && bitCalendar.HasNotBeenSet(nameof(Today)))
+        {
+            bitCalendar.Today = Today.Value;
+        }
+
+        if (WeekNumberRule.HasValue && bitCalendar.HasNotBeenSet(nameof(WeekNumberRule)))
+        {
+            bitCalendar.WeekNumberRule = WeekNumberRule.Value;
+        }
+
+        if (WeekNumbersHeaderTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(WeekNumbersHeaderTitle)))
+        {
+            bitCalendar.WeekNumbersHeaderTitle = WeekNumbersHeaderTitle!;
+        }
+
+        if (WeekNumberTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(WeekNumberTitle)))
+        {
+            bitCalendar.WeekNumberTitle = WeekNumberTitle!;
+        }
+
+        if (YearCellTemplate is not null && bitCalendar.HasNotBeenSet(nameof(YearCellTemplate)))
+        {
+            bitCalendar.YearCellTemplate = YearCellTemplate;
+        }
+
+        if (YearPickerToggleTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(YearPickerToggleTitle)))
+        {
+            bitCalendar.YearPickerToggleTitle = YearPickerToggleTitle!;
+        }
+
+        if (YearRangePickerToggleTitle.HasValue() && bitCalendar.HasNotBeenSet(nameof(YearRangePickerToggleTitle)))
+        {
+            bitCalendar.YearRangePickerToggleTitle = YearRangePickerToggleTitle!;
+        }
+
+        if (rebuildView)
+        {
+            bitCalendar.OnSetParameters();
+        }
+    }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
index 4a2e5521614..7d44965ee44 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor
@@ -442,7 +442,35 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example16RazorCode" Id="example16">
+    <DemoExample Title="Cascading parameters" RazorCode="@example16RazorCode" Id="example16">
+        <div>
+            <b>BitParams</b> carries a <b>BitCalendarParams</b> down to every calendar under it, so a page that shows
+            several of them sets the week rules, the bounds or the culture once instead of at every calendar in it.
+            What it carries is a default and not an override: a calendar that sets a parameter for itself keeps its own
+            value, and only what it left unset is filled in from the cascade - which is what lets one calendar step out
+            of the section it is in without the section having to know about it. Every parameter of the component is on
+            the params object, and each of them is filled in on its own, so a calendar can take the week layout from
+            the cascade and the month picker from its own markup.
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <BitParams Parameters="@calendarParams">
+                <div>Takes the week layout, the bounds and the highlighting from the cascade:</div>
+                <BitCalendar />
+                <br /><br />
+                <div>So does this one, without repeating any of it:</div>
+                <BitCalendar />
+                <br /><br />
+                <div>Its own bounds and no month picker, the cascaded week layout:</div>
+                <BitCalendar ShowMonthPicker="false" MinDate="DateTimeOffset.Now.AddDays(-2)" />
+            </BitParams>
+            <br /><br />
+            <div>Outside the cascade, and back to the defaults:</div>
+            <BitCalendar />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Color" RazorCode="@example17RazorCode" Id="example17">
         <div>
             <b>Color</b> paints today, the highlighted current month, the event indicators and the AM/PM button
             that is in force.
@@ -504,7 +532,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example17RazorCode" Id="example17">
+    <DemoExample Title="External Icons" RazorCode="@example18RazorCode" Id="example18">
         <div>
             Every icon of the calendar has an <b>*Icon</b> parameter taking a
             <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> from an external library
@@ -537,7 +565,7 @@
                      TimePickerDecreaseMinuteIcon="@BitIconInfo.Bi("chevron-down")" />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example18RazorCode" Id="example18">
+    <DemoExample Title="Size" RazorCode="@example19RazorCode" Id="example19">
         <div>
             <b>Size</b> scales the cells and their text together, so the whole calendar keeps its proportions.
             The smallest cell still clears the 24&nbsp;px minimum pointer target.
@@ -555,7 +583,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
+    <DemoExample Title="Style & Class" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
         <div>
             <b>Style</b> and <b>Class</b> land on the root, while <b>Styles</b> and <b>Classes</b> reach every
             part of the calendar on its own - see
@@ -627,7 +655,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example20RazorCode" Id="example20">
+    <DemoExample Title="RTL" RazorCode="@example21RazorCode" Id="example21">
         <div>
             <b>Dir</b> Rtl mirrors the calendar, and the left and right arrow keys swap with it. A culture that
             reads right to left turns it on by itself.
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
index 81d96ce8c21..3f742afdaee 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.cs
@@ -1920,6 +1920,20 @@ private void HandleOnEventDayClick(DateTimeOffset? date)
     private bool showMonthPickerAsOverlay;
 
     private DateTimeOffset? seasonDate;
+
+    private readonly BitCalendarParams[] calendarParams =
+    [
+        new()
+        {
+            ShowWeekNumbers = true,
+            FirstDayOfWeek = DayOfWeek.Monday,
+            WeekNumberRule = CalendarWeekRule.FirstFourDayWeek,
+            HighlightCurrentMonth = true,
+            MinDate = DateTimeOffset.Now.AddMonths(-1),
+            MaxDate = DateTimeOffset.Now.AddMonths(1),
+        }
+    ];
+
     private DateTimeOffset? selectedDateTime = DateTimeOffset.Now;
     private DateTimeOffset? boundedDateTime = DateTime.Today.AddHours(12);
     private DateTimeOffset boundedMinDate = DateTime.Today.AddHours(9).AddMinutes(30);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
index 933ee36d200..1ee6aca1037 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Calendar/BitCalendarDemo.razor.samples.cs
@@ -391,6 +391,33 @@ private void HandleInvalidSubmit()
 private DateTimeOffset? seasonDate;";
 
     private readonly string example16RazorCode = @"
+@* The params object carries a default down to every calendar under it, and never overwrites what one set itself. *@
+<BitParams Parameters=""@calendarParams"">
+    <BitCalendar />
+
+    <BitCalendar />
+
+    <BitCalendar ShowMonthPicker=""false"" MinDate=""DateTimeOffset.Now.AddDays(-2)"" />
+</BitParams>
+
+<BitCalendar />
+
+@code {
+    private readonly BitCalendarParams[] calendarParams =
+    [
+        new()
+        {
+            ShowWeekNumbers = true,
+            FirstDayOfWeek = DayOfWeek.Monday,
+            WeekNumberRule = CalendarWeekRule.FirstFourDayWeek,
+            HighlightCurrentMonth = true,
+            MinDate = DateTimeOffset.Now.AddMonths(-1),
+            MaxDate = DateTimeOffset.Now.AddMonths(1),
+        }
+    ];
+}";
+
+    private readonly string example17RazorCode = @"
 <BitCalendar Color=""BitColor.Primary"" HighlightCurrentMonth />
 
 <BitCalendar Color=""BitColor.Secondary"" HighlightCurrentMonth />
@@ -425,7 +452,7 @@ private void HandleInvalidSubmit()
 
 <BitCalendar Color=""BitColor.TertiaryBorder"" HighlightCurrentMonth />";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example18RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitCalendar GoToTodayIcon=""@BitIconInfo.Fa(""solid calendar-day"")""
@@ -445,14 +472,14 @@ private void HandleInvalidSubmit()
              TimePickerIncreaseMinuteIcon=""@BitIconInfo.Bi(""chevron-up"")""
              TimePickerDecreaseMinuteIcon=""@BitIconInfo.Bi(""chevron-down"")"" />";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example19RazorCode = @"
 <BitCalendar Size=""BitSize.Small"" ShowWeekNumbers />
 
 <BitCalendar Size=""BitSize.Medium"" ShowWeekNumbers />
 
 <BitCalendar Size=""BitSize.Large"" ShowWeekNumbers />";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example20RazorCode = @"
 <style>
     .custom-class {
         margin: 1rem;
@@ -565,7 +592,7 @@ private void HandleInvalidSubmit()
     <BitCalendar Events=""@calendarEvents"" />
 </div>";
 
-    private readonly string example19CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 private DateTimeOffset? cssVarsDate = DateTimeOffset.Now.AddDays(2);
 
 private List<BitCalendarEvent> calendarEvents =
@@ -594,6 +621,6 @@ private void HandleInvalidSubmit()
             StartTime = new TimeOnly(11, 30) }
 ];";
 
-    private readonly string example20RazorCode = @"
+    private readonly string example21RazorCode = @"
 <BitCalendar Dir=""BitDir.Rtl"" ShowTimePicker ShowWeekNumbers />";
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
index 04a241e711e..059fa282793 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Calendar/BitCalendarTests.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Linq;
+using System.Collections.Generic;
 using System.Globalization;
 using System.Reflection;
 using System.Threading.Tasks;
@@ -2684,4 +2685,320 @@ public void BitCalendarTimePickerShouldBringTheCarriedTimeIntoTheBoundsOfTheDayP
 
         Assert.AreEqual(new DateTime(2026, 1, 20, 10, 0, 0), value!.Value.DateTime);
     }
+
+    [TestMethod]
+    public void BitCalendarParamsShouldHaveCorrectParamName()
+    {
+        var paramName = BitCalendarParams.ParamName;
+        var expectedName = $"{nameof(BitParams)}.{nameof(BitCalendar)}";
+
+        Assert.AreEqual(expectedName, paramName);
+    }
+
+    [TestMethod]
+    public void BitCalendarParamsShouldImplementIBitComponentParams()
+    {
+        var @params = new BitCalendarParams();
+
+        Assert.IsInstanceOfType<IBitComponentParams>(@params);
+        Assert.AreEqual(BitCalendarParams.ParamName, @params.Name);
+    }
+
+    [TestMethod]
+    public void BitCalendarShouldApplyCascadingParametersFromBitParams()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitCalendarParams
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large,
+                ShowWeekNumbers = true,
+                ShowGoToToday = false,
+                AriaLabel = "Cascaded Label"
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitCalendar>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var calendar = component.Find(".bit-cal");
+
+        Assert.IsTrue(calendar.ClassList.Contains("bit-cal-suc"));
+        Assert.IsTrue(calendar.ClassList.Contains("bit-cal-lg"));
+        Assert.AreEqual("Cascaded Label", calendar.GetAttribute("aria-label"));
+        Assert.IsTrue(component.FindAll(".bit-cal-wnm").Count > 0);
+        Assert.AreEqual(0, component.FindAll(".bit-cal-gtb").Count);
+    }
+
+    [TestMethod]
+    public void BitCalendarDirectParametersShouldOverrideCascadingParameters()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitCalendarParams
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large,
+                ShowWeekNumbers = true
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitCalendar>(0);
+                builder.AddAttribute(1, nameof(BitCalendar.Color), BitColor.Error);
+                builder.AddAttribute(2, nameof(BitCalendar.Size), BitSize.Small);
+                builder.CloseComponent();
+            });
+        });
+
+        var calendar = component.Find(".bit-cal");
+
+        // Direct parameters should override cascading ones
+        Assert.IsTrue(calendar.ClassList.Contains("bit-cal-err"));
+        Assert.IsTrue(calendar.ClassList.Contains("bit-cal-sm"));
+
+        // ShowWeekNumbers from cascading params should still apply (not overridden)
+        Assert.IsTrue(component.FindAll(".bit-cal-wnm").Count > 0);
+    }
+
+    [TestMethod]
+    public void BitCalendarParamsUpdateParametersShouldSetAllProperties()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var maxDate = DateTimeOffset.Now.AddMonths(1);
+        var minDate = DateTimeOffset.Now.AddMonths(-1);
+        var today = new DateTimeOffset(2021, 3, 15, 0, 0, 0, TimeSpan.Zero);
+        var startingValue = new DateTimeOffset(2021, 3, 10, 9, 30, 0, TimeSpan.Zero);
+
+        var @params = new BitCalendarParams
+        {
+            AllowDeselect = true,
+            Color = BitColor.Warning,
+            ContinuousSpinDelay = 500,
+            ContinuousSpinInterval = 90,
+            Culture = CultureInfo.InvariantCulture,
+            DateFormat = "yyyy/MM/dd",
+            DisableFuture = true,
+            FirstDayOfWeek = DayOfWeek.Monday,
+            FixedWeeks = true,
+            GoToTodayTitle = "Cascaded today",
+            HighlightCurrentMonth = true,
+            HighlightSelectedMonth = true,
+            HighlightToday = false,
+            HourStep = 2,
+            InvalidErrorMessage = "Cascaded invalid",
+            MaxDate = maxDate,
+            MinDate = minDate,
+            MinuteStep = 5,
+            MonthCount = 2,
+            MonthPickerToggleTitle = "Cascaded month toggle",
+            PagedNavigation = true,
+            ShowEventDetails = false,
+            ShowGoToToday = false,
+            ShowMonthPicker = false,
+            ShowNowButton = false,
+            ShowOutsideDays = false,
+            ShowTimePicker = true,
+            ShowWeekNumbers = true,
+            Size = BitSize.Small,
+            StartingValue = startingValue,
+            TimeFormat = BitTimeFormat.TwelveHours,
+            TimePickerHourTitle = "Cascaded hour",
+            TimeZone = TimeZoneInfo.Utc,
+            Today = today,
+            WeekNumberRule = CalendarWeekRule.FirstFourDayWeek,
+            WeekNumbersHeaderTitle = "Cascaded week",
+            AriaLabel = "Cascaded Label",
+            IsEnabled = false,
+            TabIndex = "5"
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, new List<IBitComponentParams> { @params });
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitCalendar>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var instance = component.FindComponent<BitCalendar>().Instance;
+
+        Assert.IsTrue(instance.AllowDeselect);
+        Assert.AreEqual(BitColor.Warning, instance.Color);
+        Assert.AreEqual(500, instance.ContinuousSpinDelay);
+        Assert.AreEqual(90, instance.ContinuousSpinInterval);
+        Assert.AreEqual(CultureInfo.InvariantCulture, instance.Culture);
+        Assert.AreEqual("yyyy/MM/dd", instance.DateFormat);
+        Assert.IsTrue(instance.DisableFuture);
+        Assert.AreEqual(DayOfWeek.Monday, instance.FirstDayOfWeek);
+        Assert.IsTrue(instance.FixedWeeks);
+        Assert.AreEqual("Cascaded today", instance.GoToTodayTitle);
+        Assert.IsTrue(instance.HighlightCurrentMonth);
+        Assert.IsTrue(instance.HighlightSelectedMonth);
+        Assert.IsFalse(instance.HighlightToday);
+        Assert.AreEqual(2, instance.HourStep);
+        Assert.AreEqual("Cascaded invalid", instance.InvalidErrorMessage);
+        Assert.AreEqual(maxDate, instance.MaxDate);
+        Assert.AreEqual(minDate, instance.MinDate);
+        Assert.AreEqual(5, instance.MinuteStep);
+        Assert.AreEqual(2, instance.MonthCount);
+        Assert.AreEqual("Cascaded month toggle", instance.MonthPickerToggleTitle);
+        Assert.IsTrue(instance.PagedNavigation);
+        Assert.IsFalse(instance.ShowEventDetails);
+        Assert.IsFalse(instance.ShowGoToToday);
+        Assert.IsFalse(instance.ShowMonthPicker);
+        Assert.IsFalse(instance.ShowNowButton);
+        Assert.IsFalse(instance.ShowOutsideDays);
+        Assert.IsTrue(instance.ShowTimePicker);
+        Assert.IsTrue(instance.ShowWeekNumbers);
+        Assert.AreEqual(BitSize.Small, instance.Size);
+        Assert.AreEqual(startingValue, instance.StartingValue);
+        Assert.AreEqual(BitTimeFormat.TwelveHours, instance.TimeFormat);
+        Assert.AreEqual("Cascaded hour", instance.TimePickerHourTitle);
+        Assert.AreEqual(TimeZoneInfo.Utc, instance.TimeZone);
+        Assert.AreEqual(today, instance.Today);
+        Assert.AreEqual(CalendarWeekRule.FirstFourDayWeek, instance.WeekNumberRule);
+        Assert.AreEqual("Cascaded week", instance.WeekNumbersHeaderTitle);
+        Assert.AreEqual("Cascaded Label", instance.AriaLabel);
+        Assert.IsFalse(instance.IsEnabled);
+        Assert.AreEqual("5", instance.TabIndex);
+    }
+
+    [TestMethod]
+    public void BitCalendarParamsUpdateParametersShouldNotOverwriteExistingValues()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var @params = new BitCalendarParams
+        {
+            Color = BitColor.Success,
+            Size = BitSize.Large,
+            GoToTodayTitle = "Params Title"
+        };
+
+        // First render with direct parameters
+        var component = RenderComponent<BitCalendar>(p =>
+        {
+            p.Add(x => x.Color, BitColor.Error);
+            p.Add(x => x.Size, BitSize.Small);
+            p.Add(x => x.GoToTodayTitle, "Existing Title");
+        });
+
+        var instance = component.Instance;
+
+        // Verify initial values
+        Assert.AreEqual(BitColor.Error, instance.Color);
+        Assert.AreEqual(BitSize.Small, instance.Size);
+        Assert.AreEqual("Existing Title", instance.GoToTodayTitle);
+
+        // Now try to update with param, should not overwrite since properties were already set
+        @params.UpdateParameters(instance);
+
+        // Values should remain unchanged because HasNotBeenSet returns false
+        Assert.AreEqual(BitColor.Error, instance.Color);
+        Assert.AreEqual(BitSize.Small, instance.Size);
+        Assert.AreEqual("Existing Title", instance.GoToTodayTitle);
+    }
+
+    [TestMethod]
+    public void BitCalendarParamsShouldApplyClassesAndStyles()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var classes = new BitCalendarClassStyles
+        {
+            Root = "custom-root",
+            Container = "custom-container",
+            DaysGrid = "custom-grid"
+        };
+
+        var styles = new BitCalendarClassStyles
+        {
+            Root = "color: red;",
+            Container = "margin: 5px;",
+            DaysGrid = "padding: 10px;"
+        };
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitCalendarParams { Classes = classes, Styles = styles }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitCalendar>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var calendar = component.Find(".bit-cal");
+        var container = component.Find(".bit-cal-cnt");
+        var grid = component.Find(".bit-cal-grd");
+
+        Assert.IsTrue(calendar.ClassList.Contains("custom-root"));
+        Assert.IsTrue(container.ClassList.Contains("custom-container"));
+        Assert.IsTrue(grid.ClassList.Contains("custom-grid"));
+        Assert.IsTrue(calendar.GetAttribute("style")?.Contains("color: red;"));
+        Assert.AreEqual("margin: 5px;", container.GetAttribute("style"));
+        Assert.AreEqual("padding: 10px;", grid.GetAttribute("style"));
+    }
+
+    [TestMethod]
+    public void BitCalendarParamsShouldRebuildTheViewForWhatItCarries()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitCalendarParams
+            {
+                // Each of these is a parameter the calendar builds its view from, and the cascade reaches the
+                // component only after the pass that reads them has already run once.
+                MonthCount = 3,
+                Culture = CultureInfo.InvariantCulture,
+                TimeZone = TimeZoneInfo.Utc,
+                StartingValue = new DateTimeOffset(2021, 3, 10, 0, 0, 0, TimeSpan.Zero)
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitCalendar>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var calendar = component.Find(".bit-cal");
+
+        Assert.IsTrue(calendar.ClassList.Contains("bit-cal-mcv"));
+        Assert.AreEqual(3, component.FindAll(".bit-cal-dwp").Count);
+
+        // The strip opens on the month the cascaded StartingValue falls in, which only the rebuilt view knows about.
+        Assert.IsTrue(component.FindAll(".bit-cal-dbt").Any(b => b.Id!.EndsWith("day-2021-03-10")));
+    }
 }

From 8b21f60fb2d861e81b1ee5b3b475e4cb635816d7 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 22 Sep 2026 11:56:51 +0330
Subject: [PATCH 9/9] update mcp

---
 .../Services/Mcp/BlazorUIMarkdown.cs          | 33 ++++++++++--
 .../Services/Mcp/BlazorUIReflection.cs        | 30 +++++++++++
 .../ComponentCatalogTests.cs                  | 53 ++++++++++++++++++-
 3 files changed, 112 insertions(+), 4 deletions(-)

diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIMarkdown.cs b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIMarkdown.cs
index 307d1dd47b2..07dc4b446bb 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIMarkdown.cs
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIMarkdown.cs
@@ -1,5 +1,6 @@
 using System.Text;
 using System.Reflection;
+using Microsoft.AspNetCore.Components;
 using Bit.BlazorUI.Demo.Client.Core.Models;
 
 namespace Bit.BlazorUI.Demo.Server.Services.Mcp;
@@ -443,12 +444,38 @@ private static void AppendCascadingParams(StringBuilder builder, BlazorUICompone
 
         var name = component.CascadingParams.Name;
 
-        var count = component.CascadingParams
+        var carried = component.CascadingParams
             .GetProperties(BindingFlags.Public | BindingFlags.Instance)
-            .Count(p => p.CanWrite);
+            .Where(p => p.CanWrite)
+            .Select(p => p.Name)
+            .ToHashSet(StringComparer.Ordinal);
+
+        var baseName = component.CascadingParams.BaseType is { } baseType && baseType != typeof(object)
+            ? baseType.Name
+            : null;
+
+        // Read off the compiled component rather than off its table: the parameters a params object
+        // leaves out are the ones a reader would otherwise assume are there, and the type is what
+        // has the last word on which exist. Inherited ones are included - they are exactly the set
+        // in question, since a params object derives from BitComponentBaseParams and so carries the
+        // BitComponentBase half of them and nothing of what an input base adds.
+        var missing = component.ComponentType is null ? [] : component.ComponentType
+            .GetProperties(BindingFlags.Public | BindingFlags.Instance)
+            .Where(p => p.IsDefined(typeof(ParameterAttribute)) && carried.Contains(p.Name) is false)
+            .Select(p => p.Name)
+            .Distinct(StringComparer.Ordinal)
+            .Order(StringComparer.Ordinal)
+            .ToArray();
+
+        var inherits = baseName is null ? string.Empty : $" - its own and the `{baseName}` ones alike";
 
         builder.AppendLine("## Cascading parameters").AppendLine();
-        builder.AppendLine($"`{name}` carries {count} of this component's parameters again as nullables - its own and the inherited ones alike - and a `BitParams` provides one to a whole subtree: `<BitParams Parameters=\"@(new[] {{ new {name} {{ /* the shared ones */ }} }})\">`. Every `{component.Name}` below it takes each parameter it did not write for itself from there - a default rather than an override, parameter by parameter, so one instance steps out of the group it is in by writing that one parameter and nothing else. `GetBitBlazorUIType(typeName: \"{name}\")` lists its members; `GetBitBlazorUIComponent(name: \"BitParams\")` is the component that provides them.").AppendLine();
+        builder.AppendLine($"`{name}` carries {carried.Count} of this component's parameters again as nullables{inherits} - and a `BitParams` provides one to a whole subtree: `<BitParams Parameters=\"@(new[] {{ new {name} {{ /* the shared ones */ }} }})\">`. Every `{component.Name}` below it takes each parameter it did not write for itself from there - a default rather than an override, parameter by parameter, so one instance steps out of the group it is in by writing that one parameter and nothing else. `GetBitBlazorUIType(typeName: \"{name}\")` lists its members; `GetBitBlazorUIComponent(name: \"BitParams\")` is the component that provides them.").AppendLine();
+
+        if (missing.Length > 0)
+        {
+            builder.AppendLine($"Not on it, so they are written on the instance itself: {string.Join(", ", missing.Select(n => $"`{n}`"))}.").AppendLine();
+        }
     }
 
     /// <summary>
diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIReflection.cs b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIReflection.cs
index 7783fb58142..7e47c416c31 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIReflection.cs
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Services/Mcp/BlazorUIReflection.cs
@@ -40,11 +40,41 @@ public static void AppendMembers(StringBuilder builder, Type type, string? path
         AppendConstants(builder, type);
         AppendNested(builder, type, path);
         AppendProperties(builder, type);
+        AppendInherited(builder, type);
         AppendMethods(builder, type);
         AppendEvents(builder, type);
         AppendExtensions(builder, type);
     }
 
+    /// <summary>
+    /// The members a type takes from a base class of this library, named rather than tabulated
+    /// again under it.
+    /// <para>
+    /// The tables above are read with <c>DeclaredOnly</c>, which is right for the hundred types
+    /// whose base is <c>object</c> and wrong for the ones that have a real base: a
+    /// <c>BitCalendarParams</c> answered with its own hundred properties alone says its
+    /// <c>Class</c>, <c>Style</c> and <c>IsEnabled</c> do not exist, while the component's own
+    /// answer counts them. So each library base is named with the members it brings and the call
+    /// that documents them - the set once, not once per type that closes it.
+    /// </para>
+    /// </summary>
+    private static void AppendInherited(StringBuilder builder, Type type)
+    {
+        for (var current = type.BaseType; current is not null && current != typeof(object); current = current.BaseType)
+        {
+            if (BlazorUIAssemblies.All.Contains(current.Assembly) is false) continue;
+
+            var names = current.GetProperties(Public)
+                               .Where(p => p.GetIndexParameters().Length == 0)
+                               .Select(p => p.Name)
+                               .ToArray();
+
+            if (names.Length == 0) continue;
+
+            builder.AppendLine($"Inherited from `{current.Name}`: {string.Join(", ", names.Select(n => $"`{n}`"))}. `GetBitBlazorUIType(typeName: \"{current.Name}\")` documents them.").AppendLine();
+        }
+    }
+
     /// <summary>
     /// What another package adds to this type. Answered here, under the type the members are
     /// written on, because that is where they are read: <c>BitThemePresets.MaterialDark</c> is
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests.Mcp/ComponentCatalogTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests.Mcp/ComponentCatalogTests.cs
index 7d0c2ec2922..5763b46a639 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests.Mcp/ComponentCatalogTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests.Mcp/ComponentCatalogTests.cs
@@ -1,4 +1,4 @@
-using Microsoft.VisualStudio.TestTools.UnitTesting;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
 using Bit.BlazorUI.Tests.Mcp.Infrastructure;
 
 namespace Bit.BlazorUI.Tests.Mcp;
@@ -353,6 +353,57 @@ public async Task A_component_that_takes_a_params_object_names_it(string compone
         Assert.DoesNotContain("## Cascading parameters", without, "A component that takes no params object claims one.");
     }
 
+    /// <summary>
+    /// What a params object does NOT carry, which is the half of the cascade a reader cannot infer.
+    /// <para>
+    /// Every <c>...Params</c> derives from <c>BitComponentBaseParams</c>, so it carries that half of
+    /// the inherited parameters and nothing of what a base below it adds: <c>BitCalendar</c> closes
+    /// <c>BitInputBase&lt;DateTimeOffset?&gt;</c>, and its <c>Value</c>, its validation and its
+    /// callbacks stay on the instance. Nor are the event callbacks of any component on one. An
+    /// answer that says only what is there reads as if everything is, which is the assumption that
+    /// produces a <c>BitCalendarParams</c> with a <c>Value</c> on it that does not compile.
+    /// </para>
+    /// </summary>
+    [TestMethod]
+    [DataRow("BitCalendar", "Value")]
+    [DataRow("BitCalendar", "OnSelectDate")]
+    [DataRow("BitButton", "OnClick")]
+    [DataRow("BitStack", "ChildContent")]
+    public async Task A_params_object_names_the_parameters_it_does_not_carry(string component, string parameter)
+    {
+        var answer = await CallAsync("GetBitBlazorUIComponent", new { name = component });
+
+        using var scope = Assert.Scope();
+
+        StringAssert.Contains(answer, "Not on it", $"{component}'s answer does not say what its params object leaves out.");
+        StringAssert.Contains(answer, $"`{parameter}`", $"{component}'s answer does not name {parameter} at all.");
+
+        var missing = answer[answer.IndexOf("Not on it", StringComparison.Ordinal)..]
+                            .Split('\n', 2, StringSplitOptions.None)[0];
+
+        StringAssert.Contains(missing, $"`{parameter}`", $"{component}'s params object is not said to leave {parameter} out.");
+    }
+
+    /// <summary>
+    /// The members a params object takes from <c>BitComponentBaseParams</c>, which its own answer
+    /// would otherwise leave out: the tables are read with <c>DeclaredOnly</c>, so a type whose base
+    /// is a real class answers as if <c>Class</c>, <c>Style</c> and <c>IsEnabled</c> were not on it
+    /// - while the component's own answer counts them in the total it quotes.
+    /// </summary>
+    [TestMethod]
+    [DataRow("BitCalendarParams")]
+    [DataRow("BitButtonParams")]
+    public async Task A_params_type_names_what_it_inherits(string paramsType)
+    {
+        var answer = await CallAsync("GetBitBlazorUIType", new { typeName = paramsType });
+
+        using var scope = Assert.Scope();
+
+        StringAssert.Contains(answer, "Inherited from `BitComponentBaseParams`", $"{paramsType} does not name the base it takes members from.");
+        StringAssert.Contains(answer, "`IsEnabled`", $"{paramsType} answers without the inherited members.");
+        StringAssert.Contains(answer, "GetBitBlazorUIType(typeName: \"BitComponentBaseParams\")", $"{paramsType} does not say where the inherited members are documented.");
+    }
+
     /// <summary>
     /// The public CSS custom properties a component reads off its root are the one part of its API
     /// that has no type behind it: the demo page's own table is the whole source, reached by a field