Calendar
Material Design 3 styled calendar and scheduler web component: month, week, day and agenda views with drag, resize and keyboard moves.
- 15.2 KB gzipped
- @lit-material/calendar 0.0.0
- Renders on the server
Example
Calendar
Month, week, day and agenda views of your events. Events are controlled: dragging, resizing or Alt+arrow keys fire
event-change, and the page updates events. Click or drag across empty time to add one here.
Keyboard
Arrows move between days (and time slots in the week and day views), PageUp/PageDown go to the previous or next period, Home/End to the start or end of the week, T to today. Tab moves into the events of the focused cell; Enter opens one, Alt+arrows move it and Alt+Shift+arrows change its end.
Install
npm install @lit-material/calendar @lit-material/tokensimport "@lit-material/calendar";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-calendar>
Material Design 3 styled calendar and scheduler: a month grid, week and day time grids, and an agenda list, with a toolbar (previous / today / next, the period's title, and a view switch).
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
view | view | CalendarView | "month" | Which view is shown. |
date | date | string | undefined | none | The day in focus, as an ISO "YYYY-MM-DD" string; the view shows the month, week or day around it. Default: today. |
events | events | CalendarEvent[] | [] | The events: { id, title, start, end?, allDay?, color?, editable?, ...data }. Property or JSON attribute. |
firstDayOfWeek | first-day-of-week | number | undefined | none | 0 = Sunday, 1 = Monday, ... Default: the first day of the week in the element's language, else Sunday. |
slotMinutes | slot-minutes | number | 30 | Minutes per row of the week and day views; also the step for keyboard moves. |
scrollToHour | scroll-to-hour | number | 8 | The hour the week and day views scroll to when they open. |
dayMaxEvents | day-max-events | number | 3 | Event rows per day in the month view before "+N more". |
agendaDays | agenda-days | number | 7 | Days the agenda view lists, from date. |
readonly | readonly | boolean | false | No dragging, resizing or keyboard moves (clicks still fire). |
visibleRange | property only | { start: Date; end: Date } | none | The first and (exclusive) last instant on screen. |
Events
| Event | Description |
|---|---|
navigate | detail: { view, date, start, end } when the toolbar, keyboard or a "+N more" link changes the view or the period shown. |
slot-click | detail: { start, end, allDay } when an empty day, all-day cell or time slot is clicked or activated, or a time range is dragged out (pointer) or extended with Shift+arrows. |
event-click | detail: { event } when an event is clicked or activated with Enter/Space. |
event-change | Cancelable. detail: { event, start, end, allDay } when an event is dragged, resized or moved with the keyboard. The app updates events. |
CSS parts
| Part | Description |
|---|---|
toolbar | The row with the navigation buttons, title and view switch. |
title | The period's title. |
views | The view switch (a segmented button group). |
grid | The month grid or the time grid. |
agenda | The agenda list. |
event | Each event chip. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-calendar-slot-height | Height of one time slot in the week and day views. Default 24px. |
--lit-material-calendar-height | Maximum height of the scrolling time grid. Default 640px. |