@intinyagroup/calendar 0.1.1-alpha.13 → 0.1.1-alpha.14

package/dist/DateRangePicker.svelte

@@ -273,6 +273,8 @@
           {@const isEdge = isStart || isEnd}
 
           <div
+            role="gridcell"
+            aria-selected={isEdge}
             class={cn(
               'relative py-0.5 flex items-center justify-center',
               inRange && !isEdge && 'bg-[var(--ui-primary)]/10',

package/dist/EventCalendar.svelte

@@ -44,6 +44,7 @@
     onEventClick,
     onDateClick,
     onAddEvent,
+    onDragCreate,
     onEventReschedule,
   }: {
     events?: CalendarEvent[];
@@ -59,12 +60,18 @@
     onAddEvent?: (newEvent: CalendarEvent) => void;
     onEventReschedule?: (detail: { event: CalendarEvent; newStart: Date; newEnd: Date }) => void;
     onEventResize?: (detail: { event: CalendarEvent; newStart: Date; newEnd: Date }) => void;
+    onDragCreate?: (detail: { start: Date; end: Date }) => void;
   } = $props();
 
   let draggedEventId = $state<string | null>(null);
   let resizingEventId = $state<string | null>(null);
   let resizeStartY = $state<number>(0);
   let resizeStartDuration = $state<number>(0);
+  // Drag-to-create state
+  let dragCreateStart = $state<{ date: Date; hour: number; minute: number } | null>(null);
+  let dragCreateEnd = $state<{ date: Date; hour: number; minute: number } | null>(null);
+  let isDragCreating = $state(false);
+  let dragCreateColumn = $state<Date | null>(null);
 
   function isMultiDayOrAllDay(ev: CalendarEvent): boolean {
     if (ev.allDay) return true;
@@ -137,6 +144,84 @@
     window.addEventListener('mousemove', onMouseMove);
     window.addEventListener('mouseup', onMouseUp);
   }
+  // Drag-to-create: snap to 15-minute increments
+  function snapTo15Minutes(minutes: number): number {
+    return Math.round(minutes / 15) * 15;
+  }
+
+  function handleDragCreateMouseDown(e: MouseEvent, date: Date, hour: number, containerEl: HTMLElement) {
+    // Only left click
+    if (e.button !== 0) return;
+    // Don't start drag-create if already dragging an event or resizing
+    if (draggedEventId || resizingEventId) return;
+    // Don't start if clicking on an event element
+    const target = e.target as HTMLElement;
+    if (target.closest('[role="button"]') || target.closest('.group\\/event')) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const rect = containerEl.getBoundingClientRect();
+    const y = e.clientY - rect.top;
+    const hourHeight = containerEl.id === 'week-day-col' ? 56 : 64;
+    const minutesInHour = (y / hourHeight) * 60;
+    const minute = snapTo15Minutes(minutesInHour);
+    const clampedMinute = Math.min(45, Math.max(0, minute));
+
+    dragCreateStart = { date, hour, minute: clampedMinute };
+    dragCreateEnd = { date, hour, minute: clampedMinute + 15 };
+    dragCreateColumn = date;
+    isDragCreating = true;
+
+    function onMouseMove(moveEvent: MouseEvent) {
+      if (!isDragCreating || !dragCreateStart) return;
+      const moveY = moveEvent.clientY - rect.top;
+      const moveMinutesInHour = (moveY / hourHeight) * 60;
+      const snappedMinutes = snapTo15Minutes(moveMinutesInHour);
+      const clampedMinutes = Math.min(24 * 60, Math.max(0, snappedMinutes));
+
+      const totalStartMinutes = dragCreateStart.hour * 60 + dragCreateStart.minute;
+      let totalEndMinutes = Math.max(totalStartMinutes + 15, clampedMinutes);
+      totalEndMinutes = Math.min(24 * 60, totalEndMinutes);
+
+      const endHour = Math.floor(totalEndMinutes / 60);
+      const endMinute = totalEndMinutes % 60;
+      dragCreateEnd = { date, hour: endHour, minute: endMinute };
+    }
+
+    function onMouseUp() {
+      if (isDragCreating && dragCreateStart && dragCreateEnd) {
+        const startMinutes = dragCreateStart.hour * 60 + dragCreateStart.minute;
+        const endMinutes = dragCreateEnd.hour * 60 + dragCreateEnd.minute;
+
+        if (endMinutes - startMinutes >= 15) {
+          const startDate = new Date(date);
+          startDate.setHours(dragCreateStart.hour, dragCreateStart.minute, 0, 0);
+          const endDate = new Date(date);
+          endDate.setHours(dragCreateEnd.hour, dragCreateEnd.minute, 0, 0);
+
+          onDragCreate?.({ start: startDate, end: endDate });
+
+          if (enableEventModal) {
+            newEventDate = new Date(date);
+            newEventStartTime = `${String(dragCreateStart.hour).padStart(2, '0')}:${String(dragCreateStart.minute).padStart(2, '0')}`;
+            newEventEndTime = `${String(dragCreateEnd.hour).padStart(2, '0')}:${String(dragCreateEnd.minute).padStart(2, '0')}`;
+            modalOpen = true;
+          }
+        }
+      }
+
+      isDragCreating = false;
+      dragCreateStart = null;
+      dragCreateEnd = null;
+      dragCreateColumn = null;
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    }
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  }
 
   type LayoutEvent = CalendarEvent & {
     colIndex: number;
@@ -578,14 +663,15 @@
 
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div
+        <div id="week-day-col"
           onclick={() => openCreateModal(d)}
           class="col-span-1 divide-y divide-[var(--ui-border)]/50 relative hover:bg-[var(--ui-secondary)]/10 cursor-pointer select-none"
         >
           {#each hours as hour}
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
-              class="h-14 transition-colors hover:bg-[var(--ui-primary)]/10"
+              class="h-14 transition-colors hover:bg-[var(--ui-primary)]/10 pointer-events-auto"
+              onmousedown={(e) => handleDragCreateMouseDown(e, d, hour, e.currentTarget.closest('[id="week-day-col"]')!)}
               ondragover={(e) => e.preventDefault()}
               ondrop={(e) => {
                 e.preventDefault();
@@ -651,6 +737,21 @@
               ></div>
             </div>
           {/each}
+          <!-- Drag-to-create preview -->
+          {#if isDragCreating && dragCreateStart && dragCreateEnd && dragCreateColumn && isSameDay(dragCreateColumn, d)}
+            {@const startTotalMin = dragCreateStart.hour * 60 + dragCreateStart.minute}
+            {@const endTotalMin = dragCreateEnd.hour * 60 + dragCreateEnd.minute}
+            {@const previewTop = (startTotalMin / 60) * 56}
+            {@const previewHeight = Math.max(14, ((endTotalMin - startTotalMin) / 60) * 56)}
+            <div
+              class="absolute inset-x-0.5 z-20 rounded bg-blue-500/30 border border-blue-400/50 pointer-events-none flex items-start justify-center pt-0.5"
+              style="top: {previewTop}px; height: {previewHeight}px;"
+            >
+              <span class="text-[9px] font-semibold text-blue-700 select-none">
+                {String(dragCreateStart.hour).padStart(2, '0')}:{String(dragCreateStart.minute).padStart(2, '0')} - {String(dragCreateEnd.hour).padStart(2, '0')}:{String(dragCreateEnd.minute).padStart(2, '0')}
+              </span>
+            </div>
+          {/if}
         </div>
       {/each}
     </div>
@@ -675,12 +776,14 @@
 
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <div
+      <div id="day-view-col"
         onclick={() => openCreateModal(currentDate)}
         class="col-span-10 divide-y divide-[var(--ui-border)]/50 relative p-1 hover:bg-[var(--ui-secondary)]/10 cursor-pointer select-none"
       >
-        {#each hours as _}
-          <div class="h-16"></div>
+        {#each hours as hour}
+          <div class="h-16 pointer-events-auto"
+            onmousedown={(e) => handleDragCreateMouseDown(e, currentDate, hour, e.currentTarget.closest('[id="day-view-col"]')!)}
+          ></div>
         {/each}
 
         <!-- Google Calendar style Current Time Red Line -->
@@ -740,6 +843,21 @@
             ></div>
           </div>
         {/each}
+        <!-- Drag-to-create preview -->
+        {#if isDragCreating && dragCreateStart && dragCreateEnd && isSameDay(dragCreateColumn!, currentDate)}
+          {@const startTotalMin = dragCreateStart.hour * 60 + dragCreateStart.minute}
+          {@const endTotalMin = dragCreateEnd.hour * 60 + dragCreateEnd.minute}
+          {@const previewTop = (startTotalMin / 60) * 64}
+          {@const previewHeight = Math.max(16, ((endTotalMin - startTotalMin) / 60) * 64)}
+          <div
+            class="absolute inset-x-1 z-20 rounded-lg bg-blue-500/30 border border-blue-400/50 pointer-events-none flex items-start justify-center pt-1"
+            style="top: {previewTop}px; height: {previewHeight}px;"
+          >
+            <span class="text-[10px] font-semibold text-blue-700 select-none">
+              {String(dragCreateStart.hour).padStart(2, '0')}:{String(dragCreateStart.minute).padStart(2, '0')} - {String(dragCreateEnd.hour).padStart(2, '0')}:{String(dragCreateEnd.minute).padStart(2, '0')}
+            </span>
+          </div>
+        {/if}
       </div>
     </div>
   {/if}

package/dist/EventCalendar.svelte.d.ts

@@ -30,6 +30,10 @@ type $$ComponentProps = {
         newStart: Date;
         newEnd: Date;
     }) => void;
+    onDragCreate?: (detail: {
+        start: Date;
+        end: Date;
+    }) => void;
 };
 declare const EventCalendar: import("svelte").Component<$$ComponentProps, {}, "events" | "view" | "currentDate">;
 type EventCalendar = ReturnType<typeof EventCalendar>;

package/dist/helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers.test.js

@@ -0,0 +1,129 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import EventCalendar from './EventCalendar.svelte';
+describe('EventCalendar', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.setSystemTime(new Date('2025-06-15T12:00:00'));
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('renders the calendar component with correct month title', () => {
+        render(EventCalendar);
+        // Title uses full month name: "MMMM yyyy"
+        expect(screen.getByText('June 2025')).toBeInTheDocument();
+    });
+    it('displays day-of-week headers', () => {
+        render(EventCalendar);
+        expect(screen.getByText('Sun')).toBeInTheDocument();
+        expect(screen.getByText('Mon')).toBeInTheDocument();
+        expect(screen.getByText('Tue')).toBeInTheDocument();
+        expect(screen.getByText('Wed')).toBeInTheDocument();
+        expect(screen.getByText('Thu')).toBeInTheDocument();
+        expect(screen.getByText('Fri')).toBeInTheDocument();
+        expect(screen.getByText('Sat')).toBeInTheDocument();
+    });
+    it('renders month view with day grid', () => {
+        render(EventCalendar);
+        // Should show days of June 2025. Use getAllByText for numbers that appear
+        // multiple times in the month grid (e.g. from previous/next month overflow).
+        expect(screen.getAllByText('15').length).toBeGreaterThanOrEqual(1);
+        expect(screen.getAllByText('30').length).toBeGreaterThanOrEqual(1);
+        expect(screen.getAllByText('1').length).toBeGreaterThanOrEqual(1);
+    });
+    it('renders events in the calendar', () => {
+        const events = [
+            {
+                id: '1',
+                title: 'Team Meeting',
+                start: new Date('2025-06-15T09:00:00'),
+                end: new Date('2025-06-15T10:00:00'),
+            },
+        ];
+        render(EventCalendar, { props: { events } });
+        expect(screen.getByText('Team Meeting')).toBeInTheDocument();
+    });
+    it('renders multiple events on the same day', () => {
+        const events = [
+            {
+                id: '1',
+                title: 'Morning Standup',
+                start: new Date('2025-06-15T09:00:00'),
+                end: new Date('2025-06-15T09:30:00'),
+            },
+            {
+                id: '2',
+                title: 'Lunch Break',
+                start: new Date('2025-06-15T12:00:00'),
+                end: new Date('2025-06-15T13:00:00'),
+            },
+        ];
+        render(EventCalendar, { props: { events } });
+        expect(screen.getByText('Morning Standup')).toBeInTheDocument();
+        expect(screen.getByText('Lunch Break')).toBeInTheDocument();
+    });
+    it('navigates to the previous month', async () => {
+        render(EventCalendar);
+        // Prev button is a Button with ChevronLeft icon; find by role
+        const prevBtn = screen.getAllByRole('button')[0];
+        await fireEvent.click(prevBtn);
+        expect(screen.getByText('May 2025')).toBeInTheDocument();
+    });
+    it('navigates to the next month', async () => {
+        render(EventCalendar);
+        // Next button is the third button (prev=0, today=1, next=2)
+        const nextBtn = screen.getAllByRole('button')[2];
+        await fireEvent.click(nextBtn);
+        expect(screen.getByText('July 2025')).toBeInTheDocument();
+    });
+    it('navigates back to today', async () => {
+        render(EventCalendar);
+        // Navigate to next month first
+        const nextBtn = screen.getAllByRole('button')[2];
+        await fireEvent.click(nextBtn);
+        expect(screen.getByText('July 2025')).toBeInTheDocument();
+        // Click Today button (text content is "Today")
+        const todayBtn = screen.getByText('Today');
+        await fireEvent.click(todayBtn);
+        expect(screen.getByText('June 2025')).toBeInTheDocument();
+    });
+    it('displays view switcher buttons', () => {
+        render(EventCalendar);
+        expect(screen.getByText('Month')).toBeInTheDocument();
+        expect(screen.getByText('Week')).toBeInTheDocument();
+        expect(screen.getByText('Day')).toBeInTheDocument();
+    });
+    it('shows event with color indicator', () => {
+        const events = [
+            {
+                id: '1',
+                title: 'Important Call',
+                start: new Date('2025-06-15T14:00:00'),
+                end: new Date('2025-06-15T15:00:00'),
+                color: '#dc2626',
+            },
+        ];
+        render(EventCalendar, { props: { events } });
+        expect(screen.getByText('Important Call')).toBeInTheDocument();
+    });
+    it('renders empty state without crashing', () => {
+        render(EventCalendar, { props: { events: [] } });
+        expect(screen.getByText('June 2025')).toBeInTheDocument();
+    });
+    it('renders all-day events (may appear in both grid and all-day header)', () => {
+        const events = [
+            {
+                id: '1',
+                title: 'Company Holiday',
+                start: new Date('2025-06-15T00:00:00'),
+                end: new Date('2025-06-16T00:00:00'),
+                allDay: true,
+            },
+        ];
+        render(EventCalendar, { props: { events } });
+        // All-day events appear in both the month grid and the all-day section
+        const matches = screen.getAllByText('Company Holiday');
+        expect(matches.length).toBeGreaterThanOrEqual(1);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intinyagroup/calendar",
-  "version": "0.1.1-alpha.13",
+  "version": "0.1.1-alpha.14",
   "description": "Calendar and DatePicker components for intinyagroup UI",
   "type": "module",
   "exports": {
@@ -16,10 +16,11 @@
   "scripts": {
     "build": "svelte-package -o dist",
     "check": "echo 'no check'",
-    "dev": "svelte-package -o dist -w"
+    "dev": "svelte-package -o dist -w",
+    "test": "vitest run"
   },
   "dependencies": {
-    "@intinyagroup/ui": "0.1.1-alpha.11",
+    "@intinyagroup/ui": "0.1.1-alpha.12",
     "date-fns": "^4.4.0",
     "lucide-svelte": "^1.0.1"
   },