From cf0812e334f847895f3d870c10c11f7a04da8c15 Mon Sep 17 00:00:00 2001 From: JoeProgrammer88 Date: Wed, 4 Mar 2026 09:40:01 -0800 Subject: [PATCH 1/6] Move FullCalendar JS to @section Scripts in Index.cshtml Refactored the FullCalendar script and initialization code into a Razor @section Scripts block for proper script injection in ASP.NET Core views. This change improves code organization and maintainability without altering calendar functionality. Indentation and formatting were also improved for readability. --- PC2/Views/Events/Index.cshtml | 144 +++++++++++++++++----------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/PC2/Views/Events/Index.cshtml b/PC2/Views/Events/Index.cshtml index 43a1f17..a1b6446 100644 --- a/PC2/Views/Events/Index.cshtml +++ b/PC2/Views/Events/Index.cshtml @@ -75,82 +75,82 @@ - - - - + + - + +}
From 595d294f58c6d7b8fe7c778a0bda88fac0640ebe Mon Sep 17 00:00:00 2001 From: JoeProgrammer88 Date: Wed, 4 Mar 2026 09:49:46 -0800 Subject: [PATCH 2/6] Improve calendar mobile UX and layout; refactor rendering Refactor FullCalendar setup to auto-switch to list view on mobile and simplify header. Restrict custom event rendering to month grid view. Add "No events this month" message. Update layout for full-width calendar and move legend for better responsiveness. Minor formatting and CSS comment fixes. --- PC2/Views/Events/Index.cshtml | 75 +++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 34 deletions(-) diff --git a/PC2/Views/Events/Index.cshtml b/PC2/Views/Events/Index.cshtml index a1b6446..f8a7232 100644 --- a/PC2/Views/Events/Index.cshtml +++ b/PC2/Views/Events/Index.cshtml @@ -1,4 +1,4 @@ -@model PC2.Models.EventsModel +@model PC2.Models.EventsModel @{ ViewData["Title"] = "Event Calendar"; @@ -47,7 +47,7 @@ margin-right: 10px; } - /* CSS to word break on multiple lines in the event modal dialog */ + /* CSS to word break on multiple lines in the event modal dialog */ #modalEventTitle { overflow-wrap: anywhere; } @@ -76,19 +76,34 @@
@section Scripts { - }
-
+
-
-
-
- PC2 Event -
-
-
- County Event -
+
+
+
+
+ PC2 Event +
+
+
+ County Event
-
\ No newline at end of file +
From e593d4fac8dd8ada0b72257030cd351ef450a262 Mon Sep 17 00:00:00 2001 From: JoeProgrammer88 Date: Wed, 4 Mar 2026 09:56:52 -0800 Subject: [PATCH 3/6] Improve event title wrapping and rendering in calendar Updated CSS to allow word wrapping for event titles in the month grid. Refactored FullCalendar eventContent to provide custom rendering for all views, using safeHtml for titles when available. Enhanced readability and consistency across month, list, and time grid views. --- PC2/Views/Events/Index.cshtml | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/PC2/Views/Events/Index.cshtml b/PC2/Views/Events/Index.cshtml index f8a7232..5be7769 100644 --- a/PC2/Views/Events/Index.cshtml +++ b/PC2/Views/Events/Index.cshtml @@ -51,6 +51,12 @@ #modalEventTitle { overflow-wrap: anywhere; } + + /* Word wrap event titles in the month grid */ + #calendar .fc-daygrid-event .fc-event-title { + white-space: normal; + overflow-wrap: anywhere; + } } @@ -121,14 +127,27 @@ failureCallback(error); }); }, - // Custom rendering for the month grid view only + // Custom rendering for all views eventContent: function(arg) { - if (arg.view.type !== 'dayGridMonth') return; - const startTime = arg.event.start.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); + const title = arg.event.extendedProps.safeHtml ?? arg.event.title; + + if (arg.view.type === 'dayGridMonth') { + const startTime = arg.event.start.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); + return { html: ` +
+
${startTime}
+
${title}
+ `}; + } + + if (arg.view.type === 'listMonth') { + return { html: `${title}` }; + } + + // timeGridWeek, timeGridDay return { html: ` -
-
${startTime}
-
${arg.event.extendedProps.safeHtml}
+
${arg.timeText}
+
${title}
`}; }, eventClick: function(info) { From 2598af1322e771f31f59fe338c43709486676fcf Mon Sep 17 00:00:00 2001 From: JoeProgrammer88 Date: Tue, 10 Mar 2026 12:23:27 -0700 Subject: [PATCH 4/6] Improve calendar event layout and readability Enhance the appearance of custom events by setting explicit text color for .pc2-event and .county-event classes. Refine month grid event layout using flexbox, better spacing, and improved word wrapping for event titles to ensure clarity and prevent layout issues. --- PC2/Views/Events/Index.cshtml | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/PC2/Views/Events/Index.cshtml b/PC2/Views/Events/Index.cshtml index 5be7769..a0fb428 100644 --- a/PC2/Views/Events/Index.cshtml +++ b/PC2/Views/Events/Index.cshtml @@ -25,10 +25,12 @@ .pc2-event { background-color: #d1e7dd !important; /* Light green */ + color: #212529 !important; } .county-event { background-color: #f8d7da !important; /* Light red */ + color: #212529 !important; } .legend { @@ -52,10 +54,27 @@ overflow-wrap: anywhere; } + /* Fix custom event content layout in month grid */ + #calendar .fc-daygrid-event .fc-event-main { + display: flex; + align-items: flex-start; + } + + #calendar .fc-daygrid-event .fc-daygrid-event-dot { + flex-shrink: 0; + margin-top: 3px; + } + + #calendar .fc-daygrid-event .fc-event-time { + flex-shrink: 0; + margin-right: 2px; + } + /* Word wrap event titles in the month grid */ #calendar .fc-daygrid-event .fc-event-title { white-space: normal; overflow-wrap: anywhere; + min-width: 0; } } From 823ec48c7359eae5dea80065bd0d7446d8893d9f Mon Sep 17 00:00:00 2001 From: JoeProgrammer88 Date: Wed, 11 Mar 2026 08:48:24 -0700 Subject: [PATCH 5/6] Refactor event rendering and remove week/day views Simplify FullCalendar event rendering by removing custom CSS and the eventContent function. Switch to eventDidMount to allow HTML in event titles and ensure proper click handling. Remove "Week" and "Day" views from the calendar, leaving only "Month" and "List" views. This streamlines the code and improves event title display and modal behavior. --- PC2/Views/Events/Index.cshtml | 69 ++++++++++------------------------- 1 file changed, 19 insertions(+), 50 deletions(-) diff --git a/PC2/Views/Events/Index.cshtml b/PC2/Views/Events/Index.cshtml index a0fb428..379e60a 100644 --- a/PC2/Views/Events/Index.cshtml +++ b/PC2/Views/Events/Index.cshtml @@ -53,29 +53,6 @@ #modalEventTitle { overflow-wrap: anywhere; } - - /* Fix custom event content layout in month grid */ - #calendar .fc-daygrid-event .fc-event-main { - display: flex; - align-items: flex-start; - } - - #calendar .fc-daygrid-event .fc-daygrid-event-dot { - flex-shrink: 0; - margin-top: 3px; - } - - #calendar .fc-daygrid-event .fc-event-time { - flex-shrink: 0; - margin-right: 2px; - } - - /* Word wrap event titles in the month grid */ - #calendar .fc-daygrid-event .fc-event-title { - white-space: normal; - overflow-wrap: anywhere; - min-width: 0; - } } @@ -119,13 +96,11 @@ } : { left: 'prev,next today', center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' + right: 'dayGridMonth,listMonth' }, buttonText: { today: 'Today', month: 'Month', - week: 'Week', - day: 'Day', list: 'List' }, events: function(info, successCallback, failureCallback) { @@ -137,7 +112,6 @@ // Add color differentiation events.forEach(event => { event.classNames = [event.isPC2Event ? 'pc2-event' : 'county-event']; - event.safeHtml = event.title; }); successCallback(events); }) @@ -146,29 +120,6 @@ failureCallback(error); }); }, - // Custom rendering for all views - eventContent: function(arg) { - const title = arg.event.extendedProps.safeHtml ?? arg.event.title; - - if (arg.view.type === 'dayGridMonth') { - const startTime = arg.event.start.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); - return { html: ` -
-
${startTime}
-
${title}
- `}; - } - - if (arg.view.type === 'listMonth') { - return { html: `${title}` }; - } - - // timeGridWeek, timeGridDay - return { html: ` -
${arg.timeText}
-
${title}
- `}; - }, eventClick: function(info) { var startTime = info.event.start.toLocaleString(); var endTime = info.event.end ? info.event.end.toLocaleString() : 'N/A'; @@ -189,6 +140,24 @@ return { start, end }; }, + eventDidMount: function(info) { + // Render HTML in event titles instead of escaped text. + // List view: write to the directly to avoid nesting inside FullCalendar's own . + // Other views: write to the .fc-event-title element. + const titleEl = info.view.type === 'listMonth' + ? info.el.querySelector('.fc-list-event-title') + : info.el.querySelector('.fc-event-title'); + + if (titleEl) { + titleEl.innerHTML = info.event.title; + // Prevent inner link navigation so clicks bubble to eventClick and open the modal + titleEl.querySelectorAll('a').forEach(function(a) { + a.addEventListener('click', function(e) { + e.preventDefault(); + }); + }); + } + }, noEventsText: 'No events this month' }); From e558385c8f47c71513ba47281d1f7a2636cf8179 Mon Sep 17 00:00:00 2001 From: JoeProgrammer88 Date: Wed, 11 Mar 2026 08:54:04 -0700 Subject: [PATCH 6/6] Add Bootstrap tooltips to month view calendar events Improves event visibility by showing a tooltip with the full event title on hover in the month (dayGridMonth) view. This helps users see long or truncated event names more easily. --- PC2/Views/Events/Index.cshtml | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/PC2/Views/Events/Index.cshtml b/PC2/Views/Events/Index.cshtml index 379e60a..d970884 100644 --- a/PC2/Views/Events/Index.cshtml +++ b/PC2/Views/Events/Index.cshtml @@ -157,6 +157,19 @@ }); }); } + + // Add a Bootstrap tooltip on month view events so the full text is visible on hover + if (info.view.type === 'dayGridMonth') { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = info.event.title; + const plainText = tempDiv.textContent || tempDiv.innerText || ''; + new bootstrap.Tooltip(info.el, { + title: plainText, + placement: 'top', + trigger: 'hover', + container: 'body' + }); + } }, noEventsText: 'No events this month' });