AddThisFeature

Event Calendar

Month, week, and list views of upcoming events people can browse and open.

moderate Data & Content

What it adds

A browsable calendar of events with month, week, and list views and linkable dates.

What your agent is told to do

5
  1. 1

    Build three views over one data source: month grid, week grid, and a chronological list. The list view is the mobile and screen-reader path and is not optional.

  2. 2

    Give every view and date a URL that encodes the view, the anchor date, and any active filter, and reuse the app's existing Shareable Deep Links conventions so a pasted link opens exactly what the sender was looking at.

  3. 3

    Fetch only the events overlapping the visible range, and prefetch the adjacent period so stepping forward and back feels instant.

  4. 4

    Distinguish timed events from all-day events in the data model, not just in the rendering. An all-day event is a date, a timed event is an instant, and confusing the two is where the display bugs come from.

  5. 5

    Do not hide overflow events behind a silent cutoff. If a day has more entries than fit, show an explicit count that opens the full day, so nothing disappears without the reader knowing.

Edge cases it handles

8
  • Overlapping events in a week view must all remain visible. Lay them out side by side within the hour column or stack them with an explicit overflow control, but never drop one because two share a start time.
  • A multi-day event has to span continuously across a week row and resume correctly at the start of the next row, with the ends marked so a reader can tell it continues rather than restarts.
  • All-day events are calendar dates, not instants. Converting them through a time zone moves a holiday to the previous evening for anyone west of the origin, so render them from the date directly.
  • Month navigation must stay responsive with hundreds of events in range. Query by overlap with the visible window and index the date columns rather than loading the year and filtering in memory.
  • Every view and date needs its own address. Without one, a shared link drops the recipient on today rather than the date being discussed.
  • Grid views are difficult to navigate with a keyboard or a screen reader. Provide the list view as an equivalent path and make it reachable, not just a narrow-screen fallback.
  • Today must be marked according to the viewer's zone, and must update if the page is left open across midnight.
  • A month with no events needs a real empty state pointing at the next period that has any, rather than a blank grid.

Definition of done

9
  • Month, week, and list views render from one event source and stay consistent.
  • Overlapping events are all visible or reachable through an explicit overflow control.
  • Multi-day events span week rows correctly with continuation marked at each edge.
  • All-day events show on the same date regardless of the viewer's time zone.
  • Navigating months with hundreds of events queries only the visible range.
  • Every view and date has a shareable URL that reopens the same state.
  • The list view offers full keyboard and screen-reader access to the same events.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.