Calendar
<sl-calendar> | SlCalendar
Renders a calendar month for the provided date.
<sl-calendar></sl-calendar>
Examples
Show preset panels
<sl-calendar show-quarters="true" show-financial-years="true"></sl-calendar>
Setting current date
Set the current date with the value attribute in YYYY-MM-DD format
<sl-calendar value="2023-04-24"></sl-calendar>
Highlighted dates
Use from-date and to-date to highlight a date range
<sl-calendar value="2023-05-15" value-from="2023-05-10" value-to="2023-05-20"></sl-calendar>
TODO
Second Example
TODO
[component-metadata:sl-calendar]
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
value
|
The currently selected date in YYYY-MM-DD format. |
|
string
|
''
|
showQuarters
show-quarters
|
Show side panel presets for financial year quarters |
|
boolean
|
false
|
showFinancialYears
show-financial-years
|
Show side panel presets for financial years |
|
boolean
|
false
|
financialYears
financial-years
|
Financial years |
number[]
|
[]
|
|
valueFrom
value-from
|
The value of the date range input field from |
|
string
|
''
|
valueTo
value-to
|
The value of the date range input field to |
|
string
|
''
|
isFromValue
|
Used for date range |
boolean
|
- | |
isToValue
|
Used for date range |
boolean
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
sl-change |
|
Emitted as an example. | - |
select-range |
|
Emitted when a preset is selected. // * @event select-from-range - Emitted when a date is selected as the start of a range. // * @event select-to-range - Emitted when a date is selected as the end of a range. | - |
Learn more about events.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
Learn more about customizing CSS parts.