Darkroom

Summary

The same calendar engine as a night-shift tool for photographers: everything sits on near-black panels, the active view and today glow safelight red, and a soft red light follows the pointer across the page. Event types are neon colours with a glow; the year view is a heat map in red. Instead of a side rail the page has a row of type chips on top and a ticker of the next events at the bottom.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: a calendar for the DEPO community (photographers, models,
stylists, make-up artists and magazines who meet, shoot together and get published).

Function (shared calendar engine, vanilla JS, no library):
- Six views: one day split into hours (quarter-hour labels), one day as an agenda, a week of
  hour columns, a month, three months, a year. Previous / next / today, keys 1–6, ← →, T, N.
- The month grid shows the current month plus the days of the next month up to the end of the
  last week, so it always ends on the last day of a week; other-month days are set apart.
- Every event starts and ends on a 15-minute step. On the hour grids a mouse drag creates an
  event, moves it to another time or day, or stretches it by the bottom edge, always snapped to
  15 minutes; a click makes a one-hour slot; an editor dialog (title, date, start, end, type,
  place, notes) rounds its times to the quarter.
- Six event types with colours: shoot, casting, meetup, fitting, deadline, publication; a legend
  that counts them in the visible range and hides / shows a type. Overlapping events share
  width.
- Realistic demo events around today (DEPO magazine names: Lucid, Palisade, ALAÏS, Delorian,
  VOÍD, DUSK, Kaleido, Persona.Code; DEPO people), kept in localStorage with a reset; view and
  date in the URL.
- 360–1920 px without horizontal scroll, visible focus, reduced motion respected.

Design for this page: a darkroom. Near-black panels, one loud colour — safelight red — for
today, the active view and a soft light that follows the pointer; neon event colours with a
glow; Space Grotesk for text and JetBrains Mono for every number and time. Type chips on top,
the view in a rounded glass panel, a ticker of the next events at the bottom; the year as a red
heat map.

How the calendar works

The four calendar demos (demo21–demo24) share one engine, js/calendar.js (each demo keeps its own copy), and one structural stylesheet, css/calendar.css; each demo is its own markup and look.

• Views: Hours (one day split into hours, with quarter-hour labels), Day (the day's agenda), Week (7 columns of hours), Month (the current month plus the days of the next month up to the end of the last week, so the grid always ends on a Sunday), Three months, Year. Keys 1–6 switch views, ← → move, T today, N new event. The address keeps the view and date (?view=week&date=2026-10-18), so any view can be linked.
• 15-minute step: every start and end is a multiple of 15 minutes. On the Hours and Week grids a mouse drag on empty space creates an event, a drag on an event moves it (to another time or another day), a drag on its bottom edge stretches it — all snapped to 15 minutes; a click creates a one-hour slot. The editor's time fields use step="900" and round to the quarter.
• Data: about 300 demo events (shoots, castings, meetups, fittings, deadlines, publications with DEPO magazine names and people) generated around today with a seeded random, so they look the same on every visit; changes are kept in localStorage (per demo, depo-cal-<slug>), and "Reset demo events" brings the set back. Overlapping events share the column width.
• Types: six event types, each with a colour (CSS variables --c-shoot … --c-publish); the legend shows how many of each are in the visible range and hides / shows a type on click.

Look

• Type: Space Grotesk for titles and text; JetBrains Mono for every number, time and label.
• Palette: background #0c0c0e, panels #141417 / #1b1b20, text #ecebe6, muted #8b8a92, safelight #ff4b36; types: shoot red, casting lilac #c98bff, meetup cyan #4fc3ff, fitting amber #ffb547, deadline pink #ff3d7f, publication mint #7dffb0.
• Layout: a top bar (DEPO/darkroom, the big title, a blinking status line; the segmented view switch and the step buttons on the right), type chips, the view in a rounded glass panel, a "Next up" ticker. Month cells put the number top right; on phones events become glowing bars.
• Motion: the pointer-following safelight (CSS variables set on pointermove, off with reduced motion), a blinking status dot, glows on hover.

Built with

Borrowed

Nothing borrowed: the calendar engine, its layout algorithm and the demo data are written for these demos. Event titles use DEPO's own magazine names and first-page people.

Config

None — static page.

Notes

• The safelight is a fixed radial gradient behind the page, so it costs no layout.