Almanac

Summary

A planner for the people of DEPO — shoots, castings, meetups, fittings, deadlines and publications — dressed as a printed almanac. The rail on the left keeps the month title, a small month for jumping to a day, the event types with their counts (click to hide one) and the next six events; the main area holds the view switch and the view. The month view is a ruled table with big light serif numbers, a dotted list of events per day and the first days of the next month hatched in.

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 printed almanac. Warm paper with a fine dot grain, ink and one deep
green; Fraunces with large light optical-size numerals and italic navigation, Instrument Sans
for labels; hairline rules. A left rail holds the big month title, a small month for jumping,
the event types with counts and the next events; the month view is a ruled table with the next
month's days hatched. Quiet, editorial, no motion beyond hover.

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: Fraunces (variable, optical size 144 for the big numbers, italic for the view names and notes); Instrument Sans for labels and event text.
• Palette: paper #f3efe6 with a fine dot grain, ink #1d1b17, muted #6f685b, deep green #1f4d3a (today, buttons); event types in muted print colours — green, plum #6b3f7a, ink blue #2b5784, terracotta #b0582a, crimson #a3222c, ochre #9a7a1c.
• Layout: masthead with the DEPO wordmark and "New event"; a 19rem rail (title, small month, types, coming up, reset) and the main column (prev / today / next, the views in italic serif, the view). Below 1000 px the rail moves on top; below 640 px the month shows coloured dots instead of titles.
• Motion: none beyond hover states; dragging on the grids is the motion.

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

• Day view puts the day number in a 9rem serif beside the agenda; Hours view labels every quarter-hour.