@lotics/ui 46.14.1 → 47.1.0

package/src/calendar/month_view.tsx

@@ -1,78 +1,66 @@
-import { useMemo, useRef, type ReactNode, type Ref } from "react";
-import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+import { useMemo, useState, type ReactNode } from "react";
+import { View, StyleSheet, type LayoutChangeEvent } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
 import { FocusRingPressable } from "../focus_ring_pressable";
+import { Popover, PopoverTrigger, PopoverContent } from "../popover";
+import { useCalendar } from "./context";
+import { EventChip } from "./event_chip";
+import { compareEvents, fitLanes, isBanner, packEventLanes } from "./layout";
+import { addDays, dayDiff, dayHeading, daysInView, isSameMonth, isToday, startOfDay, weekdayShort } from "./dates";
+import type { CalendarEvent } from "./types";
 
-function MonthPressable(props: {
-  onPress?: () => void;
-  accessibilityLabel?: string;
-  style: StyleProp<ViewStyle>;
-  pressableRef?: Ref<View>;
-  children: ReactNode;
-}) {
-  return (
-    <FocusRingPressable
-      ref={props.pressableRef}
-      onPress={props.onPress}
-      accessibilityRole={props.onPress ? "button" : undefined}
-      accessibilityLabel={props.accessibilityLabel}
-      style={props.style}
-    >
-      {props.children}
-    </FocusRingPressable>
-  );
-}
-import { usePointerDrag } from "../use_pointer_drag";
-import { packEventLanes } from "./layout";
-import { addDays, dayDiff, daysInView, isSameMonth, isToday, startOfDay, weekdayShort } from "./dates";
-import type { CalendarEvent, Weekday } from "./types";
-
-const LANE_H = 19;
+const LANE_H = 20;
 const LANE_GAP = 2;
-const MAX_LANES = 3; // visible event lanes per week before "+N more"
+const DATE_ROW_H = 26;
+const OVERFLOW_CHIP_H = 17;
+const WEEKDAY_HEADER_H = 28;
 
-export interface MonthViewProps<T = unknown> {
-  date: Date;
-  events: CalendarEvent<T>[];
-  weekStartsOn?: Weekday;
-  locale?: string;
-  /** Overflow chip label, e.g. (3) => "+3 more". Defaults to English. */
-  moreLabel?: (count: number) => string;
-  onEventPress?: (event: CalendarEvent<T>) => void;
-  onDayPress?: (day: Date) => void;
-  /** When set, event chips become draggable; dropping on another day reschedules
-   *  the event, preserving its duration. Receives the event + new start/end. */
-  onEventDrop?: (event: CalendarEvent<T>, newStart: Date, newEnd: Date | null) => void;
-}
+/**
+ * The height below which a month grid stops being able to say anything.
+ *
+ * Six rows that can hold the date, one event and the overflow chip. Under this
+ * every row fits the chip alone, and the grid degenerates into a heat map of
+ * "+3 more" with not one event named — which is a worse answer than the agenda,
+ * so the root falls back to it on height exactly as it does on width.
+ */
+export const MIN_MONTH_HEIGHT = 6 * (DATE_ROW_H + LANE_H + OVERFLOW_CHIP_H) + WEEKDAY_HEADER_H;
+
+/**
+ * The month grid.
+ *
+ * Two things it decides for you, because getting either wrong is invisible until
+ * a real month arrives:
+ *
+ * **How many week rows.** As many as the month needs (4–6), not a fixed 42 days.
+ * A constant six spends a whole row on greyed-out next-month dates in most
+ * months.
+ *
+ * **How many event lanes.** Measured, not constant. The row is `flex: 1`, so its
+ * height is whatever the calendar's height divided by the week count happens to
+ * be — a fixed cap either wastes a tall row or draws lanes straight through a
+ * short one's neighbours. We measure and fit, and give one lane back to the
+ * "+N more" chip when there is overflow.
+ */
+export function CalendarMonth() {
+  const {
+    events, date, setDate, setView, weekStartsOn, locale, labels, now, onEventPress, onSlotPress, renderEvent,
+  } = useCalendar();
 
-export function MonthView<T = unknown>(props: MonthViewProps<T>) {
-  const { date, events, weekStartsOn = 1, locale, moreLabel = (n) => `+${n} more`, onEventPress, onDayPress, onEventDrop } = props;
   const days = useMemo(() => daysInView("month", date, weekStartsOn), [date, weekStartsOn]);
-  const weeks = useMemo(() => Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)), [days]);
+  const weeks = useMemo(
+    () => Array.from({ length: days.length / 7 }, (_, w) => days.slice(w * 7, w * 7 + 7)),
+    [days],
+  );
   const weekdayLabels = useMemo(() => days.slice(0, 7).map((d) => weekdayShort(d, locale)), [days, locale]);
-  const now = new Date();
 
-  // Drag-to-reschedule: each week row registers its DOM rect; on drop we map the
-  // pointer to a (week, column) → day, then shift the event by whole days.
-  const eventById = useMemo(() => new Map(events.map((e) => [e.id, e])), [events]);
-  const weekNodes = useRef<Map<number, HTMLElement>>(new Map());
-  const { live, bind } = usePointerDrag((id, pointer) => {
-    const ev = eventById.get(id);
-    if (!ev || !onEventDrop) return;
-    for (const [w, el] of weekNodes.current) {
-      const r = el.getBoundingClientRect();
-      if (r.width > 0 && pointer.y >= r.top && pointer.y <= r.bottom) {
-        const col = Math.min(6, Math.max(0, Math.floor((pointer.x - r.left) / (r.width / 7))));
-        const target = days[w * 7 + col];
-        if (!target) return;
-        const shift = dayDiff(startOfDay(ev.start), target);
-        if (shift === 0) return;
-        onEventDrop(ev, addDays(ev.start, shift), ev.end ? addDays(ev.end, shift) : null);
-        return;
-      }
-    }
-  });
+  // One measurement for every row: the rows are equal-height siblings, so a
+  // per-row measurement would be six identical numbers and six extra renders.
+  const [laneAreaHeight, setLaneAreaHeight] = useState(0);
+  const onRowLayout = (e: LayoutChangeEvent) => {
+    const next = Math.round(e.nativeEvent.layout.height - DATE_ROW_H);
+    setLaneAreaHeight((prev) => (Math.abs(prev - next) > 1 ? next : prev));
+  };
 
   return (
     <View style={styles.root}>
@@ -85,115 +73,97 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
       </View>
 
       {weeks.map((weekDays, w) => {
-        const { bars } = packEventLanes(events, weekDays[0], 7);
-        const visible = bars.filter((b) => b.lane < MAX_LANES);
-        const overflow = Array.from({ length: 7 }, () => 0);
+        const { bars, lanes } = packEventLanes(events, weekDays[0], 7);
+        const { visibleLanes, overflows } = fitLanes(laneAreaHeight, LANE_H, LANE_GAP, lanes, OVERFLOW_CHIP_H);
+        const visible = bars.filter((b) => b.lane < visibleLanes);
+
+        // What each day still has to show. Counted per DAY, not per bar: a
+        // five-day bar that did not fit is one hidden thing on each of the five
+        // days it covers, and a reader looking at Wednesday wants Wednesday's
+        // number.
+        const hidden = Array.from({ length: 7 }, () => 0);
         for (const b of bars) {
-          if (b.lane >= MAX_LANES) {
-            for (let c = b.startCol; c < b.startCol + b.span && c < 7; c++) overflow[c]++;
-          }
+          if (b.lane < visibleLanes) continue;
+          for (let c = b.startCol; c < b.startCol + b.span && c < 7; c++) hidden[c]++;
         }
 
         return (
-          <View
-            key={w}
-            style={styles.weekRow}
-            ref={(node) => {
-              const el = node as unknown as HTMLElement | null;
-              if (el) weekNodes.current.set(w, el);
-              else weekNodes.current.delete(w);
-            }}
-          >
-            {/* Date numbers */}
+          <View key={w} style={styles.weekRow} onLayout={w === 0 ? onRowLayout : undefined}>
             <View style={styles.dateRow}>
               {weekDays.map((day) => {
                 const inMonth = isSameMonth(day, date);
                 const today = isToday(day, now);
                 return (
-                  <MonthPressable
+                  <FocusRingPressable
                     key={day.toISOString()}
-                    onPress={onDayPress ? () => onDayPress(day) : undefined}
+                    onPress={onSlotPress ? () => onSlotPress(day, addDays(day, 1)) : undefined}
+                    accessibilityRole={onSlotPress ? "button" : undefined}
+                    accessibilityLabel={dayHeading(day, locale)}
                     style={styles.dateCell}
                   >
-                    <View style={[styles.dateBadge, today && { backgroundColor: colors.teal[600] }]}>
+                    <View style={[styles.dateBadge, today && styles.dateBadgeToday]}>
                       <Text
                         size="xs"
                         weight={today ? "semibold" : "regular"}
-                        style={{ color: today ? colors.white : inMonth ? colors.zinc[800] : colors.zinc[400] }}
+                        style={today ? styles.dateToday : inMonth ? styles.dateIn : styles.dateOut}
                       >
                         {day.getDate()}
                       </Text>
                     </View>
-                  </MonthPressable>
+                  </FocusRingPressable>
                 );
               })}
             </View>
 
-            {/* Event lanes */}
             <View style={styles.laneArea}>
               {weekDays.map((_, i) =>
                 i === 0 ? null : (
-                  <View
-                    key={i}
-                    style={{ position: "absolute", left: `${(i / 7) * 100}%`, top: -2, bottom: 0, borderLeftWidth: 1, borderLeftColor: colors.zinc[100] }}
-                  />
+                  <View key={i} style={[styles.colRule, { left: `${(i / 7) * 100}%` }]} />
                 ),
               )}
-              {visible.map((bar) => {
-                const accent = bar.event.color || colors.teal[600];
-                const banner = bar.span > 1 || !!bar.event.allDay;
-                const drag = live && live.id === bar.event.id ? live : null;
-                return (
-                  <MonthPressable
-                    key={bar.event.id}
-                    pressableRef={onEventDrop ? bind(bar.event.id, "grab") : undefined}
-                    onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
-                    accessibilityLabel={bar.event.title}
-                    style={{
-                      position: "absolute",
-                      top: bar.lane * (LANE_H + LANE_GAP),
-                      height: LANE_H,
-                      left: `${(bar.startCol / 7) * 100}%`,
-                      width: `${(bar.span / 7) * 100}%`,
-                      paddingHorizontal: 2,
-                      ...(drag ? { transform: [{ translateX: drag.dx }, { translateY: drag.dy }], zIndex: 20, opacity: 0.9 } : null),
-                    }}
-                  >
-                    <View
-                      style={{
-                        flex: 1,
-                        borderRadius: 4,
-                        backgroundColor: banner ? accent : "transparent",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        paddingHorizontal: 5,
-                        gap: 5,
-                      }}
-                    >
-                      {!banner ? <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: accent }} /> : null}
-                      <Text
-                        size="xs"
-                        weight={banner ? "medium" : "regular"}
-                        numberOfLines={1}
-                        style={{ color: banner ? colors.white : colors.zinc[700], flex: 1 }}
-                      >
-                        {bar.event.title}
-                      </Text>
-                    </View>
-                  </MonthPressable>
-                );
-              })}
-              {weekDays.map((day, col) =>
-                overflow[col] > 0 ? (
-                  <MonthPressable
-                    key={`o${col}`}
-                    onPress={onDayPress ? () => onDayPress(day) : undefined}
-                    style={{ position: "absolute", top: MAX_LANES * (LANE_H + LANE_GAP), left: `${(col / 7) * 100}%`, width: `${100 / 7}%`, paddingHorizontal: 6 }}
-                  >
-                    <Text size="xs" color="muted">{moreLabel(overflow[col])}</Text>
-                  </MonthPressable>
-                ) : null,
-              )}
+              {visible.map((bar) => (
+                <EventChip
+                  key={bar.event.id}
+                  event={bar.event}
+                  variant={isBanner(bar.event) ? "banner" : "dot"}
+                  showTime={!isBanner(bar.event)}
+                  height={LANE_H}
+                  locale={locale}
+                  render={renderEvent}
+                  onPress={onEventPress ? () => onEventPress(bar.event.id) : undefined}
+                  style={{
+                    position: "absolute",
+                    top: bar.lane * (LANE_H + LANE_GAP),
+                    height: LANE_H,
+                    left: `${(bar.startCol / 7) * 100}%`,
+                    width: `${(bar.span / 7) * 100}%`,
+                    paddingHorizontal: 2,
+                  }}
+                />
+              ))}
+              {overflows
+                ? weekDays.map((day, col) =>
+                    hidden[col] > 0 ? (
+                      <DayOverflow
+                        key={`o${col}`}
+                        day={day}
+                        col={col}
+                        top={visibleLanes * (LANE_H + LANE_GAP)}
+                        events={events}
+                        label={labels.more(hidden[col])}
+                        heading={dayHeading(day, locale)}
+                        locale={locale}
+                        renderEvent={renderEvent}
+                        onEventPress={onEventPress}
+                        onOpenDay={() => {
+                          setDate(day);
+                          setView("day");
+                        }}
+                        openDayLabel={labels.day}
+                      />
+                    ) : null,
+                  )
+                : null}
             </View>
           </View>
         );
@@ -202,13 +172,87 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
   );
 }
 
