components

1.8 KB

1. # Month view
3. A month with prev / next buttons on top, the month's name and the year between them, and the days below.
4. Weeks start on Monday; the days of the neighbouring months are dimmed; today is marked. Month and weekday
5. names follow the browser's language, today follows the browser's time zone.
6. Live demo: https://components.hybriel.worldapi.org/month-view
8. ## Use it in an app
9. Copy the folder `components/month-view/` (files `month-view.hl`, `clock.hl`)
10. into the app (the component carries its own `Style`, colours have palette fallbacks; `shared/tokens.hl` in the app's styles.hl is optional), then compose it into a page:
12. ```
13. import MonthView from './month-view.hl'
15. View {
16. MonthView { }
17. }
18. ```
20. - One month view per page: a composed component's members are the page's state (COMPONENTS.md §12).
21. - Colours are the semantic tokens of `shared/tokens.hl` only; the accent is the app's `colorAccent`.
23. ## What it shows
25. 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
26. 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.
28. ## Data out
30. None yet: the page cannot read the month shown, and an `emit` from the component did not reach a handler in the
31. page (see STATUS.md). The first app that needs the month (calendar events) adds it.
33. ## Markup and states
35. `<month-view>` holds a `<header>` (buttons `#month-prev`, `#month-next`, title `#month-title`) and a `<table>` of six
36. weeks. A day is an `<li>` with `<time datetime="YYYY-MM-DD">`; class `outside` = a neighbouring month's day,
37. `today` = today. Narrow screens: the table fills the width with smaller cells; wide: taller cells.
39. Do not use it for: choosing a date in a form (see the date picker, when it exists).