Merge pull request #66 from MinZe25/feature/CalendarItemClicked

added EventCallback for CalendarItem clicked

Heron.MudCalendar.Docs/Pages/Calendar/CalendarPage.razor

@@ -76,6 +76,7 @@
             <SectionHeader Title="Events">
                 <Description>
                     The <CodeInline>CellClicked</CodeInline> event will be raised when a calendar cell is clicked. This can be used, for example, to add new events to the calendar.
+                    The <CodeInline>ItemClicked</CodeInline> event will be raised when an item in the calendar is clicked.
                 </Description>
             </SectionHeader>
             <SectionContent DarkenBackground="true" Code="EventsCalendarExample" ShowCode="false" Block="true" FullWidth="true" Assembly="typeof(CalendarPage).Assembly" AllowRunCode="false">

Heron.MudCalendar.Docs/Pages/Calendar/Examples/EventsCalendarExample.razor

@@ -1,6 +1,6 @@
 @namespace Heron.MudCalendar.Docs.Examples
 
-<MudCalendar CellClicked="CellClicked" DayTimeInterval="CalendarTimeInterval.Minutes15" />
+<MudCalendar Items="_events" CellClicked="CellClicked" ItemClicked="ItemClicked" DayTimeInterval="CalendarTimeInterval.Minutes15" />
 
 @code {
 
@@ -9,7 +9,27 @@
 
     private Task CellClicked(DateTime dateTime)
     {
-        return DialogService.ShowMessageBox("Click", dateTime.ToString(Thread.CurrentThread.CurrentCulture));
+        return DialogService.ShowMessageBox("Cell Clicked", dateTime.ToString(Thread.CurrentThread.CurrentCulture));
     }
 
+    private Task ItemClicked(CalendarItem item)
+    {
+        return DialogService.ShowMessageBox("Item Clicked", item.Text);
+    }
+
+    private List<CalendarItem> _events = new()
+    {
+        new CalendarItem
+        {
+            Start = DateTime.Today.AddHours(10),
+            End = DateTime.Today.AddHours(11),
+            Text = "Event today"
+        },
+        new CalendarItem
+        {
+            Start = DateTime.Today.AddDays(1).AddHours(11),
+            End = DateTime.Today.AddDays(1).AddHours(12.5),
+            Text = "Event tomorrow"
+        }
+    };
 }

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

@@ -0,0 +1,25 @@
+<MudCalendar @ref="_mudCalendar" Items="_events" ItemClicked="TestClick" Height="500" />
+<MudTextField @bind-Value="_value" />
+
+@code {
+    public static string __description__ = "Calendar Item Click Test";
+
+    private string _value = string.Empty;
+
+    private MudCalendar _mudCalendar;
+
+    private void TestClick(CalendarItem item)
+    {
+        _value = string.Concat(item.Text, "_", _mudCalendar.View.ToString());
+    }
+
+    private List<CalendarItem> _events = new()
+    {
+        new CalendarItem
+        {
+            Start = DateTime.Today.AddHours(10),
+            End = DateTime.Today.AddHours(11),
+            Text = "Event"
+        }
+    };
+}

Heron.MudCalendar.UnitTests/Components/CalendarTests.cs

@@ -136,6 +136,28 @@ public void CellClick()
         comp.Find("div.mud-cal-week-layer a").Click();
         textField.Instance.Text.Should().Be("8");
     }
+
+    [Test]
+    public void ItemsClick()
+    {
+        var cut = Context.RenderComponent<CalendarItemClickTest>();
+        var comp = cut.FindComponent<MudCalendar>();
+        var textField = cut.FindComponent<MudTextField<string>>();
+
+        // Month View
+        comp.Find("div.mud-cal-cell-template").Click();
+        textField.Instance.Text.Should().Be("Event_Month");
+
+        // Week View
+        comp.SetParam(x => x.View, CalendarView.Week);
+        comp.Find("div.mud-cal-cell-template").Click();
+        textField.Instance.Text.Should().Be("Event_Week");
+
+        // Day View
+        comp.SetParam(x => x.View, CalendarView.Day);
+        comp.Find("div.mud-cal-cell-template").Click();
+        textField.Instance.Text.Should().Be("Event_Day");
+    }
 
     [Test]
     public void EnsureAllDays()

