Aggiunta visualizzazione mensile in agenda

Template.Shared/Components/SingleElements/Calendar/DayView.razor

@@ -0,0 +1,6 @@
+<div class="calendar">
+    @for (var i = 0; i < 3; i++)
+    {
+        <ActivityCard Type="interna" />
+    }
+</div>

Template.Shared/Components/SingleElements/Calendar/DayView.razor.css

@@ -0,0 +1,7 @@
+.calendar {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 1rem;
+}

Template.Shared/Components/SingleElements/Calendar/MonthView.razor

@@ -0,0 +1,97 @@
+<div class="calendar">
+    @foreach (var nomeGiorno in _giorniSettimana)
+    {
+        <div class="calendar-header">@nomeGiorno</div>
+    }
+
+    @for (var i = 0; i < StartDays; i++)
+    {
+        <div class="calendar-day disabled @(i == 0 ? "radiusTopLeft" : "")"></div>
+    }
+
+    @for (var day = 1; day <= DaysInMonth; day++)
+    {
+        var currentDate = new DateTime(Date.Year, Date.Month, day);
+        var events = GetEventsForDay(currentDate);
+        var isToday = currentDate == DateTime.Today;
+
+        var topRight = StartDays == 0 ? 7 : 7 - StartDays;
+        var bottomLeft = DaysInMonth - (6 - EndDays);
+
+        <div class="calendar-day @(isToday ? "today" : "") 
+                                 @(StartDays == 0 && day == 1 ? "radiusTopLeft" : "") 
+                                 @(EndDays == 0 && day == DaysInMonth ? "radiusBottomRight" : "")
+                                 @(bottomLeft == day ? "radiusBottomLeft" : "")
+                                 @(topRight == day ? "radiusTopRight" : "")">
+            <div class="calendar-day-wrapper">
+                <span class="titleDay">@day</span>
+                @if (events.Any())
+                {
+                    <div class="event-dot"></div>
+                }
+            </div>
+        </div>
+    }
+
+    @for (var i = 0; i < EndDays; i++)
+    {
+        <div class="calendar-day disabled @(i + 1 == EndDays ? "radiusBottomRight" : "")"></div>
+    }
+</div>
+
+@code
+{
+    [Parameter] public required DateTime Date { get; set; }
+
+    [Parameter] public EventCallback<DateTime> DateChanged { get; set; }
+
+    private List<CalendarEvent> Events { get; set; }
+
+    private int DaysInMonth { get; set; }
+    private int StartDays { get; set; }
+    private int EndDays { get; set; }
+
+    readonly string[] _giorniSettimana = ["Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"];
+
+    protected override void OnInitialized()
+    {
+        ChangeMonth();
+    }
+
+    protected override void OnParametersSet()
+    {
+        ChangeMonth();
+    }
+
+    private void ChangeMonth()
+    {
+        var firstDay = Date;
+        DaysInMonth = DateTime.DaysInMonth(firstDay.Year, firstDay.Month);
+
+        var dayOfWeek = (int)firstDay.DayOfWeek;
+        StartDays = dayOfWeek == 0 ? 6 : dayOfWeek - 1;
+
+        var tempTotalCell = (int)Math.Ceiling((double)(DaysInMonth + StartDays) / 7);
+        var totalCell = tempTotalCell * 7;
+        EndDays = totalCell - (DaysInMonth + StartDays);
+
+        Events =
+        [
+            new CalendarEvent { Date = DateTime.Today, Title = "Meeting", Time = "10:00" },
+            new CalendarEvent { Date = DateTime.Today.AddDays(2), Title = "Dentista", Time = "15:30" },
+            new CalendarEvent { Date = DateTime.Today.AddDays(5), Title = "Scadenza", Time = "Tutto il giorno" }
+        ];
+    }
+
+    private List<CalendarEvent> GetEventsForDay(DateTime day)
+    {
+        return Events.Where(e => e.Date.Date == day.Date).ToList();
+    }
+
+    public class CalendarEvent
+    {
+        public DateTime Date { get; set; }
+        public string Title { get; set; } = "";
+        public string Time { get; set; } = "";
+    }
+}

Template.Shared/Components/SingleElements/Calendar/MonthView.razor.css

@@ -0,0 +1,64 @@
+.calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    /*border: 1px solid #ccc;*/
+}
+
+.calendar-header, .calendar-day {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 65px;
+    font-size: 0.85rem;
+    padding: 4px;
+}
+
+.calendar-day { border: 1px solid var(--mud-palette-gray-light); }
+
+.calendar-day.disabled { border: 1px solid hsl(from var(--mud-palette-gray-light) h s 88%); }
+
+.calendar-header {
+    font-weight: bold;
+    min-height: 25px;
+    display: flex;
+    justify-content: end;
+}
+
+.today > .calendar-day-wrapper > .titleDay {
+    background-color: var(--mud-palette-primary);
+    color: var(--mud-palette-appbar-text);
+    font-weight: 700;
+}
+
+.calendar-day-wrapper > .titleDay {
+    padding: 6px;
+    border-radius: 50%;
+    position: absolute;
+    line-height: normal;
+}
+
+.event-dot {
+    width: 100%;
+    height: 6px;
+    border-radius: 4px;
+    background-color: var(--mud-palette-secondary);
+    position: absolute;
+    bottom: 0;
+}
+
+.calendar-day:hover .event-popup { display: block; }
+
+.calendar-day-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.radiusTopLeft { border-top-left-radius: 12px; }
+
+.radiusTopRight { border-top-right-radius: 12px; }
+
+.radiusBottomLeft { border-bottom-left-radius: 12px; }
+
+.radiusBottomRight { border-bottom-right-radius: 12px; }

Template.Shared/Components/SingleElements/Card/ActivityCard.razor.css

@@ -7,7 +7,8 @@
     padding: .5rem .7rem;
     border-radius: 12px;
     line-height: normal;
-    background: var(--mud-palette-surface);
+    border: 1px solid var(--card-border-color);
+    box-shadow: var(--card-shadow);
 }
 
 .activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }