Enhance calendar with Day, Week, and Year view mode by vihuynh72 · Pull Request #2187 · SCE-Development/Clark

vihuynh72 · 2026-09-02T00:19:13Z

Summary

This pull request adds Day, Week, and Year views to the Events calendar for Issue #2160, while preserving the existing Month view structure and behavior. The calendar now supports switching between all four views from a single selector, uses view-aware navigation and titles, and keeps the current calendar cursor synchronized with the existing URL parameters.

The goal is to make calendar navigation more useful without changing the SCEvents API, database behavior, event visibility rules, or existing Month view rendering.

Calendar view improvements

Shared navigation and state

Added Day, Week, Month, and Year options to the calendar view selector.
Added view-aware previous, next, and Today navigation behavior.
Added dynamic calendar titles:
- Day view shows the full weekday and date.
- Week view supports same-month, cross-month, and cross-year titles.
- Month view shows the current month and year.
- Year view shows the current year.
Added view-aware event-count labels such as “today,” “this week,” and “this year.”
Preserved the existing Month URL and localStorage behavior so Month remains compatible with the existing calendar flow.

Day and Week views

Added an hourly Day view using the existing event pill and popup behavior.
Added a seven-column Week view with Sunday through Saturday columns.
Timed events are placed into their start-hour rows.
Events without valid times are placed in the all-day area.
Week view supports weeks that cross month and year boundaries.
Mobile Week view remains horizontally scrollable rather than compressing the seven-day layout.

Year view

Added a Year view with twelve Sunday-start mini-months.
Year view uses three mini-months per desktop row and one per mobile row.
Month headings are centered within each mini-month card and remain clickable.
Clicking a month heading opens the existing Month view for that month.
Clicking a day keeps the user in Year view and opens an in-place preview of that date’s events.
Clicking another day updates the preview, while clicking unused mini-month space dismisses it.
Selecting an event from the preview continues to use the existing event popup.
The Today button keeps the user in Year view and scrolls to the mini-month containing today.
Event dots are shown only for visible events.
Date cells reserve the same event-dot space whether or not they have an event, keeping all date numbers vertically aligned.
Today indicators and event dots have additional spacing so they do not overlap.

Scope and compatibility

No SCEvents API, database, Docker, routing, or dependency changes were made.
No temporary preview-event fixtures or preview query handling remain in source.
Existing Month calendar components and event popup behavior remain unchanged.
Persisting a user’s chosen calendar view remains outside this pull request.

Verification

npm run lint
TZ=UTC npm run frontend-test
TZ=America/Los_Angeles npm run frontend-test
Focused mounted checks for Day, Week, and Year interactions.
Focused checks for Year-view Today scrolling, in-place date previews, event-dot alignment, blank-space dismissal, and temporary preview-event removal.

Screenshots

Day View

Week View

Year View

… month, year) and refactor calendar header

…ctions for date handling

…vent fetching logic

…andling

…n calendar

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

🟡 Changes recommended

The implementation changes Month-view header behavior (removing month/year selectors) in a way that conflicts with the PR’s stated goal of preserving existing Month view behavior unless the description is updated or the prior controls are restored.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR extends the Events calendar UI to support Day, Week, and Year modes alongside the existing Month mode, including view-aware navigation, titles, and URL parameter synchronization, while keeping event fetching compatible with the existing SCEvents API.

Changes:

Added Day/Week time-grid views and a Year view with mini-months and in-place date previews.
Introduced shared view-aware helpers (range calculation, cursor stepping, titles/labels, URL param handling).
Updated Events page state/effects to track view mode, keep URL params in sync, and fetch events for the active view’s visible range.

File summaries

File	Description
test/frontend/CalendarViewModes.test.js	Adds unit tests covering new calendar helper behaviors for all four views.
src/Pages/Events/Events.js	Tracks `view` + `cursor`, syncs them to URL params, and fetches events by view-specific visible range.
src/Pages/Events/EventIcons.js	Adds `ChevronDown` icon used by the new view selector UI.
src/Pages/Events/Calendar/YearView.js	Implements Year view mini-month grid and sticky selected-date event preview.
src/Pages/Events/Calendar/TimeGrid.js	Implements Day/Week hourly grid rendering and event placement by hour/all-day.
src/Pages/Events/Calendar/CalendarView.js	Switches between Month/Day/Week/Year renderers and wires view-aware header + navigation.
src/Pages/Events/Calendar/calendarUtils.js	Adds helper utilities for visible ranges, cursor stepping, titles/labels, time bucketing, mini-month matrices, and URL params.
src/Pages/Events/Calendar/CalendarHeader.js	Replaces month/year selectors with a unified view selector and view-aware nav/title/count display.
src/Pages/Events/Calendar/calendarConstants.js	Adds `VIEW_MODES` definition used by header and URL parsing.

