@super-calendar/core 2.0.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@super-calendar/core",
+  "version": "2.0.0",
+  "description": "Render-agnostic core for super-calendar: date math, selection model, event layout, the month-grid builder, headless hooks, and neutral theme tokens. No renderer.",
+  "keywords": [
+    "calendar",
+    "date-fns",
+    "date-picker",
+    "headless",
+    "react"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/afonsojramos/react-native-super-calendar.git",
+    "directory": "packages/core"
+  },
+  "source": "./src/index.ts",
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "date-fns": ">=3",
+    "react": ">=18"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "bench": "bun scripts/bench.ts"
+  }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+// @super-calendar/core: the render-agnostic core. Date math, the selection
+// model, event layout, the month-grid builder, the headless hooks, and the
+// neutral theme tokens. Imports nothing from React Native, react-dom, Reanimated,
+// Gesture Handler, or Legend List, so it bundles into any renderer.
+export * from "./types";
+export * from "./tokens";
+export * from "./presentation";
+export * from "./utils/dateRange";
+export * from "./utils/dates";
+export * from "./utils/drag";
+export * from "./utils/eventDisplay";
+export * from "./utils/layout";
+export * from "./utils/monthGrid";
+export * from "./utils/recurrence";
+export * from "./utils/timezone";

package/src/presentation.ts

@@ -0,0 +1,39 @@
+// Shared presentation decisions: turn a day's selection state into a render
+// "intent" both renderers map to their own primitives (CSS for dom, StyleSheet
+// for native). Keeping the decision here means the pill/fill/badge rules can't
+// drift between the two renderers — they were duplicated once and that's exactly
+// the bug this prevents.
+
+/** Which range-band shape a day shows. */
+export type RangeBandKind = "none" | "fill" | "pill-start" | "pill-mid" | "pill-end";
+
+/** The band shape for a day, given the fill-cell option. */
+export function rangeBandKind(
+  day: { isInRange: boolean; isRangeStart: boolean; isRangeEnd: boolean },
+  fillCell: boolean,
+): RangeBandKind {
+  // A single-day range (start === end) is the badge alone, no band.
+  if (!day.isInRange || (day.isRangeStart && day.isRangeEnd)) return "none";
+  if (fillCell) return "fill";
+  if (day.isRangeStart) return "pill-start";
+  if (day.isRangeEnd) return "pill-end";
+  return "pill-mid";
+}
+
+/** Whether a band shape rounds its leading / trailing edge (pill ends). */
+export function bandRounding(kind: RangeBandKind): { start: boolean; end: boolean } {
+  return { start: kind === "pill-start", end: kind === "pill-end" };
+}
+
+/** Which filled badge a day shows (today wins over a selection). */
+export type DayBadgeKind = "none" | "today" | "selected";
+
+/**
+ * The filled-badge kind for a day. `isSelected` is true for both range endpoints
+ * and discrete selected days; today always wins when it coincides.
+ */
+export function dayBadgeKind(day: { isSelected: boolean }, isToday: boolean): DayBadgeKind {
+  if (isToday) return "today";
+  if (day.isSelected) return "selected";
+  return "none";
+}

package/src/tokens.ts