+/**
+ * The "+N more" chip and what it opens.
+ *
+ * A POPOVER of that day's events, not a jump to day view. Switching views to
+ * read three more titles costs the reader the month they were looking at, and
+ * getting back means finding the month button and then the date again.
+ */
+function DayOverflow(props: {
+  day: Date;
+  col: number;
+  top: number;
+  events: CalendarEvent<unknown>[];
+  label: string;
+  heading: string;
+  locale?: string;
+  renderEvent?: (event: CalendarEvent<unknown>) => ReactNode;
+  onEventPress?: (id: string) => void;
+  onOpenDay: () => void;
+  openDayLabel: string;
+}) {
+  const dayEvents = useMemo(
+    () =>
+      props.events
+        .filter((e) => {
+          const from = dayDiff(startOfDay(e.start), props.day);
+          const to = dayDiff(props.day, startOfDay(e.end ?? e.start));
+          return from >= 0 && to >= 0;
+        })
+        .sort(compareEvents),
+    [props.events, props.day],
+  );
+
+  return (
+    <View style={[styles.overflowSlot, { left: `${(props.col / 7) * 100}%`, top: props.top }]}>
+      <Popover side="bottom" align="start">
+        <PopoverTrigger>
+          <FocusRingPressable accessibilityRole="button" accessibilityLabel={`${props.heading}, ${props.label}`} style={styles.overflowPress}>
+            <Text size="xs" color="muted" numberOfLines={1}>{props.label}</Text>
+          </FocusRingPressable>
+        </PopoverTrigger>
+        <PopoverContent width={260}>
+          <View style={styles.dayPanel}>
+            <FocusRingPressable accessibilityRole="button" onPress={props.onOpenDay} accessibilityLabel={`${props.heading} — ${props.openDayLabel}`}>
+              <Text size="sm" weight="semibold">{props.heading}</Text>
+            </FocusRingPressable>
+            {dayEvents.map((e) => (
+              <EventChip
+                key={e.id}
+                event={e}
+                variant={isBanner(e) ? "banner" : "dot"}
+                showTime={!isBanner(e)}
+                height={LANE_H}
+                locale={props.locale}
+                render={props.renderEvent}
+                onPress={props.onEventPress ? () => props.onEventPress?.(e.id) : undefined}
+                style={{ height: LANE_H }}
+              />
+            ))}
+          </View>
+        </PopoverContent>
+      </Popover>
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: colors.white },
-  weekdayHeader: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 6 },
+  // The weekday strip is a LABEL row, not a boundary — space sets it off.
+  weekdayHeader: { flexDirection: "row", paddingTop: 2, paddingBottom: 8 },
   weekdayCell: { flex: 1, alignItems: "center" },
