@0001-labs/design-system-1 0.3.0-alpha.27 → 0.3.0

package/dist/3-unit/ds-calendar.js

@@ -1,7 +1,17 @@
 // ds-calendar.ts
-// A month on whole squares: seven days across, a week to a row. By default a
+// A month on whole squares: seven days across, a week to a row. `view` shows
+// one week instead (every event of each day, nothing folded behind "+N") or one
+// day (its events without a time across the top, then its hours, one square
+// each, with the timed events at their hour) or a swimlane (weeks across, a
+// row to an event, each event one bar from its first week to its last);
+// `views` puts Day, Week, Month and Swimlane in the header to change between
+// them. An event over several days is one bar
+// with its name written once, and words that do not fit fade out at the end.
+// By default a
 // day is four squares wide and four high (its date on the first square, two
-// lines of events, one square to spare), drawn in hairline boxes. `compact`
+// lines of events, one square to spare), drawn in hairline boxes with a frame
+// rounded more than a card's; the first week names its days inside its boxes,
+// and a step back, Today and a step on are one plain split. `compact`
 // makes a day one square: the small month a year is drawn from. `picker`
 // makes the calendar a field that opens that small month below it, with the
 // first and last day written out where they can be typed, a switch for a
@@ -13,16 +23,128 @@
 // and a time, or two of them joined by a slash.
 import { html, nothing, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import { getText } from "../0-face/i18n";
 import { dateFormatter } from "../0-face/format";
-import { addMonths, dateNumber, dayOf, eventsByDay, heatLevels, isDay, isoWeek, monthName, monthTitle, monthWeeks, sameMonth, startOfMonth, weekdayNames, } from "../0-face/calendar";
+import { addDays, addMonths, compareDays, dateNumber, dayLabel, dayOf, eventsByDay, heatLevels, isDay, isoWeek, monthName, monthTitle, monthWeeks, sameMonth, startOfMonth, weekdayNames, weekdayOf, } from "../0-face/calendar";
 import { CalendarBase, readMonth, readRange } from "./calendar-base";
 import "../2-core/ds-icon";
+import "../2-core/ds-button";
 import metrics from "../1-root/component-metrics.css?inline";
 import controls from "../1-root/controls.css?inline";
 import styles from "./styles/ds-calendar.css?inline";
 export * from "./calendar-base";
+/** An activity day's fill: one colour, or bands side by side when several share it. */
+function activityFill(events) {
+    if (!events.length)
+        return undefined;
+    const colours = [...new Set(events.map(event => event.color || "var(--ds-calendar-event-fill, var(--ds-apple-green))"))];
+    if (colours.length === 1)
+        return colours[0];
+    const share = 100 / colours.length;
+    return `linear-gradient(90deg, ${colours.map((colour, index) => `${colour} ${index * share}% ${(index + 1) * share}%`).join(", ")})`;
+}
 const whole = (value, least, most, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.max(least, Math.min(most, Math.floor(value))) : fallback;
+/** The views in the header, the shortest first, with their shared words. */
+const VIEWS = [["day", "Day"], ["week", "Week"], ["month", "Month"], ["swimlane", "Swimlane"]];
+const isView = (value) => VIEWS.some(([view]) => view === value);
+/** `views` as an attribute: present and empty for every view the calendar draws, or the views to offer, in order. */
+const viewsConverter = {
+    fromAttribute: (value) => {
+        if (value === null || value === "false")
+            return false;
+        const list = value.split(/[\s,]+/).filter(Boolean);
+        return list.length === 0 || value === "true" ? true : list;
+    },
+    toAttribute: (value) => (Array.isArray(value) ? value.join(" ") : value ? "" : null),
+};
+/**
+ * Lays events out as a swimlane over `weeks` (each the first day of a week
+ * of seven): one row each, in the order `eventsByDay` lists them (by first
+ * day, the longer first), each a bar from the week holding its first day to
+ * the week holding its last, held inside the weeks drawn. Events wholly
+ * outside them are left out.
+ */
+export function swimlaneBars(events, weeks) {
+    if (!weeks.length)
+        return [];
+    const first = weeks[0], last = addDays(weeks.at(-1), 6);
+    const seen = new Set();
+    const ordered = [];
+    for (const list of eventsByDay(events, first, last).values())
+        for (const event of list)
+            if (!seen.has(event)) {
+                seen.add(event);
+                ordered.push(event);
+            }
+    ordered.sort((a, b) => compareDays(a.start, b.start) || compareDays(endOf(b), endOf(a)));
+    const weekOf = (day) => Math.max(0, Math.min(weeks.length - 1, Math.floor(daysBetween(first, day) / 7)));
+    return ordered.map((event, row) => ({ event, row, from: weekOf(event.start < first ? first : event.start), to: weekOf(endOf(event) > last ? last : endOf(event)) }));
+}
+/** An event's last day: its end, or its start for one day. */
+const endOf = (event) => (event.end && isDay(event.end) && event.end > event.start ? event.end : event.start);
+/** Whole days from `from` to `to`. */
+const daysBetween = (from, to) => Math.round((Date.UTC(+to.slice(0, 4), +to.slice(5, 7) - 1, +to.slice(8, 10)) - Date.UTC(+from.slice(0, 4), +from.slice(5, 7) - 1, +from.slice(8, 10))) / 864e5);
+/**
+ * Lays one week's events on lines, so an event over several days keeps its
+ * line and is one bar with its name written once: each event takes the
+ * lowest line free on all its days in the week, longest first as `byDay`
+ * lists them. A day whose events need more lines than `lines` keeps the last
+ * one for "+N", and a bar breaks there and goes on after it; `shown` says
+ * which days are drawn at all (a bar stops at a day that is not).
+ */
+export function weekLines(week, byDay, lines, shown = () => true) {
+    const lineOf = new Map();
+    const taken = week.map(() => new Set());
+    week.forEach((day, column) => {
+        for (const event of byDay.get(day) ?? []) {
+            if (lineOf.has(event))
+                continue;
+            const columns = [];
+            for (let next = column; next < week.length && (byDay.get(week[next]) ?? []).includes(event); next++)
+                columns.push(next);
+            let line = 0;
+            while (columns.some(next => taken[next].has(line)))
+                line++;
+            lineOf.set(event, line);
+            for (const next of columns)
+                taken[next].add(line);
+        }
+    });
+    // How many lines each day draws: all of them, or one fewer for "+N".
+    const room = week.map(day => {
+        if (!shown(day))
+            return 0;
+        const events = byDay.get(day) ?? [];
+        const deepest = Math.max(-1, ...events.map(event => lineOf.get(event)));
+        return deepest < lines ? lines : Math.max(0, lines - 1);
+    });
+    return week.map((day, column) => {
+        const events = byDay.get(day) ?? [];
+        const drawn = [];
+        for (let line = 0; line < room[column]; line++) {
+            const event = events.find(candidate => lineOf.get(candidate) === line);
+            if (!event) {
+                drawn.push(null);
+                continue;
+            }
+            const before = column > 0 && line < room[column - 1] && (byDay.get(week[column - 1]) ?? []).includes(event);
+            if (before) {
+                drawn.push("on");
+                continue;
+            }
+            let span = 1;
+            while (column + span < week.length && line < room[column + span] && (byDay.get(week[column + span]) ?? []).includes(event))
+                span++;
+            drawn.push({ event, span });
+        }
+        // Drop the empty lines at the foot, so a quiet day draws nothing under its date.
+        while (drawn.length && drawn.at(-1) === null)
+            drawn.pop();
+        const hidden = room[column] < lines ? events.filter(event => lineOf.get(event) >= room[column]).length : 0;
+        return { lines: drawn, hidden };
+    });
+}
 const TIME = /^([01]\d|2[0-3]):([0-5]\d)$/;
 /** Reads a value: `2026-10-21`, `2026-10-21T14:30`, or two of them joined by `/`. */
 export function readDateValue(value) {
@@ -73,12 +195,38 @@ const openPickers = new Set();
  *   small month.
  * @prop {number} dayWidth - Squares per day (`day-width`): 4 by default, 1
  *   when compact.
+ * @prop {string} view - `month` (the default), `week`, `day` or `swimlane`:
+ *   the weeks from the month shown across (a week half a day wide, so it is
+ *   as wide as the month), each event one row with one bar from its first
+ *   week to its last. A compact calendar and a picker are always a month.
+ * @prop {boolean | string[]} views - Day, Week, Month and Swimlane in the
+ *   header, to change `view`; or the views to offer, in order
+ *   (`views="month swimlane"`). A name the calendar does not draw is the
+ *   page's own view: chosen, the calendar keeps its header (the month's title,
+ *   the arrows moving a month) and shows what the page puts in its slot of
+ *   that name (`<div slot="earnings">`) in place of the days.
+ * @prop {Record<string, string>} viewNames - The words for each view in the
+ *   switch (property only), over the shared Day, Week, Month and Swimlane;
+ *   a page's own view is named by its name when left out.
+ * @prop {string} date - The day the week or day view shows, `YYYY-MM-DD`;
+ *   today, or the first of the month shown, by default.
  * @prop {number} lines - Lines of events under a day's date: 2 by default.
  * @prop {boolean} weekNumbers - Write the week's number (`week-numbers`) on
  *   its first day.
- * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height.
+ * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height,
+ *   and every other view stands in that same height (the weekdays and six
+ *   weeks): the week's days grow to it, the day's hours fill it, the
+ *   swimlane's rows fill it and scroll beyond it, and a page's own view gets
+ *   it, so nothing under the calendar moves when the view changes.
  * @prop {boolean} outsideDays - Draw the days of the months before and after
  *   in the title grey (`outside-days`); pressing one moves there.
+ * @prop {boolean} activity - The days as quiet squares, a contribution grid:
+ *   weeks across a square each, as the swimlane runs, and the days down them,
+ *   every other weekday named before them and the month over its weeks; a
+ *   day on which something happens is filled with its events' colours, split
+ *   into bands when several share it. Dates stay in each day's name and
+ *   tooltip. Takes the place of the large calendar's months in squares.
+ * @prop {number} months - How many months activity draws from `month`: 1 by default.
  * @prop {boolean} heat - Light each day by how much happens on it, as a
  *   contribution graph does: the events' `count`s added up (one each by
  *   default), in four steps of the busiest day shown.
@@ -87,7 +235,12 @@ const openPickers = new Set();
  *   by default.
  * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
  *   With a header, pressing the title travels by months and years: the
- *   twelve months of the year, then twelve years, and back down.
+ *   twelve months of the year, then twelve years, and back down. With a
+ *   header, a swipe sideways across the days (a finger or a pen), or a
+ *   trackpad's sideways scroll, does what the arrows do, the next month
+ *   towards the start and the one before towards the end, and stops where
+ *   they stop; the days take sideways touches for it, so a carousel or a
+ *   page around the calendar does not move with them.
  * @prop {boolean} noToday - Leave out the Today button (`no-today`).
  * @prop {string} min - The first day a person may choose.
  * @prop {string} max - The last day a person may choose.
@@ -106,6 +259,11 @@ const openPickers = new Set();
  * @prop {boolean} disabled - A picker cannot be opened.
  * @prop {boolean} open - A picker's month is open.
  * @prop {CalendarEvent[]} events - What happens on the days (property only).
+ * @prop {(month: Date, view: string) => string} monthHeading - Names the month view's title, and a page's own view's,
+ *   (property only): given the first of the month shown, it returns the words,
+ *   so a product can write "Events in October" instead of "October 2026". The
+ *   week and day views, the twelve months and the twelve years keep their own
+ *   titles, and the title button's label still says what it opens.
  *
  * @fires day-press - A day was pressed or chosen with Enter or Space;
  *   `{ day, events }`. Cancelable: cancelled, a selectable calendar keeps its value.
@@ -113,7 +271,8 @@ const openPickers = new Set();
  *   `{ value, previous, start, end }`, `end` empty while it is still to come.
  * @fires input - A picker's value changed, the same moment as `change`.
  * @fires event-press - An event was pressed; `{ event, day }`.
- * @fires navigate - A person moved to another month; `{ month }`.
+ * @fires navigate - A person moved to another month, week or day; `{ month }`.
+ * @fires view-change - A person chose another view; `{ view }`.
  * @fires ds-calendar-toggle - A picker's month opened or closed; `{ open }`.
  *
  * A selectable calendar shows Clear right under its dates while something is chosen, and `clear()`
@@ -127,6 +286,8 @@ const openPickers = new Set();
 export class Calendar extends CalendarBase {
     constructor() {
         super();
+        /** Words cut short (the title, a weekday, the picker's value, an event's name on its bar) fade over their last square, never "…": marks them `data-cut="end"` while they do not fit. */
+        this.cuts = new CutFades(this, { selector: ".title:not(.title-button), .title-text, .weekday, .trigger .text, .event .name, .swimlane-month" });
         this.weeksRun = "rows";
         this.byDay = new Map();
         this.heatByDay = new Map();
@@ -136,6 +297,15 @@ export class Calendar extends CalendarBase {
         this.shown = false;
         /** Whether opening a picker should move focus into the month (a key opened it). */
         this.focusMonth = false;
+        /** The split button's choice; its own change event stays inside, since a calendar's change is a chosen day. */
+        this.onViewChange = (event) => {
+            event.stopPropagation();
+            const view = event.detail?.value;
+            if (view && (isView(view) || this.viewChoices.includes(view)))
+                this.showView(view);
+        };
+        /** Each shown day's lines of events, laid out a week at a time in render(). */
+        this.laidOut = new Map();
         // Travelling by months and years: the title goes up a level, a choice comes back down.
         /** A person has moved between levels, so a level's grid fades in when it comes. */
         this.travelled = false;
@@ -207,10 +377,50 @@ export class Calendar extends CalendarBase {
             if (!target)
                 return;
             event.preventDefault();
-            if (!sameMonth(target, this.shownMonth))
-                this.showMonth(target, true);
+            this.bringIntoView(target);
             void this.focusCell(target);
         };
+        this.swipedAt = 0;
+        this.wheel = { dx: 0, at: 0, locked: 0 };
+        this.onSwipeStart = (event) => {
+            this.swipe = event.pointerType === "mouse" || !event.isPrimary ? undefined : { id: event.pointerId, x: event.clientX, y: event.clientY, at: event.timeStamp };
+        };
+        this.onSwipeEnd = (event) => {
+            const swipe = this.swipe;
+            this.swipe = undefined;
+            if (!swipe || event.pointerId !== swipe.id)
+                return;
+            const dx = (event.clientX - swipe.x) * (this.rtl ? -1 : 1);
+            const dy = event.clientY - swipe.y;
+            if (Math.abs(dx) < 40 || Math.abs(dx) < Math.abs(dy) * 2 || event.timeStamp - swipe.at > 800)
+                return;
+            // A day the swipe started on is not pressed by it.
+            if (this.swipeTo(dx < 0 ? 1 : -1))
+                this.swipedAt = Date.now();
+        };
+        this.onSwipeWheel = (event) => {
+            if (Math.abs(event.deltaX) <= Math.abs(event.deltaY))
+                return;
+            event.preventDefault();
+            const now = Date.now();
+            if (now < this.wheel.locked)
+                return;
+            if (now - this.wheel.at > 200)
+                this.wheel.dx = 0;
+            this.wheel.at = now;
+            this.wheel.dx += event.deltaX * (this.rtl ? -1 : 1);
+            if (Math.abs(this.wheel.dx) < 60)
+                return;
+            const direction = this.wheel.dx > 0 ? 1 : -1;
+            this.wheel = { dx: 0, at: 0, locked: now + 500 };
+            this.swipeTo(direction);
+        };
+        this.onSwipeClick = (event) => {
+            if (Date.now() - this.swipedAt > 400)
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        };
         this.onClick = (event) => {
             const path = event.composedPath();
             const find = (selector) => path.find(node => node instanceof HTMLElement && node.matches(selector));
@@ -233,8 +443,7 @@ export class Calendar extends CalendarBase {
             this.focusDay = day;
             this.press(day);
             // A day of the month before or after takes the calendar there.
-            if (!sameMonth(day, this.shownMonth))
-                this.showMonth(day, true);
+            this.bringIntoView(day);
         };
         /** While a range waits for its end, the day under the pointer previews it. */
         this.onPointerOver = (event) => {
@@ -249,7 +458,7 @@ export class Calendar extends CalendarBase {
             if (this.unfolded && !(event.relatedTarget instanceof Node && this.renderRoot.contains(event.relatedTarget)))
                 this.unfolded = undefined;
         };
-        /** Below the field, half a square from it, or above when there is more room there; held inside the screen. */
+        /** Directly against the field, or above when there is more room there; held inside the screen. */
         this.place = () => {
             const panel = this.panel, trigger = this.trigger;
             if (!this.shown || !panel || !trigger)
@@ -260,7 +469,7 @@ export class Calendar extends CalendarBase {
             const left = viewport?.offsetLeft ?? 0, top = viewport?.offsetTop ?? 0;
             const width = viewport?.width ?? view.innerWidth, height = viewport?.height ?? view.innerHeight;
             const box = panel.getBoundingClientRect();
-            const gap = (parseFloat(getComputedStyle(panel).paddingTop) || 9) + 1;
+            const gap = 0;
             // The face is one control high at the foot of its square: measure from that square.
             const square = Math.max(rect.height, gap * 2);
             const foot = rect.bottom, head = rect.bottom - square;
@@ -336,11 +545,14 @@ export class Calendar extends CalendarBase {
         };
         this.compact = false;
         this.weekNumbers = false;
+        this.view = "month";
+        this.views = false;
         this.fixed = false;
         this.outsideDays = false;
         this.noHeader = false;
         this.noToday = false;
         this.heat = false;
+        this.activity = false;
         this.picker = false;
         this.time = false;
         this.required = false;
@@ -377,6 +589,79 @@ export class Calendar extends CalendarBase {
     eventsOn(day) {
         return this.byDay.get(day) ?? [];
     }
+    /** The view drawn: a compact calendar and a picker are always a month. */
+    get shownView() {
+        if (this.picker || this.compact)
+            return "month";
+        if (isView(this.view))
+            return this.view;
+        return this.viewChoices.includes(this.view) ? this.view : "month";
+    }
+    /** The views offered in the header, in order: every one the calendar draws, or the page's list. */
+    get viewChoices() {
+        const views = this.views;
+        if (Array.isArray(views))
+            return [...new Set(views.map(view => String(view).trim()).filter(Boolean))];
+        return views ? VIEWS.map(([view]) => view) : [];
+    }
+    /** Whether the view shown is the page's own, drawn in its slot. */
+    get ownView() {
+        return !isView(this.shownView);
+    }
+    /** A view's words in the switch: the page's, else the shared ones, else its name. */
+    viewName(view) {
+        const shared = VIEWS.find(([choice]) => choice === view)?.[1];
+        const word = this.viewNames?.[view] ?? (shared ? this.words(shared) : view);
+        // The switch's options are written `value:words,value:words`.
+        return word.replace(/,/g, " ");
+    }
+    /** Whether the view moves by days (a week or a day) rather than by months (a month or a swimlane). */
+    get byDays() {
+        const view = this.shownView;
+        return view === "week" || view === "day";
+    }
+    /** The day the week or day view shows: `date`, else today in the month shown, else its first. */
+    get shownDay() {
+        if (isDay(this.date))
+            return this.date;
+        const month = this.shownMonth;
+        return sameMonth(this.todayDay, month) ? this.todayDay : month;
+    }
+    /** The seven days of the week `day` falls in. */
+    weekOf(day) {
+        const start = addDays(day, -((weekdayOf(day) - this.firstDay + 7) % 7));
+        return Array.from({ length: 7 }, (_, index) => addDays(start, index));
+    }
+    /** Shows another week or day around `day`, and says so with `navigate`. */
+    showDay(day, announce = false) {
+        if (!isDay(day) || day === this.date)
+            return;
+        this.date = day;
+        this.month = day.slice(0, 7);
+        this.unfolded = undefined;
+        if (announce)
+            this.announceMonth(day);
+    }
+    /** Changes the view, as Day, Week and Month do, and says so with `view-change`. */
+    showView(view) {
+        if (view === this.shownView)
+            return;
+        if (!isDay(this.date))
+            this.date = this.shownDay;
+        this.view = view;
+        this.unfolded = undefined;
+        this.dispatchEvent(new CustomEvent("view-change", { bubbles: true, composed: true, detail: { view } }));
+    }
+    /** Brings a day into view: its month, its week or the day itself. */
+    bringIntoView(day) {
+        const view = this.shownView;
+        if (!this.byDays) {
+            if (!sameMonth(day, this.shownMonth))
+                this.showMonth(day, true);
+        }
+        else if (view === "day" || !this.weekOf(this.shownDay).includes(day))
+            this.showDay(day, true);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.style.setProperty("--ds-calendar-day-squares", String(this.squaresPerDay));
@@ -397,6 +682,14 @@ export class Calendar extends CalendarBase {
     }
     updated(changed) {
         super.updated(changed);
+        // A day opens its hours an hour before its first timed event, or at seven.
+        if (this.shownView === "day" && (changed.has("view") || changed.has("date") || changed.has("events"))) {
+            const hours = this.renderRoot.querySelector(".hours");
+            const first = hours?.querySelector(".hour[data-busy]")?.dataset.hour;
+            const open = hours?.querySelector(`.hour[data-hour="${Math.max(0, (first ? Number(first) : 8) - 1)}"]`);
+            if (hours && open)
+                hours.scrollTop = open.offsetTop;
+        }
         if (changed.has("value") || changed.has("required")) {
             this.internals?.setFormValue(this.value || null);
             if (this.required && !this.value)
@@ -433,6 +726,8 @@ export class Calendar extends CalendarBase {
     showToday() {
         this.level = "days";
         this.showMonth(this.todayDay, true);
+        if (this.shownView !== "month")
+            this.showDay(this.todayDay, true);
         this.focusDay = this.todayDay;
     }
     /** Empties the value, as Clear does, and says so with `change`. */
@@ -475,8 +770,12 @@ export class Calendar extends CalendarBase {
     }
     /** The arrows: a month among the days, a year among the months, twelve years among the years. */
     step(direction) {
-        if (this.level === "days")
+        if (this.level === "days") {
+            const view = this.shownView;
+            if (this.byDays)
+                return this.showDay(addDays(this.shownDay, direction * (view === "week" ? 7 : 1)), true);
             return direction < 0 ? this.previousMonth() : this.nextMonth();
+        }
         this.browseYear += direction * (this.level === "months" ? 1 : 12);
         if (this.level === "years")
             this.pickFocus = (this.pickFocus ?? this.browseYear) + direction * 12;
@@ -494,6 +793,8 @@ export class Calendar extends CalendarBase {
         const month = `${String(this.browseYear).padStart(4, "0")}-${String(value + 1).padStart(2, "0")}-01`;
         this.level = "days";
         this.showMonth(month, true);
+        if (this.shownView !== "month")
+            this.showDay(month, false);
         const day = [this.focusDay, this.chosen.start, this.todayDay].find(day => day && sameMonth(day, month)) ?? month;
         void this.focusCell(day);
     }
@@ -567,6 +868,16 @@ export class Calendar extends CalendarBase {
                 return day;
         return month;
     }
+    swipeTo(direction) {
+        const arrow = this.renderRoot.querySelector(`.header [part~="${direction < 0 ? "previous" : "next"}"]`);
+        if (!arrow || arrow.disabled)
+            return false;
+        this.step(direction);
+        return true;
+    }
+    get rtl() {
+        return getComputedStyle(this).direction === "rtl";
+    }
     renderHeader() {
         if (this.noHeader)
             return nothing;
@@ -577,26 +888,41 @@ export class Calendar extends CalendarBase {
         const level = this.level;
         const year = this.browseYear;
         const span = this.yearSpan;
-        const labels = { days: ["Previous month", "Next month"], months: ["Previous year", "Next year"], years: ["Earlier years", "Later years"] }[level];
-        const blocked = level === "days"
-            ? [before, after]
-            : level === "months"
-                ? [Boolean(min && year - 1 < Number(min.slice(0, 4))), Boolean(max && year + 1 > Number(max.slice(0, 4)))]
-                : [Boolean(min && span[0] - 1 < Number(min.slice(0, 4))), Boolean(max && span[0] + 12 > Number(max.slice(0, 4)))];
+        const view = this.shownView;
+        const labels = level === "days" && this.byDays
+            ? view === "week" ? ["Previous week", "Next week"] : ["Previous day", "Next day"]
+            : { days: ["Previous month", "Next month"], months: ["Previous year", "Next year"], years: ["Earlier years", "Later years"] }[level];
+        const shownDays = view === "week" ? this.weekOf(this.shownDay) : [this.shownDay];
+        const blocked = level === "days" && this.byDays
+            ? [Boolean(min && addDays(shownDays[0], -1) < min), Boolean(max && addDays(shownDays.at(-1), 1) > max)]
+            : level === "days"
+                ? [before, after]
+                : level === "months"
+                    ? [Boolean(min && year - 1 < Number(min.slice(0, 4))), Boolean(max && year + 1 > Number(max.slice(0, 4)))]
+                    : [Boolean(min && span[0] - 1 < Number(min.slice(0, 4))), Boolean(max && span[0] + 12 > Number(max.slice(0, 4)))];
         const arrow = (which) => html `<button
-      class="ds-button ds-button--icon nav"
+      class="nav"
       part=${which}
       type="button"
       aria-label=${this.words(labels[which === "previous" ? 0 : 1])}
       ?disabled=${blocked[which === "previous" ? 0 : 1]}
       @click=${() => this.step(which === "previous" ? -1 : 1)}
-    ><ds-icon type=${which === "previous" ? "chevron-left" : "chevron-right"} size="large" aria-hidden="true"></ds-icon></button>`;
+    ><ds-icon type=${(this.compact ? "chevron-" : "") + (which === "previous" ? "left" : "right")} size=${this.compact ? "large" : nothing} aria-hidden="true"></ds-icon></button>`;
         const title = level === "days"
-            ? monthTitle(month, this.compact ? "short" : "long")
+            ? view === "week"
+                ? this.rangeTitle(shownDays[0], shownDays[6])
+                : view === "day"
+                    ? dayLabel(this.shownDay)
+                    : view === "swimlane"
+                        ? this.monthRangeTitle(this.swimlaneWeeks)
+                        : this.monthHeading
+                            ? this.monthHeading(new Date(Number(month.slice(0, 4)), Number(month.slice(5, 7)) - 1, 1), view)
+                            : monthTitle(month, this.compact ? "short" : "long")
             : level === "months"
                 ? this.yearName(year)
                 : `${this.yearName(span[0])} – ${this.yearName(span[0] + 11)}`;
-        return html `<div class="header" part="header">
+        const switchable = this.viewChoices.length > 1 && !this.compact && !this.picker;
+        return html `<div class="header" part="header" ?data-views=${switchable}>
       ${level === "years"
             ? html `<span class="title" id="title" aria-live="polite">${title}</span>`
             : html `<button
@@ -606,26 +932,37 @@ export class Calendar extends CalendarBase {
             aria-label=${`${title}, ${this.words("Choose a month and year")}`}
             @click=${this.levelUp}
           ><span class="title-text" id="title" aria-live="polite">${title}</span></button>`}
-      <span class="controls">
-        ${this.noToday || this.squaresPerDay < 2 ? nothing : html `<button class="ds-button today-button" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>`}
+      ${switchable ? html `<ds-button
+        class="views"
+        part="views"
+        split
+        literal
+        aria-label=${this.words("View")}
+        .options=${this.viewChoices.map(choice => `${choice}:${this.viewName(choice)}`).join(",")}
+        .value=${view}
+        @change=${this.onViewChange}
+      ></ds-button>` : nothing}
+      <span class="controls" role="group" aria-label=${this.words("Date")}>
         ${arrow("previous")}
+        ${this.noToday || this.squaresPerDay < 2 ? nothing : html `<button class="today-button" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>`}
         ${arrow("next")}
       </span>
     </div>`;
     }
-    renderDay(day, column) {
-        const month = this.shownMonth;
-        const outside = !sameMonth(day, month);
-        if (outside && !this.outsideDays)
-            return html `<div role="gridcell" class="day outside" part="day outside"></div>`;
+    renderDay(day, inView = sameMonth(day, this.shownMonth), tabDay = this.tabDay, label) {
+        const outside = !inView;
+        if (outside && !this.outsideDays) {
+            return html `<div role="gridcell" class="day outside" part="day outside">${label?.weekday || label?.week
+                ? html `<span class="date-line" aria-hidden="true">${this.renderLabel(label)}</span>`
+                : nothing}</div>`;
+        }
         const events = this.eventsOn(day);
         const lines = this.eventLines;
         const isToday = day === this.todayDay;
         const { selected, inside, first, last } = this.selection(day);
         const allowed = this.allowed(day);
         const unfolded = this.unfolded === day;
-        const shown = unfolded || events.length <= lines ? events : events.slice(0, Math.max(0, lines - 1));
-        const hidden = events.length - shown.length;
+        const laid = this.laidOut.get(day) ?? { lines: [], hidden: 0 };
         const heat = this.heatByDay.get(day);
         const parts = ["day", isToday ? "today" : "", selected ? "selected" : "", heat ? "heat" : ""].filter(Boolean).join(" ");
         return html `<div
@@ -633,7 +970,7 @@ export class Calendar extends CalendarBase {
       class="day"
       part=${parts}
       data-day=${day}
-      tabindex=${!outside && day === this.tabDay ? 0 : -1}
+      tabindex=${!outside && day === tabDay ? 0 : -1}
       aria-label=${this.cellLabel(day, events)}
       aria-selected=${this.selectable ? String(selected || inside) : nothing}
       aria-current=${isToday ? "date" : nothing}
@@ -649,29 +986,302 @@ export class Calendar extends CalendarBase {
       ?data-open=${unfolded}
     >
       <span class="date-line" aria-hidden="true">
-        ${this.weekNumbers && column === 0 && !this.compact ? html `<span class="week-number">${this.words("W{week}", { week: isoWeek(day) })}</span>` : nothing}
+        ${label ? this.renderLabel(label) : nothing}
         <span class="date">${dateNumber(day)}</span>
       </span>
       ${lines > 0 && events.length
             ? html `<span class="events" aria-hidden="true">
-            ${shown.map(event => html `<span
-              class="event"
-              part="event"
-              data-event=${events.indexOf(event)}
-              style=${event.color ? `--ds-calendar-event-fill: ${event.color}; --ds-calendar-event-ink: var(--ds-slate)` : nothing}
-            >${event.time ? html `<span class="time">${event.time}</span>` : nothing}<span class="name">${event.title}</span></span>`)}
-            ${hidden > 0 && !unfolded ? html `<span class="more" part="more" data-more>+${hidden}</span>` : nothing}
+            ${unfolded
+                ? events.map(event => this.renderEvent(event, events, 1))
+                : laid.lines.map(line => line === null || line === "on"
+                    ? html `<span class="line" data-line=${line ?? "empty"}></span>`
+                    : this.renderEvent(line.event, events, line.span))}
+            ${laid.hidden > 0 && !unfolded ? html `<span class="more" part="more" data-more>+${laid.hidden}</span>` : nothing}
           </span>`
             : nothing}
     </div>`;
     }
+    /** What a day writes before its date: its weekday's name in the first week, and the week's number on its first day. */
+    renderLabel(label) {
+        return html `${label.weekday ? html `<span class="weekday-name" ?data-today=${label.today}>${label.weekday}</span>` : nothing}${label.week
+            ? html `<span class="week-number">${this.words("W{week}", { week: label.week })}</span>`
+            : nothing}`;
+    }
+    /** A week's days as one title: "Oct 18 – 24, 2026", in the language's own way. */
+    rangeTitle(from, to) {
+        const format = dateFormatter({ month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
+        const at = (day) => Date.UTC(Number(day.slice(0, 4)), Number(day.slice(5, 7)) - 1, Number(day.slice(8, 10)), 12);
+        return typeof format.formatRange === "function" ? format.formatRange(at(from), at(to)) : `${format.format(at(from))} – ${format.format(at(to))}`;
+    }
+    /** The first day of each week a swimlane draws: from the week holding the month's first, a week to each square the month has across. */
+    get swimlaneWeeks() {
+        const first = this.shownMonth;
+        const start = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7));
+        const count = Math.max(4, 7 * this.squaresPerDay);
+        return Array.from({ length: count }, (_, index) => addDays(start, index * 7));
+    }
+    /** The month owning most of a week: its Thursday's, counted from the week's first day. */
+    ownerOf(weekStart) {
+        return startOfMonth(addDays(weekStart, 3));
+    }
+    /** The months a swimlane covers as one title: "Oct 2026 – Jan 2027". */
+    monthRangeTitle(weeks) {
+        const from = this.ownerOf(weeks[0]), to = this.ownerOf(weeks.at(-1));
+        const format = dateFormatter({ month: "short", year: "numeric", timeZone: "UTC" });
+        const at = (day) => Date.UTC(Number(day.slice(0, 4)), Number(day.slice(5, 7)) - 1, 15);
+        if (from === to)
+            return monthTitle(from);
+        return typeof format.formatRange === "function" ? format.formatRange(at(from), at(to)) : `${format.format(at(from))} – ${format.format(at(to))}`;
+    }
+    /**
+     * The events as a swimlane: weeks across, a square each; over them the
+     * months, named where the month owning the week changes, and each week's
+     * first date (today's date in its disc on today's week); then a row to an
+     * event, a square high, each one bar from its first week to its last.
+     */
+    renderSwimlane() {
+        const weeks = this.swimlaneWeeks;
+        const bars = swimlaneBars(this.events ?? [], weeks);
+        // Fixed, the rows (a square each) fill the month's height under the months and dates, and scroll past it.
+        const fit = this.fixed ? Math.max(1, 6 * (this.eventLines + 2) - 1) : 6;
+        const rows = Math.max(fit, bars.length + 1);
+        const today = this.todayDay;
+        const todayWeek = weeks.findIndex(start => today >= start && today <= addDays(start, 6));
+        const months = [];
+        weeks.forEach((start, column) => {
+            const month = this.ownerOf(start);
+            const last = months.at(-1);
+            if (last && last.month === month)
+                last.span++;
+            else
+                months.push({ column, span: 1, month });
+        });
+        const range = (event) => {
+            const end = event.end && isDay(event.end) && event.end > event.start ? event.end : event.start;
+            return end === event.start ? dayLabel(event.start) : this.rangeTitle(event.start, end);
+        };
+        return this.swipeFrame(html `<div
+        class="swimlane"
+        part="swimlane"
+        role="group"
+        ?data-travel=${this.travelled}
+        aria-label=${this.nameOr(this.monthRangeTitle(weeks))}
+        style=${`--ds-calendar-weeks: ${weeks.length}; --ds-calendar-rows: ${rows}; --ds-calendar-fit: ${fit}`}
+      >
+        <div class="swimlane-months" part="months" aria-hidden="true">
+          ${months.map(({ column, span, month }, index) => html `<span class="swimlane-month" style=${`grid-column: ${column + 1} / span ${span}`}>${index === 0 || month.slice(5, 7) === "01" ? monthTitle(month, "short") : monthName(month, "short")}</span>`)}
+        </div>
+        <div class="swimlane-dates" part="dates" aria-hidden="true">
+          ${weeks.map((start, column) => column === todayWeek
+            ? html `<span class="swimlane-date" data-today><span class="date">${dateNumber(today)}</span></span>`
+            : html `<span class="swimlane-date"><span class="date">${dateNumber(start)}</span></span>`)}
+        </div>
+        <div class="swimlane-scroll" part="scroll"><div class="swimlane-grid" part="grid">
+          ${Array.from({ length: rows }, (_, row) => weeks.map((_, column) => html `<span
+            class="cell"
+            aria-hidden="true"
+            style=${`grid-row: ${row + 1}; grid-column: ${column + 1}`}
+            ?data-first-row=${row === 0}
+            ?data-last-row=${row === rows - 1}
+            ?data-first-column=${column === 0}
+            ?data-last-column=${column === weeks.length - 1}
+          ></span>`))}
+          ${bars.map(({ event, row, from, to }, index) => {
+            const fill = event.color ? `--ds-calendar-event-fill: ${event.color}; --ds-calendar-event-ink: var(--ds-slate); ` : "";
+            return html `<button
+              type="button"
+              class="event"
+              part="event"
+              data-event=${index}
+              aria-label=${`${event.title}, ${range(event)}`}
+              style=${`${fill}grid-row: ${row + 1}; grid-column: ${from + 1} / ${to + 2}`}
+              @click=${() => this.pressEvent(event, event.start)}
+            ><span class="name">${event.title}</span></button>`;
+        })}
+        </div></div>
+      </div>`);
+    }
+    /** The first day of each week activity draws: from the week holding the month's first to the one holding its last month's last day. */
+    get activityWeeks() {
+        const first = this.shownMonth;
+        const end = addDays(addMonths(first, whole(this.months, 1, 36, 1)), -1);
+        const weeks = [];
+        for (let day = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7)); day <= end; day = addDays(day, 7))
+            weeks.push(day);
+        return weeks;
+    }
+    /**
+     * The days as quiet squares: every other weekday named down the start, the
+     * months over their weeks, and a week to a column a square wide, its days
+     * down it, each a square drawn two pixels in with a picture's corners,
+     * filled with its events' colours. Days outside the months stay empty.
+     */
+    renderActivity() {
+        const weeks = this.activityWeeks;
+        const first = this.shownMonth;
+        const end = addMonths(first, whole(this.months, 1, 36, 1));
+        this.byDay = eventsByDay(this.events ?? [], weeks[0], addDays(weeks.at(-1), 6));
+        const short = weekdayNames(this.firstDay, "short");
+        const narrow = weekdayNames(this.firstDay, "narrow");
+        const long = weekdayNames(this.firstDay, "long");
+        const today = this.todayDay;
+        const months = [];
+        // A week is named by the month owning most of it, held to the months drawn.
+        const lastMonth = addMonths(end, -1);
+        weeks.forEach((start, column) => {
+            const owner = this.ownerOf(start);
+            const month = owner < first ? first : owner > lastMonth ? lastMonth : owner;
+            const last = months.at(-1);
+            if (last && last.month === month)
+                last.span++;
+            else
+                months.push({ column, span: 1, month });
+        });
+        return html `<div class="calendar" part="calendar">
+      ${this.renderHeader()}
+      <div class="activity" part="activity" style=${`--ds-calendar-weeks: ${weeks.length}`}>
+        <div class="activity-rail" part="weekdays" aria-hidden="true">
+          ${short.map((name, row) => html `<span class="activity-weekday" data-narrow=${narrow[row]}>${row % 2 === 1 ? name : ""}</span>`)}
+        </div>
+        <div class="activity-weeks">
+          <div class="activity-months" part="months" aria-hidden="true">
+            ${months.map(({ column, span, month }, index) => html `<span class="activity-month" style=${`grid-column: ${column + 1} / span ${span}`}>${index === 0 || month.slice(5, 7) === "01" ? monthTitle(month, "short") : monthName(month, "short")}</span>`)}
+          </div>
+          <div
+            class="activity-grid"
+            part="grid"
+            role="grid"
+            aria-label=${this.nameOr(months.length > 1 ? this.monthRangeTitle(weeks) : monthTitle(first))}
+            @click=${this.onClick}
+          >
+            ${short.map((_, row) => html `<div role="row" class="activity-row">
+              <span role="rowheader" class="activity-hidden">${long[row]}</span>
+              ${weeks.map((start, column) => {
+            const day = addDays(start, row);
+            const style = `grid-row: ${row + 1}; grid-column: ${column + 1}`;
+            if (day < first || day >= end)
+                return html `<span role="gridcell" class="activity-day" aria-hidden="true" style=${style}></span>`;
+            const events = this.eventsOn(day);
+            const fill = activityFill(events);
+            const label = this.cellLabel(day, events);
+            const { selected } = this.selection(day);
+            return html `<span
+                  role="gridcell"
+                  class="activity-day"
+                  part=${["day", day === today ? "today" : "", events.length ? "filled" : ""].filter(Boolean).join(" ")}
+                  data-day=${day}
+                  aria-label=${label}
+                  title=${label}
+                  aria-current=${day === today ? "date" : nothing}
+                  aria-selected=${this.selectable ? String(selected) : nothing}
+                  ?data-filled=${events.length > 0}
+                  ?data-selected=${selected}
+                  style=${`${style};${fill ? ` --ds-calendar-cell-fill: ${fill};` : ""}`}
+                ></span>`;
+        })}
+            </div>`)}
+          </div>
+        </div>
+      </div>
+    </div>`;
+    }
+    /** A view drawn under the header that swipes as the arrows move: the swimlane and a page's own view. */
+    swipeFrame(content) {
+        const swipes = !this.noHeader;
+        return html `<div
+      class="calendar"
+      part="calendar"
+      ?data-swipe=${swipes}
+      @pointerdown=${swipes ? this.onSwipeStart : nothing}
+      @pointerup=${swipes ? this.onSwipeEnd : nothing}
+      @pointercancel=${() => (this.swipe = undefined)}
+      @wheel=${swipes ? this.onSwipeWheel : nothing}
+      @click=${{ handleEvent: this.onSwipeClick, capture: true }}
+    >
+      ${this.renderHeader()}
+      ${content}
+    </div>`;
+    }
+    /** A page's own view: what it puts in the slot named after the view, as wide as the month. */
+    renderOwnView() {
+        const view = this.shownView;
+        return this.swipeFrame(html `<div class="own-view" part="own-view" data-view=${view} ?data-travel=${this.travelled}><slot name=${view}></slot></div>`);
+    }
+    /**
+     * One day: its events without a time across the top, a day's width each,
+     * then its hours, a square each, in an area that scrolls, with each timed
+     * event at its hour beside the others of that hour.
+     */
+    renderDayView() {
+        const day = this.shownDay;
+        this.byDay = eventsByDay(this.events ?? [], day, day);
+        const events = this.eventsOn(day);
+        const allDay = events.filter(event => !event.time);
+        const hourName = dateFormatter({ hour: "numeric", timeZone: "UTC" });
+        const hours = Array.from({ length: 24 }, (_, hour) => ({
+            hour,
+            name: hourName.format(Date.UTC(2000, 0, 1, hour)),
+            events: events.filter(event => event.time && Number(event.time.slice(0, 2)) === hour),
+        }));
+        return html `<div class="calendar" part="calendar">
+      ${this.renderHeader()}
+      ${this.level !== "days" ? this.renderPicks(6) : html `<div
+        class="day-view"
+        part="day-view"
+        data-day=${day}
+        aria-label=${this.cellLabel(day, events)}
+        @click=${this.onClick}
+      >
+        ${allDay.length ? html `<div class="all-day" part="all-day">${allDay.map(event => this.renderEvent(event, events, 1))}</div>` : nothing}
+        <div class="hours" part="hours">
+          ${hours.map(({ hour, name, events: atHour }) => html `<div class="hour" part="hour" data-hour=${hour} ?data-busy=${atHour.length > 0}>
+            <span class="hour-name">${name}</span>
+            <span class="hour-events">${atHour.map(event => this.renderEvent(event, events, 1))}</span>
+          </div>`)}
+        </div>
+      </div>`}
+    </div>`;
+    }
+    /** An event on its line: one bar over `span` days, its name written once. */
+    renderEvent(event, events, span) {
+        const fill = event.color ? `--ds-calendar-event-fill: ${event.color}; --ds-calendar-event-ink: var(--ds-slate);` : "";
+        return html `<span
+      class="event"
+      part="event"
+      data-event=${events.indexOf(event)}
+      data-span=${span > 1 ? span : nothing}
+      style=${fill || span > 1 ? `${fill}${span > 1 ? ` --ds-calendar-event-span: ${span}` : ""}` : nothing}
+    >${event.time ? html `<span class="time">${event.time}</span>` : nothing}<span class="name">${event.title}</span></span>`;
+    }
     render() {
         if (this.picker)
             return this.renderPicker();
+        if (this.activity && this.level === "days")
+            return this.renderActivity();
         const month = this.shownMonth;
         const first = this.firstDay;
-        const weeks = monthWeeks(month, first, this.fixed);
+        const view = this.shownView;
+        if (view === "day" && this.level === "days")
+            return this.renderDayView();
+        if (view === "swimlane" && this.level === "days")
+            return this.renderSwimlane();
+        if (this.ownView && this.level === "days")
+            return this.renderOwnView();
+        const weeks = view === "week" ? [this.weekOf(this.shownDay)] : monthWeeks(month, first, this.fixed);
         this.byDay = eventsByDay(this.events ?? [], weeks[0][0], weeks.at(-1)[6]);
+        this.laidOut = new Map();
+        // In view: the week's days, or the month's (the days around it are drawn only with outside-days).
+        const inView = (day) => view === "week" || sameMonth(day, month);
+        const drawn = (day) => inView(day) || this.outsideDays;
+        // A week shows every event of each day: as many lines as its fullest day needs.
+        const depth = view === "week"
+            ? Math.max(this.eventLines, ...weekLines(weeks[0], this.byDay, 99).map(day => day.lines.length))
+            : this.eventLines;
+        for (const week of weeks)
+            weekLines(week, this.byDay, depth, drawn).forEach((laid, column) => this.laidOut.set(week[column], laid));
+        const tabDay = view === "week"
+            ? [this.focusDay, this.chosen.start, this.todayDay].find(day => day && weeks[0].includes(day)) ?? weeks[0][0]
+            : this.tabDay;
         // Heat is measured over the days of the month shown, so the neighbours' days never set its scale.
         this.heatByDay = this.heat ? heatLevels(new Map([...this.byDay].filter(([day]) => sameMonth(day, month))), this.heatMax) : new Map();
         // A compact month names its days in a letter (one square) or two (wider); a full month in short.
@@ -681,14 +1291,33 @@ export class Calendar extends CalendarBase {
                 : weekdayNames(first, "short").map(name => (/^\p{Script=Latin}/u.test(name) ? name.replace(/\.$/, "").slice(0, 2) : name))
             : weekdayNames(first, "short");
         const long = weekdayNames(first, "long");
-        return html `<div class="calendar" part="calendar" @focusout=${this.onFocusOut} @pointerover=${this.onPointerOver} @pointerleave=${() => (this.hoverDay = undefined)}>
+        // Inside a day's box the name is short where the day is three squares or more, and a letter where it is narrower.
+        const inside = this.squaresPerDay >= 3 ? short : weekdayNames(first, "narrow");
+        const today = this.todayDay;
+        const todayColumn = drawn(today) && weeks.some(week => week.includes(today)) ? (weekdayOf(today) - first + 7) % 7 : -1;
+        const swipes = !this.noHeader;
+        return html `<div
+      class="calendar"
+      part="calendar"
+      ?data-swipe=${swipes}
+      @focusout=${this.onFocusOut}
+      @pointerover=${this.onPointerOver}
+      @pointerleave=${() => (this.hoverDay = undefined)}
+      @pointerdown=${swipes ? this.onSwipeStart : nothing}
+      @pointerup=${swipes ? this.onSwipeEnd : nothing}
+      @pointercancel=${() => (this.swipe = undefined)}
+      @wheel=${swipes ? this.onSwipeWheel : nothing}
+      @click=${{ handleEvent: this.onSwipeClick, capture: true }}
+    >
       ${this.renderHeader()}
       ${this.level !== "days" && !this.noHeader ? this.renderPicks(weeks.length) : html `<div
         class="grid"
         part="grid"
         role="grid"
+        data-view=${view}
         ?data-travel=${this.travelled}
-        aria-label=${this.nameOr(monthTitle(month))}
+        aria-label=${this.nameOr(view === "week" ? this.rangeTitle(weeks[0][0], weeks[0][6]) : monthTitle(month))}
+        style=${view === "week" ? `--ds-calendar-lines: ${depth}` : nothing}
         aria-multiselectable=${this.selectable ? "true" : nothing}
         @keydown=${this.onKeyDown}
         @click=${this.onClick}
@@ -696,7 +1325,13 @@ export class Calendar extends CalendarBase {
         <div role="row" class="weekdays" part="weekdays">
           ${short.map((name, index) => html `<span role="columnheader" class="weekday" aria-label=${long[index]}>${name}</span>`)}
         </div>
-        ${weeks.map(week => html `<div role="row" class="week" part="week">${week.map((day, column) => this.renderDay(day, column))}</div>`)}
+        ${weeks.map((week, row) => html `<div role="row" class="week" part="week">${week.map((day, column) => this.renderDay(day, inView(day), tabDay, this.compact ? undefined : {
+            // A full month names its days inside the first week's boxes, at their start, today's weekday in today's red.
+            weekday: row === 0 ? inside[column] : undefined,
+            today: row === 0 && todayColumn === column,
+            // The week's number on its first day, counted from the week's middle so a week from Sunday takes its Monday's.
+            week: this.weekNumbers && column === 0 && this.squaresPerDay >= 3 && week.some(drawn) ? isoWeek(addDays(day, 3)) : undefined,
+        }))}</div>`)}
       </div>`}
       ${this.renderClear()}
     </div>`;
@@ -943,11 +1578,17 @@ Calendar.properties = {
     dayWidth: { type: Number, attribute: "day-width" },
     lines: { type: Number },
     weekNumbers: { type: Boolean, attribute: "week-numbers", reflect: true },
+    view: { type: String, reflect: true },
+    views: { reflect: true, converter: viewsConverter },
+    viewNames: { attribute: false },
+    date: { type: String, reflect: true },
     fixed: { type: Boolean, reflect: true },
     outsideDays: { type: Boolean, attribute: "outside-days", reflect: true },
     noHeader: { type: Boolean, attribute: "no-header", reflect: true },
     noToday: { type: Boolean, attribute: "no-today", reflect: true },
     heat: { type: Boolean, reflect: true },
+    activity: { type: Boolean, reflect: true },
+    months: { type: Number },
     heatMax: { type: Number, attribute: "heat-max" },
     picker: { type: Boolean, reflect: true },
     name: { type: String, reflect: true },
@@ -959,6 +1600,7 @@ Calendar.properties = {
     open: { type: Boolean, reflect: true },
     unfolded: { state: true },
     embedded: { attribute: false },
+    monthHeading: { attribute: false },
     level: { state: true },
     browseYear: { state: true },
     pickFocus: { state: true },