@intinyagroup/calendar 0.1.1-alpha.12 → 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[];
@@ -58,18 +59,39 @@
     onDateClick?: (date: Date) => void;
     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;
+    const s = new Date(ev.start);
+    const e = new Date(ev.end);
+    return !isSameDay(s, e) || (e.getTime() - s.getTime() >= 24 * 60 * 60 * 1000);
+  }
 
-  function handleEventDrop(targetDate: Date, targetHour: number) {
+  function handleEventDrop(targetDate: Date, targetHour?: number) {
     if (!draggedEventId) return;
     const ev = events.find((e) => e.id === draggedEventId);
     if (!ev) return;
 
     const origDurationMs = new Date(ev.end).getTime() - new Date(ev.start).getTime();
     const newStart = new Date(targetDate);
-    newStart.setHours(targetHour, 0, 0, 0);
+    if (targetHour !== undefined) {
+      newStart.setHours(targetHour, 0, 0, 0);
+    } else {
+      newStart.setHours(new Date(ev.start).getHours(), new Date(ev.start).getMinutes(), 0, 0);
+    }
     const newEnd = new Date(newStart.getTime() + origDurationMs);
 
     events = events.map((e) =>
@@ -79,15 +101,193 @@
     onEventReschedule?.({ event: ev, newStart, newEnd });
     draggedEventId = null;
   }
-  const activeDateFnsLocale = $derived(locale.startsWith('id') ? localeId : localeEn);
-  const weekStartsOn = $derived(firstDayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6);
+
+  function handleResizeStart(e: MouseEvent, ev: CalendarEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    resizingEventId = ev.id;
+    resizeStartY = e.clientY;
+    resizeStartDuration = new Date(ev.end).getTime() - new Date(ev.start).getTime();
+
+    function onMouseMove(moveEvent: MouseEvent) {
+      if (!resizingEventId) return;
+      const deltaY = moveEvent.clientY - resizeStartY;
+      // 56px per hour => deltaY / 56 hours
+      const deltaHours = deltaY / 56;
+      // Snap to 15 minute increments (0.25h = 15 * 60 * 1000 ms)
+      const snapIntervalMs = 15 * 60 * 1000;
+      const rawDeltaMs = deltaHours * 60 * 60 * 1000;
+      const snappedDeltaMs = Math.round(rawDeltaMs / snapIntervalMs) * snapIntervalMs;
+      const newDurationMs = Math.max(15 * 60 * 1000, resizeStartDuration + snappedDeltaMs);
+
+      events = events.map((item) => {
+        if (item.id === resizingEventId) {
+          const s = new Date(item.start);
+          return { ...item, end: new Date(s.getTime() + newDurationMs) };
+        }
+        return item;
+      });
+    }
+
+    function onMouseUp() {
+      if (resizingEventId) {
+        const finished = events.find((item) => item.id === resizingEventId);
+        if (finished) {
+          onEventResize?.({ event: finished, newStart: new Date(finished.start), newEnd: new Date(finished.end) });
+        }
+      }
+      resizingEventId = null;
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    }
+
+    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;
+    colTotal: number;
+  };
+
+  function computeOverlappingLayout(dayEvs: CalendarEvent[]): LayoutEvent[] {
+    // Sort events by start time, then longer events first
+    const sorted = [...dayEvs].sort((a, b) => {
+      const diff = new Date(a.start).getTime() - new Date(b.start).getTime();
+      if (diff !== 0) return diff;
+      return (new Date(b.end).getTime() - new Date(b.start).getTime()) - (new Date(a.end).getTime() - new Date(a.start).getTime());
+    });
+
+    const columns: CalendarEvent[][] = [];
+    const layoutMap = new Map<string, { colIndex: number }>();
+
+    for (const ev of sorted) {
+      let placed = false;
+      for (let i = 0; i < columns.length; i++) {
+        const lastInCol = columns[i][columns[i].length - 1];
+        if (new Date(lastInCol.end).getTime() <= new Date(ev.start).getTime()) {
+          columns[i].push(ev);
+          layoutMap.set(ev.id, { colIndex: i });
+          placed = true;
+          break;
+        }
+      }
+      if (!placed) {
+        columns.push([ev]);
+        layoutMap.set(ev.id, { colIndex: columns.length - 1 });
+      }
+    }
+
+    // Determine overlapping groups
+    return sorted.map((ev) => {
+      const colInfo = layoutMap.get(ev.id) || { colIndex: 0 };
+      // Count how many columns overlap with this event
+      let overlappingCols = 1;
+      for (let c = 0; c < columns.length; c++) {
+        const hasOverlap = columns[c].some(
+          (other) =>
+            new Date(other.start).getTime() < new Date(ev.end).getTime() &&
+            new Date(other.end).getTime() > new Date(ev.start).getTime()
+        );
+        if (hasOverlap && c + 1 > overlappingCols) {
+          overlappingCols = c + 1;
+        }
+      }
+
+      return {
+        ...ev,
+        colIndex: colInfo.colIndex,
+        colTotal: Math.max(1, overlappingCols),
+      };
+    });
+  }
 
   const activeTimeZone = $derived(
     timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
   );
 
-  const hours = Array.from({ length: 24 }, (_, i) => i);
+  const activeDateFnsLocale = $derived(locale.startsWith('id') ? localeId : localeEn);
+  const weekStartsOn = $derived(firstDayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6);
 
+  const hours = Array.from({ length: 24 }, (_, i) => i);
   // Day names localized and rotated according to firstDayOfWeek via date-fns
   const dayNames = $derived.by(() => {
     const start = startOfWeek(currentDate, { weekStartsOn });
@@ -137,7 +337,26 @@
   });
 
   function getEventsForDay(d: Date): CalendarEvent[] {
-    return events.filter((ev) => isSameDay(new Date(ev.start), d));
+    return events.filter((ev) => {
+      if (isSameDay(new Date(ev.start), d)) return true;
+      // Multi-day spanning: check if date falls between start and end
+      const s = new Date(ev.start);
+      const e = new Date(ev.end);
+      return d >= s && d <= e;
+    });
+  }
+
+  function getTimedEventsForDay(d: Date): CalendarEvent[] {
+    return events.filter((ev) => !isMultiDayOrAllDay(ev) && isSameDay(new Date(ev.start), d));
+  }
+
+  function getAllDayEventsForWeek(days: Date[]): CalendarEvent[] {
+    return events.filter((ev) => {
+      if (!isMultiDayOrAllDay(ev)) return false;
+      const s = new Date(ev.start);
+      const e = new Date(ev.end);
+      return days.some((d) => isSameDay(d, s) || isSameDay(d, e) || (d > s && d < e));
+    });
   }
 
   function getTimeInZone(date: Date): { hours: number; minutes: number } {
@@ -314,12 +533,18 @@
             onDateClick?.(date);
             openCreateModal(date);
           }}
+          ondragover={(e) => e.preventDefault()}
+          ondrop={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleEventDrop(date);
+          }}
           class={cn(
-            'min-h-[100px] p-2 flex flex-col gap-1 transition-colors hover:bg-[var(--ui-secondary)]/25 cursor-pointer',
+            'min-h-[110px] 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'
           )}
         >
