Kanishk – Finish community calendar full view

[kanishkagarwal6101]

Description

• Modernize the community calendar experience so category, location, and status filters immediately narrow the events rendered in both the calendar grid and supporting views
• Persist the user’s selected day, highlight it inside the calendar, and expose a contextual summary panel that mirrors what will be shown in the modal
• Bring the “Latest News” sidebar into the shared CSS module system and extend dark/light styling so the full layout remains cohesive in either theme

Related PRs

• PR 3029

Main Changes

• Refactored CommunityCalendar.jsx to memoize the event collection, cache filtered events by date, track the active day, and synchronize the calendar tiles, modal, and new sidebar panel with those states
• Added a selected-date panel that summarizes how many events are scheduled, lists each event with quick metadata and an on-demand “View full details” action, and gracefully handles empty days
• Updated CalendarActivitySection.jsx and CommunityCalendar.module.css to use module-scoped classes, re-themed the activity feed, and introduced reusable styles for the selected-date panel, event cards, and tile highlighting across light and dark modes

Testing Steps

• Manual Navigate to /communityportal/calendar, change each filter, and confirm the calendar tiles and selected-date panel react immediately
• Manual Click different calendar days (with and without events) to verify the new summary panel content, badge highlighting, and empty-state messaging
• Manual Open the event modal from either the calendar tile or the “View full details” button and confirm they show the same data
• Manual Toggle between dark and light themes to ensure the calendar grid, detail panel, and activity list remain readable

Screenshots

Notes

• Event data is still mocked and hard-coded for January 2025; adjust those seed dates or wire up the live feed before release so the default month is populated.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	4bd95e9
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6941fb3817ad5c0008e26a15
😎 Deploy Preview	https://deploy-preview-4370--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Anusha-Gali]

Hi Kanishk,

I have reviewed your PR locally and have a few change requests. Other than them the rest of the functionality does work as per requirement.
In light mode:
As you can see when the date is selected below the value 31 is not that visible in calendar due to the text being in white color

Similarly for dates with no events as well when we hover on them

In dark mode:
Similarly for dates with no events as well when we hover on them in dark mode as well as the text "Select a different date or adjust the filters to see scheduled events." is not as visible in dark mode due to grey text color

Note: Do let me know if any of these do not come under the requirements

[debadyuti23]

Hi @kanishkagarwal6101 I have reviewed your changes. I have clicked on the calendar tiles with events/normal. They are working as expected both in light and dark mode.

Drive link: https://drive.google.com/file/d/1OOQGJIy_Mpb598tfV-Wanzk86yscM8Mp/view?usp=sharing

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Anusha-Gali]

Hi Kanishk,

I have re-reviewed your PR and thanks for making the changes. All the requirements work as expected.

[one-community]

Thank you all, merging!

[Shravan-neelamsetty]

Hi Kanishk, I reviewed this PR after it was merged into development by navigating to /communityportal/calendar and testing the functionality. The calendar filters (category, location, status) update the calendar tiles immediately as expected. The selected date panel correctly displays event summaries when clicking on days with events, and shows appropriate empty state messages for days without events. The "View full details" button and clicking calendar tiles both open the correct event modal with matching data. Dark mode implementation works well, text visibility on selected dates and hover states is clear in both light and dark modes. The Latest News sidebar integrates smoothly with the CSS modules and maintains consistent theming. The calendar experience feels modern and responsive.

[Vikas-8055]

Hi Kanishk, I reviewed this PR locally at /communityportal/calendar. The memoized event collection and state synchronization work correctly across calendar tiles, modal, and sidebar panel. The selected-date panel displays event count and metadata properly (tested with January 10, 2026 showing Event 2 details) with "View full details" button functional. Empty days handled gracefully. The Latest News sidebar and CSS module styling work well in both light and dark modes with good text visibility and tile highlighting. All requirements work as expected.

[roshini1212]

All listed calendar features have been verified and are functioning correctly. Filter changes on /communityportal/calendar update the calendar tiles and selected-date panel immediately. Selecting different calendar days dynamically refreshes the summary panel, highlights active days, and shows appropriate empty-state messages when no events are present. The event modal displays consistent information whether opened from a calendar tile or through the “View full details” button. Theme toggling between dark and light modes maintains full readability across the calendar grid, detail panel, and activity list. All tests passed successfully.