Raster

Summary

The calendar as International Typographic Style: a strict grid of black rules, one red, condensed numerals. The head is a giant number (the day, the month or the year on screen) with a red dot, the title in condensed capitals and the step buttons in a ruled box; the six views are numbered tabs with a red bar under the active one. Event types are told apart by shape as well as colour (square, circle, outlined square), so they read in black and white.

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 Swiss poster. Off-white, black 2 px rules and hairlines, one red;
Archivo from condensed to normal width; a giant number in the corner (the day, month or year on
screen), numbered view tabs 01–06 with a red bar, event types told apart by shape as well as
colour (square, circle, outlined square), no rounded corners, no shadows except a hard red
offset while dragging.

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: Archivo variable — width 62 % for numerals and titles, 75–100 % for text, weights 400–900.
• Palette: #f6f5f1 paper, #0d0d0d ink, #6b6b66 muted, red #e3241b; types: black, red, blue #1b4fe3, orange #f29a13, green #0a8a5a.
• Layout: head (giant number · title · step box), numbered view tabs, the view framed by 2px rules, a foot with the type legend and the note. Week events are white boxes with a 2px black border and a type marker in the corner; dragging gives a hard red offset shadow; the year is a ruled table with busy days underlined by bars of growing weight.
• Motion: none — hover inverts to black.

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 type shapes (square / circle / outline) are drawn in CSS from data-cat.