-          <div class="flex items-center justify-between mb-1">
+          <div class="flex items-center justify-between mb-0.5 px-1">
             <span
               class={cn(
                 'text-xs font-semibold size-6 flex items-center justify-center rounded-full',
@@ -335,27 +560,44 @@
             {/if}
           </div>
 
-          <!-- Event pills -->
+          <!-- Event pills with spanning indicator -->
           <div class="flex flex-col gap-1 overflow-hidden">
             {#each dayEvents.slice(0, 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)}
+
               <button
                 type="button"
+                draggable="true"
+                ondragstart={(e) => {
+                  e.stopPropagation();
+                  draggedEventId = ev.id;
+                  e.dataTransfer?.setData('text/plain', ev.id);
+                }}
                 onclick={(e) => {
                   e.stopPropagation();
                   onEventClick?.(ev);
                 }}
                 class={cn(
-                  'truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium transition-opacity hover:opacity-85 text-white shadow-2xs',
-                  ev.color ? '' : 'bg-[var(--ui-primary)]'
+                  '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',
+                  isSpanning ? 'rounded-none' : 'rounded',
+                  isSpanning && isStartDay && 'rounded-l-md',
+                  isSpanning && isEndDay && 'rounded-r-md',
+                  draggedEventId === ev.id ? 'opacity-40 ring-2 ring-white' : ''
                 )}
-                style={ev.color ? `background-color: ${ev.color};` : undefined}
+                style="background-color: {ev.color || 'var(--ui-primary)'};"
               >
-                {formatTime(ev.start)} {ev.title}
+                {#if isSpanning}
+                  <span class="font-semibold">{ev.title}</span>
+                {:else}
+                  <span class="opacity-80 font-normal">{formatTime(ev.start)}</span> {ev.title}
+                {/if}
               </button>
             {/each}
 
             {#if dayEvents.length > 3}
-              <span class="text-[10px] font-semibold text-[var(--ui-muted-foreground)] pl-1">
+              <span class="text-[10px] font-semibold text-[var(--ui-muted-foreground)] px-1">
                 +{dayEvents.length - 3} more
               </span>
             {/if}
@@ -377,6 +619,31 @@
       {/each}
     </div>
 
+    <!-- All-day header slot (FullCalendar 1:1) -->
+    {@const allDayEvents = getAllDayEventsForWeek(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="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">
+          {#each allDayEvents as ev (ev.id)}
+            <button
+              type="button"
+              onclick={(e) => {
+                e.stopPropagation();
+                onEventClick?.(ev);
+              }}
+              class="w-full truncate rounded px-2 py-0.5 text-left text-[11px] font-semibold text-white shadow-2xs hover:opacity-90"
+              style="background-color: {ev.color || 'var(--ui-primary)'};"
+            >
+              {ev.title} {#if ev.description}• {ev.description}{/if}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
     <div class="grid 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)]">
@@ -387,7 +654,8 @@
 
       <!-- 7 Days Grid Columns -->
       {#each weekDays as d}
-        {@const dayEvents = getEventsForDay(d)}
+        {@const dayEvents = getTimedEventsForDay(d)}
+        {@const layoutEvents = computeOverlappingLayout(dayEvents)}
         {@const isCurrentDay = isToday(d)}
         {@const nowTime = getTimeInZone(new Date())}
         {@const nowMinutes = nowTime.hours * 60 + nowTime.minutes}
@@ -395,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"
+          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();
@@ -423,12 +692,22 @@
             </div>
           {/if}
 
-          <!-- Render Event Boxes -->
-          {#each dayEvents as ev (ev.id)}
-            {@const evTime = getTimeInZone(new Date(ev.start))}
-            {@const topPos = (evTime.hours + evTime.minutes / 60) * 56}
-            <button
-              type="button"
+          <!-- Render Event Boxes with Collision Overlap Calculation & Resizing -->
+          {#each layoutEvents as ev (ev.id)}
+            {@const evStartTime = getTimeInZone(new Date(ev.start))}
+            {@const evEndTime = getTimeInZone(new Date(ev.end))}
+            {@const startMinutes = evStartTime.hours * 60 + evStartTime.minutes}
+            {@const endMinutes = evEndTime.hours * 60 + evEndTime.minutes}
+            {@const durationMinutes = Math.max(15, endMinutes > startMinutes ? endMinutes - startMinutes : 60)}
+            {@const topPos = (startMinutes / 60) * 56}
+            {@const heightPos = Math.max(26, (durationMinutes / 60) * 56)}
+            {@const widthPercent = 100 / ev.colTotal}
+            {@const leftPercent = ev.colIndex * widthPercent}
+
+            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+            <div
+              role="button"
+              tabindex="0"
               draggable="true"
               ondragstart={(e) => {
                 draggedEventId = ev.id;
@@ -438,13 +717,41 @@
                 e.stopPropagation();
                 onEventClick?.(ev);
               }}
-              class="absolute inset-x-1 rounded p-1 text-left text-[11px] text-white shadow-xs transition-opacity hover:opacity-90 overflow-hidden z-10 cursor-grab active:cursor-grabbing {draggedEventId === ev.id ? 'opacity-40 ring-2 ring-white' : ''}"
-              style="top: {topPos}px; height: 50px; background-color: {ev.color || 'var(--ui-primary)'};"
+              onkeydown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onEventClick?.(ev);
+                }
+              }}
+              class="group/event absolute rounded p-1 text-left text-[11px] text-white shadow-xs transition-opacity hover:opacity-95 overflow-hidden z-10 cursor-grab active:cursor-grabbing {draggedEventId === ev.id ? 'opacity-40 ring-2 ring-white' : ''}"
+              style="top: {topPos}px; height: {heightPos}px; left: calc({leftPercent}% + 2px); width: calc({widthPercent}% - 4px); background-color: {ev.color || 'var(--ui-primary)'};"
             >
-              <div class="font-bold truncate">{ev.title}</div>
-              <div class="text-[9px] opacity-80">{formatTime(ev.start)} - {formatTime(ev.end)}</div>
-            </button>
+              <div class="font-bold truncate leading-tight">{ev.title}</div>
+              <div class="text-[9px] opacity-85 leading-tight">{formatTime(ev.start)} - {formatTime(ev.end)}</div>
+
+              <!-- Bottom edge resize handle (FullCalendar 1:1) -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div
+                class="absolute inset-x-0 bottom-0 h-2 cursor-s-resize opacity-0 group-hover/event:opacity-100 bg-white/20 hover:bg-white/40 transition-opacity z-20"
+                onmousedown={(e) => handleResizeStart(e, ev)}
+              ></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>
@@ -469,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"
+        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 -->
@@ -490,22 +799,65 @@
           </div>
         {/if}
 
-        {#each getEventsForDay(currentDate) as ev (ev.id)}
-          {@const evTime = getTimeInZone(new Date(ev.start))}
-          {@const topPos = (evTime.hours + evTime.minutes / 60) * 64}
-          <button
-            type="button"
+        {#each computeOverlappingLayout(getTimedEventsForDay(currentDate)) as ev (ev.id)}
+          {@const evStartTime = getTimeInZone(new Date(ev.start))}
+          {@const evEndTime = getTimeInZone(new Date(ev.end))}
+          {@const startMinutes = evStartTime.hours * 60 + evStartTime.minutes}
+          {@const endMinutes = evEndTime.hours * 60 + evEndTime.minutes}
+          {@const durationMinutes = Math.max(15, endMinutes > startMinutes ? endMinutes - startMinutes : 60)}
+          {@const topPos = (startMinutes / 60) * 64}
+          {@const heightPos = Math.max(32, (durationMinutes / 60) * 64)}
+          {@const widthPercent = 100 / ev.colTotal}
+          {@const leftPercent = ev.colIndex * widthPercent}
+
+          <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+          <div
+            role="button"
+            tabindex="0"
+            draggable="true"
+            ondragstart={(e) => {
+              draggedEventId = ev.id;
+              e.dataTransfer?.setData('text/plain', ev.id);
+            }}
             onclick={(e) => {
               e.stopPropagation();
               onEventClick?.(ev);
             }}
-            class="absolute inset-x-4 rounded-lg p-2 text-left text-white shadow-sm transition-opacity hover:opacity-90 flex flex-col justify-center z-10"
-            style="top: {topPos}px; height: 56px; background-color: {ev.color || 'var(--ui-primary)'};"
+            onkeydown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onEventClick?.(ev);
+              }
+            }}
+            class="group/event absolute rounded-lg p-2 text-left text-white shadow-sm transition-opacity hover:opacity-95 overflow-hidden z-10 cursor-grab active:cursor-grabbing {draggedEventId === ev.id ? 'opacity-40 ring-2 ring-white' : ''}"
+            style="top: {topPos}px; height: {heightPos}px; left: calc({leftPercent}% + 4px); width: calc({widthPercent}% - 8px); background-color: {ev.color || 'var(--ui-primary)'};"
           >
-            <div class="font-bold text-xs">{ev.title}</div>
-            <div class="text-[10px] opacity-80">{formatTime(ev.start)} - {formatTime(ev.end)} {#if ev.description}• {ev.description}{/if}</div>
-          </button>
+            <div class="font-bold text-xs truncate leading-tight">{ev.title}</div>
+            <div class="text-[10px] opacity-85 leading-tight">{formatTime(ev.start)} - {formatTime(ev.end)} {#if ev.description}• {ev.description}{/if}</div>
+
+            <!-- Bottom resize handle -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="absolute inset-x-0 bottom-0 h-2.5 cursor-s-resize opacity-0 group-hover/event:opacity-100 bg-white/20 hover:bg-white/40 transition-opacity z-20"
+              onmousedown={(e) => handleResizeStart(e, ev)}
+            ></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

@@ -25,6 +25,15 @@ type $$ComponentProps = {
         newStart: Date;
         newEnd: Date;
     }) => void;
+    onEventResize?: (detail: {
+        event: CalendarEvent;
+        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.12",
+  "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"
   },