@acms-subir/core 0.3.47 → 0.3.49

package/src/components/EventPage.astro

@@ -35,6 +35,8 @@ interface Props {
 const { event: e, occurrence: o, settings, calendars, html, upcoming, origin, preview = false, rsvp = null } = Astro.props;
 // the whole event, or just this date of a repeating one
 const cancelled = e.cancelled || Boolean(o.cancelled);
+// a moved date may be at its own place
+const where = o.moved?.location ?? e.location;
 const image = eventImage(e, settings);
 const tz = eventTimeZone(e, settings);
 const locale = siteLocale(settings);
@@ -52,13 +54,13 @@ const repeats = describeRepeat(e.rrule, e.start, (ymd) => {
   return new Date(Date.UTC(y, m - 1, d)).toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
 }, lang);
 const ctaHref = safeHref(e.cta.href);
-const mapHref = e.location.url
-  ? safeHref(e.location.url)
-  : e.location.address
-    ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent([e.location.name, e.location.address].filter(Boolean).join(', '))}`
+const mapHref = where.url
+  ? safeHref(where.url)
+  : where.address
+    ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent([where.name, where.address].filter(Boolean).join(', '))}`
     : '';
 // static map (made when the event was saved; see lib/maps/service.ts)
-const loc = e.location;
+const loc = where;
 const showMap = loc.showMap !== false && Boolean(loc.mapImage) && typeof loc.lat === 'number' && typeof loc.lng === 'number';
 const directions = showMap ? safeHref(directionsUrl(loc)) : '';
 const mapCredit = showMap ? mapAttribution(loc.mapImage) : '';
@@ -76,7 +78,7 @@ const I = {
   info: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v5M12 8h.01',
   video: 'M3 7h12v10H3zM15 10l6-3v10l-6-3',
 };
-const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.test(e.location.url);
+const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.test(where.url);
 // the RSVP block speaks the page's language too
 const w = rsvpStrings(lang);
 const going = rsvp ? aroundCount(rsvp.going, w.personGoing, w.peopleGoing) : ['', ''];
