Add calendar month/week views to EventsWidget by alecvdp · Pull Request #40 · alecvdp/us

alecvdp · 2026-04-19T04:17:14Z

Summary

Adds Month and Week calendar views to the EventsWidget, complementing the existing Agenda view. Users can now answer "is this weekend full?" at a glance instead of scrolling a linear list.

What changed

View toggle — segmented control (Agenda / Week / Month) at the top of the Calendar & Agenda widget
Month view — hand-rolled CSS-grid calendar (7 columns, S–S headers) with:
- Event/task indicator dots per day (orange for events, blue for tasks)
- Today highlight with accent border
- Click any day to expand an inline detail panel showing that day's items
- Prev/next month navigation; click the month label to jump back to today
Week view — 7-day column layout with:
- Item count badges per day
- Same today highlight and click-to-expand behavior
- Prev/next week navigation
No new dependencies — pure CSS grid, uses existing Herstel design tokens
Reuses existing data source — same combined agendaItems (events + incomplete tasks with due dates)

Files changed

File	Change
`CalendarMonthView.tsx` + `.module.css`	New — month grid component
`CalendarWeekView.tsx` + `.module.css`	New — week grid component
`EventsWidget.tsx`	View state, toggle, navigation, type export
`EventsWidget.module.css`	View toggle + nav control styles

Testing

All 31 existing tests pass
TypeScript and ESLint clean
Visually verified in browser: agenda view unchanged, month view renders correctly with event dots, week view shows item counts, day selection expands inline detail, navigation works in both directions, today highlighting accurate

Resolves IRL-28

Tip: I will respond to comments that @ mention @cyrusagent on this PR. You can also submit a review with all your feedback at once, and I will automatically wake up to address each comment.

Toggle between Agenda (existing), Week, and Month views using a segmented control. Month view is a hand-rolled CSS-grid calendar showing event/task dots per day. Week view shows 7-day columns with item count badges. Both views support prev/next navigation and click-to-expand day detail inline — no modal needed. Reuses the existing combined event+task data source (agendaItems). Styled with Herstel design tokens; no new dependencies. Resolves IRL-28

linear · 2026-04-19T04:17:17Z

IRL-28 Calendar month/week view (currently only a linear agenda)

devin-ai-integration

Devin Review found 1 potential issue.

View 4 additional findings in Devin Review.

devin-ai-integration · 2026-04-19T04:19:32Z

+  const navigateMonth = (delta: number) => {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setMonth(next.getMonth() + delta);
+      return next;
+    });
+    setSelectedDate(null);
+  };


🔴 navigateMonth skips months when viewDate day > 28 due to JS Date overflow

When viewDate has a day component of 29, 30, or 31, navigateMonth uses setMonth() which causes JavaScript's Date to overflow into the next month. For example, if viewDate is May 31 and the user navigates forward, setMonth(5) creates "June 31" which JS rolls to July 1 — skipping June entirely.

This is easily triggered because viewDate is shared across week and month views. A user in week view can navigate until viewDate lands on the 31st (e.g., May 31), switch to month view, then navigate forward — the calendar jumps two months. Backward navigation has the same problem (e.g., from March 31 → "February 31" → March 3).

Concrete reproduction steps

Open widget on any date (e.g. April 19)

Switch to Week view

Navigate forward ~2 weeks so viewDate becomes e.g. May 3, then keep going to May 31

Switch to Month view (shows May)

Click forward arrow → expects June, lands on July

Suggested change

const navigateMonth = (delta: number) => {

setViewDate((prev) => {

const next = new Date(prev);

next.setMonth(next.getMonth() + delta);

return next;

});

setSelectedDate(null);

};

const navigateMonth = (delta: number) => {

setViewDate((prev) => {

const next = new Date(prev);

next.setDate(1);

next.setMonth(next.getMonth() + delta);

return next;

});

setSelectedDate(null);

};

Was this helpful? React with 👍 or 👎 to provide feedback.

Copilot

Pull request overview

Adds week/month calendar visualizations to the existing EventsWidget so users can scan upcoming events/tasks by day, while keeping the existing agenda list view intact.

Changes:

Added a segmented view toggle (Agenda / Week / Month) and navigation controls to EventsWidget.
Introduced new CalendarMonthView and CalendarWeekView components (CSS-grid based) with day selection and inline detail panels.
Added new styling for the toggle/navigation and both calendar views.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/components/EventsWidget.tsx	Adds view state, toggle UI, and week/month navigation wiring.
src/components/EventsWidget.module.css	Styles for the view toggle and navigation controls.
src/components/CalendarMonthView.tsx	New month grid view with item dots and day detail panel.
src/components/CalendarMonthView.module.css	Styling for month grid, day states, and detail panel.
src/components/CalendarWeekView.tsx	New week grid view with per-day item counts and day detail panel.
src/components/CalendarWeekView.module.css	Styling for week grid columns, today/selected states, and detail panel.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-19T04:20:52Z

