Merge pull request #68 from danheron/feature/12hour-clock

Added option for 12 hour clock
danheron · Nov 4, 2023 · b01fb4e · b01fb4e
2 parents 279de90 + c158f2d
commit b01fb4e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 2 deletions.
diff --git a/Heron.MudCalendar.UnitTests/Components/CalendarTests.cs b/Heron.MudCalendar.UnitTests/Components/CalendarTests.cs
@@ -322,4 +322,18 @@ public void DateChangedEvent()
         comp.FindAll("button.mud-icon-button")[1].Click();
         table.Children.Length.Should().Be(2);
     }
+
+    [Test]
+    public void ClockType()
+    {
+        var cut = Context.RenderComponent<CalendarTimeIntervalTest>();
+        var comp = cut.FindComponent<MudCalendar>();
+
+        // Check 24 hour clock
+        comp.FindAll("td.mud-cal-time-cell")[18].TextContent.Trim().Should().Be("18:00");
+
+        // Check 12 hour clock
+        comp.SetParam(x => x.Use24HourClock, false);
+        comp.FindAll("td.mud-cal-time-cell")[18].TextContent.Trim().Should().Be("6 pm");
+    }
 }
diff --git a/Heron.MudCalendar/Base/DayWeekViewBase.razor b/Heron.MudCalendar/Base/DayWeekViewBase.razor
@@ -1,7 +1,6 @@
 @namespace Heron.MudCalendar
 @inherits CalendarViewBase
 @using Microsoft.JSInterop
-@using CategoryTypes = Heron.MudCalendar.Attributes.CategoryTypes
 @inject IJSRuntime JsRuntime
 
 @Render
@@ -78,7 +77,7 @@
                         @if ((int)Calendar.DayTimeInterval >= 60 || i % (60 / (int)Calendar.DayTimeInterval) == 0)
                         {
                             <td class="mud-cal-week-cell mud-cal-time-cell" style="@CellHeightStyle()">
-                                @(i / (60 / (double)Calendar.DayTimeInterval)):00
+                                @DrawTime(i)
                             </td>
                             <td class="mud-cal-week-cell" style="@CellHeightStyle()"></td>
                         }

diff --git a/Heron.MudCalendar/Base/DayWeekViewBase.razor.cs b/Heron.MudCalendar/Base/DayWeekViewBase.razor.cs
@@ -93,6 +93,15 @@ protected virtual Task OnItemClicked(CalendarItem item)
         return Calendar.ItemClicked.InvokeAsync(item);
     }
 
+    protected virtual string DrawTime(int row)
+    {
+        var hour = row / (60.0 / (double)Calendar.DayTimeInterval);
+        var timeSpan = TimeSpan.FromHours(hour);
+        var time = TimeOnly.FromTimeSpan(timeSpan);
+
+        return Calendar.Use24HourClock ? time.ToString("HH:mm") : time.ToString("h tt");
+    }
+
     private int CalcTop(ItemPosition position)
     {
         double minutes = 0;

diff --git a/Heron.MudCalendar/Components/MudCalendar.razor.cs b/Heron.MudCalendar/Components/MudCalendar.razor.cs
@@ -143,6 +143,13 @@ public partial class MudCalendar : MudComponentBase
     [Parameter]
     [Category(CategoryTypes.Calendar.Appearance)]
     public bool ShowCurrentTime { get; set; } = false;
+
+    /// <summary>
+    /// If true then use 24 hour clock, otherwise use 12 hour format (am/pm).
+    /// </summary>
+    [Parameter]
+    [Category(CategoryTypes.Calendar.Appearance)]
+    public bool Use24HourClock { get; set; } = true;
 
     /// <summary>
     /// Defines the cell content for the Month view.