@marco.colia/react-fast-scheduler 1.0.2 → 2.0.0

package/dist/index.d.cts

@@ -43,6 +43,25 @@ type SchedulerDragState<TResourceId extends SchedulerId> = {
     endMin: number;
 };
 type RenderSchedulerAppt<TAppointment, TResourceId extends SchedulerId> = SchedulerEvent<TAppointment, TResourceId>;
+type SchedulerAppointmentChangeArgs<TAppointment, TResourceId extends SchedulerId> = {
+    kind: "move" | "resize";
+    appointment: TAppointment;
+    previous: {
+        resourceId: TResourceId;
+        start: Date;
+        end: Date;
+    };
+    next: {
+        resourceId: TResourceId;
+        start: Date;
+        end: Date;
+    };
+};
+type SchedulerAppointmentAppearance = {
+    className?: string;
+};
+type SchedulerAppointmentColorToken = string;
+type SchedulerResourceClassMap = Partial<Record<string, string>>;
 type SchedulerProps<TAppointment, TResource extends BaseSchedulerResource<TResourceId>, TResourceId extends SchedulerId> = {
     resources: TResource[];
     appointments: TAppointment[];
@@ -55,32 +74,24 @@ type SchedulerProps<TAppointment, TResource extends BaseSchedulerResource<TResou
         start: Date;
         end: Date;
     }) => Promise<void> | void;