@@ -91,6 +93,9 @@ const deadline = typeof rsvp?.closesAt === 'number' ? deadlineParts(rsvp.closesA
 const closesLine = deadline && taking ? fill(w.closesOn, deadline) : '';
 const closedLine = deadline && !rsvp!.open && !cancelled && rsvp!.closesAt! <= Date.now() ? fill(w.closedOn, deadline) : '';
 const dateCancelled = fill(ew.dateCancelled, { date: f.date });
+// "Moved from Thu, Jan 10 · 6:00 PM." (all-day: the date)
+const movedFrom = o.moved ? formatOccurrence({ start: o.moved.from.start, end: o.moved.from.end, allDay: o.allDay, days: o.days }, tz, locale) : null;
+const dateMoved = movedFrom ? fill(ew.dateMoved, { from: o.allDay ? movedFrom.date : movedFrom.range }) : '';
 const showing = fill(ew.showing, { date: f.date });
 const moreCards = upcoming.map((u) => eventCardHtml(u, settings, { showImage: true, href: here(eventUrl(u.event.slug)) })).join('');
 ---
@@ -113,6 +118,7 @@ const moreCards = upcoming.map((u) => eventCardHtml(u, settings, { showImage: tr
       <h1 class="pc-ev-title">{e.title}</h1>
       {e.cancelled && <p class="pc-ev-cancelled"><b>{ew.eventCancelled}</b> {ew.eventCancelledNote}</p>}
       {!e.cancelled && cancelled && <p class="pc-ev-cancelled"><b>{dateCancelled}</b> {ew.dateCancelledNote}</p>}
+      {!cancelled && dateMoved && <p class="pc-ev-moved"><b>{dateMoved}</b> {o.moved!.note || ew.dateMovedNote}</p>}
       {e.excerpt && <p class="pc-ev-lede">{e.excerpt}</p>}
       <div class="pc-ev-body post-content" set:html={html} />
     </div>
@@ -125,15 +131,15 @@ const moreCards = upcoming.map((u) => eventCardHtml(u, settings, { showImage: tr
           <span>{f.time}</span>
         </div>
       </div>
-      {(e.location.name || e.location.address || e.location.url) && (
+      {(where.name || where.address || where.url) && (
         <div class="pc-ev-fact">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={online && !e.location.address ? I.video : I.pin} /></svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={online && !where.address ? I.video : I.pin} /></svg>
           <div>
-            {e.location.name && <b>{e.location.name}</b>}
-            {(e.location.address || mapHref) && (
+            {where.name && <b>{where.name}</b>}
+            {(where.address || mapHref) && (
               <span>
-                {e.location.address}
-                {mapHref && <>{e.location.address && ' · '}<a href={mapHref} target="_blank" rel="noopener">{online ? ew.joinOnline : ew.map}</a></>}
+                {where.address}
+                {mapHref && <>{where.address && ' · '}<a href={mapHref} target="_blank" rel="noopener">{online ? ew.joinOnline : ew.map}</a></>}
               </span>
             )}
           </div>

package/src/components/calendar/CalendarBoard.tsx

@@ -10,11 +10,15 @@ import '../../styles/schedule.css';
 
 // The admin Schedule: a month (or week) grid of everything on the calendar —
 // events, drafts, subscribed calendars, bookings. Click a day to add, drag
-// an event to move it, click a day number for that day's list. Data comes
-// from actions.calendar.range; this file only does UI and layout.
+// an event to move it (in the week view, to another time too; one date of a
+// series becomes a moved date that keeps its sign-ups), click a day number
+// for that day's list. Data comes from actions.calendar.range; this file only
+// does UI and layout.
 
 type View = 'month' | 'week';
-type MoveUndo = { kind: 'series'; id: string; days: number } | { kind: 'split'; id: string; seriesId: string; occurrence: string };
+type MoveUndo = { kind: 'series'; id: string; days: number; minutes?: number }
+  | { kind: 'date'; id: string; key: string; previous: { start: string; end: string; roomIds?: string[]; note: string } | null }
+  | { kind: 'split'; id: string; seriesId: string; occurrence: string };
 
 interface Props {
   initial: BoardData;
@@ -61,8 +65,10 @@ export default function CalendarBoard(props: Props) {
   const [peek, setPeek] = useState<{ item: BoardItem; rect: DOMRect } | null>(null);
   const [dragKey, setDragKey] = useState<string | null>(null);
   const [dropDay, setDropDay] = useState<Iso | null>(null);
-  const [ask, setAsk] = useState<{ item: BoardItem; days: number; to: Iso } | null>(null);
-  const [toast, setToast] = useState<{ text: string; undo?: MoveUndo; error?: boolean } | null>(null);
+  const [ask, setAsk] = useState<{ item: BoardItem; days: number; minutes: number; to: Iso } | null>(null);
+  const [toast, setToast] = useState<{ text: string; undo?: MoveUndo; error?: boolean; warning?: string } | null>(null);
+  // week view: where on the event the pointer grabbed it (minutes below its start)
+  const grab = useRef(0);
   const [menu, setMenu] = useState(false);
   const [compact, setCompact] = useState(false);
   const [selected, setSelected] = useState<Iso>(props.anchor);
@@ -182,18 +188,26 @@ export default function CalendarBoard(props: Props) {
     setDraft({
       key: '__draft', kind: 'event', id: '', title: d.title, startDay: d.day, endDay: d.endDay, allDay: d.allDay || d.endDay > d.day,
       startMin: d.startMin, endMin: d.endMin, time: d.allDay ? '' : shortTime(d.startMin), range: '', color, calendarId: d.calendarId,
-      calendarName: '', status: 'draft', recurring: false, repeat: '', rooms: [], roomsHeld: false, occurrence: '', cancelled: false, dateCancelled: false, location: '', edited: false, url: '',
+      calendarName: '', status: 'draft', recurring: false, repeat: '', rooms: [], roomsHeld: false, occurrence: '', cancelled: false, dateCancelled: false, movedFrom: '', location: '', edited: false, url: '',
     });
   };
 
   // ---- moving ----------------------------------------------------------------
   const dayLabel = (d: Iso, o: Intl.DateTimeFormatOptions = { weekday: 'short', month: 'short', day: 'numeric' }) =>
     new Intl.DateTimeFormat(locale, { ...o, timeZone: 'UTC' }).format(utc(d));
-  async function move(item: BoardItem, days: number, mode: 'series' | 'one', to: Iso) {
+  async function move(item: BoardItem, days: number, minutes: number, mode: 'series' | 'one', to: Iso) {
     setAsk(null);
-    const r = await actions.events.move({ id: item.id, days, mode, occurrence: item.occurrence });
+    const r = await actions.events.move({ id: item.id, days, minutes, mode, occurrence: item.occurrence });
     if (r.error || !r.data) { setToast({ text: r.error?.message ?? 'Couldn’t move the event.', error: true }); return; }
-    setToast({ text: `Moved “${item.title}” to ${dayLabel(to)}`, undo: r.data.undo as MoveUndo });
+    const when = !item.allDay && (minutes || view === 'week') ? `${dayLabel(to)}, ${shortTime(Math.max(0, Math.min(1439, item.startMin + minutes)))}` : dayLabel(to);
+    setToast({ text: `Moved “${item.title}” to ${when}`, undo: r.data.undo as MoveUndo, warning: r.data.warning || undefined });
+    await refresh();
+  }
+  async function moveBack(it: BoardItem) {
+    const r = await actions.events.moveDateBack({ id: it.id, key: it.occurrence });
+    setPeek(null);
+    if (r.error || !r.data) { setToast({ text: r.error?.message ?? 'Couldn’t move it back.', error: true }); return; }
+    setToast({ text: `Moved “${it.title}” back to ${it.movedFrom}`, warning: r.data.warning || undefined });
     await refresh();
   }
   async function undo(u: MoveUndo) {
@@ -205,7 +219,7 @@ export default function CalendarBoard(props: Props) {
   }
   useEffect(() => {
     if (!toast) return;
-    const t = setTimeout(() => setToast(null), toast.undo ? 8000 : 4000);
+    const t = setTimeout(() => setToast(null), toast.warning ? 12000 : toast.undo ? 8000 : 4000);
     return () => clearTimeout(t);
   }, [toast]);
 
@@ -213,22 +227,29 @@ export default function CalendarBoard(props: Props) {
     if (!editable(it)) { e.preventDefault(); return; }
     e.dataTransfer.setData('text/plain', it.key);
     e.dataTransfer.effectAllowed = 'move';
+    // in the week's hour grid, keep the grabbed spot under the pointer
+    const box = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    grab.current = Math.max(0, (e.clientY - box.top) / HOUR * 60);
     setPeek(null);
     setDragKey(it.key);
   };
-  const onDrop = (e: DragEvent, day: Iso) => {
+  // `atMin`: the minute of the day the pointer dropped at (week view hour grid only)
+  const onDrop = (e: DragEvent, day: Iso, atMin?: number) => {
     e.preventDefault();
     const it = data.items.find((x) => x.key === (dragKey ?? e.dataTransfer.getData('text/plain')));
     setDragKey(null); setDropDay(null);
     if (!it) return;
     const days = diffDays(it.startDay, day);
-    if (!days) return;
-    if (it.recurring) setAsk({ item: it, days, to: day });
-    else void move(it, days, 'series', day);
+    // to the quarter hour, keeping the event within the day
+    const minutes = atMin === undefined || it.allDay ? 0
+      : Math.max(-it.startMin, Math.min(1440 - 15 - it.startMin, Math.round((atMin - grab.current) / 15) * 15 - it.startMin));
+    if (!days && !minutes) return;
+    if (it.recurring) setAsk({ item: it, days, minutes, to: day });
+    else void move(it, days, minutes, 'series', day);
   };
-  const dropProps = (day: Iso) => ({
+  const dropProps = (day: Iso, timed = false) => ({
     onDragOver: (e: DragEvent) => { if (dragKey) { e.preventDefault(); if (dropDay !== day) setDropDay(day); } },
-    onDrop: (e: DragEvent) => onDrop(e, day),
+    onDrop: (e: DragEvent) => onDrop(e, day, timed ? (e.clientY - (e.currentTarget as HTMLElement).getBoundingClientRect().top) / HOUR * 60 : undefined),
   });
 
   // ---- actions on one item ---------------------------------------------------
@@ -402,7 +423,7 @@ export default function CalendarBoard(props: Props) {
         </div>
         <div className="sch-wk-cols" style={{ height: 24 * HOUR }}>
           {wdays.map((d) => (
-            <div key={d} className={`sch-wk-col ${d === today ? 'today' : ''} ${d === dropDay ? 'drop' : ''}`} {...dropProps(d)}
+            <div key={d} className={`sch-wk-col ${d === today ? 'today' : ''} ${d === dropDay ? 'drop' : ''}`} {...dropProps(d, true)}
               onClick={(e) => {
                 if ((e.target as HTMLElement).closest('.sch-ev')) return;
                 const y = e.clientY - (e.currentTarget as HTMLElement).getBoundingClientRect().top;
@@ -480,12 +501,14 @@ export default function CalendarBoard(props: Props) {
             {statusWord(it) && <li>{statusWord(it)}{it.edited ? ' · has unpublished changes' : ''}</li>}
             {!statusWord(it) && it.edited && <li>Has unpublished changes</li>}
             {it.cancelled && <li>{it.dateCancelled ? 'This date is cancelled' : 'Cancelled'}</li>}
+            {it.movedFrom && <li>Moved here from {it.movedFrom}</li>}
           </ul>
           <div className="sch-peek-actions">
             {it.kind === 'event' && <>
               <a className="btn sm primary" href={`/admin/calendar/events/${it.id}`}>Edit</a>
               <button type="button" className="btn sm" onClick={() => duplicate(it)}>Duplicate</button>
               {it.recurring && it.dateCancelled && <button type="button" className="btn sm" onClick={() => cancelDate(it, true)}>Restore this date</button>}
+              {it.recurring && it.movedFrom && !it.cancelled && <button type="button" className="btn sm" onClick={() => moveBack(it)}>Move back</button>}
               {it.recurring && !it.cancelled && <button type="button" className="btn sm" onClick={() => cancelDate(it, false)}>Cancel this date</button>}
               {it.url && <a className="btn sm ghost" href={it.url} target="_blank" rel="noopener">View ↗</a>}
               <button type="button" className="btn sm ghost danger" onClick={() => remove(it)}>Delete</button>
@@ -591,8 +614,8 @@ export default function CalendarBoard(props: Props) {
             <b>Move “{ask.item.title}”?</b>
             <p>This event repeats. Move only {dayLabel(ask.item.startDay, { weekday: 'long', month: 'short', day: 'numeric' })}, or every date in the series?</p>
             <div className="sch-ask-actions">
-              <button type="button" className="btn primary" onClick={() => move(ask.item, ask.days, 'one', ask.to)}>Only this date</button>
-              <button type="button" className="btn" onClick={() => move(ask.item, ask.days, 'series', ask.to)}>Every date</button>
+              <button type="button" className="btn primary" onClick={() => move(ask.item, ask.days, ask.minutes, 'one', ask.to)}>Only this date</button>
+              <button type="button" className="btn" onClick={() => move(ask.item, ask.days, ask.minutes, 'series', ask.to)}>Every date</button>
               <button type="button" className="btn ghost" onClick={() => setAsk(null)}>Cancel</button>
             </div>
           </div>
@@ -601,6 +624,7 @@ export default function CalendarBoard(props: Props) {
       {toast && (
         <div className={`sch-toast ${toast.error ? 'err' : ''}`} role="status">
           {toast.text}
+          {toast.warning && <small className="sch-toast-warn">{toast.warning}</small>}
           {toast.undo && <button type="button" onClick={() => undo(toast.undo!)}>Undo</button>}
         </div>
       )}

package/src/components/editor/event/EventSheet.tsx

@@ -11,6 +11,7 @@ import { LocationField } from './LocationField';
 import { OrganizeCard, StatusSection } from './OrganizeCard';
 import { RegistrationCard } from './RegistrationCard';
 import { WhenCard } from './WhenCard';
+import { SingleDates } from './SingleDates';
 import { registrationMode } from './registration';
 
 // Every event setting, on the page above the event's own content, as one
@@ -106,6 +107,7 @@ export function EventSheet({ meta, onChange, calendars, fields, siteTimezone, ma
           <span>{meta.cancelled && <em>Cancelled · </em>}{summary.join(' · ')}</span>
         </p>
         <WhenCard meta={meta} onChange={onChange} siteTimezone={siteTimezone} eventId={eventId} />
+        <SingleDates eventId={eventId} repeats={Boolean(meta.rrule)} />
         <Section
           id="ev-where"
           title="Where"

package/src/components/editor/event/SingleDates.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { actions } from 'astro:actions';
+import { Section } from './Section';
+
+// Event settings → Single dates: the next dates of a saved repeating event,
+// each with Move… and Cancel (or Move back / Restore). These apply at once,
+// like on the Schedule, without touching unpublished edits: a moved date keeps
+// its sign-ups (they're emailed the new time) and its hosts
+// (lib/calendar/moves.ts). The list shows the event as saved.
+
+interface DateRow { key: string; start: string; end: string; when: string; cancelled: boolean; moved: { from: string; note: string } | null; roomIds: string[] }
+interface Data { allDay: boolean; roomIds: string[]; dates: DateRow[]; rooms: { id: string; name: string }[] }
+interface Form { key: string; day: string; endDay: string; from: string; to: string; roomIds: string[]; note: string }
+
+const datePart = (w: string) => w.slice(0, 10);
+const timePart = (w: string) => w.slice(11, 16);
+
+export function SingleDates({ eventId, repeats }: { eventId: string; repeats: boolean }) {
+  const [data, setData] = useState<Data | null>(null);
+  const [limit, setLimit] = useState(8);
+  const [form, setForm] = useState<Form | null>(null);
+  const [busy, setBusy] = useState('');
+  const [note, setNote] = useState<{ text: string; error?: boolean } | null>(null);
+
+  const load = async (n = limit) => {
+    const r = await actions.events.dates({ id: eventId, limit: n });
+    if (r.data) setData(r.data);
+  };
+  useEffect(() => { if (eventId && repeats) void load(); }, [eventId, repeats, limit]);
+
+  if (!eventId || !repeats || !data || !data.dates.length) return null;
+
+  const open = (d: DateRow) => {
+    setNote(null);
+    setForm({ key: d.key, day: datePart(d.start), endDay: datePart(d.end), from: timePart(d.start), to: timePart(d.end), roomIds: d.roomIds, note: d.moved?.note ?? '' });
+  };
+  const run = async (key: string, work: () => Promise<{ error?: { message: string }; data?: object }>, done: string) => {
+    setBusy(key);
+    const r = await work();
+    setBusy('');
+    if (r.error) { setNote({ text: r.error.message, error: true }); return; }
+    setForm(null);
+    const warning = r.data && 'warning' in r.data && typeof r.data.warning === 'string' ? r.data.warning : '';
+    setNote({ text: warning ? `${done} ${warning}` : done });
+    await load();
+  };
+  const save = (f: Form) => {
+    const start = data.allDay ? f.day : `${f.day}T${f.from}`;
+    // a time that ends before it starts runs past midnight
+    const end = data.allDay ? (f.endDay >= f.day ? f.endDay : f.day) : `${f.to <= f.from ? nextDay(f.day) : f.day}T${f.to}`;
+    return run(f.key, () => actions.events.moveDate({ id: eventId, key: f.key, start, end, roomIds: f.roomIds, note: f.note }), 'Moved. People who signed up were emailed the new time.');
+  };
+
+  return (
+    <Section id="ev-dates" title="Single dates" help="Move or cancel one date. It applies at once, even on a published event, and people who signed up for it are emailed.">
+      <ul className="pe-evd">
+        {data.dates.map((d) => (
+          <li key={d.key} className={`pe-evd-row${d.cancelled ? ' is-cancelled' : d.moved ? ' is-moved' : ''}`}>
+            <div className="pe-evd-main">
+              <span className="pe-evd-when">{d.cancelled ? <s>{d.when}</s> : d.when}</span>
+              {d.cancelled && <small className="pe-evd-state">Cancelled</small>}
+              {d.moved && <small className="pe-evd-state">Moved from {d.moved.from}{d.moved.note ? ` · “${d.moved.note}”` : ''}</small>}
+            </div>
+            <div className="pe-evd-acts">
+              {d.cancelled ? (
+                <button type="button" className="pe-btn sm" disabled={busy === d.key} onClick={() => run(d.key, () => actions.events.cancelDate({ id: eventId, occurrence: d.key, restore: true }), 'Restored.')}>Restore</button>
+              ) : (
+                <>
+                  <button type="button" className="pe-btn sm" onClick={() => (form?.key === d.key ? setForm(null) : open(d))} aria-expanded={form?.key === d.key}>Move…</button>
+                  {d.moved && <button type="button" className="pe-btn sm" disabled={busy === d.key} onClick={() => run(d.key, () => actions.events.moveDateBack({ id: eventId, key: d.key }), 'Moved back. People who signed up were emailed.')}>Move back</button>}
+                  <button type="button" className="pe-btn ghost sm" disabled={busy === d.key}
+                    onClick={() => { if (confirm(`Cancel ${d.when}? It shows as cancelled straight away, and people who signed up are emailed.`)) void run(d.key, () => actions.events.cancelDate({ id: eventId, occurrence: d.key, restore: false }), 'Cancelled.'); }}>Cancel date</button>
+                </>
+              )}
+            </div>
+            {form?.key === d.key && (
+              <form className="pe-evd-form" onSubmit={(e) => { e.preventDefault(); void save(form); }}>
+                <div className="pe-evd-fields">
+                  <label className="pe-field"><span>{data.allDay ? 'From' : 'Date'}</span><input type="date" required value={form.day} onChange={(e) => setForm({ ...form, day: e.target.value })} /></label>
+                  {data.allDay ? (
+                    <label className="pe-field"><span>To</span><input type="date" required value={form.endDay} min={form.day} onChange={(e) => setForm({ ...form, endDay: e.target.value })} /></label>
+                  ) : (
+                    <>
+                      <label className="pe-field"><span>Starts</span><input type="time" required step={300} value={form.from} onChange={(e) => setForm({ ...form, from: e.target.value })} /></label>
+                      <label className="pe-field"><span>Ends</span><input type="time" required step={300} value={form.to} onChange={(e) => setForm({ ...form, to: e.target.value })} /></label>
+                    </>
+                  )}
+                </div>
+                {data.rooms.length > 0 && (
+                  <fieldset className="pe-evd-rooms">
+                    <legend>Rooms for this date</legend>
+                    {data.rooms.map((r) => (
+                      <label key={r.id} className="pe-evd-room">
+                        <input type="checkbox" checked={form.roomIds.includes(r.id)}
+                          onChange={(e) => setForm({ ...form, roomIds: e.target.checked ? [...form.roomIds, r.id] : form.roomIds.filter((x) => x !== r.id) })} />
+                        {r.name}
+                      </label>
+                    ))}
+                  </fieldset>
+                )}
+                <label className="pe-field"><span>Note <em>shown with the date, optional</em></span>
+                  <input type="text" maxLength={500} value={form.note} placeholder="Moved for the youth retreat" onChange={(e) => setForm({ ...form, note: e.target.value })} />
+                </label>
+                <div className="pe-evd-formacts">
+                  <button type="submit" className="pe-btn primary sm" disabled={busy === form.key}>{busy === form.key ? 'Moving…' : 'Move this date'}</button>
+                  <button type="button" className="pe-btn ghost sm" onClick={() => setForm(null)}>Never mind</button>
+                </div>
+              </form>
+            )}
+          </li>
+        ))}
+      </ul>
+      {note && <p className={`pe-ev-note${note.error ? ' is-error' : ''}`} role="status">{note.text}</p>}
+      {data.dates.length >= limit && limit < 52 && <button type="button" className="pe-evw-link" onClick={() => setLimit(Math.min(52, limit + 12))}>Show more dates</button>}
+    </Section>
+  );
+}
+
+function nextDay(day: string): string {
+  const d = new Date(`${day}T00:00:00Z`);
+  d.setUTCDate(d.getUTCDate() + 1);
+  return d.toISOString().slice(0, 10);
+}

package/src/lib/booking/holds.ts

@@ -8,7 +8,7 @@
 // staff, and roomBusy() answers "is this room taken then?" for one span.
 import type { ContentRepository } from '../repo/types';
 import type { Booking, CalEvent, Resource, Settings } from '../schema';
-import { expandEvents } from '../calendar/events';
+import { eventRoomIds, expandEvents } from '../calendar/events';
 import { tzParts, zonedToUtc } from '../calendar/ics';
 import { resourceZone } from './availability';
 
@@ -27,8 +27,8 @@ export interface Hold {
 const DAY = 86_400_000;
 
 /** Does this event hold its rooms right now? */
-export function holdsRooms(e: Pick<CalEvent, 'status' | 'cancelled' | 'roomHold'>): boolean {
-  if (e.cancelled || !e.roomHold.resourceIds.length) return false;
+export function holdsRooms(e: Pick<CalEvent, 'status' | 'cancelled' | 'roomHold' | 'movedDates'>): boolean {
+  if (e.cancelled || !eventRoomIds(e).length) return false;
   return e.status === 'published' || e.status === 'scheduled' || (e.status === 'draft' && e.roomHold.whileDraft);
 }
 
@@ -52,8 +52,8 @@ export function holdsFromEvents(
   opts: { force?: boolean; resourceId?: string } = {}
 ): Hold[] {
   const out: Hold[] = [];
-  const holding = events.filter((e) => (opts.force ? !e.cancelled && e.roomHold.resourceIds.length > 0 : holdsRooms(e))
-    && (!opts.resourceId || e.roomHold.resourceIds.includes(opts.resourceId)));
+  const holding = events.filter((e) => (opts.force ? !e.cancelled && eventRoomIds(e).length > 0 : holdsRooms(e))
+    && (!opts.resourceId || eventRoomIds(e).includes(opts.resourceId)));
   if (!holding.length) return out;
   // widen the window so setup/cleanup and whole-day holds at the edges count
   const pad = 2 * DAY;
@@ -155,7 +155,7 @@ export async function eventClashes(
   const holds = holdsFromEvents([event], byId, settings, now, to, { force: true });
   if (!holds.length) return { clashes: [], holds };
   const rooms = new Set(holds.map((h) => h.resourceId));
-  const others = events.filter((e) => e.id !== event.id && e.roomHold.resourceIds.some((id) => rooms.has(id)));
+  const others = events.filter((e) => e.id !== event.id && eventRoomIds(e).some((id) => rooms.has(id)));
   const from = Math.min(...holds.map((h) => h.start)), until = Math.max(...holds.map((h) => h.end));
   const theirs = holdsFromEvents(others, byId, settings, from, until);
   const clashes: EventClash[] = [];
@@ -199,7 +199,7 @@ export async function roomBusy(
   const rooms = resources.filter((r) => ids.has(r.id));
   const byId = new Map(rooms.map((r) => [r.id, r]));
   const out: BusySlot[] = [];
-  const holding = events.filter((e) => e.roomHold.resourceIds.some((id) => ids.has(id)) && !(q.ignore && e.id === q.ignore.eventId && !q.ignore.key));
+  const holding = events.filter((e) => eventRoomIds(e).some((id) => ids.has(id)) && !(q.ignore && e.id === q.ignore.eventId && !q.ignore.key));
   for (const h of holdsFromEvents(holding, byId, settings, q.from, q.to)) {
     if (q.ignore?.key && h.eventId === q.ignore.eventId && h.key === q.ignore.key) continue;
     out.push({ resourceId: h.resourceId, start: h.start, end: h.end, kind: 'event', title: h.title, eventId: h.eventId, key: h.key });

package/src/lib/calendar/api.ts

@@ -3,7 +3,7 @@
 // everywhere. Drafts, internal ids of private calendars, staging data and
 // private custom fields (unless a staff caller asks for them) never appear
 // here. Rooms are named only when set to show on public events (or for staff).
-import { roomColor, type CalEvent, type Calendar, type Resource } from '../schema';
+import { roomColor, type CalEvent, type Calendar, type MovedDate, type Resource } from '../schema';
 import { calendarFeedUrl, eventIcsUrl, eventUrl, publicEventFields } from './config';
 import { describeRepeat } from './rrule';
 
@@ -25,6 +25,9 @@ export interface EventJson {
   repeats: string;
   exdates: string[];
   cancelledDates: string[];
+  // single dates at another time, by original occurrence key: the new wall
+  // times and the public note (staff callers also get rooms, place and who moved it)
+  movedDates: Record<string, PublicMovedDate>;
   location: CalEvent['location'];
   cta: CalEvent['cta'];
   // notifyStaff (whether the hosts get RSVP emails) only for staff callers
@@ -40,6 +43,12 @@ export interface EventJson {
 }
 
 export interface RoomJson { slug: string; name: string; color: string | null }
+export type PublicMovedDate = Pick<MovedDate, 'start' | 'end' | 'note'> & Partial<MovedDate>;
+
+/** moved dates as public data: where and why, not who */
+export function movedDatesToJson(e: Pick<CalEvent, 'movedDates'>, includePrivate = false): Record<string, PublicMovedDate> {
+  return Object.fromEntries(Object.entries(e.movedDates ?? {}).map(([k, m]) => [k, includePrivate ? m : { start: m.start, end: m.end, note: m.note }]));
+}
 
 /** Rooms as public data: only those set to show on public events, unless `includePrivate` (staff). Unknown ids are skipped. */
 export function roomsToJson(ids: string[], resources: Map<string, Resource> | undefined, includePrivate = false): RoomJson[] {
@@ -70,6 +79,7 @@ export function eventToJson(e: CalEvent, origin: string, calendars: Map<string,
     repeats: describeRepeat(e.rrule, e.start),
     exdates: e.exdates,
     cancelledDates: e.cancelledDates ?? [],
+    movedDates: movedDatesToJson(e, opts.includePrivate),
     location: e.location,
     cta: e.cta,
     rsvp: opts.includePrivate ? e.rsvp : (({ notifyStaff: _, ...rsvp }) => rsvp)(e.rsvp),

package/src/lib/calendar/board.ts

@@ -34,6 +34,8 @@ export interface BoardItem extends GridItem {
   cancelled: boolean;
   // just this date is cancelled (Restore brings it back)
   dateCancelled: boolean;
+  // this date was moved here: "Thu, Jan 10 · 6:00 PM" (where it was), '' when not moved
+  movedFrom: string;
   location: string;
   edited: boolean; // live event with unpublished changes
   url: string; // public URL ('' when none)
@@ -99,6 +101,7 @@ export async function loadBoard(repo: ContentRepository, settings: Settings, fro
   const { events, calendars, errors } = await collectViewEvents(repo, settings, win, { audience: 'admin', includeFeeds: true, includeBookings: false });
   const locale = siteLocale(settings);
   const timeFmt = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit', timeZone: tz });
+  const dayFmt = new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: tz });
   const rangeOf = (s: number, e: number, allDay: boolean) => {
     if (allDay) return 'All day';
     try { return timeFmt.formatRange(s, e); } catch { return `${timeFmt.format(s)} – ${timeFmt.format(e)}`; }
@@ -115,7 +118,7 @@ export async function loadBoard(repo: ContentRepository, settings: Settings, fro
     const startDay = s.day;
     const endDay = allDay ? addDays(startDay, Math.max(1, v.days) - 1) : en.day < s.day ? s.day : en.day;
     const cal = e ? e.calendarIds.map((id) => calById.get(id)).find(Boolean) : calendars.find((c) => c.name === v.calendarName && c.kind === 'feed');
-    const occurrence = e ? occurrenceKey(e, v.start, settings, tz) : '';
+    const occurrence = e ? v.key ?? occurrenceKey(e, v.start, settings, tz) : '';
     items.push({
       key: e ? `e:${e.id}:${v.start}` : `f:${cal?.id ?? ''}:${v.start}:${v.title}`,
       kind: e ? 'event' : 'feed',
@@ -132,11 +135,12 @@ export async function loadBoard(repo: ContentRepository, settings: Settings, fro
       status: e ? eventBoardStatus(e) : 'feed',
       recurring: Boolean(e?.rrule),
       repeat: e?.rrule ? describeRepeat(e.rrule, e.start) : '',
-      rooms: e ? e.roomHold.resourceIds.map((id) => roomName.get(id)).filter((n): n is string => Boolean(n)) : [],
+      rooms: e ? (v.rooms?.map((r) => r.id) ?? e.roomHold.resourceIds).map((id) => roomName.get(id)).filter((n): n is string => Boolean(n)) : [],
       roomsHeld: e ? holdsRooms(e) : false,
       occurrence,
       cancelled: Boolean(v.cancelled),
       dateCancelled: Boolean(e && !e.cancelled && (e.cancelledDates ?? []).includes(occurrence)),
+      movedFrom: v.moved ? `${dayFmt.format(v.moved.from.start)} · ${allDay ? 'All day' : timeFmt.format(v.moved.from.start)}` : '',
       location: v.location,
       edited: Boolean(e?.draft),
       url: e?.status === 'published' ? v.url ?? '' : '',
@@ -167,7 +171,7 @@ export async function loadBoard(repo: ContentRepository, settings: Settings, fro
         calendarId: `res:${b.resourceId}`,
         calendarName: r?.name ?? '',
         status: b.status as BoardStatus,
-        recurring: false, repeat: '', rooms: [], roomsHeld: false, occurrence: '', cancelled: false, dateCancelled: false,
+        recurring: false, repeat: '', rooms: [], roomsHeld: false, occurrence: '', cancelled: false, dateCancelled: false, movedFrom: '',
         location: r?.name ?? '', edited: false, url: '',
       });
     }

package/src/lib/calendar/cards.ts

@@ -28,7 +28,7 @@ const esc = (s: string) =>
 export const safeHref = (h: string) => (/^(https?:\/\/|\/(?!\/)|mailto:|tel:|#)/i.test(h.trim()) ? h.trim() : '');
 
 export function eventCardHtml(
-  o: Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days'> & { cancelled?: boolean },
+  o: Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days'> & { cancelled?: boolean; moved?: Occurrence['moved'] },
   settings: Settings,
   opts: { showImage: boolean; showCta?: boolean; href?: string; heading?: 'h2' | 'h3' }
 ): string {
@@ -48,7 +48,7 @@ export function eventCardHtml(
       ? `<a class="pc-ev-card-media" href="${esc(href)}" tabindex="-1" aria-hidden="true"><img src="${esc(image.src)}" alt="${esc(image.alt)}" loading="lazy" /></a>`
       : `<a class="pc-ev-card-media is-tile" href="${esc(href)}" tabindex="-1" aria-hidden="true"><span class="pc-ev-tile"><b>${esc(f.month)}</b><span>${esc(f.day)}</span></span></a>`
     : '';
-  const loc = locationLine(e.location);
+  const loc = locationLine(o.moved?.location ?? e.location);
   const ctaHref = safeHref(e.cta.href);
   const cta =
     opts.showCta && e.cta.label && ctaHref && !cancelled
@@ -56,7 +56,7 @@ export function eventCardHtml(
       : '';
   return (
     `<article class="pc-ev-card${cancelled ? ' is-cancelled' : ''}">${media}<div class="pc-ev-card-body">` +
-    `<div class="pc-ev-card-when">${cancelled ? `<span class="pc-ev-flag">${esc(eventStrings(siteLang(settings)).cancelled)}</span> ` : ''}${esc(when)}</div>` +
+    `<div class="pc-ev-card-when">${cancelled ? `<span class="pc-ev-flag">${esc(eventStrings(siteLang(settings)).cancelled)}</span> ` : o.moved ? `<span class="pc-ev-flag is-moved">${esc(eventStrings(siteLang(settings)).moved)}</span> ` : ''}${esc(when)}</div>` +
     `<${h} class="pc-ev-card-title"><a href="${esc(href)}">${esc(e.title || eventStrings(siteLang(settings)).calendar.untitled)}</a></${h}>` +
     (e.excerpt ? `<p class="pc-ev-card-excerpt">${esc(e.excerpt)}</p>` : '') +
     (loc ? `<div class="pc-ev-card-loc">${esc(loc)}</div>` : '') +
@@ -80,11 +80,11 @@ export async function upcomingEvents(
     displayTz: tz, now, windowStartMs: now, windowEndMs: now + (opts.horizonDays ?? 400) * 86_400_000,
   }, { audience: 'public', calendarIds: opts.calendarIds, includeFeeds: false, filter: opts.filter, locale: opts.locale });
   const seen = new Set<string>();
-  const out: Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days' | 'cancelled'>[] = [];
+  const out: (Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days' | 'cancelled'> & Pick<Partial<Occurrence>, 'moved'>)[] = [];
   for (const v of events) {
     if (!v.event || v.end <= now || seen.has(v.event.id) || !tagged(v.event.tags)) continue;
     seen.add(v.event.id);
-    out.push({ event: v.event, start: v.start, end: v.end, allDay: v.allDay, days: v.days, cancelled: Boolean(v.cancelled) });
+    out.push({ event: v.event, start: v.start, end: v.end, allDay: v.allDay, days: v.days, cancelled: Boolean(v.cancelled), ...(v.moved ? { moved: v.moved } : {}) });
     if (out.length >= opts.limit) break;
   }
   return out;