### Run Development Server for Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/README.md

Starts the development server for an ilamy Calendar framework example using npm or bun.

```bash
npm run dev
# or
bun run dev
```

--------------------------------

### Install Example Dependencies

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/README.md

Installs project dependencies for a selected ilamy Calendar example using npm or bun.

```bash
npm install
# or
bun install  # Uses isolated installs (see bunfig.toml)
```

--------------------------------

### Navigate to Example Directory

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/README.md

Command to change the current directory to one of the ilamy Calendar framework examples.

```bash
cd nextjs  # or cd astro
```

--------------------------------

### Install Dependencies

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CONTRIBUTING.md

Install project dependencies using Bun. This command should be run after cloning the repository.

```bash
bun install
```

--------------------------------

### Install Dependencies

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/vite/README.md

Install project dependencies using bun, npm, pnpm, or yarn. This is a standard step before running the development server.

```bash
bun install
# or: npm install / pnpm install / yarn
```

--------------------------------

### Conventional Commit Examples

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CONTRIBUTING.md

Examples demonstrating how to format commit messages according to Conventional Commits. Includes examples for features, bug fixes, and breaking changes.

```bash
# Feature
git commit -m "feat: add timezone support for recurring events"

# Bug fix
git commit -m "fix: resolve day-before bug in western timezones"

# Breaking change
git commit -m "feat!: refactor event callback signatures

BREAKING CHANGE: onCellClick now receives CellClickInfo object instead of separate start/end parameters"
```

--------------------------------

### Install ilamy Calendar with bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/README.md

Install the library and its peer dependencies using bun. Ensure React 19+ and Tailwind CSS 4+ are installed.

```bash
bun add @ilamy/calendar
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/nextjs/README.md

Install all project dependencies, including Next.js, React, ilamy Calendar, and Tailwind CSS. Bun users should note the use of isolated installs.

```bash
npm install
# or
yarn
# or
pnpm install
# or
bun install  # Uses isolated installs (configured in bunfig.toml)
```

--------------------------------

### Install ilamy Calendar with pnpm

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/README.md

Install the library and its peer dependencies using pnpm. Ensure React 19+ and Tailwind CSS 4+ are installed.

```bash
pnpm add @ilamy/calendar
```

--------------------------------

### Install ilamy Calendar with npm

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/README.md

Install the library and its peer dependencies using npm. Ensure React 19+ and Tailwind CSS 4+ are installed.

```bash
npm install @ilamy/calendar
```

--------------------------------

### Install Dependencies with npm/bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/astro/README.md

Install all necessary dependencies for the Astro, React, ilamy Calendar, and Tailwind CSS integration. Ensure both development and regular dependencies are included.

```bash
npm install @astrojs/react @ilamy/calendar astro dayjs react react-dom tailwindcss
npm install -D @tailwindcss/vite @types/react @types/react-dom typescript
# or
bun install @astrojs/react @ilamy/calendar astro dayjs react react-dom tailwindcss
bun install -D @tailwindcss/vite @types/react @types/react-dom typescript
```

--------------------------------

### Basic Resource Calendar Setup

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Demonstrates how to initialize the IlamyResourceCalendar with resources and events. Ensure dayjs is imported and configured for date handling.

```tsx
import { IlamyResourceCalendar } from '@ilamy/calendar'
import type { Resource, CalendarEvent } from '@ilamy/calendar'

const resources: Resource[] = [
  {
    id: 'room-a',
    title: 'Conference Room A',
    color: '#3B82F6',
    backgroundColor: '#EFF6FF',
  },
  {
    id: 'room-b',
    title: 'Conference Room B',
    color: '#EF4444',
    backgroundColor: '#FEF2F2',
  },
]

const events: CalendarEvent[] = [
  {
    id: 'event-1',
    title: 'Team Meeting',
    start: dayjs('2025-08-04T09:00:00.000Z'),
    end: dayjs('2025-08-04T10:00:00.000Z'),
    uid: 'event-1@ilamy.calendar',
    resourceId: 'room-a',
  },
]