Heron.MudCalendar/Base/DayWeekViewBase.razor

@@ -111,7 +111,7 @@
                             <div class="mud-cal-week-day-holder" style="@DayStyle(cell)">
                                 @if (cell.Today && Calendar.ShowCurrentTime)
                                 {
-                                    <hr class="mud-cal-current-time" style="@TimelineStyle()" />
+                                    <hr class="mud-cal-current-time" style="@TimelineStyle()"/>
                                 }
                             </div>
                         </td>
@@ -170,9 +170,19 @@
         var positions = CalcPositions(cell.Items, DateOnly.FromDateTime(cell.Date));
         foreach (var position in positions)
         {
-            <div style="@EventStyle(position)">
-                @CellTemplate?.Invoke(position.Item)
-            </div>
+            @if (Calendar.ItemClicked.HasDelegate)
+            {
+                <div @onclick="() => OnItemClicked(position.Item)" style="@EventStyle(position)" class="mud-cal-clickable">
+                    @CellTemplate?.Invoke(position.Item)
+                </div>
+            }
+            else
+            {
+                <div style="@EventStyle(position)">
+                    @CellTemplate?.Invoke(position.Item)
+                </div>
+            }
         }
     };
+
 }

Heron.MudCalendar/Base/DayWeekViewBase.razor.cs

@@ -9,7 +9,7 @@ public abstract partial class DayWeekViewBase : CalendarViewBase, IAsyncDisposab
 {
     private ElementReference _scrollDiv;
     private JsService? _jsService;
-    
+
     private const int MinutesInDay = 24 * 60;
     private int PixelsInCell => Calendar.DayCellHeight;
 
@@ -34,7 +34,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     protected virtual string DayStyle(CalendarCell calendarCell)
     {
         return new StyleBuilder()
-            .AddStyle("border", $"1px solid var(--mud-palette-{Calendar.Color.ToDescriptionString()})", calendarCell.Today && Calendar.HighlightToday)
+            .AddStyle("border", $"1px solid var(--mud-palette-{Calendar.Color.ToDescriptionString()})",
+                calendarCell.Today && Calendar.HighlightToday)
             .Build();
     }
 
@@ -45,8 +46,10 @@ protected virtual string EventStyle(ItemPosition position)
             .AddStyle("top", $"{CalcTop(position)}px")
             .AddStyle("height", $"{CalcHeight(position)}px")
             .AddStyle("overflow", "hidden")
-            .AddStyle("left", (((position.Position / (double)position.Total) - (1.0 / position.Total)) * 100).ToInvariantString() + "%")
-            .AddStyle("width", (100 / position.Total) + "%" )
+            .AddStyle("left",
+                (((position.Position / (double)position.Total) - (1.0 / position.Total)) * 100).ToInvariantString() +
+                "%")
+            .AddStyle("width", (100 / position.Total) + "%")
             .Build();
     }
 
@@ -63,7 +66,8 @@ protected virtual string TimelineStyle()
             .AddStyle("position", "absolute")
             .AddStyle("width", "100%")
             .AddStyle("border", "1px solid var(--mud-palette-grey-default)")
-            .AddStyle("top", $"{(int)((DateTime.Now.Subtract(DateTime.Today).TotalMinutes / MinutesInDay) * PixelsInDay)}px")
+            .AddStyle("top",
+                $"{(int)((DateTime.Now.Subtract(DateTime.Today).TotalMinutes / MinutesInDay) * PixelsInDay)}px")
             .Build();
     }
 
@@ -79,13 +83,24 @@ protected virtual Task OnCellLinkClicked(CalendarCell cell, int row)
         return Calendar.CellClicked.InvokeAsync(date);
     }
 
