C&C Docs
Log in

cnc-calendar-event

A month of events, laid out two ways. On a wide viewport each day is a tall cell listing what is on it; on a narrow one the grid shrinks to numbers with dots and the events move to a list underneath. Both are rendered server-side — the switch is CSS, not JavaScript.

Quick start

Bind an array of events and a selected date. Give the calendar the full width it can get — the desktop grid puts seven tall cells across.

October 2026
S un
M on
T ue
W ed
T hu
F ri
S at
27
28
29
30
1
2
3
4
5
6
7
8
9
10
Team standup 9:30 AM
Design review 2 PM
11
12
13
14
15
Sprint planning 11 AM
16
17
18
19
20
21
22
Launch day All day
23
24
25
26
27
28
29
30
31
Team standup
9:30 AM
Design review
2 PM
Sprint planning
11 AM
Launch day
All day
(empty) 
// the block's controller
export default {
  events: [
    { name: 'Team standup',   time: '9:30 AM', date: '2026-09-10' },
    { name: 'Design review',  time: '2 PM',    date: '2026-09-10', url: '/reviews/12' },
    { name: 'Sprint planning', time: '11 AM',  date: '2026-09-15' },
  ],
}

<cnc-calendar-event name="event-date" :events="events" $value="day">
</cnc-calendar-event>

Event shape

Field Required Purpose
date yes YYYY-MM-DD, matched exactly against the day's key. An event with no date, or a differently-formatted one, matches no day and vanishes.
name yes The label. Also half of the loop key, with time — so two events on the same day with the same name and time collide.
time no Free text, shown beside the name. Never parsed, so events appear in the order of the array you pass.
url no Turns the entry into a link opening in a new tab. Clicking it does not also select the day.

Two layouts, one calendar

Both grids are in the HTML and CSS decides which one you see. The breakpoint is 1024 px of viewport:

Viewport Grid Events
≥ 1024 px Tall cells, one per day. Listed inline in the day. Times appear from 1280 px, where there is room.
< 1024 px Short cells: the day number and a dot per event. A card list beneath the grid, for the whole month.
< 640 px Column headers shorten from Sun to S. Unchanged.
The queries measure the viewport, not the calendar's container. Put this widget in a narrow column on a wide screen and it still renders the desktop grid — seven tall cells squeezed into the column. Give it the width of the page, or reach for cnc-calendar-compact when the space is fixed and small.

In a form

name renders a hidden input carrying the selected date, so a surrounding form posts it with everything else. 

<form method="post" action="/schedule">
  <cnc-calendar-event name="meeting_date" :events="events"></cnc-calendar-event>
  <button type="submit">Schedule</button>
</form>

// posts meeting_date=2026-09-15

Things to know

  • Dates are matched as strings. An event lands on a day when event.date equals the day's YYYY-MM-DD key exactly. An ISO timestamp, a Date, or a 2026-9-5 without the leading zero matches nothing and disappears silently.
  • One day only, no ranges. Events are single-day; there is no start/end pair and nothing spans cells. Model a multi-day event as one entry per day, or use cnc-gantt-chart.
  • Clicking a greyed day pages the month. The leading and trailing cells belong to the neighbouring months, and clicking one navigates there rather than selecting it.
  • The loop key is name + time. Two events on the same day sharing both will collide during reconciliation. Vary one of them, or give the entries distinct names.
  • Event order is your order. time is never parsed, so both the inline lists and the mobile cards follow the array. Sort it before binding.

Usage guidance

Use this as the main view of a schedule — a page whose subject is the month. It wants width and it reads well as the primary content. When the calendar is a control rather than a view, use cnc-calendar-compact; when it is a small month of events beside something else, cnc-calendar is the middle ground. Because the widget reports only which day was picked, put anything an event needs to do behind its url.

← Back to Widgets