Cover Month

Summary

The calendar in DEPO's favourite language (demo5): a pale green-grey ground, deep green and Schibsted Grotesk at weight 900. The left third of the screen is a magazine cover — a photo from the shared set that cross-fades when the month changes, the month's magazine name set to the full width, a lime kicker with the event count, the title and a cover line for the month, and the event types. The calendar sits on a white card to the right; the year view drops the card and shows twelve photo covers, each with its month's days shaded by how busy they are.

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 magazine cover beside the calendar, in the language of the favourite
DEPO home page: pale green-grey ground, deep green, lime accents, Schibsted Grotesk up to weight
900. The left third is a cover — a photo from the shared set that cross-fades with the month,
the month's magazine name filling the width, a cover line, the types; the calendar sits on a
white card; month days are separate white tiles; the year is twelve photo covers with busy days
shaded.

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: Schibsted Grotesk 400–900 throughout; the magazine name is fitted to the cover width by JS.
• Palette: ground #e7ece6, card #f4f6f2, ink #13261d, deep green #17382b (today, active view), lime #c8f06a (kicker, add button, next-month label), types in clear colours (purple #7a4bc2, blue #1f6fbf, orange #d5652b, red #c42f3c, ochre #a88a14).
• Layout: cover (34vw) + calendar column (pill view switch, round step buttons, the white card, a foot line). Month cells are separate white tiles with 6px gaps; today is a solid green tile. Below 900 px the cover stacks above the calendar.
• Motion: the cover photo cross-fades and settles from a slight zoom (0.9 s / 6 s), cards lift 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

• Photos: /_img/photos/photo-NN.jpg, one per month (year × 12 + month, modulo 30).