@@ -0,0 +1,73 @@
+// Neutral, renderer-agnostic theme tokens: the shared colour palette both the
+// React Native and react-dom renderers derive their themes from. Plain data, no
+// platform types. Renderer-specific metrics (cell / badge / band sizes) stay in
+// each renderer's theme, since they legitimately differ between the two.
+
+export interface CalendarColors {
+  /** Hour lines, day separators and month-cell borders. */
+  gridLine: string;
+  /** Background tint behind weekend columns/cells. */
+  weekendBackground: string;
+  /** Background tint over hours outside business hours (time grid). */
+  outsideHoursBackground: string;
+  /** Today badge fill. */
+  todayBackground: string;
+  /** Today badge text. */
+  todayText: string;
+  /** Selected day / range-endpoint badge fill. */
+  selectedBackground: string;
+  /** Selected day / range-endpoint badge text. */
+  selectedText: string;
+  /** Band behind a selected range. */
+  rangeBackground: string;
+  /** Hover highlight behind a day (DOM, mouse only). */
+  hoverBackground: string;
+  /** Current-time indicator line (time grid). */
+  nowIndicator: string;
+  /** Primary text (day numbers, weekday labels). */
+  text: string;
+  /** Muted text (hour labels, "+N more"). */
+  textMuted: string;
+  /** Dimmed text for disabled / adjacent-month days. */
+  textDisabled: string;
+  /** Default event chip fill. */
+  eventBackground: string;
+  /** Default event chip text. */
+  eventText: string;
+}
+
+export const lightColors: CalendarColors = {
+  gridLine: "#E2E4E9",
+  weekendBackground: "#F6F7F9",
+  outsideHoursBackground: "#F1F2F4",
+  todayBackground: "#1F6FEB",
+  todayText: "#FFFFFF",
+  selectedBackground: "#1F6FEB",
+  selectedText: "#FFFFFF",
+  rangeBackground: "#DCE7FF",
+  hoverBackground: "#E6ECF5",
+  nowIndicator: "#E5484D",
+  text: "#1A1B1E",
+  textMuted: "#6B7280",
+  textDisabled: "#B5B9C0",
+  eventBackground: "#DCE7FF",
+  eventText: "#1A1B1E",
+};
+
+export const darkColors: CalendarColors = {
+  gridLine: "#2A2E37",
+  weekendBackground: "#15171C",
+  outsideHoursBackground: "#101216",
+  todayBackground: "#1F6FEB",
+  todayText: "#FFFFFF",
+  selectedBackground: "#1F6FEB",
+  selectedText: "#FFFFFF",
+  rangeBackground: "#243B53",
+  hoverBackground: "#2E3138",
+  nowIndicator: "#E5484D",
+  text: "#ECEDEE",
+  textMuted: "#9BA1A6",
+  textDisabled: "#4B4F58",
+  eventBackground: "#243B53",
+  eventText: "#EAF2FF",
+};

package/src/types.ts

@@ -0,0 +1,70 @@
+export type CalendarMode = "day" | "3days" | "week" | "custom" | "month" | "schedule";
+
+/** The time-grid modes (day-column views, excluding month and schedule). */
+export type TimeGridMode = Exclude<CalendarMode, "month" | "schedule">;
+
+/**
+ * The minimal shape every calendar event must have. Layout (positioning,
+ * overlap resolution, paging) only ever reads `start`/`end`; `title` is used by
+ * the built-in default renderer. Anything else lives in your own type and is
+ * threaded through untouched via the `T` generic.
+ */
+export interface ICalendarEvent {
+  start: Date;
+  end: Date;
+  title?: string;
+  /**
+   * Force this event into the all-day lane (above the time grid) instead of the
+   * timed columns. When omitted, an event is treated as all-day only if it spans
+   * whole days (both `start` and `end` land on midnight).
+   */
+  allDay?: boolean;
+  /** Ignore taps/long-presses on this event (the built-in renderer also dims it). */
+  disabled?: boolean;
+  /**
+   * Repeat rule. Pass the event to `expandRecurringEvents(events, start, end)` to
+   * materialise its occurrences within a range; the calendar itself doesn't
+   * expand recurrences.
+   */
+  recurrence?: RecurrenceRule;
+}
+
+/** How often a recurring event repeats. */
+export type RecurrenceFrequency = "daily" | "weekly" | "monthly" | "yearly";
+
+/** A simple, RRULE-inspired repeat rule expanded by `expandRecurringEvents`. */
+export interface RecurrenceRule {
+  freq: RecurrenceFrequency;
+  /** Repeat every N periods. Default 1. */
+  interval?: number;
+  /** Stop after this many occurrences (including the first). */
+  count?: number;
+  /** Stop on/after this date (inclusive). */
+  until?: Date;
+  /**
+   * For `weekly`: the weekdays to repeat on (0 = Sunday … 6 = Saturday), keeping
+   * the event's time of day. Omit to repeat on the start date's own weekday.
+   */
+  weekdays?: WeekStartsOn[];
+}
+
+/**
+ * An event carrying arbitrary extra fields `T` alongside the required shape.
+ * `ICalendarEvent` is authoritative: keys it reserves (`start`/`end`/`title`)
+ * cannot be re-typed by `T`.
+ */
+export type CalendarEvent<T = unknown> = ICalendarEvent & Omit<T, keyof ICalendarEvent>;
+
+/** Build a stable key for an event. Defaults to start-time + index. */
+export type EventKeyExtractor<T = unknown> = (event: CalendarEvent<T>, index: number) => string;
+
+/** Sunday = 0 … Saturday = 6, matching `Date.prototype.getDay()`. */
+export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+/**
+ * A day's open hours for `businessHours` shading on the time grid: `{ start, end }`
+ * in hours (fractions allowed, e.g. 9.5), or `null` when the day is closed (fully
+ * shaded). `undefined` from the callback means "no business-hours shading". Shared
+ * by both renderers; pair with `closedHourBands` to get the spans to shade.
+ */
+export type BusinessHours = (date: Date) => { start: number; end: number } | null;

