Calendar Inline Demo

Basic Usage

Interactive inline calendar.

Select a date...

<calendar-inline></calendar-inline>

<script>
  calendar.addEventListener('date-select', (e) => {
    console.log('Selected:', e.detail.date);
  });
</script>

Pre-selected Date

Calendar with a pre-selected date.

<calendar-inline value="2025-01-15"></calendar-inline>

Date Range

Limit selectable dates with min/max.

<calendar-inline min="2025-01-10" max="2025-01-25"></calendar-inline>

With Holidays

Mark special dates as holidays using declarative elements.

Select a date to see holiday info...

<calendar-inline>
  <calendar-holiday date="2025-01-01" title="New Year's Day"></calendar-holiday>
  <calendar-holiday date="2025-01-06" title="Epiphany"></calendar-holiday>
  <calendar-holiday date="2025-12-25" title="Christmas Day"></calendar-holiday>
  <calendar-holiday date="2025-12-26" title="Boxing Day"></calendar-holiday>
</calendar-inline>

Week Numbers

Show ISO week numbers.

<calendar-inline show-week-numbers></calendar-inline>

Sunday Start

Start week on Sunday.

<calendar-inline first-day-of-week="0"></calendar-inline>

Custom Styling

Theme with CSS custom properties.

<calendar-inline style="
  --calendar-accent: #8b5cf6;
  --calendar-selected: #8b5cf6;
  --calendar-today: #f3e8ff;
"></calendar-inline>

Disabled Dates

Disable specific dates using declarative elements.

<calendar-inline>
  <disabled-date date="2025-01-05"></disabled-date>
  <disabled-date date="2025-01-12"></disabled-date>
  <disabled-date date="2025-01-19"></disabled-date>
  <disabled-date date="2025-01-26"></disabled-date>
</calendar-inline>

Combined Example

Holidays, disabled dates, and custom styling together.

<calendar-inline
  value="2025-01-15"
  show-week-numbers
  style="--calendar-selected: #22c55e; --calendar-today: #dcfce7;"
>
  <calendar-holiday date="2025-01-01" title="New Year"></calendar-holiday>
  <calendar-holiday date="2025-01-06" title="Epiphany"></calendar-holiday>
  <disabled-date date="2025-01-04"></disabled-date>
  <disabled-date date="2025-01-05"></disabled-date>
  <disabled-date date="2025-01-11"></disabled-date>
  <disabled-date date="2025-01-12"></disabled-date>
</calendar-inline>