function App() {
  return (
    <IlamyResourceCalendar
      resources={resources}
      events={events}
      firstDayOfWeek="sunday"
      initialView="week"
    />
  )
}
```

--------------------------------

### Install rrule.js

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rrule.js.md

Install the rrule.js library using Yarn or npm for client-side or server-side usage.

```bash
$ yarn add rrule
```

```bash
$ npm install rrule
```

--------------------------------

### Team Schedule Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Illustrates a team schedule using `IlamyResourceCalendar`. It defines team members as resources and sets up various team events with specific assignments and timings. Uses `dayjs` for event start and end times.

```tsx
const TeamScheduleCalendar = () => {
  const teamMembers: Resource[] = [
    {
      id: 'alice',
      title: 'Alice Johnson - Senior Developer',
      color: '#3B82F6',
      backgroundColor: '#EFF6FF',
    },
    {
      id: 'bob',
      title: 'Bob Smith - Product Manager',
      color: '#EF4444',
      backgroundColor: '#FEF2F2',
    },
    {
      id: 'carol',
      title: 'Carol Williams - Designer',
      color: '#8B5CF6',
      backgroundColor: '#F5F3FF',
    },
  ]

  const teamEvents: CalendarEvent[] = [
    {
      id: 'standup',
      title: 'Daily Standup',
      start: dayjs('2025-08-04T10:00:00.000Z'),
      end: dayjs('2025-08-04T10:15:00.000Z'),
      uid: 'standup@team.com',
      resourceIds: ['alice', 'bob', 'carol'], // All team members
      color: '#10B981',
    },
    {
      id: 'alice-coding',
      title: 'Feature Development',
      start: dayjs('2025-08-04T11:00:00.000Z'),
      end: dayjs('2025-08-04T15:00:00.000Z'),
      uid: 'alice-coding@team.com',
      resourceId: 'alice',
      color: '#3B82F6',
    },
    {
      id: 'bob-planning',
      title: 'Sprint Planning',
      start: dayjs('2025-08-04T14:00:00.000Z'),
      end: dayjs('2025-08-04T16:00:00.000Z'),
      uid: 'bob-planning@team.com',
      resourceId: 'bob',
      color: '#EF4444',
    },
  ]

  return (
    <IlamyResourceCalendar
      resources={teamMembers}
      events={teamEvents}
      initialView="week"
      firstDayOfWeek="monday"
    />
  )
}

```

--------------------------------

### Run Development Server

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CONTRIBUTING.md

Start the development server to run the application locally. This command is used during development to see changes in real-time.

```bash
bun dev
```

--------------------------------

### Install Calendar Dependencies

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/README.md

Installs the necessary packages for ilamy Calendar integration, including React, Tailwind CSS, and Day.js.

```bash
npm install @ilamy/calendar react react-dom tailwindcss dayjs
```

--------------------------------

### Run Development Server

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/vite/README.md

Start the Vite development server to view the application locally. This command is used for local development and testing.

```bash
bun run dev
# or: npm run dev
```

--------------------------------

### Run Development Server with npm/yarn/pnpm/bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/astro/README.md

Start the Astro development server to view the integrated calendar. For Bun users, `bunx` is used to ensure correct runtime execution.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun run dev  # Uses bunx to run Astro with Bun
```

--------------------------------

### Implement Virtualization for Many Resources

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

For performance with many resources, implement virtualization by managing a set of visible resource IDs. This example shows how to filter resources based on a `visibleResourceIds` set.

```tsx
const [visibleResourceIds, setVisibleResourceIds] = useState<Set<string>>(
  new Set(resources.slice(0, 10).map((r) => r.id))
)

const visibleResources = resources.filter((r) => visibleResourceIds.has(r.id))
```

--------------------------------

### Resource Color Customization Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Illustrates how to apply custom text and background colors to resources for distinct visual identification.

```tsx
const resources: Resource[] = [
  {
    id: 'designer',
    title: 'Design Team',
    color: '#8B5CF6', // Purple text
    backgroundColor: '#F5F3FF', // Light purple background
  },
  {
    id: 'engineer',
    title: 'Engineering Team',
    color: '#10B981', // Green text
    backgroundColor: '#ECFDF5', // Light green background
  },
]
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/nextjs/README.md

Start the Next.js development server. For Bun users, 'bun run dev' uses 'bunx' to ensure correct execution.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun run dev  # Uses bunx to run Next.js with Bun
```

--------------------------------

### Install Peer Dependencies for ilamy Calendar

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/nextjs/README.md

Install the required peer dependencies for ilamy Calendar and Next.js. This includes React, Tailwind CSS, and related packages.

