C&C Docs
Log in

cnc-calendar-year

Twelve months at once. It is a year-at-a-glance view — a wall planner rather than a picker: mark dates with your own classes, let the reader see the shape of the year, and pick a single day from anywhere in it.

Quick start

With no attributes it renders the current year. Bind $value to know which day was picked.

2026

January

S
M
T
W
T
F
S
28
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
31
1
2
3
4
5
6
7

February

S
M
T
W
T
F
S
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
13
14

March

S
M
T
W
T
F
S
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

April

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
3
4
5
6
7
8
9

May

S
M
T
W
T
F
S
26
27
28
29
30
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

June

S
M
T
W
T
F
S
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
3
4
5
6
7
8
9
10
11

July

S
M
T
W
T
F
S
28
29
30
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

August

S
M
T
W
T
F
S
26
27
28
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
31
1
2
3
4
5

September

S
M
T
W
T
F
S
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
3
4
5
6
7
8
9
10

October

S
M
T
W
T
F
S
27
28
29
30
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

November

S
M
T
W
T
F
S
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
3
4
5
6
7
8
9
10
11
12

December

S
M
T
W
T
F
S
29
30
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
(empty) 
<cnc-calendar-year name="year-date" $value="day"></cnc-calendar-year>

In a form

name renders a hidden input carrying the picked date. 

<form method="post" action="/plan">
  <cnc-calendar-year name="target_date" :highlights="yearHighlights">
  </cnc-calendar-year>
  <button type="submit">Set</button>
</form>

// posts target_date=2026-12-25

Things to know

  • highlights and year are read once. The twelve grids are built in init(), so they must be bound at render time. Setting the attribute afterwards from page script does nothing at all — which is exactly what the previous version of this page did, and why its highlights never appeared.
  • Class names must be literal somewhere in your source. Utilities are generated by scanning source for literal class names, so a highlight class assembled at runtime names a utility that is never emitted and silently does nothing. Write the full names out.
  • Date keys are built in UTC, unlike the rest of the family. This widget uses toISOString() where its siblings use a local-date helper, so for a viewer east of UTC every key — and therefore every highlight match, the today marker and the value a click produces — is a day early. Tracked as #638.
  • The leading cells are the previous month's real days. They carry real dates but are not selectable; only days of the month itself respond to a click. The trailing cells that pad each grid to six weeks are pure filler with no date at all.
  • One highlight per day. Where two entries name the same date, the first wins outright — the second's classes are discarded rather than appended.

Usage guidance

Use the year view when the pattern across a whole year is the point: holiday charts, shift rotas, release calendars, "when is this room free". It is a poor date picker — twelve small grids is a lot of page for one date — so reach for cnc-calendar-compact or cnc-input type="date" when picking is the task. Since highlighting is entirely class-driven, keep a small set of meanings and a legend beside it; a year of undifferentiated colour tells the reader nothing.

← Back to Widgets