package/src/utils/dateRange.ts

@@ -0,0 +1,163 @@
+import { isAfter, isBefore, startOfDay } from "date-fns";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { isSameCalendarDay } from "./dates";
+
+/** A selected span. `end` is `null` while only the first endpoint has been picked. */
+export interface DateRange {
+  start: Date;
+  end: Date | null;
+}
+
+/** Limits applied before a date can be selected. */
+export interface DateSelectionConstraints {
+  /** Earliest selectable day (inclusive). */
+  minDate?: Date;
+  /** Latest selectable day (inclusive). */
+  maxDate?: Date;
+  /** Return true to forbid selecting a specific day. */
+  isDateDisabled?: (date: Date) => boolean;
+}
+
+/** Whether `date` passes the min/max/disabled constraints (compared by calendar day). */
+export function isDateSelectable(date: Date, constraints: DateSelectionConstraints = {}): boolean {
+  const day = startOfDay(date);
+  if (constraints.minDate && isBefore(day, startOfDay(constraints.minDate))) return false;
+  if (constraints.maxDate && isAfter(day, startOfDay(constraints.maxDate))) return false;
+  if (constraints.isDateDisabled?.(day)) return false;
+  return true;
+}
+
+/**
+ * The range after pressing `pressed`, mirroring the familiar date-picker model:
+ * - no range yet, or a complete range exists → start fresh (`{ start: pressed, end: null }`),
+ *   so a third press resets the selection.
+ * - an open range (a start but no end) → close it, auto-swapping when the press
+ *   precedes the start so `start <= end` always holds.
+ *
+ * Returns `current` unchanged when `pressed` isn't selectable.
+ */
+export function nextDateRange(
+  current: DateRange | null,
+  pressed: Date,
+  constraints: DateSelectionConstraints = {},
+): DateRange | null {
+  if (!isDateSelectable(pressed, constraints)) return current;
+  const day = startOfDay(pressed);
+  if (!current || current.end) return { start: day, end: null };
+  if (isBefore(day, current.start)) return { start: day, end: current.start };
+  return { start: current.start, end: day };
+}
+
+/** True when `date` is one of the range's two endpoints. */
+export function isRangeEndpoint(date: Date, range: DateRange | null): boolean {
+  if (!range) return false;
+  if (isSameCalendarDay(date, range.start)) return true;
+  return range.end ? isSameCalendarDay(date, range.end) : false;
+}
+
+/** True when `date` falls within a complete range (endpoints included). */
+export function isWithinDateRange(date: Date, range: DateRange | null): boolean {
+  if (!range || !range.end) return false;
+  const day = startOfDay(date).getTime();
+  const a = startOfDay(range.start).getTime();
+  const b = startOfDay(range.end).getTime();
+  return day >= Math.min(a, b) && day <= Math.max(a, b);
+}
+
+/** The selection/disabled flags for one day. */
+export interface DaySelectionState {
+  /** Fails the min/max/disabled constraints. */
+  isDisabled: boolean;
+  /** A `selectedDates` day or a range endpoint (and not disabled). */
+  isSelected: boolean;
+  /** Inside a complete range, endpoints included (and not disabled). */
+  isInRange: boolean;
+  isRangeStart: boolean;
+  isRangeEnd: boolean;
+}
+
+/**
+ * The canonical per-day selection state, shared by `MonthView` (rendering) and
+ * `buildMonthGrid` (the headless grid) so the built-in views and a custom
+ * calendar can never disagree on what a day's state is.
+ */
+export function daySelectionState(
+  date: Date,
+  selection: { selectedDates?: Date[]; selectedRange?: DateRange | null },
+  constraints: DateSelectionConstraints = {},
+): DaySelectionState {
+  const isDisabled = !isDateSelectable(date, constraints);
+  const range = selection.selectedRange ?? null;
+  return {
+    isDisabled,
+    isSelected:
+      !isDisabled &&
+      ((selection.selectedDates?.some((selected) => isSameCalendarDay(selected, date)) ?? false) ||
+        isRangeEndpoint(date, range)),
+    isInRange: !isDisabled && isWithinDateRange(date, range),
+    isRangeStart: !isDisabled && range != null && isSameCalendarDay(date, range.start),
+    isRangeEnd: !isDisabled && range?.end != null && isSameCalendarDay(date, range.end),
+  };
+}
+
+/**
+ * Per-day state shared with the month grid via context: the current selection
+ * plus the selectability constraints. Threaded through context (not props) so
+ * cached/virtualized day cells still repaint when any of it changes.
+ */
+export interface CalendarSelection extends DateSelectionConstraints {
+  selectedDates?: Date[];
+  selectedRange?: DateRange;
+}
+
+const CalendarSelectionContext = createContext<CalendarSelection>({});
+
+/**
+ * Provides the active selection to the month grid. Day cells read it via
+ * {@link useCalendarSelection} so they repaint on selection changes even when
+ * the virtualized list has cached (and so won't re-render) their page.
+ */
+export const CalendarSelectionProvider = CalendarSelectionContext.Provider;
+
+export const useCalendarSelection = () => useContext(CalendarSelectionContext);
+
+/** Options for {@link useDateRange}. */
+export interface UseDateRangeOptions extends DateSelectionConstraints {
+  /** Pre-select a range on mount. */
+  initialRange?: DateRange | null;
+}
+
+/**
+ * Controlled-ish range selection state for the month view. Returns the current
+ * `range` plus an `onPressDate` handler to wire to `Calendar`'s `onPressDay`, a
+ * `reset`, and the raw `setRange` for full control.
+ *
+ * ```tsx
+ * const { range, onPressDate } = useDateRange({ minDate: new Date() });
+ * <Calendar mode="month" selectedRange={range ?? undefined} onPressDay={onPressDate} … />
+ * ```
+ */
+export function useDateRange(options: UseDateRangeOptions = {}) {
+  const { initialRange = null, minDate, maxDate, isDateDisabled } = options;
+  const [range, setRange] = useState<DateRange | null>(initialRange);
+  const constraints = useMemo<DateSelectionConstraints>(
+    () => ({ minDate, maxDate, isDateDisabled }),
+    [minDate, maxDate, isDateDisabled],
+  );
+  const onPressDate = useCallback(
+    (date: Date) => setRange((previous) => nextDateRange(previous, date, constraints)),
+    [constraints],
+  );
+  // Set both endpoints at once (ordered), for drag-to-select. Ignores the update
+  // if either endpoint isn't selectable.
+  const selectRange = useCallback(
+    (a: Date, b: Date) => {
+      if (!isDateSelectable(a, constraints) || !isDateSelectable(b, constraints)) return;
+      const [start, end] = a.getTime() <= b.getTime() ? [a, b] : [b, a];
+      setRange({ start: startOfDay(start), end: startOfDay(end) });
+    },
+    [constraints],
+  );
+  const reset = useCallback(() => setRange(null), []);
+  return { range, onPressDate, selectRange, reset, setRange };
+}

