@hectorbliss/denik-calendar 0.0.2 → 0.0.3

package/README.md

@@ -111,7 +111,60 @@ interface CalendarConfig {
     edit?: ReactNode;
     close?: ReactNode;
   };
+  renderColumnHeader?: (props: ColumnHeaderProps) => ReactNode;
 }
+
+interface ColumnHeaderProps {
+  date: Date;
+  index: number;
+  isToday: boolean;
+  locale: string;
+}
+```
+
+## Custom Column Headers
+
+Transform the calendar from weekdays to any resource type:
+
+```tsx
+// Padel courts booking
+<Calendar
+  events={courtEvents}
+  config={{
+    renderColumnHeader: ({ index }) => (
+      <div className="text-center font-semibold">
+        Court {index + 1}
+      </div>
+    )
+  }}
+/>
+
+// Meeting rooms
+<Calendar
+  events={roomEvents}
+  config={{
+    renderColumnHeader: ({ index }) => {
+      const rooms = ["Sala A", "Sala B", "Sala C", "Sala D", "Sala E", "Sala F", "Sala G"];
+      return <span>{rooms[index]}</span>;
+    }
+  }}
+/>
+
+// Employees schedule
+<Calendar
+  events={shifts}
+  config={{
+    renderColumnHeader: ({ index }) => {
+      const team = ["Ana", "Carlos", "María", "Pedro", "Laura", "Diego", "Sofia"];
+      return (
+        <div className="flex flex-col items-center">
+          <img src={`/avatars/${index}.jpg`} className="w-8 h-8 rounded-full" />
+          <span className="text-sm">{team[index]}</span>
+        </div>
+      );
+    }
+  }}
+/>
 ```
 
 ## Features
@@ -121,6 +174,7 @@ interface CalendarConfig {
 - Block time slots
 - Week navigation
 - Auto-scroll to current hour
+- Custom column headers (resources, courts, rooms, employees)
 - Customizable icons
 - Locale support
 - TypeScript support

package/dist/index.cjs

@@ -217,18 +217,29 @@ var cn = (...classes) => classes.filter(Boolean).join(" ");
 var DefaultTrashIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) });
 var DefaultEditIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) });
 var DefaultCloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
-var DayHeader = ({ date, locale }) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "grid place-items-center", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize", children: date.toLocaleDateString(locale, { weekday: "short" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: cn(
-        isToday(date) && "bg-blue-500 rounded-full p-1 text-white"
-      ),
-      children: date.getDate()
-    }
-  )
-] });
+var DayHeader = ({
+  date,
+  locale,
+  index,
+  renderColumnHeader
+}) => {
+  const isToday2 = isToday(date);
+  if (renderColumnHeader) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid place-items-center", children: renderColumnHeader({ date, index, isToday: isToday2, locale }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "grid place-items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize", children: date.toLocaleDateString(locale, { weekday: "short" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          isToday2 && "bg-blue-500 rounded-full p-1 text-white"
+        ),
+        children: date.getDate()
+      }
+    )
+  ] });
+};
 function Calendar({
   date = /* @__PURE__ */ new Date(),
   events = [],
@@ -239,7 +250,7 @@ function Calendar({
   onRemoveBlock,
   config = {}
 }) {
-  const { locale = "es-MX", icons = {} } = config;
+  const { locale = "es-MX", icons = {}, renderColumnHeader } = config;
   const week = completeWeek(date);
   const [activeId, setActiveId] = react.useState(null);
   const { canMove } = useCalendarEvents(events);
@@ -291,7 +302,16 @@ function Calendar({
         /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "w-full bg-white shadow rounded-xl", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "grid grid-cols-8 place-items-center py-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: Intl.DateTimeFormat().resolvedOptions().timeZone }) }),
-            week.map((day) => /* @__PURE__ */ jsxRuntime.jsx(DayHeader, { date: day, locale }, day.toISOString()))
+            week.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              DayHeader,
+              {
+                date: day,
+                locale,
+                index,
+                renderColumnHeader
+              },
+              day.toISOString()
+            ))
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "grid grid-cols-8 max-h-[80vh] overflow-y-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsx(TimeColumn, {}),

package/dist/index.d.cts

@@ -1,6 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, RefObject } from 'react';
 
+/**
+ * Props passed to custom column header renderer
+ * Use this to build custom headers for resources (courts, rooms, employees, etc.)
+ */
+interface ColumnHeaderProps {
+    /** The date for this column */
+    date: Date;
+    /** Column index (0-6) */
+    index: number;
+    /** Whether this column represents today */
+    isToday: boolean;
+    /** The configured locale */
+    locale: string;
+}
 /**
  * Generic calendar event - decoupled from any ORM
  */
@@ -30,6 +44,23 @@ interface CalendarConfig {
         edit?: ReactNode;
         close?: ReactNode;
     };
+    /**
+     * Custom renderer for column headers.
+     * Use this to display resources (courts, rooms, employees) instead of weekdays.
+     *
+     * @example
+     * // Padel courts
+     * renderColumnHeader: ({ index }) => <span>Court {index + 1}</span>
+     *
+     * @example
+     * // With custom styling
+     * renderColumnHeader: ({ date, isToday }) => (
+     *   <div className={isToday ? "font-bold" : ""}>
+     *     {date.toLocaleDateString("en", { weekday: "short" })}
+     *   </div>
+     * )
+     */
+    renderColumnHeader?: (props: ColumnHeaderProps) => ReactNode;
 }
 /**
  * Calendar component props
@@ -128,4 +159,4 @@ declare function useClickOutside<T extends HTMLElement>({ isActive, onOutsideCli
  */
 declare function formatDate(date: Date, locale?: string): string;
 
-export { Calendar, type CalendarConfig, type CalendarEvent, type CalendarProps, Calendar as SimpleBigWeekView, addDaysToDate, addMinutesToDate, areSameDates, completeWeek, formatDate, fromDateToTimeString, fromMinsToLocaleTimeString, fromMinsToTimeString, generateHours, getDaysInMonth, getMonday, isToday, useCalendarEvents, useClickOutside, useEventOverlap };
+export { Calendar, type CalendarConfig, type CalendarEvent, type CalendarProps, type ColumnHeaderProps, Calendar as SimpleBigWeekView, addDaysToDate, addMinutesToDate, areSameDates, completeWeek, formatDate, fromDateToTimeString, fromMinsToLocaleTimeString, fromMinsToTimeString, generateHours, getDaysInMonth, getMonday, isToday, useCalendarEvents, useClickOutside, useEventOverlap };

package/dist/index.d.ts

@@ -1,6 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, RefObject } from 'react';
 
+/**
+ * Props passed to custom column header renderer
+ * Use this to build custom headers for resources (courts, rooms, employees, etc.)
+ */
+interface ColumnHeaderProps {
+    /** The date for this column */
+    date: Date;
+    /** Column index (0-6) */
+    index: number;
+    /** Whether this column represents today */
+    isToday: boolean;
+    /** The configured locale */
+    locale: string;
+}
 /**
  * Generic calendar event - decoupled from any ORM
  */
@@ -30,6 +44,23 @@ interface CalendarConfig {
         edit?: ReactNode;
         close?: ReactNode;
     };
+    /**
+     * Custom renderer for column headers.
+     * Use this to display resources (courts, rooms, employees) instead of weekdays.
+     *
+     * @example
+     * // Padel courts
+     * renderColumnHeader: ({ index }) => <span>Court {index + 1}</span>
+     *
+     * @example
+     * // With custom styling
+     * renderColumnHeader: ({ date, isToday }) => (
+     *   <div className={isToday ? "font-bold" : ""}>
+     *     {date.toLocaleDateString("en", { weekday: "short" })}
+     *   </div>
+     * )
+     */
+    renderColumnHeader?: (props: ColumnHeaderProps) => ReactNode;
 }
 /**
  * Calendar component props
@@ -128,4 +159,4 @@ declare function useClickOutside<T extends HTMLElement>({ isActive, onOutsideCli
  */
 declare function formatDate(date: Date, locale?: string): string;
 
-export { Calendar, type CalendarConfig, type CalendarEvent, type CalendarProps, Calendar as SimpleBigWeekView, addDaysToDate, addMinutesToDate, areSameDates, completeWeek, formatDate, fromDateToTimeString, fromMinsToLocaleTimeString, fromMinsToTimeString, generateHours, getDaysInMonth, getMonday, isToday, useCalendarEvents, useClickOutside, useEventOverlap };
+export { Calendar, type CalendarConfig, type CalendarEvent, type CalendarProps, type ColumnHeaderProps, Calendar as SimpleBigWeekView, addDaysToDate, addMinutesToDate, areSameDates, completeWeek, formatDate, fromDateToTimeString, fromMinsToLocaleTimeString, fromMinsToTimeString, generateHours, getDaysInMonth, getMonday, isToday, useCalendarEvents, useClickOutside, useEventOverlap };

package/dist/index.js

@@ -215,18 +215,29 @@ var cn = (...classes) => classes.filter(Boolean).join(" ");
 var DefaultTrashIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) });
 var DefaultEditIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) });
 var DefaultCloseIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
-var DayHeader = ({ date, locale }) => /* @__PURE__ */ jsxs("p", { className: "grid place-items-center", children: [
-  /* @__PURE__ */ jsx("span", { className: "capitalize", children: date.toLocaleDateString(locale, { weekday: "short" }) }),
-  /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        isToday(date) && "bg-blue-500 rounded-full p-1 text-white"
-      ),
-      children: date.getDate()
-    }
-  )
-] });
+var DayHeader = ({
+  date,
+  locale,
+  index,
+  renderColumnHeader
+}) => {
+  const isToday2 = isToday(date);
+  if (renderColumnHeader) {
+    return /* @__PURE__ */ jsx("div", { className: "grid place-items-center", children: renderColumnHeader({ date, index, isToday: isToday2, locale }) });
+  }
+  return /* @__PURE__ */ jsxs("p", { className: "grid place-items-center", children: [
+    /* @__PURE__ */ jsx("span", { className: "capitalize", children: date.toLocaleDateString(locale, { weekday: "short" }) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          isToday2 && "bg-blue-500 rounded-full p-1 text-white"
+        ),
+        children: date.getDate()
+      }
+    )
+  ] });
+};
 function Calendar({
   date = /* @__PURE__ */ new Date(),
   events = [],
@@ -237,7 +248,7 @@ function Calendar({
   onRemoveBlock,
   config = {}
 }) {
-  const { locale = "es-MX", icons = {} } = config;
+  const { locale = "es-MX", icons = {}, renderColumnHeader } = config;
   const week = completeWeek(date);
   const [activeId, setActiveId] = useState(null);
   const { canMove } = useCalendarEvents(events);
@@ -289,7 +300,16 @@ function Calendar({
         /* @__PURE__ */ jsxs("article", { className: "w-full bg-white shadow rounded-xl", children: [
           /* @__PURE__ */ jsxs("section", { className: "grid grid-cols-8 place-items-center py-4", children: [
             /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: Intl.DateTimeFormat().resolvedOptions().timeZone }) }),
-            week.map((day) => /* @__PURE__ */ jsx(DayHeader, { date: day, locale }, day.toISOString()))
+            week.map((day, index) => /* @__PURE__ */ jsx(
+              DayHeader,
+              {
+                date: day,
+                locale,
+                index,
+                renderColumnHeader
+              },
+              day.toISOString()
+            ))
           ] }),
           /* @__PURE__ */ jsxs("section", { className: "grid grid-cols-8 max-h-[80vh] overflow-y-auto", children: [
             /* @__PURE__ */ jsx(TimeColumn, {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hectorbliss/denik-calendar",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "description": "A React drag-and-drop week calendar component with overlap detection. Built with @dnd-kit.",
   "type": "module",