Calendar
Calendars render a calendar for a given month, and allows users to select a date or range from the calendar.
- Read Only visualizes the current month & day but does not allow the user to interact with the calendar in any way.
- Single Select provides a calendar & allows users to navigate through months or years & select a singular date.
- Range Select provides a calendar & allows users to navigate through months or years & select a range of dates.
Attributes
| attribute: | type: | required? | default: | description: |
|---|---|---|---|---|
| range | boolean | no |
false
|
Enable selection of date-range instead of single date |
| date-start | date-string | no | At what month the calendar should open by default. |
|
| date-min | date-string | no | Minimum selectable date. |
|
| date-max | date-string | no | Maximum selectable date. |
|
| active-start | date-string | no | Start of selected range. Selected date in non-range mode. |
|
| active-end | date-string | no | End of selected range. |
|
| week-starts-on-monday | boolean | no |
false
|
Should weeks start with Monday? Default is Sunday. |
Examples
Calendar (Read-only)
Read-Only act a means of visualizing the current month & day but does not allow the user to interact with the calendar in any way.
<dl-calendar readonly></dl-calendar>Calendar (Single-select)
Single Select provides the user with a calendar & allowing them to navigate through months or years & select a singular date at a time.
<dl-calendar style="max-width: 420px"></dl-calendar>Calendar (Range-select)
Range Select provides the user with a calendar & allowing them to navigate through months or years & select a range of dates at a time.
<dl-calendar range style="max-width: 420px"></dl-calendar>Read-only Calendar with Selected Range
<dl-calendar readonly range active-start="2018-03-15" active-end="2018-03-22"></dl-calendar>Calendar narrow
<dl-calendar style="max-width: 240px" range></dl-calendar>