package/src/utils/dates.ts

@@ -0,0 +1,118 @@
+import {
+  addDays,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  getHours,
+  getMinutes,
+  isSameDay,
+  isToday,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+} from "date-fns";
+import type { CalendarMode, WeekStartsOn } from "../types";
+
+/** The seven dates of the week containing `date`, starting on `weekStartsOn`. */
+export const getWeekDays = (date: Date, weekStartsOn: WeekStartsOn): Date[] => {
+  const start = startOfWeek(date, { weekStartsOn });
+  return Array.from({ length: 7 }, (_, index) => addDays(start, index));
+};
+
+/** How many day columns a time-grid mode shows. `custom` uses `numberOfDays`. */
+export const viewDayCount = (mode: CalendarMode, numberOfDays = 1): number => {
+  switch (mode) {
+    case "week":
+      return 7;
+    case "3days":
+      return 3;
+    case "custom":
+      return Math.max(1, Math.floor(numberOfDays));
+    default:
+      return 1; // 'day'
+  }
+};
+
+/**
+ * Days in the inclusive span from `weekStartsOn` to `weekEndsOn` (1–7),
+ * wrapping when the end precedes the start (e.g. Sat→Wed). Mirrors
+ * react-native-big-calendar's `weekDaysCount`.
+ */
+export const weekDaysCount = (weekStartsOn: WeekStartsOn, weekEndsOn: WeekStartsOn): number => {
+  if (weekEndsOn < weekStartsOn) {
+    let count = 1;
+    let i = weekStartsOn;
+    while (i !== weekEndsOn && count <= 7) {
+      i = (i + 1) % 7;
+      count++;
+    }
+    return count;
+  }
+  if (weekEndsOn > weekStartsOn) return weekEndsOn - weekStartsOn + 1;
+  return 1;
+};
+
+/**
+ * The day columns to render for a time-grid page. `week` spans the calendar week
+ * (honouring `weekStartsOn`). `custom` with a `weekEndsOn` spans the partial week
+ * from `weekStartsOn` to `weekEndsOn` (anchored to `date`'s week, paging by week);
+ * otherwise every mode shows `viewDayCount` consecutive days starting at `date`.
+ */
+export const getViewDays = (
+  mode: CalendarMode,
+  date: Date,
+  weekStartsOn: WeekStartsOn,
+  numberOfDays = 1,
+  isRTL = false,
+  weekEndsOn?: WeekStartsOn,
+): Date[] => {
+  let days: Date[];
+  if (mode === "week") {
+    days = getWeekDays(date, weekStartsOn);
+  } else if (mode === "custom" && weekEndsOn != null) {
+    // Mirror big-calendar: anchor to `date`'s week and take the partial-week span.
+    const subject = startOfDay(date);
+    const offset = weekStartsOn - subject.getDay();
+    days = Array.from({ length: weekDaysCount(weekStartsOn, weekEndsOn) }, (_, index) =>
+      addDays(subject, index + offset),
+    );
+  } else {
+    days = Array.from({ length: viewDayCount(mode, numberOfDays) }, (_, index) =>
+      addDays(startOfDay(date), index),
+    );
+  }
+  return isRTL ? days.reverse() : days;
+};
+
+/**
+ * The calendar weeks covering `month`, padded to whole weeks starting on
+ * `weekStartsOn`. `showSixWeeks` always returns six rows (42 days) for a
+ * fixed-height grid; `isRTL` reverses each week's day order.
+ */
+export const buildMonthWeeks = (
+  month: Date,
+  weekStartsOn: WeekStartsOn,
+  { showSixWeeks = false, isRTL = false }: { showSixWeeks?: boolean; isRTL?: boolean } = {},
+): Date[][] => {
+  const start = startOfWeek(startOfMonth(month), { weekStartsOn });
+  const end = showSixWeeks ? addDays(start, 41) : endOfWeek(endOfMonth(month), { weekStartsOn });
+  const days = eachDayOfInterval({ start, end });
+  const weeks: Date[][] = [];
+  for (let index = 0; index < days.length; index += 7) {
+    const week = days.slice(index, index + 7);
+    weeks.push(isRTL ? week.reverse() : week);
+  }
+  return weeks;
+};
+
+export const isWeekend = (date: Date): boolean => {
+  const day = date.getDay();
+  return day === 0 || day === 6;
+};
+
+export const getIsToday = (date: Date): boolean => isToday(date);
+
+export const isSameCalendarDay = (a: Date, b: Date): boolean => isSameDay(a, b);
+
+/** Minutes elapsed since midnight (0–1439). */
+export const minutesIntoDay = (date: Date): number => getHours(date) * 60 + getMinutes(date);

