# Month view

A month with prev / next buttons on top, the month's name and the year between them, and the days below.
Weeks start on Monday; the days of the neighbouring months are dimmed; today is marked. Month and weekday
names follow the browser's language, today follows the browser's time zone.
Live demo: https://components.hybriel.worldapi.org/month-view

## Use it in an app
Copy the folder `components/month-view/` (files `month-view.hl`, `clock.hl`)
into the app (the component carries its own `Style`, colours have black/white/grey fallbacks; `shared/tokens.hl` in the app's styles.hl is optional), then compose it into a page:

```
import MonthView from './month-view.hl'

View {
	MonthView { }
}
```

- One month view per page: a composed component's members are the page's state (COMPONENTS.md §12).
- Colours are the semantic tokens of `shared/tokens.hl` only, each with a black/white/grey fallback: the base look is black, white and greys (no frames; root README "Look"); an app that declares the WorldAPI tokens (layouts.worldapi.org's theme) restyles it; the accent is the app's `colorAccent`.

## What it shows

The server's month at first (UTC date, English names). As soon as the page is live (and at the latest when the pointer, a finger or the keyboard reaches the
month view), it takes the browser's own today and language (written in Hybriel, no script file); paging starts from there. Setting the start month from the page (`MonthView { year = 2026  month = 1 }`) is not tested.

## Data out

None yet: the page cannot read the month shown, and an `emit` from the component did not reach a handler in the
page (see STATUS.md). The first app that needs the month (calendar events) adds it.

## Markup and states

`<month-view>` holds a `<header>` (buttons `#month-prev`, `#month-next`, title `#month-title`) and a `<table>` of six
weeks. A day is an `<li>` with `<time datetime="YYYY-MM-DD">`; class `outside` = a neighbouring month's day,
`today` = today. Narrow screens: the table fills the width with smaller cells; wide: taller cells.

Do not use it for: choosing a date in a form (see the date picker, when it exists).