```bash
npm install react react-dom tailwindcss tailwindcss-animate
# or
yarn add react react-dom tailwindcss tailwindcss-animate
# or
pnpm add react react-dom tailwindcss tailwindcss-animate
# or
bun add react react-dom tailwindcss tailwindcss-animate
```

--------------------------------

### Full iCalendar Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rfc-5545.md

A complete iCalendar object demonstrating a recurring event with an exception and a modified instance.

```ical
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Example Corp//CalDAV Client//EN
BEGIN:VEVENT
UID:1234@example.com
DTSTART;TZID=America/New_York:20250701T090000
DTEND;TZID=America/New_York:20250701T100000
SUMMARY:Weekly Meeting
RRULE:FREQ=WEEKLY;BYDAY=TU,TH
EXDATE;TZID=America/New_York:20250715T090000
END:VEVENT
BEGIN:VEVENT
UID:1234@example.com
RECURRENCE-ID;TZID=America/New_York:20250722T090000
DTSTART;TZID=America/New_York:20250722T110000
DTEND;TZID=America/New_York:20250722T120000
SUMMARY:Weekly Meeting (Moved)
END:VEVENT
END:VCALENDAR
```

--------------------------------

### EXDATE Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rfc-5545.md

Specifies exception dates for a recurring event in the America/New_York time zone.

```ical
EXDATE;TZID=America/New_York:20250704T090000,20250711T090000
```

--------------------------------

### RRULE Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rfc-5545.md

Defines a weekly recurrence rule for an event, occurring on Tuesdays and Thursdays.

```ical
RRULE:FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR
```

--------------------------------

### Room Booking System Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Demonstrates a room booking system using `IlamyResourceCalendar`. It includes defining resources (rooms), handling cell clicks to create new bookings, and updating existing events. Requires `useState` and `dayjs` for state management and date handling.

```tsx
import { IlamyResourceCalendar } from '@ilamy/calendar'
import type { CalendarEvent, CellClickInfo, Resource } from '@ilamy/calendar'
import { useState } from 'react'
import dayjs from 'dayjs'

const RoomBookingCalendar = () => {
  const [events, setEvents] = useState<CalendarEvent[]>([])

  const rooms: Resource[] = [
    {
      id: 'conf-a',
      title: 'Conference Room A (10 people)',
      color: '#3B82F6',
      backgroundColor: '#EFF6FF',
      position: 1,
    },
    {
      id: 'conf-b',
      title: 'Conference Room B (20 people)',
      color: '#EF4444',
      backgroundColor: '#FEF2F2',
      position: 2,
    },
    {
      id: 'board-room',
      title: 'Board Room (8 people)',
      color: '#8B5CF6',
      backgroundColor: '#F5F3FF',
      position: 3,
    },
  ]

  const handleCellClick = (info: CellClickInfo) => {
    const { start, end, resourceId } = info
    if (!resourceId) return

    const newEvent: CalendarEvent = {
      id: `booking-${Date.now()}`,
      title: 'New Booking',
      start,
      end,
      uid: `booking-${Date.now()}@company.com`,
      resourceId,
      color: '#10B981',
    }

    setEvents((prev) => [...prev, newEvent])
  }

  const handleEventUpdate = (event: CalendarEvent) => {
    setEvents((prev) => prev.map((e) => (e.id === event.id ? event : e)))
  }

  return (
    <IlamyResourceCalendar
      resources={rooms}
      events={events}
      initialView="week"
      onCellClick={handleCellClick}
      onEventUpdate={handleEventUpdate}
      firstDayOfWeek="monday"
    />
  )
}

```

--------------------------------

### Basic Custom Resource Rendering

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Customize the display of individual resources using the `renderResource` prop. This example shows a simple renderer with a colored indicator and resource title.

```tsx
import { IlamyResourceCalendar } from '@ilamy/calendar'
import type { Resource } from '@ilamy/calendar'

const CustomResourceRenderer = (resource: Resource) => (
  <div className="flex items-center gap-2 p-2">
    <div
      className="h-3 w-3 rounded-full"
      style={{ backgroundColor: resource.color }}
    />
    <span className="font-semibold">{resource.title}</span>
  </div>
)

function App() {
  return (
    <IlamyResourceCalendar
      resources={resources}
      events={events}
      renderResource={CustomResourceRenderer}
    />
  )
}
```

--------------------------------