package/src/utils/drag.ts

@@ -0,0 +1,79 @@
+/**
+ * Minutes to shift an event, snapping a vertical pixel drag to the nearest
+ * `stepMinutes`. Runs on the UI thread inside the drag gesture. Returns 0 for a
+ * degenerate grid (non-positive height/step).
+ */
+export function snapDeltaMinutes(
+  translationPx: number,
+  cellHeightPx: number,
+  stepMinutes: number,
+): number {
+  "worklet";
+  if (cellHeightPx <= 0 || stepMinutes <= 0) return 0;
+  const rawMinutes = (translationPx / cellHeightPx) * 60;
+  return Math.round(rawMinutes / stepMinutes) * stepMinutes;
+}
+
+/** A copy of `date` shifted by `minutes` (may be negative). */
+export function shiftMinutes(date: Date, minutes: number): Date {
+  const next = new Date(date);
+  next.setMinutes(next.getMinutes() + minutes);
+  return next;
+}
+
+/**
+ * Resolve a committed drag into the event's new bounds: `start` shifts by
+ * `deltaStartMinutes`, `end` by `deltaEndMinutes` (a move passes the same delta
+ * to both; a resize passes 0 for the start). Returns `null` when the change
+ * would collapse the event below one `snapMinutes` step, so the gesture leaves
+ * the event untouched rather than committing a degenerate duration. Pure, so the
+ * commit path is unit-testable without a running gesture.
+ */
+export function resolveDraggedBounds(
+  start: Date,
+  end: Date,
+  deltaStartMinutes: number,
+  deltaEndMinutes: number,
+  snapMinutes: number,
+): { start: Date; end: Date } | null {
+  const nextStart = shiftMinutes(start, deltaStartMinutes);
+  const nextEnd = shiftMinutes(end, deltaEndMinutes);
+  if (nextEnd.getTime() - nextStart.getTime() < snapMinutes * 60_000) return null;
+  return { start: nextStart, end: nextEnd };
+}
+
+/**
+ * The start/end of a new event swept out on `day` by dragging from `startPx` to
+ * `endPx` (vertical pixels from the grid's top, i.e. the `minHour` line). Both
+ * ends snap to `snapMinutes`; the range is ordered (drag up or down) and widened
+ * to at least one step so a stationary press still yields a usable event.
+ * Returns `null` for a degenerate grid (non-positive height/step). Pure, so the
+ * commit path is unit-testable without a running gesture.
+ */
+export function cellRangeFromDrag(
+  day: Date,
+  startPx: number,
+  endPx: number,
+  cellHeightPx: number,
+  minHour: number,
+  snapMinutes: number,
+): { start: Date; end: Date } | null {
+  if (cellHeightPx <= 0 || snapMinutes <= 0) return null;
+  const snapAt = (px: number) => {
+    const rawMinutes = (minHour + px / cellHeightPx) * 60;
+    return Math.round(rawMinutes / snapMinutes) * snapMinutes;
+  };
+  const MAX = 24 * 60;
+  let lower = Math.max(0, Math.min(MAX - snapMinutes, snapAt(startPx)));
+  let upper = Math.max(0, Math.min(MAX, snapAt(endPx)));
+  if (upper < lower) [lower, upper] = [upper, lower];
+  // Keep the range at least one step wide without spilling past midnight.
+  if (upper - lower < snapMinutes) upper = Math.min(MAX, lower + snapMinutes);
+  const start = new Date(day);
+  start.setHours(0, 0, 0, 0);
+  start.setMinutes(lower);
+  const end = new Date(day);
+  end.setHours(0, 0, 0, 0);
+  end.setMinutes(upper);
+  return { start, end };
+}