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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Clock, Plus, X } from 'lucide-svelte';
+import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, CalendarDays, Clock, Plus, X } from 'lucide-svelte';
   import { Button } from '@intinyagroup/ui';
   import { cn } from '@intinyagroup/ui/utils';
   import {
@@ -44,6 +44,7 @@
     onEventClick,
     onDateClick,
     onAddEvent,
+    onDragCreate,
     onEventReschedule,
   }: {
     events?: CalendarEvent[];
@@ -59,12 +60,35 @@
     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);
+  // Mobile detection
+  let isMobile = $state(typeof window !== 'undefined' ? window.matchMedia('(max-width: 767px)').matches : false);
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    const mq = window.matchMedia('(max-width: 767px)');
+    isMobile = mq.matches;
+    const handler = (e: MediaQueryListEvent) => { isMobile = e.matches; };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  });
+
+  // Mobile week: show only current day ± 1
+  const mobileWeekDays = $derived([
+    subDays(currentDate, 1),
+    currentDate,
+    addDays(currentDate, 1)
+  ]);
 
   function isMultiDayOrAllDay(ev: CalendarEvent): boolean {
     if (ev.allDay) return true;
@@ -137,6 +161,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;
@@ -305,8 +407,9 @@
       return format(currentDate, 'MMMM yyyy', { locale: activeDateFnsLocale });
     }
     if (view === 'week') {
-      const start = weekDays[0];
-      const end = weekDays[6];
+      const displayDays = isMobile ? mobileWeekDays : weekDays;
+      const start = displayDays[0];
+      const end = displayDays[displayDays.length - 1];
       const sStr = format(start, 'dd MMM', { locale: activeDateFnsLocale });
       const eStr = format(end, 'dd MMM yyyy', { locale: activeDateFnsLocale });
       return `${sStr} - ${eStr}`;
@@ -365,10 +468,10 @@
 
 <div class={cn('relative flex flex-col rounded-xl border border-[var(--ui-border)] bg-[var(--ui-card)] shadow-xs overflow-hidden', className)}>
   <!-- Toolbar Header -->
-  <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--ui-border)] p-4 sm:px-6">
-    <div class="flex items-center gap-2">
+  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-[var(--ui-border)] p-4 sm:px-6">
+    <div class="flex flex-col sm:flex-row sm:items-center gap-2">
       <h2 class="text-base font-bold text-[var(--ui-foreground)] capitalize">{titleHeader}</h2>
-      <div class="flex items-center gap-1 ml-2">
+      <div class="flex items-center gap-1">
         <Button variant="outline" size="sm" class="size-8 p-0" onclick={goPrev}>
           <ChevronLeft class="size-4" />
         </Button>
@@ -379,7 +482,7 @@
           <ChevronRight class="size-4" />
         </Button>
       </div>
-      <span class="inline-flex items-center rounded-md bg-[var(--ui-secondary)]/50 px-2 py-0.5 text-[10px] font-medium text-[var(--ui-muted-foreground)]">
+      <span class="hidden sm:inline-flex items-center rounded-md bg-[var(--ui-secondary)]/50 px-2 py-0.5 text-[10px] font-medium text-[var(--ui-muted-foreground)]">
         {activeTimeZone}
       </span>
     </div>
@@ -391,37 +494,40 @@
           type="button"
           onclick={() => (view = 'month')}
           class={cn(
-            'rounded-md px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
+            'rounded-md px-2 sm:px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
             view === 'month' ? 'bg-[var(--ui-card)] text-[var(--ui-foreground)] shadow-xs' : 'text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]'
           )}
         >
-          Month
+          <CalendarDays class="size-4 sm:hidden" />
+          <span class="hidden sm:inline">Month</span>
         </button>
         <button
           type="button"
           onclick={() => (view = 'week')}
           class={cn(
-            'rounded-md px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
+            'rounded-md px-2 sm:px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
             view === 'week' ? 'bg-[var(--ui-card)] text-[var(--ui-foreground)] shadow-xs' : 'text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]'
           )}
         >
-          Week
+          <CalendarIcon class="size-4 sm:hidden" />
+          <span class="hidden sm:inline">Week</span>
         </button>
         <button
           type="button"
           onclick={() => (view = 'day')}
           class={cn(
-            'rounded-md px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
+            'rounded-md px-2 sm:px-3 py-1 text-xs font-semibold transition-colors cursor-pointer',
             view === 'day' ? 'bg-[var(--ui-card)] text-[var(--ui-foreground)] shadow-xs' : 'text-[var(--ui-muted-foreground)] hover:text-[var(--ui-foreground)]'
           )}
         >
-          Day
+          <Clock class="size-4 sm:hidden" />
+          <span class="hidden sm:inline">Day</span>
         </button>
       </div>
 
       {#if enableEventModal}
         <Button size="sm" class="gap-1.5 h-8 text-xs" onclick={() => openCreateModal(currentDate)}>
-          <Plus class="size-3.5" /> Add Event
+          <Plus class="size-3.5" /> <span class="hidden sm:inline">Add Event</span>
         </Button>
       {/if}
     </div>
@@ -455,7 +561,7 @@
             handleEventDrop(date);
           }}
           class={cn(
-            'min-h-[110px] p-1.5 flex flex-col gap-1 transition-colors hover:bg-[var(--ui-secondary)]/25 cursor-pointer select-none',
+            'min-h-[80px] md:min-h-[110px] p-1 md:p-1.5 flex flex-col gap-1 transition-colors hover:bg-[var(--ui-secondary)]/25 cursor-pointer select-none',
             !currentMonth && 'bg-[var(--ui-muted)]/15 opacity-50'
           )}
         >
