This documentation is still work in progress, so be please patient.
Docs
Packages
calendar-client
Calendar

Calendar

ℹ️

If you want to use Calendar, you must have DateTimeProvider from @leight/i18n-client somewhere in the component tree.

Or you can use PageShell or Shell from @leight/mantine.

💡

This package requires Mantine UI (opens in a new tab) provided by @leight/mantine.

This package provides UI for rendering localized calendar. It's based on a great library Luxon (opens in a new tab) providing backend for date/time operations.

Minimal example

💡

All Calendar instances needs (separate) CalendarProvider to work; the reason you must provide you own store is to give you a control over the calendar outside of the component itself.

ℹ️

Calendar defaults to 6 weeks to prevent jumping on months with lesser week count.

po
út
st
čt
pá
so
ne
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

Advanced usage

This is full example how calendar works with all it's features; you can list through months/years or pick one or another by standalone date picker.

You can customize basically everything on a calendar, all positions are exposed, just pick the component and see what props are available for you.

po
út
st
čt
pá
so
ne
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
selected date: - click the calendar -
OverviewWeeks