GrCalendar

• the calendar is the screen — a booking page, a planner, a day-selection panel: the grid has to be open rather than opened by a click in a field;
• the cells have content of their own — the day slot draws the load, the price, the number of events over a day;
• the grid is needed next to something else — a panel of your own, buttons of your own, a footer of your own through header and footer;
• the choice of a day is not related to a form — the value goes into the state of the screen rather than into an input field.

There is no event calendar here. The grid shows the days rather than what happens in them: a week and a day layout, dragging events, overlaps and a feed of resources are a separate domain, and a separate package will cover it. The day slot covers only the marks on a day — a counter, a dot, a price.

The only component of the package whose internal { y, m, d } tuple goes outside rather than a Date through a valueAdapter. The reason is that a calendar is not a form control: it has nothing to serialise, and a Date at the boundary would mean midnight in some zone — exactly the ambiguity for the sake of avoiding which the package computes on tuples (../model.md).

If the value is needed as a Date, it is assembled on your own side; the pickers do the same, only inside themselves.

Monday in Russia and Sunday in the USA is Intl rather than a setting of the component. The locale prop changes both the names and the order of the days at once; changing them separately is not allowed, otherwise a calendar comes out that does not exist in any country.

When the locale does have to be overridden — for instance the working week starts on Sunday regardless of the language of the interface — that is a decision of the application rather than of a screen. Such a thing is set once through GrConfigProvider:

<GrConfigProvider :component-defaults="{ GrCalendar: { weekStart: 7, showWeekNumbers: true } }">

The setting goes under the GrCalendar key and reaches all of the pickers: their panel is shared, and GrDatePicker and its neighbours deliberately have no key of their own. The resolution order is the usual one — the prop in place is stronger than the config, and the config is stronger than the locale; if nothing is set, Intl decides.

A range arrives in the grid as two props (rangeStart, rangeEnd) and a set as one (selectedDates), and the grid changes neither of them: adding, removing, sorting and checking the length are the business of the picker. The calendar answers one question: how to colour a cell.

Because of that it serves equally well GrDatePicker with its set, GrDateRangePicker with its segment, and an application that runs the selection itself.

Membership of the set is computed with a Set assembled once per change of the set: walking the array for each of the forty-two cells would turn the highlighting into a quadratic.

A week is drawn as a grid of days rather than as a grid of periods. Twelve cells in three columns are twelve weeks on the screen, a quarter of a year without a single month label: there is nothing to choose in such a grid. Instead a click on any day selects the week it fell into, and the row is highlighted as a whole.

The beginning of the week is taken from the locale (see “The first day of the week” above) rather than nailed to Monday: in the USA the same date falls into a week starting on Sunday. One date is put into the model — the beginning of the week — and the shape of the value stays shared across all of the modes: valueAdapter works as it worked.

The package does not show week numbers: ISO and the USA count them differently, and Intl does not provide it — the package does not undertake to invent something locale-dependent past Intl.

There are four quarters, and their grid has two columns — three would leave a lonely cell in the second row. The label is taken from a string of the package locale (Q1, 1 qtr): Intl does not name quarters at all, and this is interface text rather than locale-dependent data.

The clock of the environment is read once per instance. Where the render is obliged to match a past one — snapshots, tests, server rendering — “today” is set with the today prop: otherwise the first client render will diverge from the server one exactly at midnight. The details — ../ssr.md.