Refactor Calendar component to adjust default meeting times and improve event item styling

This commit updates the Calendar component by changing the default start time for meetings to 9:00 AM and the end time to 5:01 PM, ensuring better alignment with typical work hours. Additionally, the styling of calendar event items is refined by removing fixed width and height properties, allowing for more flexible rendering. These changes enhance the usability and visual presentation of the calendar feature, contributing to an improved user experience.
This commit is contained in:
2026-01-26 22:15:03 -05:00
parent d0ce71397b
commit 46836fde2e
3 changed files with 19 additions and 9 deletions
@@ -50,7 +50,7 @@
</MonthTemplate> </MonthTemplate>
<WeekTemplate> <WeekTemplate>
<MudTooltip Text="@GetEventTooltip(context)"> <MudTooltip Text="@GetEventTooltip(context)">
<div class="calendar-event-item" style="width: 100%; height: 100%;"> <div class="calendar-event-item">
@context.Text @context.Text
</div> </div>
</MudTooltip> </MudTooltip>
+4 -4
View File
@@ -30,9 +30,9 @@ public class CalendarMeetingItem : CalendarItem
MeetingHistoryData = meetingHistory; MeetingHistoryData = meetingHistory;
// Set base class properties that the calendar component uses // Set base class properties that the calendar component uses
Text = "Team Meeting"; Text = "Team Meeting";
// Use meeting date at 3:00 PM as default time // Set start to 9:00 AM on the meeting date
Start = meetingHistory.MeetingDate.Date.AddHours(15); Start = meetingHistory.MeetingDate.Date.AddHours(9);
// Default to 1 hour duration // Set end to 5:00 PM on the meeting date (5:01 PM to ensure it displays until 5pm if end is exclusive)
End = Start.AddHours(1); End = meetingHistory.MeetingDate.Date.AddHours(17).AddMinutes(1);
} }
} }
+14 -4
View File
@@ -280,10 +280,20 @@
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease; transition: background-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
margin: 2px 0; width: 100% !important;
min-height: 24px; height: 100% !important;
display: flex; display: block !important;
align-items: center; box-sizing: border-box;
text-align: center;
}
/* Ensure tooltip wrapper doesn't constrain width or height and adds spacing */
.event-calendar .mud-tooltip-root {
width: 100%;
height: 100%;
display: block;
padding: 2px;
box-sizing: border-box;
} }
.calendar-event-item:hover { .calendar-event-item:hover {