-  weekRow: { flex: 1, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] },
-  dateRow: { flexDirection: "row", paddingTop: 4 },
+  weekRow: { flex: 1, borderTopWidth: 1, borderTopColor: colors.zinc[100], minHeight: DATE_ROW_H + LANE_H },
+  dateRow: { flexDirection: "row", height: DATE_ROW_H, paddingTop: 4 },
   dateCell: { flex: 1, alignItems: "center" },
   dateBadge: { minWidth: 22, height: 22, borderRadius: 11, alignItems: "center", justifyContent: "center", paddingHorizontal: 4 },
-  laneArea: { flex: 1, position: "relative", marginTop: 2 },
+  dateBadgeToday: { backgroundColor: colors.teal[600] },
+  dateToday: { color: colors.white },
+  dateIn: { color: colors.zinc[800] },
+  dateOut: { color: colors.zinc[400] },
+  laneArea: { flex: 1, position: "relative" },
+  colRule: { position: "absolute", top: -DATE_ROW_H, bottom: 0, borderLeftWidth: 1, borderLeftColor: colors.zinc[100] },
+  overflowSlot: { position: "absolute", width: `${100 / 7}%`, paddingHorizontal: 4 },
+  overflowPress: { paddingHorizontal: 2, height: OVERFLOW_CHIP_H, justifyContent: "center" },
+  dayPanel: { gap: 4, paddingVertical: 4 },
 });