### Working with Cross-Resource Events

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Utilize the `useIlamyResourceCalendarContext` hook to find and process cross-resource events. This example demonstrates filtering events and retrieving associated resources.

```tsx
import { useIlamyResourceCalendarContext } from '@ilamy/calendar'

function EventManager() {
  const { events, resources } = useIlamyResourceCalendarContext()

  // Find all cross-resource events
  const crossResourceEvents = events.filter(
    (event) => event.resourceIds && event.resourceIds.length > 1
  )

  // Get all resources for an event
  const getEventResources = (event: CalendarEvent) => {
    const eventResourceIds = event.resourceIds || [event.resourceId]
    return resources.filter((resource) =>
      eventResourceIds.includes(resource.id)
    )
  }

  return (
    <div>
      {crossResourceEvents.map((event) => (
        <div key={event.id}>
          {event.title} - {getEventResources(event).length} resources
        </div>
      ))}
    </div>
  )
}
```

--------------------------------

### Resource Calendar Unit Test Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

A basic unit test to verify that events are correctly filtered and retrieved for a specific resource using the `useIlamyResourceCalendarContext` hook.

```typescript
describe('ResourceCalendar', () => {
  it('should filter events by resource', () => {
    const { getEventsForResource } = useIlamyResourceCalendarContext()
    const roomAEvents = getEventsForResource('room-a')
    expect(roomAEvents).toHaveLength(3)
  })
})
```

--------------------------------

### Correctly Defining Start and End Dates for Recurrence Rules

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rrule.js.md

Illustrates the correct method for defining `dtstart` and `until` dates using UTC timestamps to avoid unexpected timezone offsets. Using `new Date()` directly can lead to incorrect results due to implicit timezone conversions.

```javascript
// WRONG: Will produce dates with TZ offsets added
new RRule({
  freq: RRule.MONTHLY,
  dtstart: new Date(2018, 1, 1, 10, 30),
  until: new Date(2018, 2, 31),
}).all()[('2018-02-01T18:30:00.000Z', '2018-03-01T18:30:00.000Z')]

// RIGHT: Will produce dates with recurrences at the correct time
new RRule({
  freq: RRule.MONTHLY,
  dtstart: datetime(2018, 2, 1, 10, 30),
  until: datetime(2018, 3, 31),
}).all()[('2018-02-01T10:30:00.000Z', '2018-03-01T10:30:00.000Z')]
```

--------------------------------

### IlamyResourceCalendar Month View Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Renders the IlamyResourceCalendar in month view, displaying resources as rows and days as columns. Ensure 'resources' and 'events' props are provided.

```tsx
<IlamyResourceCalendar
  resources={resources}
  events={events}
  initialView="month"
/>
```

--------------------------------

### Quick Start: Basic Calendar Integration

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/README.md

Integrate the IlamyCalendar component into your React application. Import base styles and provide an array of events. The initial view can be set to 'week'.

```tsx
import { IlamyCalendar } from '@ilamy/calendar';
import '@ilamy/calendar/dist/index.css'; // Import base styles

const MyApp = () => {
  const events = [
    {
      id: '1',
      title: 'Project Kickoff',
      start: '2026-05-01T10:00:00Z',
      end: '2026-05-01T11:30:00Z',
      color: 'blue'
    }
  ];

  return (
    <div style={{ height: '800px' }}>
      <IlamyCalendar 
        events={events}
        initialView="week"
        onEventClick={(event) => console.log('Clicked:', event)}
      />
    </div>
  );
};

```

--------------------------------

### Custom Event Rendering Based on Resource

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Implement a custom event renderer using `renderEvent` prop to style events based on their associated resource's properties like `backgroundColor` and `color`. This example uses the `useIlamyResourceCalendarContext` hook to access resource information.

```tsx
const CustomEventRenderer = (event: CalendarEvent) => {
  const { getResourceById } = useIlamyResourceCalendarContext()
  const resource = event.resourceId
    ? getResourceById(event.resourceId)
    : undefined

  return (
    <div
      className="rounded p-1 text-xs font-medium"
      style={{
        backgroundColor: resource?.backgroundColor || event.color,
        color: resource?.color || '#000',
        borderLeft: `3px solid ${resource?.color || event.color}`,
      }}
    >
      {event.title}
    </div>
  )
}

;<IlamyResourceCalendar
  resources={resources}
  events={events}
  renderEvent={CustomEventRenderer}
/>
```

