MonthlyCalendar

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A monthly grid calendar. Highlights today with a filled circle and shows event dots beneath days with events.

The dates grow with the cells. Given a height, the weeks share it out; without one, each week is as tall as its dates need.

Import

import { MonthlyCalendar } from "~lib/calendar/monthly-calendar";

Name	Type	Required	Default	Description
`year`	`number`	Yes	N/A	Year to display
`month`	`number`	Yes	N/A	Month (1-12)
`events`	`CalendarEvent[]`	No	`[]`	Events to display as dots beneath day numbers
`today`	`Date`	No	The day the frame shows	Override for today (useful for stories/tests)
`firstDayOfWeek`	`"sunday" \| "monday"`	No	`"sunday"`	Week start day
`width`	`number \| string`	No	`280`	Container width
`height`	`number \| string`	No	As tall as the weeks	Container height, shared out among the weeks
`size`	`"auto" \| "sm" \| "md" \| "lg" \| number`	No	`"auto"`	Text size; `"auto"` grows it with the cells. A number sets the width, as before
`timeZone`	`string`	No	The device's zone	Time zone to read days in, such as `"Europe/London"`