@savvycal/calendar 0.3.0 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @savvycal/calendar
 
-A fully-featured resource grid calendar component built with React, Tailwind CSS v4, and the Temporal API.
+A fully-featured calendar component library built with React, Tailwind CSS v4, and the Temporal API. Includes a resource grid view (resources as columns) and a day grid view (days as columns).
 
 ## Installation
 
@@ -126,6 +126,106 @@ function App() {
 | `renderEvent`  | `(props: { event: TimedCalendarEvent, position: PositionedEvent }) => ReactNode` | Custom renderer for timed events.                                    |
 | `renderCorner` | `() => ReactNode`                                                                | Custom renderer for the top-left corner cell (e.g. time zone label). |
 
+## DayGridView
+
+A day-based grid view that shows days as columns (e.g. a week view).
+
+### Quick start
+
+```tsx
+import { DayGridView, Temporal } from '@savvycal/calendar';
+
+const today = Temporal.Now.plainDateISO();
+const weekStart = today.subtract({ days: today.dayOfWeek - 1 });
+const weekEnd = weekStart.add({ days: 6 });
+
+function App() {
+  return (
+    <DayGridView
+      activeRange={{ startDate: weekStart, endDate: weekEnd }}
+      timeZone="America/Chicago"
+      events={[
+        {
+          id: 'evt-1',
+          title: 'Meeting',
+          resourceId: '',
+          startTime: today
+            .toPlainDateTime({ hour: 10 })
+            .toZonedDateTime('America/Chicago'),
+          endTime: today
+            .toPlainDateTime({ hour: 11 })
+            .toZonedDateTime('America/Chicago'),
+        },
+      ]}
+    />
+  );
+}
+```
+
+### DayGridView props
+
+#### Required
+
+| Prop          | Type                                              | Description                                            |
+| ------------- | ------------------------------------------------- | ------------------------------------------------------ |
+| `activeRange` | `{ startDate: PlainDate; endDate: PlainDate }`    | The date range to display (inclusive).                  |
+| `timeZone`    | `string`                                          | IANA time zone identifier (e.g. `"America/Chicago"`).  |
+| `events`      | `CalendarEvent[]`                                 | Array of timed and/or all-day events.                  |
+
+#### Availability
+
+| Prop            | Type                  | Default | Description                                                                                      |
+| --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `availability`  | `AvailabilityRange[]` | —       | Time ranges that are available. Times outside these ranges are shown as unavailable.              |
+| `unavailability`| `AvailabilityRange[]` | —       | Time ranges explicitly marked unavailable. Applied on top of availability.                        |
+
+#### Layout, events & interaction
+
+The following props work identically to `ResourceGridView`: `timeAxis`, `hourHeight`, `columnMinWidth`, `eventLayout`, `eventGap`, `stackOffset`, `className`, `classNames` (uses `DayGridViewClassNames`), `onEventClick`, `snapDuration`, `placeholderDuration`, `selectionAppearance`, `dragPreviewAppearance`, `selectedEventId`, `selectedEventRef`.
+
+#### Selection
+
+| Prop            | Type                                              | Description                                     |
+| --------------- | ------------------------------------------------- | ----------------------------------------------- |
+| `selectedRange` | `DayGridSelectedRange \| null`                    | The currently selected time range (controlled).  |
+| `onSelect`      | `(range: DayGridSelectedRange \| null) => void`   | Called when the user selects or clears a range.  |
+| `selectionRef`  | `Ref<HTMLDivElement>`                             | Ref attached to the selection overlay element.   |
+
+#### Slot click
+
+| Prop          | Type                                                       | Description                             |
+| ------------- | ---------------------------------------------------------- | --------------------------------------- |
+| `onSlotClick` | `(info: { date, startTime, endTime }) => void`             | Called when an empty time slot is clicked. Receives the `date` (PlainDate) and time range. |
+
+#### Render props
+
+| Prop           | Type                                                                             | Description                                                          |
+| -------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `renderHeader` | `(props: { date: PlainDate, isToday: boolean }) => ReactNode`                    | Custom renderer for day column headers.                              |
+| `renderEvent`  | `(props: { event: TimedCalendarEvent, position: PositionedEvent }) => ReactNode` | Custom renderer for timed events.                                    |
+| `renderCorner` | `(props: { timeZone: string }) => ReactNode`                                     | Custom renderer for the top-left corner cell (e.g. time zone label). |
+
+### DayGridSelectedRange
+
+```ts
+interface DayGridSelectedRange {
+  startTime: Temporal.ZonedDateTime;
+  endTime: Temporal.ZonedDateTime;
+}
+```
+
+### DayGridViewClassNames
+
+Extends `GridViewClassNames` with day-specific keys:
+
+| Key                | Description                                 |
+| ------------------ | ------------------------------------------- |
+| `headerWeekday`    | Weekday abbreviation text (e.g. "Mon").     |
+| `headerDayNumber`  | Day number text.                            |
+| `headerToday`      | Additional classes for today's day number.  |
+
+All shared keys from `GridViewClassNames` (root, grid, event, etc.) also apply.
+
 ## Data types
 
 ### CalendarResource
@@ -422,9 +522,12 @@ const { refs, floatingStyles } = useFloating({
 
 ```ts
 // Components
-export { ResourceGridView } from '@savvycal/calendar';
+export { ResourceGridView, DayGridView } from '@savvycal/calendar';
 // Defaults
-export { resourceGridViewDefaults } from '@savvycal/calendar';
+export {
+  resourceGridViewDefaults,
+  dayGridViewDefaults,
+} from '@savvycal/calendar';
 
 // Temporal polyfill
 export { Temporal } from '@savvycal/calendar';
@@ -443,6 +546,10 @@ export type {
   TimeAxisConfig,
   ResourceGridViewProps,
   ResourceGridViewClassNames,
+  GridViewClassNames,
+  DayGridViewProps,
+  DayGridViewClassNames,
+  DayGridSelectedRange,
   PositionedEvent,
   SelectedRange,
   SelectionAppearance,

package/dist/components/day-grid-view/AllDayEventChip.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+import { CalendarEvent, DayGridViewClassNames } from '../../types/calendar';
+import { PositionedAllDayEvent } from '../../lib/overlap';
+interface AllDayEventChipProps {
+    positioned: PositionedAllDayEvent;
+    laneOffset: number;
+    cls: (key: keyof DayGridViewClassNames) => string;
+    onEventClick?: (event: CalendarEvent) => void;
+    selectedEventId?: string | null;
+    selectedEventRef?: Ref<HTMLDivElement>;
+}
+export declare const AllDayEventChip: import('react').NamedExoticComponent<AllDayEventChipProps>;
+export {};
+//# sourceMappingURL=AllDayEventChip.d.ts.map

package/dist/components/day-grid-view/AllDayEventChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllDayEventChip.d.ts","sourceRoot":"","sources":["../../../src/components/day-grid-view/AllDayEventChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAE3D,UAAU,oBAAoB;IAC5B,UAAU,EAAE,qBAAqB,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,qBAAqB,KAAK,MAAM,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,4DAkG1B,CAAC"}

package/dist/components/day-grid-view/AllDayEventChip.js

@@ -0,0 +1,86 @@
+import { jsxs as R, Fragment as D, jsx as n } from "react/jsx-runtime";
+import { memo as x } from "react";
+import { cn as f } from "../../lib/utils.js";
+const B = x(function({
+  positioned: y,
+  laneOffset: g,
+  cls: t,
+  onEventClick: a,
+  selectedEventId: h,
+  selectedEventRef: b
+}) {
+  const {
+    event: e,
+    gridColumnStart: o,
+    gridColumnSpan: r,
+    lane: v,
+    continuesBefore: l,
+    continuesAfter: s
+  } = y, C = e.id === h, d = v + 1 + g, i = [e.title, "all day"];
+  e.clientName && i.push(e.clientName);
+  const c = l ? 2 : 4, m = s ? 2 : 4, p = {
+    ...l ? {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      paddingLeft: 4
+    } : {},
+    ...s ? { borderTopRightRadius: 0, borderBottomRightRadius: 0 } : {}
+  }, u = /* @__PURE__ */ R(D, { children: [
+    e.color && !l && /* @__PURE__ */ n(
+      "div",
+      {
+        className: t("allDayEventColorBar"),
+        style: { backgroundColor: e.color, borderRadius: "inherit" }
+      }
+    ),
+    /* @__PURE__ */ n("span", { className: t("allDayEventTitle"), children: e.title })
+  ] });
+  return C ? /* @__PURE__ */ n(
+    "div",
+    {
+      ref: b,
+      style: {
+        gridColumn: `${o} / span ${r}`,
+        gridRow: d,
+        display: "flex",
+        minWidth: 0,
+        marginLeft: c,
+        marginRight: m
+      },
+      children: /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          "aria-label": i.join(", "),
+          className: f(
+            t("allDayEvent"),
+            t("allDayEventSelected"),
+            "relative flex items-center gap-1 w-full"
+          ),
+          style: p,
+          onClick: () => a?.(e),
+          children: u
+        }
+      )
+    }
+  ) : /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      "aria-label": i.join(", "),
+      className: f(t("allDayEvent"), "relative flex items-center gap-1"),
+      style: {
+        gridColumn: `${o} / span ${r}`,
+        gridRow: d,
+        marginLeft: c,
+        marginRight: m,
+        ...p
+      },
+      onClick: () => a?.(e),
+      children: u
+    }
+  );
+});
+export {
+  B as AllDayEventChip
+};

package/dist/components/day-grid-view/AllDaySection.d.ts

@@ -0,0 +1,16 @@
+import { Ref } from 'react';
+import { Temporal } from 'temporal-polyfill';
+import { CalendarEvent, DayGridViewClassNames } from '../../types/calendar';
+import { PositionedAllDayEvent } from '../../lib/overlap';
+interface AllDaySectionProps {
+    positioned: PositionedAllDayEvent[];
+    dates: Temporal.PlainDate[];
+    headerHeight: number;
+    cls: (key: keyof DayGridViewClassNames) => string;
+    onEventClick?: (event: CalendarEvent) => void;
+    selectedEventId?: string | null;
+    selectedEventRef?: Ref<HTMLDivElement>;
+}
+export declare const AllDaySection: import('react').NamedExoticComponent<AllDaySectionProps>;
+export {};
+//# sourceMappingURL=AllDaySection.d.ts.map

package/dist/components/day-grid-view/AllDaySection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllDaySection.d.ts","sourceRoot":"","sources":["../../../src/components/day-grid-view/AllDaySection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAG3D,UAAU,kBAAkB;IAC1B,UAAU,EAAE,qBAAqB,EAAE,CAAC;IACpC,KAAK,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,qBAAqB,KAAK,MAAM,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,0DA+DxB,CAAC"}

package/dist/components/day-grid-view/AllDaySection.js

@@ -0,0 +1,60 @@
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { memo as x } from "react";
+import { AllDayEventChip as y } from "./AllDayEventChip.js";
+const C = x(function({
+  positioned: o,
+  dates: n,
+  headerHeight: s,
+  cls: a,
+  onEventClick: m,
+  selectedEventId: d,
+  selectedEventRef: p
+}) {
+  const g = o.length > 0 ? Math.max(...o.map((t) => t.lane)) + 1 : 0, e = o.length > 0, r = e ? "4px" : "0px", c = e ? `${r} repeat(${g}, auto) ${r}` : "auto";
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: a("allDayLane"),
+      style: {
+        gridRow: 2,
+        gridColumn: "2 / -1",
+        display: "grid",
+        gridTemplateColumns: "subgrid",
+        gridTemplateRows: c,
+        position: "sticky",
+        top: s,
+        zIndex: 20,
+        gap: "2px 0"
+      },
+      children: [
+        n.map((t, l) => /* @__PURE__ */ i(
+          "div",
+          {
+            className: l < n.length - 1 ? "border-r border-cal-border" : void 0,
+            style: {
+              gridColumn: l + 1,
+              gridRow: "1 / -1",
+              pointerEvents: "none"
+            }
+          },
+          t.toString()
+        )),
+        o.map((t) => /* @__PURE__ */ i(
+          y,
+          {
+            positioned: t,
+            laneOffset: e ? 1 : 0,
+            cls: a,
+            onEventClick: m,
+            selectedEventId: d,
+            selectedEventRef: p
+          },
+          t.event.id
+        ))
+      ]
+    }
+  );
+});
+export {
+  C as AllDaySection
+};

package/dist/components/day-grid-view/DayColumn.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'react';
+import { CalendarEvent, EventLayout, GridViewClassNames, PositionedEvent, TimedCalendarEvent } from '../../types/calendar';
+interface DayColumnProps {
+    positionedEvents: PositionedEvent[];
+    column: number;
+    timeZone: string;
+    cls: (key: keyof GridViewClassNames) => string;
+    onEventClick?: (event: CalendarEvent) => void;
+    renderEvent?: (props: {
+        event: TimedCalendarEvent;
+        position: PositionedEvent;
+    }) => React.ReactNode;
+    eventGap?: number;
+    eventLayout?: EventLayout;
+    stackOffset?: number;
+    selectedEventId?: string | null;
+    selectedEventRef?: Ref<HTMLDivElement>;
+}
+export declare const DayColumn: import('react').NamedExoticComponent<DayColumnProps>;
+export {};
+//# sourceMappingURL=DayColumn.d.ts.map

package/dist/components/day-grid-view/DayColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DayColumn.d.ts","sourceRoot":"","sources":["../../../src/components/day-grid-view/DayColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAG1B,UAAU,cAAc;IACtB,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,kBAAkB,KAAK,MAAM,CAAC;IAC/C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QACpB,KAAK,EAAE,kBAAkB,CAAC;QAC1B,QAAQ,EAAE,eAAe,CAAC;KAC3B,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,sDA2CpB,CAAC"}

package/dist/components/day-grid-view/DayColumn.js

@@ -0,0 +1,51 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as C } from "react";
+import { EventChip as f } from "../shared/EventChip.js";
+const h = C(function({
+  positionedEvents: r,
+  column: i,
+  timeZone: m,
+  cls: n,
+  onEventClick: l,
+  renderEvent: s,
+  eventGap: v,
+  eventLayout: a,
+  stackOffset: c,
+  selectedEventId: d,
+  selectedEventRef: u
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: n("eventColumn"),
+      style: {
+        gridRow: "3 / -1",
+        gridColumn: i,
+        pointerEvents: "none",
+        isolation: "isolate"
+      },
+      children: r.map((e) => {
+        const o = e.event.id === d;
+        return /* @__PURE__ */ t(
+          f,
+          {
+            positioned: e,
+            timeZone: m,
+            cls: n,
+            onClick: l,
+            renderEvent: s,
+            eventGap: v,
+            eventLayout: a,
+            stackOffset: c,
+            isSelected: o,
+            selectedEventRef: o ? u : void 0
+          },
+          e.event.id
+        );
+      })
+    }
+  );
+});
+export {
+  h as DayColumn
+};

package/dist/components/day-grid-view/DayGridView.d.ts

@@ -0,0 +1,3 @@
+import { DayGridViewProps } from '../../types/calendar';
+export declare function DayGridView({ activeRange, timeZone, events, availability, unavailability, timeAxis, onEventClick, snapDuration, placeholderDuration, selectedRange, onSelect, onSlotClick, className, classNames, hourHeight, columnMinWidth, renderHeader, renderEvent, selectionAppearance, dragPreviewAppearance, selectionRef, selectionLingerMs, selectedEventId, selectedEventRef, renderCorner, eventGap, eventLayout, stackOffset, }: DayGridViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DayGridView.d.ts.map

package/dist/components/day-grid-view/DayGridView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DayGridView.d.ts","sourceRoot":"","sources":["../../../src/components/day-grid-view/DayGridView.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAKV,gBAAgB,EAEjB,MAAM,kBAAkB,CAAC;AAa1B,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAe,EACf,cAAoB,EACpB,YAAY,EACZ,WAAW,EACX,mBAAmB,EACnB,qBAAqB,EACrB,YAAY,EACZ,iBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,WAAuB,EACvB,WAAe,GAChB,EAAE,gBAAgB,2CAkZlB"}