@hectorbliss/denik-calendar 0.0.3 → 0.0.4

package/README.md

@@ -24,7 +24,6 @@ function App() {
     <Calendar
       events={events}
       onEventMove={(eventId, newStart) => {
-        // Handle event move
         setEvents(prev =>
           prev.map(e => (e.id === eventId ? { ...e, start: newStart } : e))
         );
@@ -43,74 +42,152 @@ function App() {
 }
 ```
 
-## Headless Hook
+## Resource Mode (Day View)
 
-Use the calendar logic without the UI:
+Display resources (courts, rooms, employees) as columns instead of weekdays:
 
 ```tsx
-import { useCalendarEvents } from "@hectorbliss/denik-calendar";
+import { Calendar, useCalendarControls } from "@hectorbliss/denik-calendar";
+
+const courts = [
+  { id: "court-1", name: "Cancha 1", icon: <PadelIcon /> },
+  { id: "court-2", name: "Cancha 2", icon: <PadelIcon /> },
+  { id: "court-3", name: "Cancha 3", icon: <TennisIcon /> },
+  { id: "court-4", name: "Cancha 4", icon: <TennisIcon /> },
+];
+
+// Events with resourceId
+const events = [
+  { id: "1", start: new Date(), duration: 90, title: "Match", resourceId: "court-1" },
+  { id: "2", start: new Date(), duration: 60, title: "Training", resourceId: "court-2" },
+];
+
+function CourtSchedule() {
+  return (
+    <Calendar
+      events={events}
+      date={selectedDay}
+      resources={courts}
+    />
+  );
+}
+```
+
+## Navigation Controls
 
-function MyCustomCalendar({ events }) {
-  const {
-    canMove,
-    hasOverlap,
-    findConflicts,
-    getEventsForDay,
-    getEventsForWeek,
-    findAvailableSlots
-  } = useCalendarEvents(events);
-
-  const handleDrop = (eventId, newStart) => {
-    if (canMove(eventId, newStart)) {
-      updateEvent(eventId, newStart);
-    } else {
-      toast.error("Time slot occupied");
-    }
-  };
-
-  // Get available 60-min slots for today (8am-6pm)
-  const slots = findAvailableSlots(new Date(), 60);
+Use the headless hook for complete control:
+
+```tsx
+import { Calendar, useCalendarControls, CalendarControls } from "@hectorbliss/denik-calendar";
+
+function App() {
+  const controls = useCalendarControls();
+
+  return (
+    <>
+      {/* Pre-built controls */}
+      <CalendarControls controls={controls} />
+
+      {/* Or build your own */}
+      <div>
+        <button onClick={controls.goToToday}>HOY</button>
+        <button onClick={controls.goToPrev}>←</button>
+        <button onClick={controls.goToNext}>→</button>
+        <span>{controls.label}</span>
+        <button onClick={controls.toggleView}>
+          {controls.view === "week" ? "DÍA" : "SEMANA"}
+        </button>
+      </div>
+
+      <Calendar
+        date={controls.date}
+        events={events}
+        resources={controls.view === "day" ? courts : undefined}
+      />
+    </>
+  );
 }
 ```
 
+## Visual Overlaps
+
+Events at the same time are displayed side-by-side automatically.
+
+## Headless Hooks
+
+### useCalendarEvents
+
+```tsx
+import { useCalendarEvents } from "@hectorbliss/denik-calendar";
+
+const {
+  canMove,           // Check if event can move to new time
+  hasOverlap,        // Check if time slot has conflicts
+  findConflicts,     // Get all conflicting events
+  getEventsForDay,   // Filter events by day
+  getEventsForWeek,  // Filter events by week
+  findAvailableSlots // Get available time slots
+} = useCalendarEvents(events);
+```
+
+### useCalendarControls
+
+```tsx
+import { useCalendarControls } from "@hectorbliss/denik-calendar";
+
+const {
+  date,        // Current date
+  view,        // "week" | "day"
+  week,        // Array of 7 dates (Mon-Sun)
+  label,       // Formatted date label
+  isToday,     // Boolean
+  goToToday,   // Navigate to today
+  goToPrev,    // Navigate back (7 days or 1 day)
+  goToNext,    // Navigate forward
+  toggleView,  // Switch between week/day
+  setDate,     // Set specific date
+  setView,     // Set specific view
+} = useCalendarControls({ locale: "es-MX" });
+```
+
 ## Props
 
 ### Calendar
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `events` | `CalendarEvent[]` | Array of events to display |
-| `date` | `Date` | Current week to display (default: today) |
-| `onEventMove` | `(eventId, newStart) => void` | Called when event is dragged |
-| `onAddBlock` | `(start) => void` | Called when creating a block |
-| `onRemoveBlock` | `(eventId) => void` | Called when removing a block |
-| `onEventClick` | `(event) => void` | Called when clicking an event |
-| `onNewEvent` | `(start) => void` | Called when clicking empty slot |
-| `config` | `CalendarConfig` | Configuration options |
-
-### CalendarEvent
+| `events` | `CalendarEvent[]` | Array of events |
+| `date` | `Date` | Current date (default: today) |
+| `resources` | `Resource[]` | Resources for day view mode |
+| `onEventMove` | `(eventId, newStart) => void` | Drag handler |
+| `onAddBlock` | `(start) => void` | Block creation |
+| `onRemoveBlock` | `(eventId) => void` | Block removal |
+| `onEventClick` | `(event) => void` | Click handler |
+| `onNewEvent` | `(start) => void` | Empty slot click |
+| `config` | `CalendarConfig` | Configuration |
+
+### Types
 
 ```typescript
 interface CalendarEvent {
   id: string;
   start: Date;
-  duration: number; // minutes
+  duration: number;      // minutes
   title?: string;
   type?: "BLOCK" | "EVENT";
+  resourceId?: string;   // For resource mode
   service?: { name: string };
 }
-```
 
-### CalendarConfig
+interface Resource {
+  id: string;
+  name: string;
+  icon?: ReactNode;
+}
 
-```typescript
 interface CalendarConfig {
-  locale?: string; // default: "es-MX"
-  icons?: {
-    trash?: ReactNode;
-    edit?: ReactNode;
-    close?: ReactNode;
-  };
+  locale?: string;
+  icons?: { trash?, edit?, close? };
   renderColumnHeader?: (props: ColumnHeaderProps) => ReactNode;
 }
 
@@ -119,62 +196,21 @@ interface ColumnHeaderProps {
   index: number;
   isToday: boolean;
   locale: string;
+  resource?: Resource;
 }
 ```
 
-## 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
 
-- Drag & drop events between time slots
-- Automatic overlap detection
+- Drag & drop events
+- Visual overlap rendering
+- Resource/day view mode
+- Week view mode
+- Navigation controls (hook + component)
 - Block time slots
-- Week navigation
 - Auto-scroll to current hour
-- Custom column headers (resources, courts, rooms, employees)
+- Custom column headers
+- Horizontal scroll for many resources
 - Customizable icons
 - Locale support
 - TypeScript support