--------------------------------

### Build Project for Production with Bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/GEMINI.md

Create a production build of the project using Bun (bunup).

```bash
bun run build
```

--------------------------------

### Equipment Scheduling with Custom Resource Renderer

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Demonstrates how to schedule equipment by defining resources and using a custom renderer for a more detailed resource view.

```tsx
const EquipmentScheduleCalendar = () => {
  const equipment: Resource[] = [
    {
      id: 'projector-1',
      title: 'HD Projector #1',
      color: '#F59E0B',
      backgroundColor: '#FEF3C7',
    },
    {
      id: 'projector-2',
      title: 'HD Projector #2',
      color: '#F59E0B',
      backgroundColor: '#FEF3C7',
    },
    {
      id: 'camera-1',
      title: 'Video Camera #1',
      color: '#EC4899',
      backgroundColor: '#FCE7F3',
    },
  ]

  const customResourceRenderer = (resource: Resource) => (
    <div className="flex items-center gap-2 p-2">
      <div
        className="h-4 w-4 rounded-full"
        style={{ backgroundColor: resource.color }}
      />
      <div className="flex flex-col">
        <span className="text-sm font-semibold">{resource.title}</span>
        <span className="text-xs text-muted-foreground">Available</span>
      </div>
    </div>
  )

  return (
    <IlamyResourceCalendar
      resources={equipment}
      events={[]}
      initialView="day"
      renderResource={customResourceRenderer}
    />
  )
}
```

--------------------------------

### Unassigned Event Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Demonstrates an event that is not assigned to any specific resource, shown without 'resourceId' or 'resourceIds'.

```typescript
const event: CalendarEvent = {
  id: 'floating-event',
  title: 'No Resource Assigned',
  start: dayjs('2025-08-04T12:00:00.000Z'),
  end: dayjs('2025-08-04T13:00:00.000Z'),
  uid: 'floating-event@ilamy.calendar',
  // No resourceId or resourceIds
}
```

--------------------------------

### Run Full CI Pipeline with Bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/GEMINI.md

Execute the complete Continuous Integration pipeline, including linting, formatting checks, tests, and building, using Bun.

```bash
bun run ci
```

--------------------------------

### Cross-Resource Event Assignment

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Example of an event that spans multiple resources using the 'resourceIds' array property.

```typescript
const event: CalendarEvent = {
  id: 'all-hands',
  title: 'All Hands Meeting',
  start: dayjs('2025-08-04T14:00:00.000Z'),
  end: dayjs('2025-08-04T15:00:00.000Z'),
  uid: 'all-hands@ilamy.calendar',
  resourceIds: ['room-a', 'room-b', 'room-c'], // Spans multiple resources
}
```

--------------------------------

### Single Resource Event Assignment

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Example of an event assigned to a single resource using the 'resourceId' property.

```typescript
const event: CalendarEvent = {
  id: 'meeting-1',
  title: 'Team Standup',
  start: dayjs('2025-08-04T10:00:00.000Z'),
  end: dayjs('2025-08-04T10:30:00.000Z'),
  uid: 'meeting-1@ilamy.calendar',
  resourceId: 'room-a', // Assigned to one resource
}
```

--------------------------------

### Common Bun Commands for Development

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CLAUDE.md

A list of essential commands for linting, formatting, testing, and building the project using Bun. These commands ensure code quality and project integrity.

```bash
bun test
```

```bash
bun test --coverage
```

```bash
bun run lint
```

```bash
bun run lint:fix
```

```bash
bun run prettier:check
```

```bash
bun run prettier:fix
```

```bash
bun run pre-commit
```

```bash
bun run build
```

```bash
bun run type-check
```

```bash
bun run ci
```

--------------------------------

### Lint Code with Oxlint using Bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/GEMINI.md

Run the linter (Oxlint) on the project code using Bun.

```bash
bun run lint
```

--------------------------------

### Run Pre-commit Hooks with Bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/GEMINI.md

Execute the pre-commit script, which typically includes linting and formatting fixes, using Bun.

```bash
bun run pre-commit
```

--------------------------------

### Vite Configuration with React and Tailwind CSS

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/vite/README.md