package/src/calendar/repeat.ts

@@ -0,0 +1,174 @@
+import { addDays, dayDiff, startOfDay } from "./dates";
+import type { CalendarEvent, Weekday } from "./types";
+
+/**
+ * A repeating event, in the shape business scheduling actually uses.
+ *
+ * **This is deliberately NOT RFC 5545.** A full RRULE (`BYSETPOS`, ordinal
+ * `BYDAY`, `EXDATE`, the DST rules) is either a real dependency or several
+ * hundred lines of spec, in a calendar whose stated virtue is that it adds no
+ * date library to an app. What it buys over this is the long tail — "the last
+ * working Friday of the quarter" — and what it costs is paid by every app that
+ * only ever needed "every weekday at 06:00".
+ *
+ * So: a timetable, a standup, a monthly close. When something genuinely needs
+ * the tail, the answer is a recurrence FIELD TYPE in the platform and a parser
+ * behind it — not widening this.
+ */
+export interface RepeatRule {
+  every: "day" | "week" | "month";
+  /** Every N days/weeks/months. Default 1; values below 1 are treated as 1. */
+  interval?: number;
+  /** `week` only — which weekdays. Defaults to the start date's own weekday. */
+  on?: Weekday[];
+  /** Inclusive last day the event may occur on. */
+  until?: Date | null;
+  /** Stop after this many occurrences, counting the first. */
+  count?: number | null;
+}
+
+/** A safety stop, so a malformed rule cannot spin. No real range asks for more. */
+const MAX_OCCURRENCES = 1000;
+
+/**
+ * The id an occurrence carries: the source event's id, then the day it falls on.
+ *
+ * Occurrences need distinct ids — React keys them, and the layout dedupes on
+ * them — but a press has to reach the ROW the series came from. Encoding the
+ * source in the id is what lets {@link sourceEventId} take it back off, so no
+ * caller has to keep a side table.
+ */
+export function occurrenceId(sourceId: string, day: Date): string {
+  const m = String(day.getMonth() + 1).padStart(2, "0");
+  const d = String(day.getDate()).padStart(2, "0");
+  return `${sourceId}@${day.getFullYear()}-${m}-${d}`;
+}
+
+/** The id of the event an occurrence came from — its own id, if it is not one. */
+export function sourceEventId(id: string): string {
+  const at = id.lastIndexOf("@");
+  return at === -1 ? id : id.slice(0, at);
+}
+
+/**
+ * Expand every repeating event in `events` into the occurrences that fall in
+ * [rangeStart, rangeEnd]. Events without a `repeat` pass through untouched.
+ *
+ * Bounded by the range, which is why the calendar calls it per view rather than
+ * asking the app to expand a year up front: navigating a month at a time over a
+ * daily timetable would otherwise materialise thousands of events nobody looks
+ * at.
+ */
+export function expandRepeats<T>(
+  events: CalendarEvent<T>[],
+  rangeStart: Date,
+  rangeEnd: Date,
+): CalendarEvent<T>[] {
+  const out: CalendarEvent<T>[] = [];
+  for (const event of events) {
+    if (!event.repeat) {
+      out.push(event);
+      continue;
+    }
+    for (const day of occurrenceDays(event.start, event.repeat, rangeStart, rangeEnd)) {
+      out.push(shiftTo(event, day));
+    }
+  }
+  return out;
+}
+
+/**
+ * The days a rule fires on inside a range.
+ *
+ * Walks from the series start rather than from the range, because `count` and
+ * `interval` are both defined relative to the FIRST occurrence — a rule that
+ * starts counting at whatever range the reader happens to be looking at would
+ * put "every other Tuesday" on a different Tuesday in March than in April.
+ */
+export function occurrenceDays(
+  seriesStart: Date,
+  rule: RepeatRule,
+  rangeStart: Date,
+  rangeEnd: Date,
+): Date[] {
+  const interval = Math.max(1, Math.floor(rule.interval ?? 1));
+  const from = startOfDay(seriesStart);
+  const hardEnd = rule.until ? startOfDay(rule.until) : null;
+  const days: Date[] = [];
+  let produced = 0;
+
+  const emit = (day: Date): "stop" | "go" => {
+    if (hardEnd && day > hardEnd) return "stop";
+    produced += 1;
+    if (rule.count != null && produced > rule.count) return "stop";
+    if (day >= startOfDay(rangeStart) && day <= startOfDay(rangeEnd)) days.push(day);
+    // Past the range with no reason to keep counting: only `count` needs the
+    // walk to continue, and it has been satisfied above.
+    if (day > startOfDay(rangeEnd)) return "stop";
+    return produced >= MAX_OCCURRENCES ? "stop" : "go";
+  };
+
+  if (rule.every === "day") {
+    for (let cursor = from; ; cursor = addDays(cursor, interval)) {
+      if (emit(cursor) === "stop") break;
+    }
+    return days;
+  }
+
+  if (rule.every === "week") {
+    // Which weekdays, in the week's own order, so occurrences come out sorted.
+    const weekdays = (rule.on?.length ? [...new Set(rule.on)] : [from.getDay() as Weekday]).sort(
+      (a, b) => a - b,
+    );
+    // Anchor on the series start's own week so `interval` counts whole weeks.
+    const anchor = addDays(from, -(((from.getDay() - weekdays[0] + 7) % 7)));
+    for (let week = anchor; ; week = addDays(week, 7 * interval)) {
+      let stopped = false;
+      for (const wd of weekdays) {
+        const day = addDays(week, (wd - week.getDay() + 7) % 7);
+        // A weekday earlier in the anchor week than the series start is not an
+        // occurrence — the series has not begun yet.
+        if (day < from) continue;
+        if (emit(day) === "stop") {
+          stopped = true;
+          break;
+        }
+      }
+      if (stopped) break;
+    }
+    return days;
+  }
+
+  // month — the same day-of-month each time. A month too short SKIPS rather
+  // than clamping: "the 31st" does not happen in February, and sliding it to
+  // the 28th invents an occurrence the reader never scheduled.
+  const dom = from.getDate();
+  for (let step = 0; ; step += interval) {
+    const probe = new Date(from.getFullYear(), from.getMonth() + step, 1);
+    const lastDay = new Date(probe.getFullYear(), probe.getMonth() + 1, 0).getDate();
+    if (dom > lastDay) {
+      // Not an occurrence, but the walk must still know when to give up.
+      if (probe > startOfDay(rangeEnd)) break;
+      if (hardEnd && probe > hardEnd) break;
+      if (step / interval >= MAX_OCCURRENCES) break;
+      continue;
+    }
+    const day = new Date(probe.getFullYear(), probe.getMonth(), dom);
+    if (emit(day) === "stop") break;
+  }
+  return days;
+}
+
+/** One occurrence: the same event, moved to `day`, keeping its duration. */
+function shiftTo<T>(event: CalendarEvent<T>, day: Date): CalendarEvent<T> {
+  const offset = dayDiff(startOfDay(event.start), day);
+  if (offset === 0) return { ...event, id: occurrenceId(event.id, day), repeat: undefined };
+  const start = addDays(event.start, offset);
+  start.setHours(event.start.getHours(), event.start.getMinutes(), 0, 0);
+  let end: Date | null = null;
+  if (event.end) {
+    end = addDays(event.end, offset);
+    end.setHours(event.end.getHours(), event.end.getMinutes(), 0, 0);
+  }
+  return { ...event, id: occurrenceId(event.id, day), start, end, repeat: undefined };
+}