-    onAppointmentChange?: (args: {
-        kind: "move" | "resize";
-        appointment: TAppointment;
-        previous: {
-            resourceId: TResourceId;
-            start: Date;
-            end: Date;
-        };
-        next: {
-            resourceId: TResourceId;
-            start: Date;
-            end: Date;
-        };
-    }) => Promise<void> | void;
-    renderResourceHeader: (resource: TResource) => React.ReactNode;
-    renderAppointment: (args: {
+    onAppointmentChange?: (args: SchedulerAppointmentChangeArgs<TAppointment, TResourceId>) => Promise<void> | void;
+    renderResourceHeader?: (resource: TResource) => React.ReactNode;
+    renderAppointment?: (args: {
         appointment: SchedulerEvent<TAppointment, TResourceId> & {
             lane: number;
             lanes: number;
         };
         onPointerDown: (e: React.PointerEvent) => void;
         onResizePointerDown: (e: React.PointerEvent) => void;
+        appointmentAppearance?: SchedulerAppointmentAppearance;
         appointmentBackgroundColor?: string;
         drag: SchedulerDragState<TResourceId>;
         suppressClickRef: RefObject<boolean>;
     }) => React.ReactNode;
+    resourceAppointmentClassMap?: SchedulerResourceClassMap;
+    getResourceAppointmentAppearance?: (resource: TResource) => SchedulerAppointmentAppearance | undefined;
+    getResourceAppointmentColorToken?: (resource: TResource) => SchedulerAppointmentColorToken | undefined;
+    appointmentColorTokenClassMap?: Record<SchedulerAppointmentColorToken, string>;
     getResourceAppointmentBackground?: (resource: TResource) => string | undefined;
     renderDatePicker?: (args: {
         selectedDate: Date;
@@ -92,6 +103,14 @@ type SchedulerProps<TAppointment, TResource extends BaseSchedulerResource<TResou
     dayEnd?: string;
 };
 
-declare function Scheduler<TAppointment, TResource extends BaseSchedulerResource<TResourceId>, TResourceId extends SchedulerId>({ resources, appointments, selectedDate, onSelectedDateChange, adapter, onPersistMoveResize, onAppointmentChange, renderResourceHeader, renderAppointment, getResourceAppointmentBackground, renderDatePicker, prevButtonLabel, nextButtonLabel, dayStart, dayEnd }: SchedulerProps<TAppointment, TResource, TResourceId>): react_jsx_runtime.JSX.Element;
+declare function Scheduler<TAppointment, TResource extends BaseSchedulerResource<TResourceId>, TResourceId extends SchedulerId>({ resources, appointments, selectedDate, onSelectedDateChange, adapter, onPersistMoveResize, onAppointmentChange, renderResourceHeader, renderAppointment, resourceAppointmentClassMap, getResourceAppointmentAppearance, getResourceAppointmentColorToken, appointmentColorTokenClassMap, getResourceAppointmentBackground, renderDatePicker, prevButtonLabel, nextButtonLabel, dayStart, dayEnd }: SchedulerProps<TAppointment, TResource, TResourceId>): react_jsx_runtime.JSX.Element;
+
+type ApplySchedulerAppointmentChangeOptions<TAppointment, TResourceId extends SchedulerId> = {
+    getId: (appointment: TAppointment) => SchedulerId;
+    setResourceId: (appointment: TAppointment, resourceId: TResourceId) => TAppointment;
+    setStart: (appointment: TAppointment, start: Date) => TAppointment;
+    setEnd: (appointment: TAppointment, end: Date) => TAppointment;
+};
+declare function applySchedulerAppointmentChange<TAppointment, TResourceId extends SchedulerId>(appointments: TAppointment[], change: SchedulerAppointmentChangeArgs<TAppointment, TResourceId>, options: ApplySchedulerAppointmentChangeOptions<TAppointment, TResourceId>): TAppointment[];
 
-export { type BaseSchedulerResource, type RenderSchedulerAppt, Scheduler, type SchedulerAppointmentAdapter, type SchedulerDragState, type SchedulerEvent, type SchedulerId, type SchedulerProps };
+export { type ApplySchedulerAppointmentChangeOptions, type BaseSchedulerResource, type RenderSchedulerAppt, Scheduler, type SchedulerAppointmentAdapter, type SchedulerAppointmentAppearance, type SchedulerAppointmentChangeArgs, type SchedulerAppointmentColorToken, type SchedulerDragState, type SchedulerEvent, type SchedulerId, type SchedulerProps, type SchedulerResourceClassMap, applySchedulerAppointmentChange };

package/dist/index.d.ts

@@ -43,6 +43,25 @@ type SchedulerDragState<TResourceId extends SchedulerId> = {
     endMin: number;
 };
 type RenderSchedulerAppt<TAppointment, TResourceId extends SchedulerId> = SchedulerEvent<TAppointment, TResourceId>;
+type SchedulerAppointmentChangeArgs<TAppointment, TResourceId extends SchedulerId> = {
+    kind: "move" | "resize";
+    appointment: TAppointment;
+    previous: {
+        resourceId: TResourceId;
+        start: Date;
+        end: Date;
+    };
+    next: {
+        resourceId: TResourceId;
+        start: Date;
+        end: Date;
+    };
+};
+type SchedulerAppointmentAppearance = {
+    className?: string;
+};
+type SchedulerAppointmentColorToken = string;
+type SchedulerResourceClassMap = Partial<Record<string, string>>;
 type SchedulerProps<TAppointment, TResource extends BaseSchedulerResource<TResourceId>, TResourceId extends SchedulerId> = {
     resources: TResource[];
     appointments: TAppointment[];
@@ -55,32 +74,24 @@ type SchedulerProps<TAppointment, TResource extends BaseSchedulerResource<TResou
         start: Date;
         end: Date;
     }) => Promise<void> | void;
-    onAppointmentChange?: (args: {
-        kind: "move" | "resize";
-        appointment: TAppointment;
-        previous: {
-            resourceId: TResourceId;
-            start: Date;
-            end: Date;
-        };
-        next: {
-            resourceId: TResourceId;
-            start: Date;
-            end: Date;
-        };
-    }) => Promise<void> | void;
-    renderResourceHeader: (resource: TResource) => React.ReactNode;
-    renderAppointment: (args: {
+    onAppointmentChange?: (args: SchedulerAppointmentChangeArgs<TAppointment, TResourceId>) => Promise<void> | void;
+    renderResourceHeader?: (resource: TResource) => React.ReactNode;
+    renderAppointment?: (args: {
         appointment: SchedulerEvent<TAppointment, TResourceId> & {
             lane: number;
             lanes: number;
         };
         onPointerDown: (e: React.PointerEvent) => void;
         onResizePointerDown: (e: React.PointerEvent) => void;
+        appointmentAppearance?: SchedulerAppointmentAppearance;
         appointmentBackgroundColor?: string;
         drag: SchedulerDragState<TResourceId>;
         suppressClickRef: RefObject<boolean>;
     }) => React.ReactNode;
+    resourceAppointmentClassMap?: SchedulerResourceClassMap;
+    getResourceAppointmentAppearance?: (resource: TResource) => SchedulerAppointmentAppearance | undefined;
+    getResourceAppointmentColorToken?: (resource: TResource) => SchedulerAppointmentColorToken | undefined;
+    appointmentColorTokenClassMap?: Record<SchedulerAppointmentColorToken, string>;
     getResourceAppointmentBackground?: (resource: TResource) => string | undefined;
     renderDatePicker?: (args: {
         selectedDate: Date;
@@ -92,6 +103,14 @@ type SchedulerProps<TAppointment, TResource extends BaseSchedulerResource<TResou
     dayEnd?: string;
 };
 
-declare function Scheduler<TAppointment, TResource extends BaseSchedulerResource<TResourceId>, TResourceId extends SchedulerId>({ resources, appointments, selectedDate, onSelectedDateChange, adapter, onPersistMoveResize, onAppointmentChange, renderResourceHeader, renderAppointment, getResourceAppointmentBackground, renderDatePicker, prevButtonLabel, nextButtonLabel, dayStart, dayEnd }: SchedulerProps<TAppointment, TResource, TResourceId>): react_jsx_runtime.JSX.Element;
+declare function Scheduler<TAppointment, TResource extends BaseSchedulerResource<TResourceId>, TResourceId extends SchedulerId>({ resources, appointments, selectedDate, onSelectedDateChange, adapter, onPersistMoveResize, onAppointmentChange, renderResourceHeader, renderAppointment, resourceAppointmentClassMap, getResourceAppointmentAppearance, getResourceAppointmentColorToken, appointmentColorTokenClassMap, getResourceAppointmentBackground, renderDatePicker, prevButtonLabel, nextButtonLabel, dayStart, dayEnd }: SchedulerProps<TAppointment, TResource, TResourceId>): react_jsx_runtime.JSX.Element;
+
+type ApplySchedulerAppointmentChangeOptions<TAppointment, TResourceId extends SchedulerId> = {
+    getId: (appointment: TAppointment) => SchedulerId;
+    setResourceId: (appointment: TAppointment, resourceId: TResourceId) => TAppointment;
+    setStart: (appointment: TAppointment, start: Date) => TAppointment;
+    setEnd: (appointment: TAppointment, end: Date) => TAppointment;
+};
+declare function applySchedulerAppointmentChange<TAppointment, TResourceId extends SchedulerId>(appointments: TAppointment[], change: SchedulerAppointmentChangeArgs<TAppointment, TResourceId>, options: ApplySchedulerAppointmentChangeOptions<TAppointment, TResourceId>): TAppointment[];
 
-export { type BaseSchedulerResource, type RenderSchedulerAppt, Scheduler, type SchedulerAppointmentAdapter, type SchedulerDragState, type SchedulerEvent, type SchedulerId, type SchedulerProps };
+export { type ApplySchedulerAppointmentChangeOptions, type BaseSchedulerResource, type RenderSchedulerAppt, Scheduler, type SchedulerAppointmentAdapter, type SchedulerAppointmentAppearance, type SchedulerAppointmentChangeArgs, type SchedulerAppointmentColorToken, type SchedulerDragState, type SchedulerEvent, type SchedulerId, type SchedulerProps, type SchedulerResourceClassMap, applySchedulerAppointmentChange };

package/dist/index.js

@@ -105,6 +105,46 @@ function isNameLike(resource) {
   const maybe = resource;
   return typeof maybe.firstName === "string" || typeof maybe.lastName === "string";
 }
+function toInputDateValue(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function fromInputDateValue(value) {
+  const [yearRaw, monthRaw, dayRaw] = value.split("-");
+  const year = Number(yearRaw);
+  const month = Number(monthRaw);
+  const day = Number(dayRaw);
+  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
+    return null;
+  }
+  return new Date(year, month - 1, day);
+}
+var DEFAULT_APPOINTMENT_COLOR_TOKEN_CLASS_MAP = {
+  slate: "bg-slate-100 dark:bg-slate-900/40",
+  gray: "bg-gray-100 dark:bg-gray-900/40",
+  zinc: "bg-zinc-100 dark:bg-zinc-900/40",
+  neutral: "bg-neutral-100 dark:bg-neutral-900/40",
+  stone: "bg-stone-100 dark:bg-stone-900/40",
+  red: "bg-red-100 dark:bg-red-950/40",
+  orange: "bg-orange-100 dark:bg-orange-950/40",
+  amber: "bg-amber-100 dark:bg-amber-950/40",
+  yellow: "bg-yellow-100 dark:bg-yellow-950/40",
+  lime: "bg-lime-100 dark:bg-lime-950/40",
+  green: "bg-green-100 dark:bg-green-950/40",
+  emerald: "bg-emerald-100 dark:bg-emerald-950/40",
+  teal: "bg-teal-100 dark:bg-teal-950/40",
+  cyan: "bg-cyan-100 dark:bg-cyan-950/40",
+  sky: "bg-sky-100 dark:bg-sky-950/40",
+  blue: "bg-blue-100 dark:bg-blue-950/40",
+  indigo: "bg-indigo-100 dark:bg-indigo-950/40",
+  violet: "bg-violet-100 dark:bg-violet-950/40",
+  purple: "bg-purple-100 dark:bg-purple-950/40",
+  fuchsia: "bg-fuchsia-100 dark:bg-fuchsia-950/40",
+  pink: "bg-pink-100 dark:bg-pink-950/40",
+  rose: "bg-rose-100 dark:bg-rose-950/40"
+};
 function Scheduler({
   resources,
   appointments,
@@ -115,6 +155,10 @@ function Scheduler({
   onAppointmentChange,
   renderResourceHeader,
   renderAppointment,
+  resourceAppointmentClassMap,
+  getResourceAppointmentAppearance,
+  getResourceAppointmentColorToken,
+  appointmentColorTokenClassMap,
   getResourceAppointmentBackground,
   renderDatePicker,
   prevButtonLabel = "Prev",
@@ -186,6 +230,48 @@ function Scheduler({
     }
     return map;
   }, [getResourceAppointmentBackground, resources]);
+  const appointmentColorTokenClassByResource = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const mergedClassMap = {
+      ...DEFAULT_APPOINTMENT_COLOR_TOKEN_CLASS_MAP,
+      ...appointmentColorTokenClassMap ?? {}
+    };
+    if (!getResourceAppointmentColorToken) {
+      return map;
+    }
+    for (const resource of resources) {
+      const token = getResourceAppointmentColorToken(resource);
+      map.set(resource.id, token ? mergedClassMap[token] : void 0);
+    }
+    return map;
+  }, [appointmentColorTokenClassMap, getResourceAppointmentColorToken, resources]);
+  const appointmentAppearanceByResource = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const resource of resources) {
+      const classFromIdMap = resourceAppointmentClassMap?.[String(resource.id)];
+      if (classFromIdMap) {
+        map.set(resource.id, { className: classFromIdMap });
+        continue;
+      }
+      const appearance = getResourceAppointmentAppearance?.(resource);
+      if (appearance) {
+        map.set(resource.id, appearance);
+        continue;
+      }
+      const tokenClass = appointmentColorTokenClassByResource.get(resource.id);
+      if (tokenClass) {
+        map.set(resource.id, { className: tokenClass });
+        continue;
+      }
+      const legacyBackground = appointmentBgByResource.get(resource.id);
+      if (!legacyBackground) {
+        map.set(resource.id, void 0);
+        continue;
+      }
+      map.set(resource.id, { className: legacyBackground });
+    }
+    return map;
+  }, [appointmentBgByResource, appointmentColorTokenClassByResource, getResourceAppointmentAppearance, resourceAppointmentClassMap, resources]);
   const pointerToMin = (resourceId, clientY) => {
     const col = colRefs.current[String(resourceId)];
     if (!col) {
@@ -320,88 +406,178 @@ function Scheduler({
       void persistDrag(current);
     }
   };
+  const defaultRenderAppointment = ({
+    appointment,
+    onPointerDown,
+    onResizePointerDown: onResizePointerDown2,
+    appointmentAppearance,
+    appointmentBackgroundColor
+  }) => {
+    const rawMaybe = appointment.raw;
+    const description = typeof rawMaybe.description === "string" ? rawMaybe.description : void 0;
+    const legacyClassName = typeof appointmentBackgroundColor === "string" ? appointmentBackgroundColor : void 0;
+    const backgroundClassName = appointmentAppearance?.className ?? legacyClassName ?? "bg-muted/40 dark:bg-muted/30";
+    const className = `relative h-full cursor-grab overflow-hidden rounded-md border border-border p-2 pb-5 text-foreground ${backgroundClassName}`;
+    return /* @__PURE__ */ jsxs("div", { onPointerDown, className, children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold", children: appointment.title }),
+      description ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10px] font-medium text-muted-foreground", children: description }) : null,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          "aria-label": "Resize appointment",
+          onPointerDown: (event) => {
+            event.stopPropagation();
+            onResizePointerDown2(event);
+          },
+          className: "absolute inset-x-1 bottom-1 h-2 cursor-ns-resize rounded-full bg-border/90 transition-colors hover:bg-border"
+        }
+      )
+    ] });
+  };
+  const defaultRenderDatePicker = ({
+    selectedDate: value,
+    onSelectedDateChange: onDateChange
+  }) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "date",
+      value: toInputDateValue(value),
+      onChange: (event) => {
+        const nextDate = fromInputDateValue(event.target.value);
+        if (nextDate) {
+          onDateChange(nextDate);
+        }
+      },
+      className: "h-7 rounded-md border border-border bg-card px-2 text-xs text-foreground",
+      "aria-label": "Select date"
+    }
+  );
+  const defaultRenderResourceHeader = (resource) => /* @__PURE__ */ jsx("strong", { children: resource.label });
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: `rfs-root ${drag.kind === "move" ? "rfs-root--drag-move" : ""} ${drag.kind === "resize" ? "rfs-root--drag-resize" : ""}`,
+      className: `rfs-root rounded-lg bg-background text-foreground ${drag.kind === "move" ? "rfs-root--drag-move" : ""} ${drag.kind === "resize" ? "rfs-root--drag-resize" : ""}`,
       onPointerMove: onGlobalPointerMove,
       onPointerUp: onGlobalPointerUp,
       onPointerCancel: onGlobalPointerUp,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "rfs-toolbar", children: [
-          /* @__PURE__ */ jsx("button", { className: "rfs-btn", type: "button", onClick: () => onSelectedDateChange(shiftDays(selectedDate, -1)), children: prevButtonLabel }),
-          renderDatePicker ? renderDatePicker({ selectedDate, onSelectedDateChange }) : /* @__PURE__ */ jsx("strong", { className: "rfs-date-label", children: selectedISO }),
-          /* @__PURE__ */ jsx("button", { className: "rfs-btn", type: "button", onClick: () => onSelectedDateChange(shiftDays(selectedDate, 1)), children: nextButtonLabel })
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rfs-btn border-border bg-card text-foreground hover:bg-muted",
+              type: "button",
+              onClick: () => onSelectedDateChange(shiftDays(selectedDate, -1)),
+              children: prevButtonLabel
+            }
+          ),
+          (renderDatePicker ?? defaultRenderDatePicker)({ selectedDate, onSelectedDateChange }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rfs-btn border-border bg-card text-foreground hover:bg-muted",
+              type: "button",
+              onClick: () => onSelectedDateChange(shiftDays(selectedDate, 1)),
+              children: nextButtonLabel
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "rfs-shell", children: /* @__PURE__ */ jsxs("div", { style: { minWidth: gridMinWidth }, children: [
-          /* @__PURE__ */ jsxs("div", { className: "rfs-header", children: [
-            /* @__PURE__ */ jsx("div", { className: "rfs-gutter", style: { width: GUTTER_W } }),
-            resources.map((resource) => /* @__PURE__ */ jsxs("div", { className: "rfs-resource-header", style: { minWidth: RESOURCE_MIN_W, flex: 1 }, children: [
-              renderResourceHeader(resource),
-              isNameLike(resource) ? /* @__PURE__ */ jsx("div", { className: "rfs-resource-subtitle", children: fullName(resource) }) : null
-            ] }, String(resource.id)))
+        /* @__PURE__ */ jsx("div", { className: "rfs-shell border-border bg-card", children: /* @__PURE__ */ jsxs("div", { style: { minWidth: gridMinWidth }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "rfs-header border-border bg-card", children: [
+            /* @__PURE__ */ jsx("div", { className: "rfs-gutter border-border", style: { width: GUTTER_W } }),
+            resources.map((resource) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "rfs-resource-header border-border bg-card text-foreground",
+                style: { minWidth: RESOURCE_MIN_W, flex: 1 },
+                children: [
+                  (renderResourceHeader ?? defaultRenderResourceHeader)(resource),
+                  isNameLike(resource) ? /* @__PURE__ */ jsx("div", { className: "rfs-resource-subtitle text-muted-foreground", children: fullName(resource) }) : null
+                ]
+              },
+              String(resource.id)
+            ))
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "rfs-body", children: [
-            /* @__PURE__ */ jsx("div", { className: "rfs-times", style: { width: GUTTER_W, height: gridHeight }, children: Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "rfs-time-tick", style: { top: TOP_PAD + i * 60 * PX_PER_MIN }, children: [
-              String(Math.floor((dayStartAbs + i * 60) / 60)).padStart(2, "0"),
-              ":",
-              String((dayStartAbs + i * 60) % 60).padStart(2, "0")
-            ] }, `tick-${i}`)) }),
-            /* @__PURE__ */ jsx("div", { className: "rfs-grid", children: resources.map((resource) => /* @__PURE__ */ jsx("div", { className: "rfs-col", style: { minWidth: RESOURCE_MIN_W, flex: 1 }, children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("div", { className: "rfs-times border-border bg-card", style: { width: GUTTER_W, height: gridHeight }, children: Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsxs(
               "div",
               {
-                ref: (el) => {
-                  colRefs.current[String(resource.id)] = el;
-                },
-                className: "rfs-col-inner",
-                style: { height: gridHeight },
+                className: "rfs-time-tick text-muted-foreground",
+                style: { top: TOP_PAD + i * 60 * PX_PER_MIN },
                 children: [
-                  Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "rfs-hour-line",
-                      style: { top: TOP_PAD + i * 60 * PX_PER_MIN }
-                    },
-                    `major-${String(resource.id)}-${i}`
-                  )),
-                  Array.from({ length: Math.floor(dayMinutes / STEP_MIN) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "rfs-slot-line",
-                      style: { top: TOP_PAD + i * STEP_MIN * PX_PER_MIN }
+                  String(Math.floor((dayStartAbs + i * 60) / 60)).padStart(2, "0"),
+                  ":",
+                  String((dayStartAbs + i * 60) % 60).padStart(2, "0")
+                ]
+              },
+              `tick-${i}`
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "rfs-grid", children: resources.map((resource) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rfs-col border-border bg-card",
+                style: { minWidth: RESOURCE_MIN_W, flex: 1 },
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: (el) => {
+                      colRefs.current[String(resource.id)] = el;
                     },
-                    `minor-${String(resource.id)}-${i}`
-                  )),
-                  (laidOutByResource.get(resource.id) ?? []).map((appointment) => {
-                    const laneWidthPct = 100 / appointment.lanes;
-                    const top = TOP_PAD + appointment.startMin * PX_PER_MIN;
-                    const height = Math.max(MIN_EVENT_MIN * PX_PER_MIN, (appointment.endMin - appointment.startMin) * PX_PER_MIN);
-                    const appointmentBackgroundColor = appointmentBgByResource.get(resource.id);
-                    return /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "rfs-card-slot",
-                        style: {
-                          top,
-                          left: `${laneWidthPct * appointment.lane}%`,
-                          width: `${laneWidthPct}%`,
-                          height
+                    className: "rfs-col-inner bg-card",
+                    style: { height: gridHeight },
+                    children: [
+                      Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "rfs-hour-line border-border/70",
+                          style: { top: TOP_PAD + i * 60 * PX_PER_MIN }
                         },
-                        children: renderAppointment({
-                          appointment,
-                          onPointerDown: (event) => onApptPointerDown(event, appointment),
-                          onResizePointerDown: (event) => onResizePointerDown(event, appointment),
-                          appointmentBackgroundColor,
-                          drag,
-                          suppressClickRef
-                        })
-                      },
-                      String(appointment.id)
-                    );
-                  })
-                ]
-              }
-            ) }, String(resource.id))) })
+                        `major-${String(resource.id)}-${i}`
+                      )),
+                      Array.from({ length: Math.floor(dayMinutes / STEP_MIN) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "rfs-slot-line border-border/50",
+                          style: { top: TOP_PAD + i * STEP_MIN * PX_PER_MIN }
+                        },
+                        `minor-${String(resource.id)}-${i}`
+                      )),
+                      (laidOutByResource.get(resource.id) ?? []).map((appointment) => {
+                        const laneWidthPct = 100 / appointment.lanes;
+                        const top = TOP_PAD + appointment.startMin * PX_PER_MIN;
+                        const height = Math.max(MIN_EVENT_MIN * PX_PER_MIN, (appointment.endMin - appointment.startMin) * PX_PER_MIN);
+                        const appointmentAppearance = appointmentAppearanceByResource.get(resource.id);
+                        const appointmentBackgroundColor = appointmentBgByResource.get(resource.id);
+                        return /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "rfs-card-slot",
+                            style: {
+                              top,
+                              left: `${laneWidthPct * appointment.lane}%`,
+                              width: `${laneWidthPct}%`,
+                              height
+                            },
+                            children: (renderAppointment ?? defaultRenderAppointment)({
+                              appointment,
+                              onPointerDown: (event) => onApptPointerDown(event, appointment),
+                              onResizePointerDown: (event) => onResizePointerDown(event, appointment),
+                              appointmentAppearance,
+                              appointmentBackgroundColor,
+                              drag,
+                              suppressClickRef
+                            })
+                          },
+                          String(appointment.id)
+                        );
+                      })
+                    ]
+                  }
+                )
+              },
+              String(resource.id)
+            )) })
           ] })
         ] }) })
       ]
@@ -409,6 +585,18 @@ function Scheduler({
   );
 }
 
-export { Scheduler };
+// src/appointment-change.ts
+function applySchedulerAppointmentChange(appointments, change, options) {
+  return appointments.map((item) => {
+    if (options.getId(item) !== options.getId(change.appointment)) {
+      return item;
+    }
+    const withResource = options.setResourceId(item, change.next.resourceId);
+    const withStart = options.setStart(withResource, change.next.start);
+    return options.setEnd(withStart, change.next.end);
+  });
+}
+
+export { Scheduler, applySchedulerAppointmentChange };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map