calendar

1.9 KB

1. # Month view
3. > This is the CALENDAR'S COPY (calendar.worldapi.org#2): it also shows the user's events on the days and holds the
4. > editor (see the app's README). The description below is the plain component; `dates.hl` is added.
6. A month with prev / next buttons on top, the month's name and the year between them, and the days below.
7. Weeks start on Monday; the days of the neighbouring months are dimmed; today is marked. Month and weekday
8. names follow the browser's language, today follows the browser's time zone.
9. Live demo: https://components.hybriel.worldapi.org/month-view
11. ## Use it in an app
13. Copy the folder `components/month-view/` (files `month-view.hl`, `clock.hl`, `month-view.js`) and the month-view
14. rules of `styles.hl` into the app, serve `month-view.js` as a file route, then compose it into a page:
16. ```
17. import MonthView from './month-view.hl'
19. View {
20. MonthView { }
21. script { src = "/month-view.js" }
22. }
23. ```
25. - One month view per page: a composed component's members are the page's state (COMPONENTS.md §12).
26. - Colours are the semantic tokens of `shared/tokens.hl` only; the accent is the app's `colorAccent`.
28. ## What it shows
30. The server's month at first (UTC date), then the browser's own today and language once the page runs; paging
31. starts from there. Setting the start month from the page (`MonthView { year = 2026 month = 1 }`) is not tested.
33. ## Data out
35. None yet: the page cannot read the month shown, and an `emit` from the component did not reach a handler in the
36. page (see STATUS.md). The first app that needs the month (calendar events) adds it.
38. ## Markup and states
40. `<month-view>` holds a `<header>` (buttons `#month-prev`, `#month-next`, title `#month-title`) and a `<table>` of six
41. weeks. A day is an `<li>` with `<time datetime="YYYY-MM-DD">`; class `outside` = a neighbouring month's day,
42. `today` = today. Narrow screens: the table fills the width with smaller cells; wide: taller cells.
44. Do not use it for: choosing a date in a form (see the date picker, when it exists).