@intinyagroup/calendar 0.1.1 → 0.2.0

package/dist/Calendar.svelte

@@ -170,7 +170,7 @@
     class="grid grid-cols-7 gap-1 mb-2 text-center"
     style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin-bottom: 0.5rem; text-align: center;"
   >
-    {#each dayNames as d}
+    {#each dayNames as d (d)}
       <div
         class="text-center text-[11px] font-medium text-[var(--ui-muted-foreground)] py-1"
         style="text-align: center; font-size: 0.6875rem; padding: 0.25rem 0;"

package/dist/DatePicker.svelte

@@ -14,31 +14,32 @@
   import Calendar, { type CalendarDate } from "./Calendar.svelte";
   import { Calendar as CalendarIcon, X } from "lucide-svelte";
   import { cn } from "@intinyagroup/ui/utils";
+  import { formatCalendarDate } from "./format-date";
 
   let {
     value = $bindable(null),
     placeholder = "Select date...",
+    locale = "en-GB",
+    format = "d MMM yyyy",
     disabled = false,
     class: className,
     onSelect,
   }: {
     value?: CalendarDate | null;
     placeholder?: string;
+    /** date-fns format pattern used for the selected date. */
+    format?: string;
+    locale?: string;
     disabled?: boolean;
     class?: string;
-    onSelect?: (date: CalendarDate) => void;
+    onSelect?: (date: CalendarDate | null) => void;
   } = $props();
 
   let open = $state(false);
 
   function formatDateDisplay(date: CalendarDate | null): string {
     if (!date) return "";
-    const d = new Date(date.year, date.month, date.day);
-    return d.toLocaleDateString("en-GB", {
-      day: "numeric",
-      month: "short",
-      year: "numeric",
-    });
+    return formatCalendarDate(date, format, locale);
   }
 
   function handleSelect(date: CalendarDate) {
@@ -49,7 +50,7 @@
 
   function clear() {
     value = null;
-    onSelect?.(null as any);
+    onSelect?.(null);
   }
 </script>
 

package/dist/DatePicker.svelte.d.ts

@@ -2,9 +2,12 @@ import { type CalendarDate } from "./Calendar.svelte";
 type $$ComponentProps = {
     value?: CalendarDate | null;
     placeholder?: string;
+    /** date-fns format pattern used for the selected date. */
+    format?: string;
+    locale?: string;
     disabled?: boolean;
     class?: string;
-    onSelect?: (date: CalendarDate) => void;
+    onSelect?: (date: CalendarDate | null) => void;
 };
 declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
 type DatePicker = ReturnType<typeof DatePicker>;

package/dist/DateRangePicker.svelte

@@ -21,9 +21,10 @@
     isSameMonth,
     isWithinInterval,
     isBefore,
-    format,
+    format as formatDateFns,
   } from "date-fns";
   import { id as localeId, enUS as localeEn } from "date-fns/locale";
+  import { formatCalendarDate } from "./format-date";
 
   export type CalendarDate = { year: number; month: number; day: number };
   export type DateRange = {
@@ -43,6 +44,7 @@
     disabled = false,
     placeholder = "Select date range...",
     locale = "en-US",
+    format = "dd/MM/yyyy",
     firstDayOfWeek = 0, // 0 = Sunday, 1 = Monday
     presets,
     class: className,
@@ -54,6 +56,8 @@
     disabled?: boolean;
     placeholder?: string;
     locale?: string;
+    /** date-fns format pattern used for each endpoint. */
+    format?: string;
     firstDayOfWeek?: number;
     presets?: DateRangePreset[];
     class?: string;
@@ -92,7 +96,9 @@
   const dayNames = $derived.by(() => {
     const start = startOfWeek(viewDate, { weekStartsOn });
     return Array.from({ length: 7 }, (_, i) => {
-      return format(addDays(start, i), "EEE", { locale: activeDateFnsLocale });
+      return formatDateFns(addDays(start, i), "EEE", {
+        locale: activeDateFnsLocale,
+      });
     });
   });
 
@@ -145,9 +151,8 @@
   }
 
   function formatDisplayDate(date: CalendarDate | null): string {
-    const d = toDate(date);
-    if (!d) return "";
-    return format(d, "dd/MM/yyyy", { locale: activeDateFnsLocale });
+    if (!date) return "";
+    return formatCalendarDate(date, format, locale);
   }
 
   const label = $derived.by(() => {
@@ -210,7 +215,6 @@
 </script>
 
 <div class={cn("relative inline-block w-full max-w-sm", className)}>
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
   <div
     role="button"
     tabindex={disabled ? -1 : 0}
@@ -276,7 +280,9 @@
         <span
           class="text-xs font-semibold text-[var(--ui-foreground)] capitalize"
         >
-          {format(viewDate, "MMMM yyyy", { locale: activeDateFnsLocale })}
+          {formatDateFns(viewDate, "MMMM yyyy", {
+            locale: activeDateFnsLocale,
+          })}
         </span>
         <Button
           variant="ghost"
@@ -293,7 +299,7 @@
         class="grid grid-cols-7 mb-1 text-center"
         style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; margin-bottom: 0.25rem;"
       >
-        {#each dayNames as day}
+        {#each dayNames as day (day)}
           <span
             class="text-[11px] font-semibold text-[var(--ui-muted-foreground)] py-1 capitalize"
             style="text-align: center; font-size: 0.6875rem; padding: 0.25rem 0;"
@@ -308,7 +314,7 @@
         class="grid grid-cols-7 gap-y-1"
         style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 0.25rem;"
       >
-        {#each calendarDays as { date, calendarDate, currentMonth }}
+        {#each calendarDays as { date, calendarDate, currentMonth } (date.toISOString())}
           {@const isStart = startDateObj
             ? isSameDay(startDateObj, date)
             : false}
@@ -373,7 +379,7 @@
       <div
         class="flex flex-wrap items-center gap-1.5 border-t border-[var(--ui-border)] mt-3 pt-2.5"
       >
-        {#each activePresets as preset}
+        {#each activePresets as preset (preset.label)}
           <button
             type="button"
             onclick={() => {

package/dist/DateRangePicker.svelte.d.ts

@@ -18,6 +18,8 @@ type $$ComponentProps = {
     disabled?: boolean;
     placeholder?: string;
     locale?: string;
+    /** date-fns format pattern used for each endpoint. */
+    format?: string;
     firstDayOfWeek?: number;
     presets?: DateRangePreset[];
     class?: string;

package/dist/EventCalendar.svelte

@@ -32,6 +32,7 @@
     type CalendarRecurrence,
     type CalendarResource,
   } from "./recurrence";
+  import { SvelteDate, SvelteMap } from "svelte/reactivity";
 
   export type CalendarView = "month" | "week" | "day" | "resourceTimeline";
 
@@ -153,7 +154,7 @@
 
     const origDurationMs =
       new Date(ev.end).getTime() - new Date(ev.start).getTime();
-    const newStart = new Date(targetDate);
+    const newStart = new SvelteDate(targetDate);
     if (targetHour !== undefined) {
       newStart.setHours(targetHour, 0, 0, 0);
     } else {
@@ -283,14 +284,14 @@
         const endMinutes = dragCreateEnd.hour * 60 + dragCreateEnd.minute;
 
         if (endMinutes - startMinutes >= 15) {
-          const startDate = new Date(date);
+          const startDate = new SvelteDate(date);
           startDate.setHours(
             dragCreateStart.hour,
             dragCreateStart.minute,
             0,
             0,
           );
-          const endDate = new Date(date);
+          const endDate = new SvelteDate(date);
           endDate.setHours(dragCreateEnd.hour, dragCreateEnd.minute, 0, 0);
 
           onDragCreate?.({ start: startDate, end: endDate });
@@ -406,7 +407,7 @@
     });
 
     const columns: CalendarEvent[][] = [];
-    const layoutMap = new Map<string, { colIndex: number }>();
+    const layoutMap = new SvelteMap<string, { colIndex: number }>();
 
     for (const ev of sorted) {
       let placed = false;
@@ -610,10 +611,10 @@
     const [startH, startM] = newEventStartTime.split(":").map(Number);
     const [endH, endM] = newEventEndTime.split(":").map(Number);
 
-    const startDate = new Date(newEventDate);
+    const startDate = new SvelteDate(newEventDate);
     startDate.setHours(startH || 0, startM || 0, 0, 0);
 
-    const endDate = new Date(newEventDate);
+    const endDate = new SvelteDate(newEventDate);
     endDate.setHours(endH || 0, endM || 0, 0, 0);
 
     const newEv: CalendarEvent = {
@@ -747,7 +748,7 @@
       class="grid grid-cols-7 border-b border-[var(--ui-border)] bg-[var(--ui-secondary)]/20 text-center text-xs font-semibold text-[var(--ui-muted-foreground)] py-2"
       style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center;"
     >
-      {#each dayNames as day}
+      {#each dayNames as day (day)}
         <div class="capitalize">{day}</div>
       {/each}
     </div>
@@ -756,7 +757,7 @@
       class="grid grid-cols-7 divide-x divide-y divide-[var(--ui-border)]"
       style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));"
     >
-      {#each monthDays as { date, currentMonth }}
+      {#each monthDays as { date, currentMonth } (date.toISOString())}
         {@const dayEvents = getEventsForDay(date)}
         {@const todayActive = isToday(date)}
 
@@ -856,7 +857,7 @@
       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 isMobile ? mobileWeekDays : weekDays as d}
+      {#each isMobile ? mobileWeekDays : weekDays as d (d.toISOString())}
         <div class="col-span-1 flex flex-col items-center">
           <span class="capitalize"
             >{format(d, "EEE", { locale: activeDateFnsLocale })}</span
@@ -914,13 +915,13 @@
       <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}
+        {#each hours as hour (hour)}
           <div class="h-14 pt-1">{String(hour).padStart(2, "0")}:00</div>
         {/each}
       </div>
 
       <!-- Day Grid Columns -->
-      {#each isMobile ? mobileWeekDays : weekDays as d}
+      {#each isMobile ? mobileWeekDays : weekDays as d (d.toISOString())}
         {@const dayEvents = getTimedEventsForDay(d)}
         {@const layoutEvents = computeOverlappingLayout(dayEvents)}
         {@const isCurrentDay = isToday(d)}
@@ -935,7 +936,7 @@
           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}
+          {#each hours as hour (hour)}
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
               class="h-14 transition-colors hover:bg-[var(--ui-primary)]/10 pointer-events-auto"
@@ -981,7 +982,6 @@
             {@const widthPercent = 100 / ev.colTotal}
             {@const leftPercent = ev.colIndex * widthPercent}
 
-            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
             <div
               role="button"
               tabindex="0"
@@ -1076,7 +1076,7 @@
       <div
         class="col-span-2 divide-y divide-[var(--ui-border)]/50 text-right pr-3 text-xs font-medium text-[var(--ui-muted-foreground)]"
       >
-        {#each hours as hour}
+        {#each hours as hour (hour)}
           <div class="h-16 pt-2">{String(hour).padStart(2, "0")}:00</div>
         {/each}
       </div>
@@ -1088,7 +1088,7 @@
         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 hour}
+        {#each hours as hour (hour)}
           <div
             class="h-16 pointer-events-auto"
             onmousedown={(e) =>
@@ -1129,7 +1129,6 @@
           {@const widthPercent = 100 / ev.colTotal}
           {@const leftPercent = ev.colIndex * widthPercent}
 
-          <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
           <div
             role="button"
             tabindex="0"
@@ -1222,7 +1221,7 @@
               class="relative grid"
               style="grid-template-columns: repeat({timelineHours.length}, minmax(0, 1fr));"
             >
-              {#each timelineHours as hour}
+              {#each timelineHours as hour (hour)}
                 <div
                   class="border-r border-[var(--ui-border)] px-1 py-2 text-center"
                 >
@@ -1262,7 +1261,7 @@
                   class="pointer-events-none absolute inset-0 grid"
                   style="grid-template-columns: repeat({timelineHours.length}, minmax(0, 1fr));"
                 >
-                  {#each timelineHours as _hour}<div
+                  {#each timelineHours as _hour (_hour)}<div
                       class="border-r border-[var(--ui-border)]/50"
                     ></div>{/each}
                 </div>
@@ -1372,7 +1371,7 @@
               >Tag Color</span
             >
             <div class="flex items-center gap-2">
-              {#each presetColors as col}
+              {#each presetColors as col (col)}
                 <button
                   type="button"
                   onclick={() => (newEventColor = col)}

package/dist/format-date.d.ts

@@ -0,0 +1,6 @@
+export type CalendarDateParts = {
+    year: number;
+    month: number;
+    day: number;
+};
+export declare function formatCalendarDate(value: CalendarDateParts, pattern: string, locale: string): string;

package/dist/format-date.js

@@ -0,0 +1,13 @@
+import { format } from "date-fns";
+import { enGB, enUS, id } from "date-fns/locale";
+function resolveLocale(locale) {
+    if (locale.toLowerCase().startsWith("id"))
+        return id;
+    if (locale.toLowerCase() === "en-gb")
+        return enGB;
+    return enUS;
+}
+export function formatCalendarDate(value, pattern, locale) {
+    const date = new Date(value.year, value.month, value.day);
+    return format(date, pattern, { locale: resolveLocale(locale) });
+}

package/dist/format-date.test.d.ts

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

package/dist/format-date.test.js

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { formatCalendarDate } from "./format-date";
+const sampleDate = { year: 2026, month: 10, day: 7 };
+describe("formatCalendarDate", () => {
+    it("supports day-first and month-first numeric formats", () => {
+        expect(formatCalendarDate(sampleDate, "dd/MM/yyyy", "id-ID")).toBe("07/11/2026");
+        expect(formatCalendarDate(sampleDate, "MM/dd/yyyy", "en-US")).toBe("11/07/2026");
+    });
+    it("formats month names using the requested locale", () => {
+        expect(formatCalendarDate(sampleDate, "d MMMM yyyy", "id-ID")).toBe("7 November 2026");
+        expect(formatCalendarDate(sampleDate, "d MMM yyyy", "en-GB")).toBe("7 Nov 2026");
+    });
+});

package/dist/helpers.test.js

@@ -1,129 +1,153 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import EventCalendar from './EventCalendar.svelte';
-describe('EventCalendar', () => {
+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'));
+        vi.setSystemTime(new Date("2025-06-15T12:00:00"));
     });
     afterEach(() => {
         vi.useRealTimers();
     });
-    it('renders the calendar component with correct month title', () => {
+    it("renders the calendar component with correct month title", () => {
         render(EventCalendar);
         // Title uses full month name: "MMMM yyyy"
-        expect(screen.getByText('June 2025')).toBeInTheDocument();
+        expect(screen.getByText("June 2025")).toBeInTheDocument();
     });
-    it('displays day-of-week headers', () => {
+    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();
+        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', () => {
+    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);
+        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', () => {
+    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'),
+                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();
+        expect(screen.getByText("Team Meeting")).toBeInTheDocument();
     });
-    it('renders multiple events on the same day', () => {
+    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: "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'),
+                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();
+        expect(screen.getByText("Morning Standup")).toBeInTheDocument();
+        expect(screen.getByText("Lunch Break")).toBeInTheDocument();
     });
-    it('navigates to the previous month', async () => {
+    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];
+        const prevBtn = screen.getAllByRole("button")[0];
         await fireEvent.click(prevBtn);
-        expect(screen.getByText('May 2025')).toBeInTheDocument();
+        expect(screen.getByText("May 2025")).toBeInTheDocument();
     });
-    it('navigates to the next month', async () => {
+    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];
+        const nextBtn = screen.getAllByRole("button")[2];
         await fireEvent.click(nextBtn);
-        expect(screen.getByText('July 2025')).toBeInTheDocument();
+        expect(screen.getByText("July 2025")).toBeInTheDocument();
     });
-    it('navigates back to today', async () => {
+    it("navigates back to today", async () => {
         render(EventCalendar);
         // Navigate to next month first
-        const nextBtn = screen.getAllByRole('button')[2];
+        const nextBtn = screen.getAllByRole("button")[2];
         await fireEvent.click(nextBtn);
-        expect(screen.getByText('July 2025')).toBeInTheDocument();
+        expect(screen.getByText("July 2025")).toBeInTheDocument();
         // Click Today button (text content is "Today")
-        const todayBtn = screen.getByText('Today');
+        const todayBtn = screen.getByText("Today");
         await fireEvent.click(todayBtn);
-        expect(screen.getByText('June 2025')).toBeInTheDocument();
+        expect(screen.getByText("June 2025")).toBeInTheDocument();
     });
-    it('displays view switcher buttons', () => {
+    it("displays view switcher buttons", () => {
         render(EventCalendar);
-        expect(screen.getByText('Month')).toBeInTheDocument();
-        expect(screen.getByText('Week')).toBeInTheDocument();
-        expect(screen.getByText('Day')).toBeInTheDocument();
+        expect(screen.getByText("Month")).toBeInTheDocument();
+        expect(screen.getByText("Week")).toBeInTheDocument();
+        expect(screen.getByText("Day")).toBeInTheDocument();
     });
-    it('shows event with color indicator', () => {
+    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',
+                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();
+        expect(screen.getByText("Important Call")).toBeInTheDocument();
     });
-    it('renders empty state without crashing', () => {
+    it("renders empty state without crashing", () => {
         render(EventCalendar, { props: { events: [] } });
-        expect(screen.getByText('June 2025')).toBeInTheDocument();
+        expect(screen.getByText("June 2025")).toBeInTheDocument();
     });
-    it('renders all-day events (may appear in both grid and all-day header)', () => {
+    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'),
+                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');
+        const matches = screen.getAllByText("Company Holiday");
         expect(matches.length).toBeGreaterThanOrEqual(1);
     });
+    it("renders resource timeline rows and assigned events", () => {
+        const events = [
+            {
+                id: "resource-event",
+                title: "Room Booking",
+                start: new Date("2025-06-15T09:00:00"),
+                end: new Date("2025-06-15T10:00:00"),
+                resourceId: "room-a",
+            },
+        ];
+        render(EventCalendar, {
+            props: {
+                view: "resourceTimeline",
+                events,
+                resources: [{ id: "room-a", label: "Room A" }],
+                resourceTimelineStartHour: 8,
+                resourceTimelineEndHour: 18,
+            },
+        });
+        expect(screen.getByText("Room A")).toBeInTheDocument();
+        expect(screen.getByText("Room Booking")).toBeInTheDocument();
+        expect(screen.getByText("08:00")).toBeInTheDocument();
+        expect(screen.getByText("17:00")).toBeInTheDocument();
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intinyagroup/calendar",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Calendar and DatePicker components for intinyagroup UI",
   "type": "module",
   "exports": {
@@ -22,7 +22,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@intinyagroup/ui": "0.2.0",
+    "@intinyagroup/ui": "0.2.10",
     "date-fns": "^4.4.0",
     "lucide-svelte": "^1.0.1"
   },
@@ -30,7 +30,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "svelte": "^5.55.2",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.2",
+    "@intinyagroup/vitest-preset": "0.1.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"