# XWUICalendar

A month-grid date picker that highlights today, marks a selected date, and renders colored event dots (up to three per day, with a `+N` overflow). Clicking the month or year in the header opens a quick-pick grid, and `minDate`/`maxDate` disable out-of-range days. Configure the starting weekday with `firstDayOfWeek` (0 = Sunday, 1 = Monday) and wire up `onDateClick`/`onEventClick` for interaction; the `week` and `day` views are currently placeholders. Events carry an optional `type` (`meeting` | `birthday` | `plan` | `reminder` | `task`) that supplies a default color/icon/label via `XWUI_CALENDAR_EVENT_TYPE_META` - use `addEvent`/`removeEvent`/`updateEvent`/`getEventsForDate` to manage them after construction instead of rebuilding the whole array.

## Basic Usage

An empty month calendar that defaults to the current month with prev/next navigation and a Today button.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Month calendar defaulting to the current month with navigation controls.
```

## Real World

A calendar seeded with the current date as the selected day in a realistic application context.

```example
file: examples/RealWorld.ts
html: examples/RealWorld.html
title: Real World
description: Calendar initialised with today as the selected date.
```

## Booking Range

A reservation calendar that disables every day outside the bookable window using minDate and maxDate.

```example
file: examples/BookingRange.ts
html: examples/BookingRange.html
title: Booking Range
description: Hotel calendar constrained to a bookable date range.
```

## Clinic Schedule

A busy appointment book where a single day overflows its event dots into a "+N" badge.

```example
file: examples/ClinicSchedule.ts
html: examples/ClinicSchedule.html
title: Clinic Schedule
description: Appointment calendar demonstrating the per-day event overflow badge.
```

## Plan Your Day

A day planner built on `addEvent`/`removeEvent`/`getEventsForDate`: click a day, name it, tag it as a meeting, birthday, plan, reminder or task, and it lands on the grid and in the agenda list at once.

```example
file: examples/PlanYourDay.ts
html: examples/PlanYourDay.html
title: Plan Your Day
description: Interactive day planner adding/removing typed events (meeting, birthday, plan, reminder, task) through the calendar's own API.
```

```api
```