+import { useMemo } from "react";
+import styles from "./CalendarMonthView.module.css";
+import type { AgendaItem } from "./EventsWidget";


CalendarMonthView uses React hooks (useMemo) but the file is missing a "use client" directive. In Next.js App Router this will be treated as a Server Component and cannot be imported/used by the client-side EventsWidget, causing a build/runtime error. Add "use client" at the top of this file (before imports).

Copilot · 2026-04-19T04:20:53Z

+import { useMemo } from "react";
+import styles from "./CalendarWeekView.module.css";
+import type { AgendaItem } from "./EventsWidget";


CalendarWeekView uses React hooks (useMemo) but the file is missing a "use client" directive. In Next.js App Router this will be treated as a Server Component and cannot be imported/used by the client-side EventsWidget, causing a build/runtime error. Add "use client" at the top of this file (before imports).

Copilot · 2026-04-19T04:20:53Z


+  const navigateMonth = (delta: number) => {
+    setViewDate((prev) => {
+      const next = new Date(prev);


navigateMonth mutates the month via Date#setMonth while keeping the current day-of-month. When viewDate is on the 29th/30th/31st, navigating to a shorter month can overflow into the following month (e.g., Jan 31 + 1 month -> Mar 3), causing the month view to skip/land on the wrong month. Consider normalizing viewDate to a safe day (e.g., setDate(1)) before shifting months, or store an explicit (year, month) anchor for month navigation.

Suggested change

const next = new Date(prev);

const next = new Date(prev);

next.setDate(1);

Copilot · 2026-04-19T04:20:53Z

+            <button
+              key={key}
+              type="button"
+              className={`${styles.viewBtn} ${view === key ? styles.viewBtnActive : ""}`}
+              onClick={() => {
+                setView(key);
+                setSelectedDate(null);
+              }}
+              title={label}
+            >
+              <Icon size={14} />
+            </button>
+          ))}
+        </div>
+
+        {view !== "agenda" && (
+          <div className={styles.navControls}>
+            <button
+              type="button"
+              className={`btn-icon ${styles.navBtn}`}
+              onClick={() => (view === "month" ? navigateMonth(-1) : navigateWeek(-1))}
+            >
+              <ChevronLeft size={14} />
+            </button>
+            <button
+              type="button"
+              className={styles.navLabel}
+              onClick={goToToday}
+              title="Go to today"
+            >
+              {getNavLabel()}
+            </button>
+            <button
+              type="button"
+              className={`btn-icon ${styles.navBtn}`}
+              onClick={() => (view === "month" ? navigateMonth(1) : navigateWeek(1))}
+            >
+              <ChevronRight size={14} />
+            </button>


The view toggle and month/week navigation use icon-only elements without an accessible name. Relying on title (or having no label at all on the chevrons) is not reliably announced by screen readers. Add an aria-label (or visually hidden text) for each button (e.g., "Agenda view", "Next month", "Previous week").

Copilot · 2026-04-19T04:20:53Z

+function sameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}


sameDay is now duplicated in EventsWidget, CalendarMonthView, and CalendarWeekView. To reduce drift/inconsistency, consider extracting a shared helper (e.g., in src/lib/dates.ts or a small local util) and reusing it across the three components.

Copilot AI review requested due to automatic review settings April 19, 2026 04:17

Copilot started reviewing on behalf of alecvdp April 19, 2026 04:17 View session

devin-ai-integration Bot reviewed Apr 19, 2026

View reviewed changes

Copilot AI reviewed Apr 19, 2026

View reviewed changes

alecvdp merged commit 8d5ece3 into main Apr 19, 2026
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add calendar month/week views to EventsWidget#40

Add calendar month/week views to EventsWidget#40
alecvdp merged 1 commit intomainfrom
cyrus/irl-28-calendar-monthweek-view-currently-only-a-linear-agenda

alecvdp commented Apr 19, 2026 •

edited by devin-ai-integration Bot

Loading

Uh oh!

linear Bot commented Apr 19, 2026

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

devin-ai-integration Bot Apr 19, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 19, 2026

Uh oh!

Copilot AI Apr 19, 2026

Uh oh!

Copilot AI Apr 19, 2026

Uh oh!

Copilot AI Apr 19, 2026

Uh oh!

Copilot AI Apr 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const next = new Date(prev);
	const next = new Date(prev);
	next.setDate(1);

Conversation

alecvdp commented Apr 19, 2026 • edited by devin-ai-integration Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What changed

Files changed

Testing

Uh oh!

linear Bot commented Apr 19, 2026

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alecvdp commented Apr 19, 2026 •

edited by devin-ai-integration Bot

Loading