This is the lowest level component that displays a grid of clickable days.
It should not be used alone, but as a descendant of one of
<calendar-date> or
<calendar-range>.
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
offset | offset | In a multi-month view, controls which month is shown relative to the start of the view. | number | 0 |
CSS Custom Properties
CSS custom properties allow for coarse-grained styling and theming
| Name | Description | Default |
|---|---|---|
--color-accent | The accent color used throughout | black |
--color-text-on-accent | The color used on with --color-accent | white |
CSS Parts
CSS parts allow for fine-grained styling and theming. They target specific elements inside the component. An element may have multiple parts, and a part may be used on multiple elements. They can be used in isolation, or combined to e.g. style selected days within a range.
See the guide on theming for a walkthrough of how to style this component.
| Name | Description |
|---|---|
heading | The heading that labels the month |
table | The <table> element |
tr | Any row within the table |
head | The table's header row |
week | The table's body rows |
th | The table's header cells |
td | The table's body cells |
button | Any button used in the component |
day | The buttons corresponding to each day in the grid |
selected | Any days which are selected |
today | Today's day |
disallowed |
Any daythat has been disallowed via
isDateDisallowed |
outside | Any days which are outside the current month |
range-start | The day at the start of a date range |
range-end | The day at the end of a date range |
range-inner |
Any days between the start and end of a date range
|