A modern, responsive horizontal calendar view built with SvelteKit 5 that displays a rolling 7-day view with today as the second column. Perfect for visualizing events from multiple ICS calendar feeds in a clean, organized layout.

• 7-day rolling window with today as the second column
• Multiple ICS calendar support with configurable feeds
• Multi-day event spanning with proper visual continuity
• Recurring event expansion with full RRULE support
• Timezone-aware date calculations
• Responsive masonry layout with optimal event placement
• Clean visual design with TailwindCSS styling
• Real-time event filtering and conflict detection

1. Clone and install dependencies:

git clone <repository-url>
cd svelte-horizontal-calendar
npm install

2. Configure your calendars:

cp config.sample.json config.json
# Edit config.json with your ICS calendar URLs

3. Start the development server:

npm run dev

You can configure calendars in two ways:

Set the CONFIG environment variable with your calendar configuration as JSON:

export CONFIG='{"calendars":[{"name":"Work Calendar","icsUrl":"https://your-calendar-provider.com/calendar.ics"},{"name":"Personal Events","icsUrl":"https://another-calendar.com/events.ics"}]}'
npm run dev

Create a config.json file in the project root:

{
  "calendars": [
    {
      "name": "Work Calendar",
      "icsUrl": "https://your-calendar-provider.com/calendar.ics"
    },
    {
      "name": "Personal Events", 
      "icsUrl": "https://another-calendar.com/events.ics"
    }
  ]
}

Note: The environment variable takes precedence over the config file. If CONFIG is set, the config file is not required.

Each calendar appears as a separate row in the horizontal layout.

npm run build

You can preview the production build with npm run preview.

• Framework: SvelteKit 5 with TypeScript
• Styling: TailwindCSS
• Calendar Parsing: ts-ics library with RRULE support
• Event Layout: Custom masonry algorithm with collision detection
• CORS Handling: Server-side API proxy for ICS feeds

├── src/
│   ├── routes/
│   │   ├── +page.svelte          # Main calendar component
│   │   └── api/calendars/        # ICS fetching API
│   └── lib/                      # Shared utilities
├── config.json                   # Calendar configuration (your file)
├── config.sample.json            # Example configuration
└── static/                       # Static assets

MIT