Configure Vite to use React and Tailwind CSS v4. This setup is essential for the project.

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
```

--------------------------------

### Run Tests with Coverage using Bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/GEMINI.md

Execute all project tests and generate a code coverage report using the Bun runtime.

```bash
bun test --coverage
```

--------------------------------

### RRuleOptions Interface

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/types-and-interfaces.md

Defines the structure for recurrence rule options, including frequency and start date, with optional parameters like interval and count.

```typescript
type RRuleOptions = {
  freq: Options['freq']    // Required: RRule.DAILY, RRule.WEEKLY, etc.
  dtstart: Date            // Required: recurrence start date
} & Partial<Omit<Options, 'freq' | 'dtstart'>>
// Optional: interval, count, until, byweekday, bymonthday, bymonth, etc.
```

--------------------------------

### IlamyCalendarPropEvent Type Definition

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/types-and-interfaces.md

The public-facing event type that accepts flexible date inputs for start and end times. It inherits all fields from CalendarEvent.

```typescript
interface IlamyCalendarPropEvent extends CalendarEvent {
  start: dayjs.Dayjs | Date | string;
  end: dayjs.Dayjs | Date | string;
}
```

--------------------------------

### Create and Use RRuleSet

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rrule.js.md

Demonstrates building an RRuleSet by adding recurrence rules, specific dates, and exclusions. Shows how to retrieve all occurrences or a date range, and convert the set to its string representation.

```js
const rruleSet = new RRuleSet()

// Add a rrule to rruleSet
rruleSet.rrule(
  new RRule({
    freq: RRule.MONTHLY,
    count: 5,
    dtstart: datetime(2012, 2, 1, 10, 30),
  })
)

// Add a date to rruleSet
rruleSet.rdate(datetime(2012, 7, 1, 10, 30))

// Add another date to rruleSet
rruleSet.rdate(datetime(2012, 7, 2, 10, 30))

// Add a exclusion rrule to rruleSet
rruleSet.exrule(
  new RRule({
    freq: RRule.MONTHLY,
    count: 2,
    dtstart: datetime(2012, 3, 1, 10, 30),
  })
)

// Add a exclusion date to rruleSet
rruleSet.exdate(datetime(2012, 5, 1, 10, 30))

// Get all occurrence dates (Date instances):
rruleSet.all()[
  ('2012-02-01T10:30:00.000Z',
  '2012-05-01T10:30:00.000Z',
  '2012-07-01T10:30:00.000Z',
  '2012-07-02T10:30:00.000Z')
]

// Get a slice:
rruleSet.between(datetime(2012, 2, 1), datetime(2012, 6, 2))[
  ('2012-05-01T10:30:00.000Z', '2012-07-01T10:30:00.000Z')
]

// To string
rruleSet.valueOf()[
  ('DTSTART:20120201T023000Z',
  'RRULE:FREQ=MONTHLY;COUNT=5',
  'RDATE:20120701T023000Z,20120702T023000Z',
  'EXRULE:FREQ=MONTHLY;COUNT=2',
  'EXDATE:20120601T023000Z')
]

// To string
rruleSet.toString()
;('["DTSTART:20120201T023000Z","RRULE:FREQ=MONTHLY;COUNT=5","RDATE:20120701T023000Z,20120702T023000Z","EXRULE:FREQ=MONTHLY;COUNT=2","EXDATE:20120601T023000Z"]')
```

--------------------------------

### Run Tests

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CONTRIBUTING.md

Execute all project tests. This is a crucial step to ensure code quality and functionality.

```bash
bun test
```

--------------------------------

### BusinessHours Interface

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/types-and-interfaces.md

Defines the structure for business hours, including optional days of the week, start time, and end time. Defaults are provided for convenience.

```typescript
interface BusinessHours {
  daysOfWeek?: WeekDays[]   // Default: ['monday'...'friday']
  startTime?: number        // Default: 9 (24-hour format, 0-24)
  endTime?: number          // Default: 17
}
```

--------------------------------

### Running Tests with Bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/testing-guide.md

Use these commands to execute tests, generate coverage reports, or run specific files and directories. The `--watch` flag enables re-running tests on file changes.

```bash
bun test                              # Run all tests
bun test --coverage                   # Tests with coverage report
bun test src/features/calendar/       # Run tests in a directory
bun test week-view.test.tsx           # Run a single file (partial match)
bun test --watch                      # Watch mode (re-run on changes)
```

--------------------------------

### Check Formatting with Prettier using Bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/GEMINI.md

Verify code formatting against Prettier rules using Bun.

```bash
bun run prettier:check
```

--------------------------------

### IlamyResourceCalendar Week View Example

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Renders the IlamyResourceCalendar in week view, providing a detailed hourly timeline with resource rows. Requires 'resources' and 'events' props.

```tsx
<IlamyResourceCalendar
  resources={resources}
  events={events}
  initialView="week"
