feat: Use new calendar agenda view and other fixes #356

chadbrokaw · 2025-10-17T18:00:29Z

This pull request significantly refactors the event calendar's UI and codebase to simplify dependencies, unify the visual design, and improve mobile responsiveness. The core changes include removing the dependency on react-big-calendar in favor of a fully custom agenda-style calendar, unifying category and button styles, and enhancing the layout and accessibility of event details.

Major UI and UX Refactor:

Removed all usage of react-big-calendar and related logic from EventCalendar.tsx, switching to a custom agenda-style calendar for both desktop and mobile, simplifying the code and improving maintainability. [1] [2] [3]
Refactored category filtering: removed dynamic color mapping and dark color logic, and unified category chip/button styles to use a consistent black/white color scheme. [1] [2] [3]

Visual and Accessibility Improvements:

Updated button and category colors throughout the calendar UI to use a consistent palette (e.g., primary buttons now use #cd4a23), and improved hover/focus states for better accessibility. [1] [2] [3]
Improved agenda event layout: enhanced padding, spacing, and responsive behavior for event chips, time columns, and event titles, ensuring a better experience on all screen sizes. [1] [2] [3] [4]

Event Details and Slideout Enhancements:

Updated the event slideout to display event titles using sanitized HTML for better formatting and security, and standardized category badges and event dots to use the new color scheme. [1] [2] [3]

General Code Cleanup:

Removed unused imports, props, and logic related to the previous calendar implementation and category color mapping, resulting in a simpler and more maintainable codebase. [1] [2] [3] [4] [5] [6]

These changes collectively modernize the event calendar, making it easier to maintain and more visually consistent across devices.

Add typing for react-gtm-module fix: temporarily deploy Google Analytics to staging fix: add temporary logging fix: remove GA4 logging

* fix: change language * test: fix test

Copilot

Pull Request Overview

This refactor replaces react-big-calendar with a custom agenda-style calendar, unifies category/button styles, and adds Algolia exclusion filtering for search/browse results. Key changes:

Custom agenda calendar replaces react-big-calendar; category filters become single-select with updated UI and slideout uses sanitized HTML.
New createExclusionFilters integrates consistent Algolia filters into Search and Browse results.
Renamed Strapi homepage hook to useHomePageFeaturedResourcesData and updated event/resource sections accordingly; styling updates across calendar components.

Reviewed Changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
package.json	Removed react-big-calendar dependency to support custom agenda calendar.
app/utils/exclusionFilters.ts	Added Algolia exclusion filter builder per business rules; consumed by Search/Browse pages.
app/pages/SearchResultsPage/SearchResultsPage.tsx	Applied exclusion filters to Configure for both geo modes.
app/pages/HomePage/HomePage.tsx	Switched to useHomePageFeaturedResourcesData and updated featured section ids/layout.
app/pages/HomePage/HomePage.test.tsx	Updated mocks/types to reflect renamed homepage hook.
app/pages/EventDetailPage/EventDetailPage.tsx	Render “Details” section only when rows exist.
app/pages/BrowseResultsPage/BrowseResultsPage.tsx	Applied combined category + exclusion filters; minor comment fix.
app/hooks/StrapiAPI.ts	Renamed hook to useHomePageFeaturedResourcesData.
app/hooks/SFGovAPI.ts	Updated SFGovEvent interface to events_category.
app/components/ui/Cards/EventCardSection.tsx	Added Show More/Less behavior for featured resources.
app/components/ui/Cards/EventCardSection.module.scss	Added styles for Show More/Less button.
app/components/ui/Calendar/utils.ts	Updated category helpers to use events_category.
app/components/ui/Calendar/types.ts	Replaced react-big-calendar types with local BaseEvent/CalendarEvent; adjusted props.
app/components/ui/Calendar/index.ts	Removed CustomToolbar export (no longer needed).
app/components/ui/Calendar/hooks.ts	Updated category processing to single-select default; filtered events by selected day.
app/components/ui/Calendar/components/MobileAgenda.tsx	Added “Go to today”; sanitized title HTML; layout refinements.
app/components/ui/Calendar/components/EventSlideout.tsx	Sanitized title; standardized category badge/dots; removed color map prop.
app/components/ui/Calendar/components/CustomToolbar.tsx	Removed now-unused toolbar component.
app/components/ui/Calendar/EventCalendar.tsx	Removed react-big-calendar; always render agenda; slideout wiring; added goToToday.
app/components/ui/Calendar/EventCalendar.module.scss	Restyled agenda, filters, and buttons to new palette and responsive behavior.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-17T18:30:49Z

app/components/ui/Cards/EventCardSection.module.scss

 }