@@ -477,7 +583,7 @@
 
           <!-- Event pills with spanning indicator -->
           <div class="flex flex-col gap-1 overflow-hidden">
-            {#each dayEvents.slice(0, 3) as ev (ev.id)}
+            {#each dayEvents.slice(0, isMobile ? 2 : 3) as ev (ev.id)}
               {@const isSpanning = isMultiDayOrAllDay(ev)}
               {@const isStartDay = isSameDay(new Date(ev.start), date)}
               {@const isEndDay = isSameDay(new Date(ev.end), date)}
@@ -495,7 +601,7 @@
                   onEventClick?.(ev);
                 }}
                 class={cn(
-                  'truncate px-1.5 py-0.5 text-left text-[11px] font-medium transition-opacity hover:opacity-85 text-white shadow-2xs cursor-grab active:cursor-grabbing',
+                  'truncate px-1.5 py-0.5 text-left text-[10px] md:text-[11px] font-medium transition-opacity hover:opacity-85 text-white shadow-2xs cursor-grab active:cursor-grabbing',
                   isSpanning ? 'rounded-none' : 'rounded',
                   isSpanning && isStartDay && 'rounded-l-md',
                   isSpanning && isEndDay && 'rounded-r-md',
@@ -511,9 +617,9 @@
               </button>
             {/each}
 
-            {#if dayEvents.length > 3}
+            {#if dayEvents.length > (isMobile ? 2 : 3)}
               <span class="text-[10px] font-semibold text-[var(--ui-muted-foreground)] px-1">
-                +{dayEvents.length - 3} more
+                +{dayEvents.length - (isMobile ? 2 : 3)} more
               </span>
             {/if}
           </div>
@@ -522,11 +628,11 @@
     </div>
   {:else if view === 'week'}
     <!-- WEEK VIEW -->
-    <div class="grid grid-cols-8 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 text-center text-xs font-semibold text-[var(--ui-muted-foreground)] py-2">
+    <div class="grid grid-cols-4 md:grid-cols-8 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 text-center text-xs font-semibold text-[var(--ui-muted-foreground)] py-2">
       <div class="col-span-1">Time</div>
-      {#each weekDays as d, idx}
+      {#each (isMobile ? mobileWeekDays : weekDays) as d}
         <div class="col-span-1 flex flex-col items-center">
-          <span class="capitalize">{dayNames[idx]}</span>
+          <span class="capitalize">{format(d, 'EEE', { locale: activeDateFnsLocale })}</span>
           <span class={cn('size-6 flex items-center justify-center rounded-full text-xs mt-0.5', isToday(d) ? 'bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)]' : '')}>
             {d.getDate()}
           </span>
@@ -535,13 +641,13 @@
     </div>
 
     <!-- All-day header slot (FullCalendar 1:1) -->
-    {@const allDayEvents = getAllDayEventsForWeek(weekDays)}
+    {@const allDayEvents = getAllDayEventsForWeek(isMobile ? mobileWeekDays : weekDays)}
     {#if allDayEvents.length > 0}
-      <div class="grid grid-cols-8 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/10 text-xs divide-x divide-[var(--ui-border)] py-1.5">
+      <div class="grid grid-cols-4 md:grid-cols-8 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/10 text-xs divide-x divide-[var(--ui-border)] py-1.5">
         <div class="col-span-1 text-right pr-2 text-[10px] uppercase tracking-wider font-semibold text-[var(--ui-muted-foreground)] flex items-center justify-end">
           all-day
         </div>
-        <div class="col-span-7 px-2 flex flex-col gap-1">
+        <div class="col-span-3 md:col-span-7 px-2 flex flex-col gap-1">
           {#each allDayEvents as ev (ev.id)}
             <button
               type="button"
@@ -559,7 +665,7 @@
       </div>
     {/if}
 
-    <div class="grid grid-cols-8 divide-x divide-[var(--ui-border)] max-h-[600px] overflow-y-auto">
+    <div class="grid grid-cols-4 md:grid-cols-8 divide-x divide-[var(--ui-border)] max-h-[600px] overflow-y-auto">
       <!-- Hours Column -->
       <div class="col-span-1 divide-y divide-[var(--ui-border)]/50 text-right pr-2 text-[11px] font-medium text-[var(--ui-muted-foreground)]">
         {#each hours as hour}
@@ -567,8 +673,8 @@
         {/each}
       </div>
 
-      <!-- 7 Days Grid Columns -->
-      {#each weekDays as d}
+      <!-- Day Grid Columns -->
+      {#each (isMobile ? mobileWeekDays : weekDays) as d}
         {@const dayEvents = getTimedEventsForDay(d)}
         {@const layoutEvents = computeOverlappingLayout(dayEvents)}
         {@const isCurrentDay = isToday(d)}
@@ -578,14 +684,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,9 +758,30 @@
               ></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>
+    <!-- Mobile swipe hint -->
+    {#if isMobile}
+      <div class="px-4 py-2 text-center text-[11px] text-[var(--ui-muted-foreground)] border-t border-[var(--ui-border)]">
+        Swipe to see more days
+      </div>
+    {/if}
   {:else}
     <!-- DAY VIEW -->
     <div class="p-3 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 flex items-center justify-between">
@@ -675,12 +803,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 +870,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.15",
   "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.13",
     "date-fns": "^4.4.0",
     "lucide-svelte": "^1.0.1"
   },