/>
```

--------------------------------

### Configure Git for Symlinks on Windows

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CLAUDE.md

Run this command before cloning to ensure Git on Windows handles symlinks correctly, which is crucial for this repository's structure.

```bash
git config --global core.symlinks true
```

--------------------------------

### CellClickInfo Interface

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/types-and-interfaces.md

Defines the structure of information passed when a calendar cell is clicked. Includes start and end times, an optional resource ID, and an all-day flag.

```typescript
interface CellClickInfo {
  start: dayjs.Dayjs
  end: dayjs.Dayjs
  resourceId?: string | number
  allDay?: boolean
}
```

--------------------------------

### Get occurrences between two dates

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rrule.js.md

Returns occurrences within a specified date range. The `inc` parameter controls whether the boundary dates are included if they are occurrences.

```javascript
rule.between(datetime(2012, 8, 1), datetime(2012, 9, 1))[
  ('2012-08-27T10:30:00.000Z', '2012-08-31T10:30:00.000Z')
]
```

--------------------------------

### CSS Import in Entry Point

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/examples/vite/README.md

Import the global CSS file into your application's entry point. This ensures styles are applied globally.

```tsx
// src/main.tsx
import './index.css'
```

--------------------------------

### Get all occurrences with an iterator

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rrule.js.md

Retrieves all dates matching the rule. An optional iterator function can be provided to control the number of occurrences returned or to stop iteration early.

```javascript
rule.all()[
  ('2012-02-01T10:30:00.000Z',
  '2012-05-01T10:30:00.000Z',
  '2012-07-01T10:30:00.000Z',
  '2012-07-02T10:30:00.000Z')
]
```

```javascript
rule.all(function (date, i) {
  return i < 2
})[('2012-02-01T10:30:00.000Z', '2012-05-01T10:30:00.000Z')]
```

--------------------------------

### Advanced Custom Resource Rendering

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Enhance resource rendering by accessing context within the `renderResource` prop. This example displays the resource title and the count of associated events.

```tsx
const AdvancedResourceRenderer = (resource: Resource) => {
  const { getEventsForResource } = useIlamyResourceCalendarContext()
  const eventCount = getEventsForResource(resource.id).length

  return (
    <div className="flex flex-col gap-1 p-2">
      <div className="flex items-center justify-between">
        <span className="font-bold">{resource.title}</span>
        <span className="text-xs text-muted-foreground">
          {eventCount} events
        </span>
      </div>
      {resource.color && (
        <div
          className="h-1 w-full rounded"
          style={{ backgroundColor: resource.color }}
        />
      )}
    </div>
  )
}
```

--------------------------------

### Run Tests with Coverage

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CONTRIBUTING.md

Execute all project tests and generate a code coverage report. This helps identify areas of the code that are not adequately tested.

```bash
bun run test:coverage
```

--------------------------------

### Clone the Repository

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CONTRIBUTING.md

Clone the ilamy-calendar repository to your local machine. Ensure you replace YOUR_USERNAME with your GitHub username.

```bash
git clone https://github.com/YOUR_USERNAME/ilamy-calendar.git
cd ilamy-calendar
```

--------------------------------

### TypeScript Definitions for Resource Calendar

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/resource-calendar.md

Utilize comprehensive TypeScript definitions for `Resource`, `CalendarEvent`, `CellClickInfo`, and `IlamyResourceCalendarProps` for type-safe development. Example shows type-safe resource and event definitions.

```typescript
import type {
  Resource,
  CalendarEvent,
  CellClickInfo,
  IlamyResourceCalendarProps,
  UseIlamyResourceCalendarContextReturn,
} from '@ilamy/calendar'

// Type-safe resource definition
const typedResource: Resource = {
  id: 'room-a',
  title: 'Conference Room A',
  color: '#3B82F6',
  backgroundColor: '#EFF6FF',
}

// Type-safe event definition
const typedEvent: CalendarEvent = {
  id: 'meeting-1',
  title: 'Team Meeting',
  start: dayjs(),
  end: dayjs().add(1, 'hour'),
  uid: 'meeting-1@company.com',
  resourceId: 'room-a',
}

