Merge pull request #201 from danheron/fix/refresh-on-load-styles

Refresh calendar when stylesheet loads

Heron.MudCalendar.UnitTests.Viewer/TestComponents/Calendar/CalendarHeightTest.razor

@@ -12,7 +12,7 @@
 @code {
     public static string __description__ = "Calendar Height Tests";
 
-    private bool _fixed;
+    private bool _fixed = true;
 
     private List<CalendarItem> _events = new()
     {

Heron.MudCalendar/Components/MonthView.razor.cs

@@ -40,7 +40,7 @@ public partial class MonthView : CalendarViewBase, IDisposable
         new StyleBuilder()
             .AddStyle("grid-template-columns", $"repeat({Columns}, minmax(10px, 1fr))")
             .AddStyle("grid-template-rows",
-                $"repeat({Cells.Count / Columns}, {(100.0 / (Cells.Count / (double)Columns)).ToInvariantString()}%)",
+                $"repeat({Rows}, {(100.0 / Rows).ToInvariantString()}%)",
                 Calendar.MonthCellMinHeight == 0)
             .Build();
 
@@ -50,7 +50,7 @@ public partial class MonthView : CalendarViewBase, IDisposable
     protected virtual string ContentGridStyle =>
         new StyleBuilder()
             .AddStyle("grid-template-rows",
-                $"repeat({Cells.Count / Columns}, {(100.0 / (Cells.Count / (double)Columns)).ToInvariantString()}%)",
+                $"repeat({Rows}, {(100.0 / Rows).ToInvariantString()}%)",
                 Calendar.MonthCellMinHeight == 0)
             .Build();
 
@@ -96,6 +96,7 @@ protected virtual string DayClassname(CalendarCell calendarCell)
     {
         return new CssBuilder()
             .AddClass("mud-cal-month-cell-title")
+            .AddClass("mud-cal-month-cell-header")
             .AddClass("mud-cal-month-outside", calendarCell.Outside)
             .Build();
     }

Heron.MudCalendar/Components/MudCalendar.razor.cs

@@ -1,4 +1,5 @@
 using System.Globalization;
+using System.Runtime.Loader;
 using Heron.MudCalendar.Services;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
@@ -105,7 +106,7 @@ public partial class MudCalendar : MudComponentBase
     /// </remarks>
     [Parameter]
     [Category(CategoryTypes.Calendar.Behavior)]
-    public DayOfWeek? FirstDayOfWeek { get; set; } = null;
+    public DayOfWeek? FirstDayOfWeek { get; set; }
 
     /// <summary>
     /// Gets or sets the first day of the week that the calendar is showing in Work Week View.
@@ -115,7 +116,7 @@ public partial class MudCalendar : MudComponentBase
     /// </remarks>
     [Parameter]
     [Category(CategoryTypes.Calendar.Behavior)]
-    public DayOfWeek? FirstDayOfWorkWeek { get; set; } = null;
+    public DayOfWeek? FirstDayOfWorkWeek { get; set; }
 
     /// <summary>
     /// Gets or sets the view (day, week, month) being shown.
@@ -175,7 +176,7 @@ public partial class MudCalendar : MudComponentBase
     /// </remarks>
     [Parameter]
     [Category(CategoryTypes.Calendar.Behavior)]
-    public bool ShowWorkWeek { get; set; } = false;
+    public bool ShowWorkWeek { get; set; }
 
     /// <summary>
     /// If false the month view is not shown.
@@ -616,6 +617,7 @@ private async Task SetLinks()
         if (!string.IsNullOrEmpty(head) && head.Contains("Heron.MudCalendar.min.css")) return;
 
         // Add link
+        _jsService.OnLinkLoaded += (_, _) => Refresh();
         await _jsService.AddLink("_content/Heron.MudCalendar/Heron.MudCalendar.min.css", "stylesheet");
     }
 

Heron.MudCalendar/Scripts/HeadContent.js

@@ -0,0 +1,17 @@
+export function getHeadContent() {
+    return document.head.innerHTML;
+}
+
+export function addLink(href, rel, obj) {
+    const link = document.createElement("link");
+    link.href = href;
+    link.rel = rel;
+
+    if (obj) {
+        link.onload = () => {
+            obj.invokeMethodAsync("LinkLoaded")
+        }
+    }
+
+    document.head.appendChild(link);
+}

Heron.MudCalendar/Scripts/ItemPositioner.js

@@ -8,6 +8,16 @@ export function positionMonthItems(element, moreText, fixedHeight) {
         container.querySelectorAll(".mud-cal-overflow-message").forEach(function (message) {
             message.remove();
         });
+
+        // Find the height of the header part  
+        let headerHeight = 0;
+        container.querySelectorAll(".mud-cal-month-cell").forEach(function(cell) {
+            let height = 0;
+            cell.querySelectorAll(".mud-cal-month-cell-header").forEach(function(item) {
+                height += item.clientHeight;
+            });
+            if (height > headerHeight) headerHeight = height;
+        });
 
         const positions = [];
         const overlaps = [];
@@ -18,7 +28,7 @@ export function positionMonthItems(element, moreText, fixedHeight) {
             // Create new position object
             const position = new ItemPosition();
             position.Item = item;
-            position.Top = 36;
+            position.Top = headerHeight;
             position.Height = item.clientHeight;
             position.Left = item.offsetLeft;
             position.Width = item.clientWidth;
@@ -60,7 +70,7 @@ export function positionMonthItems(element, moreText, fixedHeight) {
         else
         {
             // Calculate height of the row
-            let rowMaxBottom = 0;
+            let rowMaxBottom = headerHeight;
             positions.forEach((position) => {
                 if (position.Bottom > rowMaxBottom) rowMaxBottom = position.Bottom;
             })

Heron.MudCalendar/Scripts/Scroll.js

@@ -1,15 +1,3 @@
 export function scroll(element, top) {
     element.scrollTo(0, top);
 }
-
-export function getHeadContent() {
-    return document.head.innerHTML;
-}
-
-export function addLink(href, rel) {
-    const link = document.createElement("link");
-    link.href = href;
-    link.rel = rel;
-
-    document.head.appendChild(link);
-}

Heron.MudCalendar/Services/JsService.cs

@@ -7,6 +7,9 @@ public class JsService : IDisposable
 {
     private readonly Lazy<Task<IJSObjectReference>> _moduleTask;
     private readonly CancellationTokenSource _cancellationTokenSource = new();
+    private DotNetObjectReference<JsService>? _this;
+
+    public event EventHandler? OnLinkLoaded;
 
     public JsService(IJSRuntime jsRuntime)
     {
@@ -28,8 +31,19 @@ public async Task<string> GetHeadContent()
 
     public async Task AddLink(string href, string rel)
     {
+        if (OnLinkLoaded != null)
+        {
+            _this ??= DotNetObjectReference.Create(this);
+        }
+
         var module = await _moduleTask.Value;
-        await module.InvokeVoidAsync("addLink", href, rel);
+        await module.InvokeVoidAsync("addLink", href, rel, _this);
+    }
+
+    [JSInvokable]
+    public void LinkLoaded()
+    {
+        OnLinkLoaded?.Invoke(this, EventArgs.Empty);
     }
 
     public async Task AddDragHandler(string id, int width)