refactor(calendar): stack layout, wider grid, fixed cell height
Deploy / verify (push) Successful in 53s
Deploy / deploy (push) Successful in 57s

- Calendar widget stays stacked (calendar above events list)
- Grid widens to max-w-2xl with fixed h-10 cells (no aspect-square height growth)
- Gap between cells: 0.5 → 1.5
- Button system extracted to shared btn-* utility classes in app.css
- Replaced Google Calendar link + Google Maps with OSM
- Removed google icon from iconify subset

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-08 09:56:40 +02:00
parent b491e3767a
commit 8db68e073c
5 changed files with 162 additions and 188 deletions
+35 -28
View File
@@ -279,12 +279,12 @@ h4 {
}
/* Content-Links: Himmel (Design System Links) */
main a:not(.no-underline) {
main a:not(.no-underline):not([class*="btn"]) {
color: var(--color-link);
text-decoration: underline;
}
main a:not(.no-underline):hover {
main a:not(.no-underline):not([class*="btn"]):hover {
color: var(--color-himmel-600);
}
@@ -317,9 +317,17 @@ main ol:not(.not-prose) li {
list-style-type: decimal;
}
/* Buttons gemeinsame Basis */
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-outline {
@apply inline-flex items-center gap-1 no-underline whitespace-nowrap transition-colors duration-200 font-medium px-4 py-2 rounded-xs;
}
/* Buttons Wald (Primary) */
.btn-primary {
@apply inline-block no-underline transition-colors duration-200 font-medium px-4 py-2 rounded-xs shadow-sm bg-btn-bg text-btn-txt;
@apply shadow-sm bg-btn-bg text-btn-txt;
}
.btn-primary:hover {
@@ -328,13 +336,36 @@ main ol:not(.not-prose) li {
/* Buttons Stein outline (Secondary) */
.btn-secondary {
@apply inline-block no-underline transition-colors duration-200 font-medium px-4 py-2 rounded-xs border border-stein-300 bg-white text-stein-700 shadow-sm;
@apply border border-stein-300 bg-white text-stein-700 shadow-sm;
}
.btn-secondary:hover {
@apply bg-stein-100 border-stein-400;
}
/* Buttons Himmel (Tertiary) */
.btn-tertiary {
@apply shadow-sm bg-himmel-700 text-white;
}
.btn-tertiary:hover {
@apply bg-himmel-800;
}
/* Buttons Stein-Border klein (Outline) */
.btn-outline {
@apply border border-stein-300 text-stein-700;
}
.btn-outline:hover {
@apply bg-stein-100;
}
/* Größen-Modifier — nach den btn-* definiert damit override greift */
.btn-sm {
@apply px-2 py-1 text-xs gap-1;
}
/* Dekorativer Hintergrund mit zwei verschwommenen Verlaufs-Blobs (Wald → Erde).
Nutzung: Container mit relativer Positionierung; Blobs sitzen in ::before/::after.
Inhalt sollte z-Index >= 0 haben (Standard); Blobs liegen unter Stacking-Kontext. */
@@ -571,30 +602,6 @@ footer a:hover,
background: var(--color-container-breakout);
}
/* Kalender: Container Query links Kalender, rechts Eventblock ab ~500px Containerbreite */
.calendar-block {
container-type: inline-size;
container-name: calendar;
}
@container calendar (min-width: 600px) {
.calendar-block .calendar-grid-wrapper {
grid-template-columns: auto 1fr;
}
.calendar-block .calendar-column {
min-width: 300px;
max-width: 450px;
}
.calendar-block .calendar-events-wrapper {
position: relative;
}
.calendar-block .calendar-events-panel {
position: absolute;
inset: 0;
border-top: none;
border-left: 1px solid var(--color-stein-200);
}
}
/* ── Print rules ────────────────────────────────────────────────────────────
Goal: print only the article. `print:hidden` on chrome (header/footer/
banner/breadcrumbs/comments) handles structural removal. The rules below
+2 -20
View File
@@ -122,25 +122,7 @@ export function downloadICS(item: CalendarItemICS, filename: string): void {
URL.revokeObjectURL(url);
}
/** Google-Calendar's render-template URL. Times must be UTC, in
* YYYYMMDDTHHMMSSZ format, joined by `/`. */
export function googleCalUrl(item: CalendarItemICS): string {
const start = item.start;
const end =
item.end ?? new Date(start.getTime() + 60 * 60 * 1000);
const dates = `${fmtICSDate(start)}/${fmtICSDate(end)}`;
const params = new URLSearchParams({
action: "TEMPLATE",
text: item.title,
dates,
});
if (item.description) params.set("details", item.description);
if (item.location) params.set("location", item.location);
return `https://calendar.google.com/calendar/render?${params.toString()}`;
}
/** Generic maps URL — Google Maps search by query. Safe with addresses
* or place names. */
/** OpenStreetMap search URL for an address or place name. */
export function mapsUrl(location: string): string {
return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(location)}`;
return `https://www.openstreetmap.org/search?query=${encodeURIComponent(location)}`;
}
+125 -136
View File
@@ -9,7 +9,6 @@
import type { Translations } from "$lib/translations";
import {
downloadICS,
googleCalUrl,
mapsUrl,
type CalendarItemICS,
} from "$lib/calendar-ics";
@@ -90,6 +89,17 @@
return "";
}
/** Location kann string ODER {text, lat, lng}-Objekt sein
* (RustyCMS-Resolve liefert eventLocation-Struktur). */
function locationText(loc: unknown): string {
if (typeof loc === "string") return loc;
if (loc && typeof loc === "object") {
const t = (loc as { text?: unknown }).text;
if (typeof t === "string") return t;
}
return "";
}
/** Normalised, sorted item list. Filters out malformed entries. */
const items = $derived.by((): EventCardItem[] => {
const raw = block.items ?? [];
@@ -312,10 +322,12 @@
}
/** "Show me this in the calendar" — used from accordion bodies for
* events that may be in a different month than the current view. */
* events that may be in a different month than the current view.
* Scrolls back up to the widget since it now sits above the list. */
function jumpToEventInGrid(ev: EventCardItem) {
currentMonth = new Date(ev.start.getFullYear(), ev.start.getMonth(), 1);
selectedDay = dayKey(ev.start);
widgetEl?.scrollIntoView({ block: "start", behavior: "smooth" });
}
/** Visual urgency-bucket for the colored left-border on each event
@@ -346,7 +358,7 @@
start: ev.start,
end: ev.end ?? null,
description: ev.description ?? undefined,
location: ev.location ?? undefined,
location: locationText(ev.location) || undefined,
url: getEventLinkHref(ev.link) || undefined,
};
}
@@ -374,22 +386,12 @@
t(T.calendar_weekday_so),
]);
let panelEl: HTMLElement | null = $state(null);
let widgetEl: HTMLElement | null = $state(null);
onMount(() => {
tickTimer = setInterval(() => {
nowMs = Date.now();
}, 60_000);
// After hydration, scroll the next-up event into view inside its
// panel (panel-local scroll, not page scroll — jumping the whole
// page when the block is below the fold would be hostile).
requestAnimationFrame(() => {
if (!panelEl) return;
const target = panelEl.querySelector<HTMLElement>(".event-item-next");
if (target) {
target.scrollIntoView({ block: "start", behavior: "auto" });
}
});
});
onDestroy(() => {
if (tickTimer) clearInterval(tickTimer);
@@ -406,10 +408,11 @@
{@const live = liveStatus(item)}
{@const title = item.title || t(T.calendar_untitled)}
{@const urgency = urgencyOf(item)}
{@const locText = locationText(item.location)}
{@const hasBody = !!(
item.description ||
eventHref ||
item.location ||
locText ||
item.isMultiDay
)}
<li
@@ -438,14 +441,14 @@
</div>
</div>
{:else}
<div class="event-date-block shrink-0 w-14 text-center leading-tight">
<div class="text-[10px] uppercase tracking-wide text-stein-500">
<div class="event-date-block shrink-0 w-14 aspect-square flex flex-col items-center justify-between leading-tight bg-himmel-800 rounded-xs py-2">
<div class="text-[10px] uppercase tracking-wide text-himmel-300">
{item.start.toLocaleDateString("de-DE", { weekday: "short" })}
</div>
<div class="text-2xl font-bold text-stein-900 tabular-nums">
<div class="text-2xl font-bold text-himmel-50 tabular-nums">
{item.start.getDate()}
</div>
<div class="text-[10px] uppercase tracking-wide text-stein-500">
<div class="text-[10px] uppercase tracking-wide text-himmel-300">
{item.start.toLocaleDateString("de-DE", { month: "short" })}
</div>
</div>
@@ -468,10 +471,10 @@
{item.timeStr}
</span>
{/if}
{#if item.location}
{#if locText}
<span class="inline-flex items-center gap-1 truncate max-w-[14rem]">
<Icon icon="mdi:map-marker-outline" class="size-3 shrink-0" aria-hidden="true" />
<span class="truncate">{item.location}</span>
<span class="truncate">{locText}</span>
</span>
{/if}
{#if item.tags && item.tags.length > 0}
@@ -496,18 +499,6 @@
<div class="text-[11px] uppercase tracking-wide text-stein-500 -mt-1">
{relativeDays(item.start)}
</div>
{#if item.location}
<a
href={mapsUrl(item.location)}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1 text-[12px] text-himmel-700 hover:underline"
>
<Icon icon="mdi:map-marker" class="size-4 shrink-0" aria-hidden="true" />
{t(T.calendar_open_maps)}
<Icon icon="mdi:open-in-new" class="size-3" aria-hidden="true" />
</a>
{/if}
{#if item.description}
<p class="font-light text-stein-700 m-0! leading-relaxed">{item.description}</p>
{/if}
@@ -526,33 +517,35 @@
href={eventHref}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1 rounded-xs bg-himmel-700 text-himmel-50 px-2 py-1 font-medium hover:bg-himmel-800"
class="btn-tertiary btn-sm"
>
{t(T.calendar_more_info)}
<Icon icon="mdi:open-in-new" class="size-3.5" aria-hidden="true" />
</a>
{/if}
{#if locText}
<a
href={mapsUrl(locText)}
target="_blank"
rel="noopener noreferrer"
class="btn-outline btn-sm"
>
<Icon icon="mdi:map-marker" class="size-3.5 shrink-0" aria-hidden="true" />
{t(T.calendar_open_maps)}
</a>
{/if}
<button
type="button"
onclick={() => downloadICS(toICS(item), fileSlug(title))}
class="inline-flex items-center gap-1 rounded-xs border border-stein-300 px-2 py-1 text-stein-700 hover:bg-stein-100"
class="btn-outline btn-sm"
>
<Icon icon="mdi:download" class="size-3.5" aria-hidden="true" />
{t(T.calendar_download_ics)}
</button>
<a
href={googleCalUrl(toICS(item))}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1 rounded-xs border border-stein-300 px-2 py-1 text-stein-700 hover:bg-stein-100"
>
<Icon icon="mdi:google" class="size-3.5" aria-hidden="true" />
{t(T.calendar_add_to_google)}
</a>
<button
type="button"
onclick={() => jumpToEventInGrid(item)}
class="inline-flex items-center gap-1 rounded-xs border border-stein-300 px-2 py-1 text-stein-700 hover:bg-stein-100"
class="btn-outline btn-sm"
>
<Icon icon="mdi:calendar-search" class="size-3.5" aria-hidden="true" />
{t(T.calendar_jump_to_month)}
@@ -597,9 +590,14 @@
</div>
{/if}
<div class="calendar-grid-wrapper grid w-full grid-cols-1 md:grid-cols-2 gap-0">
<!-- Links: Kalender -->
<div class="calendar-column min-h-full p-4 flex flex-col bg-himmel-800 text-himmel-100 shadow-sm">
<!-- Kalender-Widget: oben, kompakt auf Mobile-Breite gecappt (sonst
werden aspect-square cells auf Desktop gigantisch). Monat-Nav +
Tag-Grid. Klick auf Tag filtert Liste unten. -->
<div
bind:this={widgetEl}
class="calendar-widget bg-himmel-800 text-himmel-100 p-4"
>
<div class="mx-auto max-w-2xl">
<div class="flex items-center justify-between gap-2 mb-4">
<button
type="button"
@@ -623,13 +621,13 @@
</button>
</div>
<div class="grid grid-cols-7 gap-0.5 text-center text-sm">
<div class="grid grid-cols-7 gap-1.5 text-center text-sm">
{#each weekdays as w}
<div class="py-1.5 text-xs font-medium text-himmel-100 opacity-80">{w}</div>
{/each}
{#each calendarDays as d}
{#if d === null}
<div class="aspect-square" aria-hidden="true"></div>
<div class="h-10" aria-hidden="true"></div>
{:else}
{@const key = dayKey(d)}
{@const isCurrentMonth = d.getMonth() === month}
@@ -641,7 +639,7 @@
{#if hasEvents}
<button
type="button"
class="relative aspect-square rounded-xs flex flex-col items-center justify-center min-w-0 transition-colors cursor-pointer {isCurrentMonth
class="relative h-10 rounded-xs flex flex-col items-center justify-center min-w-0 transition-colors cursor-pointer {isCurrentMonth
? 'text-himmel-100 hover:bg-himmel-700'
: 'text-himmel-100 opacity-60 hover:opacity-80'} bg-himmel-700/50 font-semibold hover:bg-himmel-600 {isSelected
? 'ring-2 ring-himmel-400 bg-himmel-600'
@@ -661,7 +659,7 @@
</button>
{:else}
<div
class="relative aspect-square rounded-xs flex flex-col items-center justify-center min-w-0 cursor-default {isCurrentMonth
class="relative h-10 rounded-xs flex flex-col items-center justify-center min-w-0 cursor-default {isCurrentMonth
? 'text-himmel-100'
: 'text-himmel-100 opacity-50'} {isToday ? 'today-cell' : ''}"
aria-current={isToday ? "date" : undefined}
@@ -676,98 +674,93 @@
{/each}
</div>
</div>
</div>
<!-- Rechts: alle zukünftigen Termine als Accordion. Datum + Headline
im summary, Beschreibung + Aktionen im body. Kalender-Klick
filtert auf einen Tag; ohne Filter zeigt Liste alles ab heute,
gruppiert nach Tag mit großzügigem header. -->
<div class="calendar-events-wrapper min-h-0 flex flex-col" bind:this={panelEl}>
<div
class="calendar-events-panel border-t md:border-t-0 md:border-l border-stein-200 bg-stein-0 flex flex-col overflow-hidden flex-1 min-h-0"
>
{#if items.length === 0}
<p class="text-sm text-stein-500 p-4">{t(T.calendar_no_events)}</p>
{:else if selectedDay}
<div class="flex items-center justify-between gap-2 px-3 py-2 border-b border-stein-200 bg-himmel-50">
<div class="text-xs font-medium text-stein-700 truncate">
{new Date(selectedDay + "T12:00:00").toLocaleDateString("de-DE", {
weekday: "long",
day: "numeric",
month: "long",
})}
</div>
<button
type="button"
onclick={() => (selectedDay = null)}
class="inline-flex items-center gap-1 text-[11px] text-himmel-700 hover:text-himmel-900 hover:underline shrink-0"
>
<Icon icon="mdi:close" class="size-3.5" aria-hidden="true" />
{t(T.calendar_clear_filter)}
</button>
<!-- Events: voll Breite, unten. Akkordeon-Liste, in natürlichem
Page-Flow (kein internes Scrollen). Kalender-Klick filtert auf
einen Tag; ohne Filter Liste ab heute, gruppiert nach Tag. -->
<div class="calendar-events-panel bg-stein-0 border-t border-stein-200">
{#if items.length === 0}
<p class="text-sm text-stein-500 p-4">{t(T.calendar_no_events)}</p>
{:else if selectedDay}
<div class="flex items-center justify-between gap-2 px-3 py-2 border-b border-stein-200 bg-himmel-50">
<div class="text-xs font-medium text-stein-700 truncate">
{new Date(selectedDay + "T12:00:00").toLocaleDateString("de-DE", {
weekday: "long",
day: "numeric",
month: "long",
})}
</div>
<ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto">
{#each selectedDayEvents as item}
{@render eventAccordion(item, true, false)}
{/each}
</ul>
{:else if futureEventsByDay.length > 0}
<div class="flex items-baseline justify-between gap-2 px-3 py-2 border-b border-stein-200">
<h4 class="text-xs font-medium text-stein-500 m-0!">
{t(T.calendar_all_upcoming)}
</h4>
<span class="text-[11px] text-stein-500 tabular-nums">
{t(T.calendar_event_count, { n: futureEvents.length })}
</span>
</div>
<ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto">
{#each futureEventsByDay as group, gIdx}
<li class="day-group">
<div class="px-3 py-1 bg-himmel-50/60 text-[11px] uppercase tracking-wide font-medium text-stein-600 sticky top-0 z-10 backdrop-blur-sm">
{fmtGroupHeader(group.date)}
<span class="ml-2 text-stein-500 normal-case tracking-normal lowercase">· {relativeDays(group.date)}</span>
</div>
<ul class="m-0! p-0! list-none">
{#each group.events as item, eIdx}
{@render eventAccordion(item, gIdx === 0, gIdx === 0 && eIdx === 0)}
{/each}
</ul>
</li>
{/each}
</ul>
{#if pastEvents.length > 0}
<details class="border-t border-stein-200 bg-stein-50 group/past">
<summary class="cursor-pointer list-none px-3 py-2 text-xs text-stein-600 hover:bg-stein-100 inline-flex items-center gap-1.5">
<Icon icon="mdi:chevron-right" class="size-3.5 transition-transform group-open/past:rotate-90" aria-hidden="true" />
<span class="font-medium uppercase tracking-wide">{t(T.calendar_past_events)}</span>
<span class="text-stein-500 tabular-nums">· {pastEvents.length}</span>
</summary>
<ul class="m-0! p-0! list-none max-h-72 overflow-auto opacity-80">
{#each pastEvents as item}
{@render eventAccordion(item, false, false)}
<button
type="button"
onclick={() => (selectedDay = null)}
class="inline-flex items-center gap-1 text-[11px] text-himmel-700 hover:text-himmel-900 hover:underline shrink-0"
>
<Icon icon="mdi:close" class="size-3.5" aria-hidden="true" />
{t(T.calendar_clear_filter)}
</button>
</div>
<ul class="m-0! p-0! list-none">
{#each selectedDayEvents as item}
{@render eventAccordion(item, true, false)}
{/each}
</ul>
{:else if futureEventsByDay.length > 0}
<div class="flex items-baseline justify-between gap-2 px-3 py-2 border-b border-stein-200">
<h4 class="text-xs font-medium text-stein-500 m-0!">
{t(T.calendar_all_upcoming)}
</h4>
<span class="text-[11px] text-stein-500 tabular-nums">
{t(T.calendar_event_count, { n: futureEvents.length })}
</span>
</div>
<ul class="m-0! p-0! list-none">
{#each futureEventsByDay as group, gIdx}
<li class="day-group">
<div class="px-3 py-1 bg-himmel-50/60 text-[11px] uppercase tracking-wide font-medium text-stein-600 sticky top-0 z-10 backdrop-blur-sm">
{fmtGroupHeader(group.date)}
<span class="ml-2 text-stein-500 normal-case tracking-normal lowercase">· {relativeDays(group.date)}</span>
</div>
<ul class="m-0! p-0! list-none">
{#each group.events as item, eIdx}
{@render eventAccordion(item, gIdx === 0, gIdx === 0 && eIdx === 0)}
{/each}
</ul>
</details>
{/if}
{:else if pastEvents.length > 0}
<!-- Nur Vergangene da, keine Zukunft → past-Liste expanded
damit Panel nicht leer wirkt. -->
<details open class="bg-stein-50 group/past">
<summary class="cursor-pointer list-none px-3 py-2 text-xs text-stein-600 hover:bg-stein-100 inline-flex items-center gap-1.5 border-b border-stein-200">
</li>
{/each}
</ul>
{#if pastEvents.length > 0}
<details class="border-t border-stein-200 bg-stein-50 group/past">
<summary class="cursor-pointer list-none px-3 py-2 text-xs text-stein-600 hover:bg-stein-100 inline-flex items-center gap-1.5">
<Icon icon="mdi:chevron-right" class="size-3.5 transition-transform group-open/past:rotate-90" aria-hidden="true" />
<span class="font-medium uppercase tracking-wide">{t(T.calendar_past_events)}</span>
<span class="text-stein-500 tabular-nums">· {pastEvents.length}</span>
</summary>
<ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto opacity-80">
<ul class="m-0! p-0! list-none opacity-80">
{#each pastEvents as item}
{@render eventAccordion(item, false, false)}
{/each}
</ul>
</details>
{:else}
<p class="text-sm text-stein-500 p-4">{t(T.calendar_no_future_events)}</p>
{/if}
</div>
</div>
{:else if pastEvents.length > 0}
<!-- Nur Vergangene da, keine Zukunft → past-Liste expanded
damit Panel nicht leer wirkt. -->
<details open class="bg-stein-50 group/past">
<summary class="cursor-pointer list-none px-3 py-2 text-xs text-stein-600 hover:bg-stein-100 inline-flex items-center gap-1.5 border-b border-stein-200">
<Icon icon="mdi:chevron-right" class="size-3.5 transition-transform group-open/past:rotate-90" aria-hidden="true" />
<span class="font-medium uppercase tracking-wide">{t(T.calendar_past_events)}</span>
<span class="text-stein-500 tabular-nums">· {pastEvents.length}</span>
</summary>
<ul class="m-0! p-0! list-none opacity-80">
{#each pastEvents as item}
{@render eventAccordion(item, false, false)}
{/each}
</ul>
</details>
{:else}
<p class="text-sm text-stein-500 p-4">{t(T.calendar_no_future_events)}</p>
{/if}
</div>
</div>
@@ -831,8 +824,8 @@
.calendar-block .day-group + .day-group {
border-top: 4px solid var(--color-stein-100, #ede8df);
}
/* Print: alle <details> geöffnet, Chevrons aus, Akzent-Farben in
Graustufen damit der Druck lesbar bleibt. */
/* Print: alle <details> geöffnet, Chevrons aus, Day-Groups nicht
splitten. */
@media print {
.calendar-block details > *:not(summary) {
display: block !important;
@@ -843,9 +836,5 @@
.calendar-block .day-group {
break-inside: avoid;
}
.calendar-block .calendar-events-panel {
overflow: visible !important;
max-height: none !important;
}
}
</style>
@@ -72,9 +72,6 @@
"download": {
"body": "<path fill=\"currentColor\" d=\"M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z\"/>"
},
"google": {
"body": "<path fill=\"currentColor\" d=\"M21.35 11.1h-9.17v2.73h6.51c-.33 3.81-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27c3.09 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10c5.35 0 9.25-3.67 9.25-9.09c0-1.15-.15-1.81-.15-1.81\"/>"
},
"calendar-search": {
"body": "<path fill=\"currentColor\" d=\"M15.5 12c2.5 0 4.5 2 4.5 4.5c0 .88-.25 1.71-.69 2.4l3.08 3.1L21 23.39l-3.12-3.07c-.69.43-1.51.68-2.38.68c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5m0 2a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5M19 8H5v11h4.5c.31.75.76 1.42 1.31 2H5a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1h2v2h1a2 2 0 0 1 2 2v8.03c-.5-.81-1.2-1.49-2-2.03z\"/>"
},
-1
View File
@@ -121,7 +121,6 @@ const TRANSLATION_KEYS = [
"calendar_no_future_events",
"calendar_clear_filter",
"calendar_event_count", // {{n}}
"calendar_add_to_google",
"calendar_download_ics",
"calendar_open_maps",
"calendar_show_past",