// Type-safe cell click handler
const handleCellClick = (info: CellClickInfo) => {
  // CellClickInfo contains: { start: Dayjs, end: Dayjs, resourceId?: string | number }
  console.log('Clicked:', info.start, info.end, info.resourceId)
}
```

--------------------------------

### Format Code with Prettier

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/CONTRIBUTING.md

Automatically format your code according to Prettier's rules. This ensures consistent code style across the project.

```bash
bun run prettier:fix
```

--------------------------------

### Using RRuleSet with RDate

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rrule.js.md

Demonstrates how to use RRuleSet to add both RRULEs and specific dates (rdate), mimicking RFC-compliant dtstart behavior. This is useful when the default non-compliant behavior of rrule.js is not desired.

```javascript
var rruleSet = new RRuleSet()
var start = datetime(2012, 2, 1, 10, 30)

// Add a rrule to rruleSet
rruleSet.rrule(
  new RRule({
    freq: RRule.MONTHLY,
    count: 5,
    dtstart: start,
  })
)

// Add a date to rruleSet
rruleSet.rdate(start)
```

--------------------------------

### Approve and Post GitHub Content

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/GEMINI.md

A command sequence to approve and post content to GitHub, ensuring an explicit user approval is captured. The `touch` command creates a flag file before executing the `gh` command.

```bash
touch .claude/state/pr-post-approved.flag && gh ...
```

--------------------------------

### Parse RFC-like RRule Strings

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rrule.js.md

The rrulestr function parses RFC-like recurrence rule strings. It supports various options for handling caching, default start dates, line unfolding, and compatibility modes.

```javascript
rrulestr(rruleStr[, options])
```

--------------------------------

### Create and Use RRule

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/rrule.js.md

Demonstrates creating an RRule instance with specific recurrence properties and retrieving all occurrences or a date range. Includes conversion to iCalendar string and human-readable text.

```es6
import { datetime, RRule, RRuleSet, rrulestr } from 'rrule'

// Create a rule:
const rule = new RRule({
  freq: RRule.WEEKLY,
  interval: 5,
  byweekday: [RRule.MO, RRule.FR],
  dtstart: datetime(2012, 2, 1, 10, 30),
  until: datetime(2012, 12, 31)
})

// Get all occurrence dates (Date instances):
rule.all()
[ '2012-02-03T10:30:00.000Z',
  '2012-03-05T10:30:00.000Z',
  '2012-03-09T10:30:00.000Z',
  '2012-04-09T10:30:00.000Z',
  '2012-04-13T10:30:00.000Z',
  '2012-05-14T10:30:00.000Z',
  '2012-05-18T10:30:00.000Z',

 /* ... */]

// Get a slice:
rule.between(datetime(2012, 8, 1), datetime(2012, 9, 1))
['2012-08-27T10:30:00.000Z',
 '2012-08-31T10:30:00.000Z']

// Get an iCalendar RRULE string representation:
// The output can be used with RRule.fromString().
rule.toString()
"DTSTART:20120201T093000Z\nRRULE:FREQ=WEEKLY;INTERVAL=5;UNTIL=20130130T230000Z;BYDAY=MO,FR"

// Get a human-friendly text representation:
// The output can be used with RRule.fromText().
rule.toText()
"every 5 weeks on Monday, Friday until January 31, 2013"
```

--------------------------------

### CalendarEvent Type Definition

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/docs/types-and-interfaces.md

The core event type used internally. It requires an ID, title, start, and end date, and supports optional fields for customization like color, description, and recurrence rules.

```typescript
interface CalendarEvent {
  id: string | number;
  title: string;
  start: dayjs.Dayjs;
  end: dayjs.Dayjs;
  color?: string;
  backgroundColor?: string;
  description?: string;
  location?: string;
  allDay?: boolean;
  rrule?: RRuleOptions;
  exdates?: string[];
  recurrenceId?: string;
  uid?: string;
  resourceId?: string | number;
  resourceIds?: (string | number)[];
  data?: Record<string, any>;
}
```

--------------------------------

### Perform TypeScript Type Check with Bun

Source: https://github.com/kcsujeet/ilamy-calendar/blob/main/GEMINI.md

Run the TypeScript type checker on the project using Bun.

```bash
bun run type-check
```