+
+.showMoreButton {
+  width: 1fr;


width: 1fr is not a valid CSS length on regular elements (fr units apply to grid track sizing, not width). Use width: 100% (or make the parent a grid and size the track with 1fr).

Suggested change

width: 1fr;

width: 100%;

Copilot · 2025-10-17T18:30:49Z

app/components/ui/Calendar/hooks.ts

      setCategoryFilters(
        availableCategories.map((category, index) => ({
          category,
-          enabled: true,
+          enabled: category === categoryWithMostEvents, // Only category with most events is enabled by default
          color: getCategoryColor(index),
        }))
      );


The color field in CategoryFilter and associated getCategoryColor logic are no longer used in the UI (chips no longer read color or CSS vars). Consider removing the color property from CategoryFilter, the getCategoryColor usage here, and the categoryColorMap computation to simplify state and avoid unnecessary work.

Copilot · 2025-10-17T18:30:49Z

app/components/ui/Calendar/hooks.ts

+  // Toggle category filter - only one can be selected at a time (radio button behavior)
  const toggleCategory = (category: string) => {
    setCategoryFilters((prev) =>
-      prev.map((filter) =>
-        filter.category === category
-          ? { ...filter, enabled: !filter.enabled }
-          : filter
-      )
+      prev.map((filter) => ({
+        ...filter,
+        enabled: filter.category === category,
+      }))
    );
  };


This enforces single-selection, but the 'Update category filters when available categories change' effect (in this file) still adds new categories with enabled: true, which can result in multiple enabled categories after categories change. Update that effect so newly added categories default to enabled: false (unless they match the currently enabled category) to maintain the single-select invariant.

Copilot · 2025-10-17T18:30:50Z

app/components/ui/Calendar/components/MobileAgenda.tsx

+        <div className={styles.dateHeaderTitle}>
+          <h2>{formatDateHeader(currentDate)}</h2>
+          {new Date().toDateString() !== currentDate.toDateString() && (
+            <button onClick={onGoToToday}>Go to today</button>


Add type="button" to prevent accidental form submission if this component is ever rendered inside a form.

Suggested change

<button onClick={onGoToToday}>Go to today</button>

<button type="button" onClick={onGoToToday}>Go to today</button>

Copilot · 2025-10-17T18:30:50Z

app/components/ui/Cards/EventCardSection.module.scss

+  margin-top: $general-spacing-lg;
+  border: none;
+  border-radius: 0.375rem;
+  background-color: #111928; // Light gray with 50% opacity


The comment does not match the color (#111928 is a dark slate, not a light gray at 50% opacity). Update the comment to reflect the actual color or remove it to avoid confusion.

Suggested change

background-color: #111928; // Light gray with 50% opacity

background-color: #111928;

Copilot · 2025-10-17T18:30:50Z

app/components/ui/Cards/EventCardSection.tsx

+      {hasMoreEvents && !showAll && (
+        <button
+          className={styles.showMoreButton}
+          onClick={() => setShowAll(true)}
+        >
+          Show More
+        </button>
+      )}


Consider adding aria-expanded and aria-controls to the Show More/Show Less buttons (and an id on the cards container) to announce the toggle state to assistive technologies.

Copilot · 2025-10-17T18:30:51Z

app/components/ui/Calendar/types.ts

-export interface CalendarEvent extends Event {
+// Base event interface (replacing react-big-calendar's Event type)
+export interface BaseEvent {
+  title?: ReactNode;


title is typed as ReactNode, but downstream code sanitizes it as an HTML string (String(event.title || "")), which will coerce non-string nodes to "[object Object]". If titles are always strings in this calendar, change the type to string to better reflect usage and avoid accidental coercion.

Suggested change

title?: ReactNode;

title?: string;

Copilot · 2025-10-17T18:30:51Z

app/components/ui/Calendar/EventCalendar.module.scss

-    background: #0056b3;
+    background: #a63b1b;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);


This hover box-shadow still uses the old blue (rgba(0, 123, 255, ...)) while the primary button was switched to #cd4a23. Update the shadow color to match the new palette for visual consistency.

Suggested change

box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);

box-shadow: 0 4px 8px rgba(205, 74, 35, 0.3);

chadbrokaw added 30 commits August 14, 2025 11:36

map exploration, hide expired events, fix weback

09def26

Temporarily disable tests

7060df9

Revert webpack change

bb76f95

Improve Search Header

5f0c362

fix: fix tests and cleanup code

c64b311

reenable tests

cb0661a

refactor: remove unused zoom change listener from SearchMap component

3a40297

fix: Fix BrowseResultsPage

9eb8bd6

fix: add some logging

da2654a

fix: remove console log

e4b1d20

attempt to fix category switching issue

dc538be

Don't reset map init

bac8449

fix: remove logging

4d4e3c9

Pulling events from Open Data Portal

a35790a

fix: add days of week and allow for series of events

baf1c5b

fix: refresh styles

35929c7

fix: test

1502628

fix: remove exploration work for eligibility filtering

38d53f3

fix: Fix some visual inconsistencies and bugs

ef753be

rename featued events and shuffle homepage order

26c1577

fix: calendar section background color

b8d6546

Remove commented code

26613a6

Merge branch 'main' into development

0b20179

Merge branch 'main' into development

d5f8563

fix: ensure https protocol

b3b9fae

fix: make it more robust and add security considerations

836539b

Merge branch 'main' into development

b8132d4

fix: split apart the calendar

0358a39

Use React-GTM-Module

d613616

Add typing for react-gtm-module fix: temporarily deploy Google Analytics to staging fix: add temporary logging fix: remove GA4 logging

fix: add error boundary and remove GA from development

dcd0c7a

chadbrokaw added 10 commits September 29, 2025 16:28

fix: Rearrange featured resources and the calendar

553ad41

Review

a111a44

fix: comment

1f630ed

Merge branch 'main' into development

58d657d

Eligibility filtering for senior services

979d47b

fix: change language (#355)

3985edb

* fix: change language * test: fix test

fix: limit featured resources to first four

ec6a81d

fix: event details page

3d526a4

feat: Rework events calendar for agenda view

030d683

fix: correct featured events navigation

c2244a0

chadbrokaw had a problem deploying to dev October 17, 2025 18:00 — with GitHub Actions Failure

Merge branch 'main' into development

d6fa795

chadbrokaw had a problem deploying to dev October 17, 2025 18:02 — with GitHub Actions Failure

test: fix test

b9fdba3

chadbrokaw temporarily deployed to dev October 17, 2025 18:05 — with GitHub Actions Inactive

chadbrokaw had a problem deploying to dev October 17, 2025 18:05 — with GitHub Actions Failure

fix: lint

4d0b8be

chadbrokaw temporarily deployed to dev October 17, 2025 18:21 — with GitHub Actions Inactive

chadbrokaw requested a review from Copilot October 17, 2025 18:26

Copilot AI reviewed Oct 17, 2025

View reviewed changes

code review

c321081

chadbrokaw temporarily deployed to dev October 17, 2025 18:54 — with GitHub Actions Inactive

fix: z-index issue

199ac8b

chadbrokaw temporarily deployed to dev October 17, 2025 18:59 — with GitHub Actions Inactive

chadbrokaw changed the title ~~Development~~ feat: Use new calendar agenda view and other fixes Oct 17, 2025

chadbrokaw merged commit 345ab7e into main Oct 17, 2025
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Use new calendar agenda view and other fixes #356

feat: Use new calendar agenda view and other fixes #356

Uh oh!

chadbrokaw commented Oct 17, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Copilot AI Oct 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<button onClick={onGoToToday}>Go to today</button>
	<button type="button" onClick={onGoToToday}>Go to today</button>

	background-color: #111928; // Light gray with 50% opacity
	background-color: #111928;

	box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
	box-shadow: 0 4px 8px rgba(205, 74, 35, 0.3);

feat: Use new calendar agenda view and other fixes #356

feat: Use new calendar agenda view and other fixes #356

Uh oh!

Conversation

chadbrokaw commented Oct 17, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants