Namitha: Fix calendar visibility, booked date indicators, and dark mode implementation

[Namitha7070]

Description

(PRIORITY Medium) Jae/Sudarshan- Fix Calendar Not Showing on Activities Registration Page , Highlight Booked Days and Fix Dark Mode text and colours

1. Ensure the calendar component renders on the main page.
2. Fix any missing data or props that prevent the calendar from loading.
3. Verify calendar functions such as date navigation and event display work properly.
4. Check styling or layout issues that may be hiding the calendar.
5. Add a clear visual indicator (e.g., highlight, badge, or icon) on days that are booked so users can easily see which dates are already taken.
6. Fix the dark mode implementation of text fields

Related PRS (if any):

…

Main changes explained:

1. Calendar: Enabled react-calendar on the Register page with selection and navigation.
2. Booked Days: Highlighted with a red dot and light-red background; added a small legend.
3. Dark Mode: Used Redux [darkMode]
4. CSS Modules: Converted page styles
5. React Calendar Styles: Used :global(...) in CSS modules so calendar classes style correctly.
6. Responsiveness: Added wrap and media queries to prevent calendar cropping on small screens.
7. Lint Fixes: Removed duplicate CSS selectors to satisfy pre-commit stylelint.

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to dashboard→ /communityportal/activities/Register/1
6. verify whether the Calendar renders properly in the page and also test the Dark Mode.

Screenshots or videos of changes:

Week.19.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	5be7dc3
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/693ba2044ac4f800099b1303
😎 Deploy Preview	https://deploy-preview-4544--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
7 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 Namitha,

I have reviewed your PR locally, the calendar does display as per requirement in both modes. But i was unable to verify the point "Verify calendar functions such as date navigation and event display work properly" and also what about if dates are available to book?

[rohanrastogi311]

Hi Namitha,

Well done with this implementation.

[HemanthNidamanuru]

Hi Namitha,

Thanks for working on this. Here's what I found after testing locally:

Working:

1. The calendar is rendering correctly on the main page.
2. Date navigation is working as expected.

Not working / needs attention:

1. I wasn't sure how to verify the event display properly. Could you share some steps or context on how to test this?
2. Dates where tickets are available need some kind of visual indication so users can easily tell them apart from fully booked or unavailable days.