# ICS Viewer

> Free online ICS file viewer and iCalendar tool. Open, parse, and visualize .ics calendar files instantly in your browser — no account, no install required. Supports month, week, day, agenda, and year views; live iCal feed URLs; and embeddable calendar widgets.

ICS Viewer is built for developers, short-term rental hosts, and anyone who works with calendar data. It handles recurring events, timezones, VTIMEZONE blocks, and real-world ICS files generated by Google Calendar, Apple Calendar, Outlook, Airbnb, Booking.com, Vrbo, and others.

## Tools

- [ICS Viewer](https://icsviewer.com/): Upload an .ics file or paste a public iCal URL to view events in a calendar
- [URL View](https://icsviewer.com/view): Open a live iCal feed by URL directly. Accepts a `url` query parameter — e.g. `https://icsviewer.com/view?url=https://example.com/calendar.ics` — to pre-load any public iCal feed and render it immediately. Useful for shareable calendar links.
- [Embed Builder](https://icsviewer.com/embed): Visual builder with live preview for the calendar embed widget. The full embed API is documented below and at `/embed.md` — the builder is a convenience, not a required step.

## Embed Widget

Any webpage can display a live, browsable calendar from a public iCal feed with one script tag. No framework, build step, API key, or account. Free, including on commercial sites.

Minimal working embed:

```html
<div data-ics-url="https://example.com/calendar.ics"></div>
<script src="https://icsviewer.com/widget.js" async></script>
```

`widget.js` mounts every element on the page carrying `data-ics-url`, so include the script once regardless of how many calendars are placed. All configuration is `data-*` attributes on the container element; booleans are `"1"` for on, omitted for off. Colors are hex, with or without the leading `#`.

| Attribute | Values | Default | Purpose |
| --- | --- | --- | --- |
| `data-ics-url` | URL, or several comma-separated | **required** | Public iCal (.ics) feed(s). Must load without authentication. Multiple feeds merge into one colour-coded calendar with a legend. |
| `data-view` | month \| week \| day \| year \| agenda | `month` | View shown on load. |
| `data-views` | comma-separated list of the above | `month,week,agenda` | Views the visitor can switch between. A single value locks the calendar to one view. |
| `data-height` | CSS length, bare px number, or `auto` | `600px` | Height of the embed. `auto` sizes the frame to its content and keeps it in sync as the visitor navigates. Ignored if the container already has an explicit height. |
| `data-radius` | integer px | `8` | Corner radius of the frame. |
| `data-compact` | `1` | off | Tighter spacing, for columns under ~400px. |
| `data-theme` | `light` \| `dark` \| `auto` | `light` | Colour scheme. `auto` follows the visitor's system dark-mode setting. Overridden by `data-bg`. |
| `data-color` | hex | `7c3aed` | Accent color for event chips and active controls. |
| `data-bg` | hex | `ffffff` | Calendar background. A dark value flips the palette to light-on-dark automatically. Overrides `data-theme`. |
| `data-hide-header` | `1` | off | Hide the title bar and view switcher. |
| `data-title` | text | feed's own name | Replace the calendar's header text. |
| `data-upcoming` | `1` | off | Show only events from today forward. |
| `data-filter` | keyword | none | Show only events whose title or category contains the keyword. |
| `data-timezone` | IANA name | visitor's browser | Pin event times to a specific timezone. |
| `data-locale` | BCP 47 tag | visitor's browser | Language for month names, weekdays and date formats. |
| `data-weekstart` | `0` \| `1` | `0` | First day of the week. 0 = Sunday, 1 = Monday. |
| `data-timeformat` | `12h` \| `24h` | `12h` | Clock format. |

Notes that determine whether an embed works:

- The feed must be publicly reachable. It is fetched through icsviewer.com, not from the visitor's session, so a calendar shared only with signed-in users renders empty.
- The frame fills its container. Keep `data-height` or set an explicit height in CSS, otherwise the frame falls back to the browser's default 150px iframe height.
- `data-height="auto"` grows month, agenda and year views to fit their content. Day and week are a fixed 24-hour grid, so they keep a scrollable ~620px pane instead. Auto height needs `widget.js`; a raw iframe cannot resize itself.
- Merged feeds are fetched in parallel and a feed that fails is skipped rather than breaking the embed, so the calendar still renders if one host is down.
- In a client-rendered framework, inject `widget.js` after the container mounts rather than placing a raw `<script>` tag in JSX — the widget mounts on `DOMContentLoaded` and will otherwise run before the div exists.
- `widget.js` adds a small "Calendar by ICS Viewer" attribution link below the calendar, in the host page's DOM. It is part of the free embed.

Where `<script>` tags are not permitted, the frame can be embedded directly. Every attribute has a query-parameter equivalent on `https://icsviewer.com/view` (`data-views` → `show`, `data-hide-header` → `noheader`, `data-timezone` → `tz`, `data-timeformat="24h"` → `h24=1`, others match without the `data-` prefix), plus a required `embedded=1`. Repeat `url=` for each merged feed.

Complete reference: [/embed.md](https://icsviewer.com/embed.md) (markdown, includes React/Vue/WordPress/Webflow snippets) and [/embed.json](https://icsviewer.com/embed.json) (machine-readable option schema). Both are served with `Access-Control-Allow-Origin: *`.

## Blog

Each post is available as clean markdown at `/blog/{slug}.md`.

- [What Is an ICS File? A Complete Guide to iCalendar](https://icsviewer.com/blog/what-is-an-ics-file): Explains the iCalendar format (RFC 5545), the structure of .ics files, RRULE recurrence, and common use cases
- [How to Export Google Calendar as an ICS File](https://icsviewer.com/blog/google-calendar-export-ics): Step-by-step guide to exporting events from Google Calendar as .ics, including single calendars, Google Takeout, and live subscription URLs
- [RFC 5545 Explained: Inside the iCalendar Specification](https://icsviewer.com/blog/icalendar-rfc5545-explained): Developer-oriented breakdown of the iCalendar spec — components, RRULE, timezone handling, X-properties, and common real-world pitfalls
- [How to Sync Calendars Across Airbnb, Booking.com, and Vrbo](https://icsviewer.com/blog/sync-airbnb-booking-vrbo-ical): How iCal-based calendar sync works for short-term rentals; step-by-step cross-import instructions and double-booking risk reduction
- [How to Open an ICS File on Windows, Mac, iPhone, and Android](https://icsviewer.com/blog/how-to-open-ics-file): Opening .ics files on every platform, including how to read one without importing it into a calendar, and how to diagnose a file that will not open
- [How to Convert an ICS File to CSV](https://icsviewer.com/blog/ics-to-csv): Turning a calendar into a spreadsheet — which columns matter, computing durations, and the all-day-event and date-parsing traps that corrupt hour totals
- [How to Open an ICS File in Excel](https://icsviewer.com/blog/ics-to-excel): Three routes into Excel (CSV import, Power Query, Google Sheets), calculating hours, and what a flat sheet loses from the original file
- [How to Convert an ICS File to JSON](https://icsviewer.com/blog/ics-to-json): Parsing iCalendar into JSON for scripts and dashboards — library choices, a target schema, and the recurrence, all-day, and floating-time traps
- [How to Get Calendar Events into Google Sheets](https://icsviewer.com/blog/calendar-to-google-sheets): One-off CSV import, a self-refreshing Apps Script, and IMPORTDATA for public feeds — with guidance on which to choose
- [How to Export ICS Events to CSV or Excel](https://icsviewer.com/blog/export-ics-to-csv-excel): Exporting calendar events into spreadsheet format for time tracking, hour calculations, and printable event lists
- [Share Your Calendar as a Public Webpage](https://icsviewer.com/blog/share-calendar-as-public-webpage): Wrap a public iCal feed in ICS Viewer to create a shareable browser-friendly calendar link
- [Airbnb / Booking.com iCal Sync Not Working? How to Diagnose It](https://icsviewer.com/blog/airbnb-ical-sync-not-working): Diagnosing iCal sync failures — how to tell whether the feed itself is broken vs. a polling delay issue, and when to use a channel manager instead