+    /// <summary>
+    /// Method invoked when the user clicks on the calendar item.
+    /// </summary>
+    /// <param name="item">The calendar item that was clicked.</param>
+    /// <returns></returns>
+    protected virtual Task OnItemClicked(CalendarItem item)
+    {
+        return Calendar.ItemClicked.InvokeAsync(item);
+    }
+
     private int CalcTop(ItemPosition position)
     {
         double minutes = 0;
         if (DateOnly.FromDateTime(position.Item.Start.Date) == position.Date)
         {
             minutes = position.Item.Start.Hour * 60 + position.Item.Start.Minute;
         }
+
         var percent = minutes / MinutesInDay;
         var top = PixelsInDay * percent;
 
@@ -150,21 +165,23 @@ private static IEnumerable<ItemPosition> CalcPositions(IEnumerable<CalendarItem>
                     position.Position = i;
                 }
             }
+
             if (position.Position == 0) position.Position = overlaps.Count + 1;
-            
+
             overlaps.Add(position);
             var maxPosition = overlaps.Max(o => o.Position);
             foreach (var overlap in overlaps)
             {
                 overlap.Total = maxPosition;
             }
         }
-        
+
         // Calculate the total overlapping events
         foreach (var position in positions)
         {
-            var max = positions.Where(p => p.Item.Start < (position.Item.End ?? position.Item.Start.AddHours(1)) 
-                                            && (p.Item.End ?? p.Item.Start.AddHours(1)) > position.Item.Start).Max(p => p.Total);
+            var max = positions.Where(p => p.Item.Start < (position.Item.End ?? position.Item.Start.AddHours(1))
+                                           && (p.Item.End ?? p.Item.Start.AddHours(1)) > position.Item.Start)
+                .Max(p => p.Total);
             position.Total = max;
         }
 
@@ -178,11 +195,11 @@ protected class ItemPosition
         public int Total { get; set; }
         public DateOnly Date { get; set; }
     }
-    
+
     public async ValueTask DisposeAsync()
     {
         GC.SuppressFinalize(this);
-        
+
         if (_jsService != null)
         {
             await _jsService.DisposeAsync();

Heron.MudCalendar/Components/MonthView.razor

@@ -91,7 +91,18 @@
         @<div class="mud-cal-month-cell-events">
             @foreach (var item in cell.Items)
             {
-                @CellTemplate?.Invoke(item)
+                @if (Calendar.ItemClicked.HasDelegate)
+                {
+                    <div @onclick="() => OnItemClicked(item)" @onclick:stopPropagation="true" class="mud-cal-clickable">
+                        @CellTemplate?.Invoke(item)
+                    </div>
+                }
+                else
+                {
+                    <div>
+                        @CellTemplate?.Invoke(item)
+                    </div>
+                }
             }
         </div>;
 

Heron.MudCalendar/Components/MonthView.razor.cs

@@ -61,6 +61,16 @@ protected virtual Task OnCellLinkClicked(CalendarCell cell)
         return Calendar.CellClicked.InvokeAsync(cell.Date);
     }
 
+    /// <summary>
+    /// Method invoked when the user clicks on the calendar item.
+    /// </summary>
+    /// <param name="item">The calendar item that was clicked.</param>
+    /// <returns></returns>
+    protected virtual Task OnItemClicked(CalendarItem item)
+    {
+        return Calendar.ItemClicked.InvokeAsync(item);
+    }
+
     protected override List<CalendarCell> BuildCells()
     {
         var cells = new List<CalendarCell>();

Heron.MudCalendar/Components/MudCalendar.razor.cs

@@ -186,6 +186,12 @@ public partial class MudCalendar : MudComponentBase
     /// </summary>
     [Parameter]
     public EventCallback<DateTime> CellClicked { get; set; }
+
+    /// <summary>
+    /// Called when a CalendarItem is clicked.
+    /// </summary>
+    [Parameter]
+    public EventCallback<CalendarItem> ItemClicked { get; set; }
 
     private DateTime? PickerDate
     {

Heron.MudCalendar/Styles/_cellTemplate.scss

@@ -16,3 +16,11 @@
   width: 100%;
   margin: 0;
 }
+
+.mud-cal-clickable {
+  cursor: pointer;
+
+  .mud-chip {
+    cursor: inherit;
+  }
+}