Review details

Files reviewed: 9/9 changed files
Comments generated: 1
Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

          <div className="relative w-28 sm:w-36">
            <select
-              value={month}
-              onChange={onMonthChange}
-              aria-label="Select month"
+              value={view}
+              onChange={(e) => onViewChange(e.target.value)}
+              aria-label="Select calendar view"
              className="h-10 w-full appearance-none rounded-lg border border-slate-400/40 bg-slate-800 px-4 pr-10 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-400"
            >
-              {MONTHS.map((monthName, index) => (
-                <option key={monthName} value={index} className="bg-slate-900">
-                  {monthName}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="relative w-24">
-            <select
-              value={year}
-              onChange={onYearChange}
-              aria-label="Select year"
-              className="h-10 w-full appearance-none rounded-lg border border-slate-400/40 bg-slate-800 px-4 pr-10 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-400"
-            >
-              {YEAR_RANGE.map((yearOption) => (
-                <option key={yearOption} value={yearOption} className="bg-slate-900">
-                  {yearOption}
+              {VIEW_MODES.map(({ label, value }) => (
+                <option key={value} value={value} className="bg-slate-900">
+                  {label}
                </option>
              ))}
            </select>
+            <div className="pointer-events-none absolute inset-y-0 right-4 flex items-center text-slate-300">
+              <ChevronDown />
+            </div>
          </div>


adarshm11

would you be able to reopen this PR with copilot review disabled

vihuynh72 · 2026-09-02T21:21:04Z

would you be able to reopen this PR with copilot review disabled

Yes I will do so now

vihuynh72 and others added 11 commits September 1, 2026 11:38

Modify calendar components to support view mode selection (day, week,…

4874990

… month, year) and refactor calendar header

Enhance calendar functionality with view mode support and utility fun…

1834e66

…ctions for date handling

Add day view support to calendar with TimeGrid component and update e…

b9cbf58

…vent fetching logic

Add week view support to calendar and update event fetching logic

47dd7d7

Add week view title formatting for cross-month and cross-year scenarios

8d75808

Add year view support to calendar with preview events and selection h…

638a886

…andling

Remove temporary year-view preview events and update event handling i…

f25991d

…n calendar

Add aria-label for Year view

784c771

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Add fallback for event.id for Year view

2c9bbdc

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Add mssing container for selected events in Year view

c8c3859

Add more descriptive aria label for event date

3eada8a

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI lite review requested due to automatic review settings September 2, 2026 00:19

Copilot started reviewing on behalf of vihuynh72 September 2, 2026 00:19 View session

vihuynh72 mentioned this pull request Sep 2, 2026

[SCEVENTS] Improve calendar UI a la Google Calendar #2160

Open

Copilot AI reviewed Sep 2, 2026

View reviewed changes

adarshm11 requested changes Sep 2, 2026

View reviewed changes

vihuynh72 marked this pull request as draft September 2, 2026 21:21

vihuynh72 closed this Sep 2, 2026

vihuynh72 reopened this Sep 2, 2026

vihuynh72 closed this Sep 2, 2026

vihuynh72 mentioned this pull request Sep 2, 2026

Reopen PR #2187: Enhance calendar with Day, Week, and Year view mode #2189

Open

Navigation Menu

Uh oh!

Enhance calendar with Day, Week, and Year view mode - #2187

Enhance calendar with Day, Week, and Year view mode#2187
vihuynh72 wants to merge 11 commits into
SCE-Development:devfrom
vihuynh72:issue-2160-calendar-views

vihuynh72 commented Sep 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

adarshm11 left a comment

Uh oh!

vihuynh72 commented Sep 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

vihuynh72 commented Sep 2, 2026

Summary

Calendar view improvements

Shared navigation and state

Day and Week views

Year view

Scope and compatibility

Verification

Screenshots

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

adarshm11 left a comment

Choose a reason for hiding this comment

Uh oh!

vihuynh72 commented Sep 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants