Docs / Calendar
Calendar vel-src: calendar.css
A fully styled calendar component with day selection, range selection, event indicators, today highlighting, outside-month days, disabled days, and mini/inline variants. Pure HTML and CSS — no JavaScript required for static display.
Class Properties vel-calendar Calendar card container (22rem wide) vel-calendar-header Flex row — month/year title + nav buttons vel-calendar-title Month and year heading text vel-calendar-nav Prev/next button group vel-calendar-nav-btn Navigation arrow button vel-calendar-weekdays 7-column grid — day name header row vel-calendar-weekday Single day-name cell (Su Mo Tu...) vel-calendar-grid 7-column grid — day cells vel-calendar-day Individual day button vel-calendar-day-today Today — bold + primary dot indicator vel-calendar-day-selected Selected day — filled primary background vel-calendar-day-range Day inside a selected range — light fill vel-calendar-day-range-start Left cap of range selection vel-calendar-day-range-end Right cap of range selection vel-calendar-day-outside Day from prev/next month — muted + faded vel-calendar-day-disabled Non-selectable day — 30% opacity vel-calendar-day-event Day with event — small dot indicator vel-calendar-mini Compact size variant (16rem) vel-calendar-inline No card chrome — embed in any layout
Examples Full month calendar
Su
Mo
Tu
We
Th
Fr
Sa
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
< div style = " padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif; " >
< div class = " vel-calendar " >
< div class = " vel-calendar-header " >
< span class = " vel-calendar-title " > March 2026< / span >
< div class = " vel-calendar-nav " >
< button class = " vel-calendar-nav-btn " aria-label = " Previous month " > ‹< / button >
< button class = " vel-calendar-nav-btn " aria-label = " Next month " > ›< / button >
< / div >
< / div >
< div class = " vel-calendar-weekdays " >
< span class = " vel-calendar-weekday " > Su< / span >
< span class = " vel-calendar-weekday " > Mo< / span >
< span class = " vel-calendar-weekday " > Tu< / span >
< span class = " vel-calendar-weekday " > We< / span >
< span class = " vel-calendar-weekday " > Th< / span >
< span class = " vel-calendar-weekday " > Fr< / span >
< span class = " vel-calendar-weekday " > Sa< / span >
< / div >
< div class = " vel-calendar-grid " >
< button class = " vel-calendar-day " > 1< / button >
< button class = " vel-calendar-day " > 2< / button >
< button class = " vel-calendar-day " > 3< / button >
< button class = " vel-calendar-day vel-calendar-day-event " > 4< / button >
< button class = " vel-calendar-day " > 5< / button >
< button class = " vel-calendar-day " > 6< / button >
< button class = " vel-calendar-day " > 7< / button >
< button class = " vel-calendar-day vel-calendar-day-today " > 8< / button >
< button class = " vel-calendar-day " > 9< / button >
< button class = " vel-calendar-day " > 10< / button >
< button class = " vel-calendar-day " > 11< / button >
< button class = " vel-calendar-day " > 12< / button >
< button class = " vel-calendar-day " > 13< / button >
< button class = " vel-calendar-day " > 14< / button >
< button class = " vel-calendar-day vel-calendar-day-selected " > 15< / button >
< button class = " vel-calendar-day " > 16< / button >
< button class = " vel-calendar-day vel-calendar-day-disabled " > 17< / button >
< button class = " vel-calendar-day " > 18< / button >
< button class = " vel-calendar-day " > 19< / button >
< button class = " vel-calendar-day " > 20< / button >
< button class = " vel-calendar-day " > 21< / button >
< button class = " vel-calendar-day vel-calendar-day-event " > 22< / button >
< button class = " vel-calendar-day " > 23< / button >
< button class = " vel-calendar-day " > 24< / button >
< button class = " vel-calendar-day " > 25< / button >
< button class = " vel-calendar-day " > 26< / button >
< button class = " vel-calendar-day " > 27< / button >
< button class = " vel-calendar-day " > 28< / button >
< button class = " vel-calendar-day " > 29< / button >
< button class = " vel-calendar-day " > 30< / button >
< button class = " vel-calendar-day " > 31< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 1< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 2< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 3< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 4< / button >
< / div >
< / div >
< / div > Range selection with mini variant
Su Mo
Tu We
Th Fr
Sa
29
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
29
30
1
2
vel-calendar-mini
S M
T W
T F
S
29
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
29 30
1
2
< div style = " padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif; " >
< div class = " vel-flex vel-gap-4 vel-flex-wrap " >
< div class = " vel-calendar " >
< div class = " vel-calendar-header " >
< span class = " vel-calendar-title " > April 2026< / span >
< div class = " vel-calendar-nav " >
< button class = " vel-calendar-nav-btn " > ‹< / button >
< button class = " vel-calendar-nav-btn " > ›< / button >
< / div >
< / div >
< div class = " vel-calendar-weekdays " >
< span class = " vel-calendar-weekday " > Su< / span > < span class = " vel-calendar-weekday " > Mo< / span >
< span class = " vel-calendar-weekday " > Tu< / span > < span class = " vel-calendar-weekday " > We< / span >
< span class = " vel-calendar-weekday " > Th< / span > < span class = " vel-calendar-weekday " > Fr< / span >
< span class = " vel-calendar-weekday " > Sa< / span >
< / div >
< div class = " vel-calendar-grid " >
< button class = " vel-calendar-day vel-calendar-day-outside " > 29< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 30< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 31< / button >
< button class = " vel-calendar-day " > 1< / button >
< button class = " vel-calendar-day " > 2< / button >
< button class = " vel-calendar-day " > 3< / button >
< button class = " vel-calendar-day " > 4< / button >
< button class = " vel-calendar-day " > 5< / button >
< button class = " vel-calendar-day " > 6< / button >
< button class = " vel-calendar-day " > 7< / button >
< button class = " vel-calendar-day vel-calendar-day-range vel-calendar-day-range-start " > 8< / button >
< button class = " vel-calendar-day vel-calendar-day-range " > 9< / button >
< button class = " vel-calendar-day vel-calendar-day-range " > 10< / button >
< button class = " vel-calendar-day vel-calendar-day-range " > 11< / button >
< button class = " vel-calendar-day vel-calendar-day-range " > 12< / button >
< button class = " vel-calendar-day vel-calendar-day-range " > 13< / button >
< button class = " vel-calendar-day vel-calendar-day-range vel-calendar-day-range-end " > 14< / button >
< button class = " vel-calendar-day " > 15< / button >
< button class = " vel-calendar-day " > 16< / button >
< button class = " vel-calendar-day " > 17< / button >
< button class = " vel-calendar-day " > 18< / button >
< button class = " vel-calendar-day " > 19< / button >
< button class = " vel-calendar-day " > 20< / button >
< button class = " vel-calendar-day " > 21< / button >
< button class = " vel-calendar-day " > 22< / button >
< button class = " vel-calendar-day " > 23< / button >
< button class = " vel-calendar-day " > 24< / button >
< button class = " vel-calendar-day " > 25< / button >
< button class = " vel-calendar-day " > 26< / button >
< button class = " vel-calendar-day " > 27< / button >
< button class = " vel-calendar-day " > 28< / button >
< button class = " vel-calendar-day " > 29< / button >
< button class = " vel-calendar-day " > 30< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 1< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 2< / button >
< / div >
< / div >
< div >
< div class = " vel-text-xs vel-text-muted vel-mb-2 " > vel-calendar-mini< / div >
< div class = " vel-calendar vel-calendar-mini " >
< div class = " vel-calendar-header " >
< span class = " vel-calendar-title " > Apr 2026< / span >
< div class = " vel-calendar-nav " >
< button class = " vel-calendar-nav-btn " > ‹< / button >
< button class = " vel-calendar-nav-btn " > ›< / button >
< / div >
< / div >
< div class = " vel-calendar-weekdays " >
< span class = " vel-calendar-weekday " > S< / span > < span class = " vel-calendar-weekday " > M< / span >
< span class = " vel-calendar-weekday " > T< / span > < span class = " vel-calendar-weekday " > W< / span >
< span class = " vel-calendar-weekday " > T< / span > < span class = " vel-calendar-weekday " > F< / span >
< span class = " vel-calendar-weekday " > S< / span >
< / div >
< div class = " vel-calendar-grid " >
< button class = " vel-calendar-day vel-calendar-day-outside " > 29< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 30< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 31< / button >
< button class = " vel-calendar-day " > 1< / button > < button class = " vel-calendar-day " > 2< / button >
< button class = " vel-calendar-day " > 3< / button > < button class = " vel-calendar-day " > 4< / button >
< button class = " vel-calendar-day " > 5< / button > < button class = " vel-calendar-day " > 6< / button >
< button class = " vel-calendar-day " > 7< / button > < button class = " vel-calendar-day vel-calendar-day-today " > 8< / button >
< button class = " vel-calendar-day " > 9< / button > < button class = " vel-calendar-day " > 10< / button >
< button class = " vel-calendar-day " > 11< / button > < button class = " vel-calendar-day vel-calendar-day-selected " > 12< / button >
< button class = " vel-calendar-day " > 13< / button > < button class = " vel-calendar-day " > 14< / button >
< button class = " vel-calendar-day " > 15< / button > < button class = " vel-calendar-day " > 16< / button >
< button class = " vel-calendar-day " > 17< / button > < button class = " vel-calendar-day " > 18< / button >
< button class = " vel-calendar-day " > 19< / button > < button class = " vel-calendar-day " > 20< / button >
< button class = " vel-calendar-day " > 21< / button > < button class = " vel-calendar-day " > 22< / button >
< button class = " vel-calendar-day " > 23< / button > < button class = " vel-calendar-day " > 24< / button >
< button class = " vel-calendar-day " > 25< / button > < button class = " vel-calendar-day " > 26< / button >
< button class = " vel-calendar-day " > 27< / button > < button class = " vel-calendar-day " > 28< / button >
< button class = " vel-calendar-day " > 29< / button > < button class = " vel-calendar-day " > 30< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 1< / button >
< button class = " vel-calendar-day vel-calendar-day-outside " > 2< / button >
< / div >
< / div >
< / div >
< / div >
< / div >