Calendar A static calendar used to select one date or a range of dates.
A calendar consists of a month view that defaults to the current month, with navigation to next and previous months, and the ability to select one or multiple dates.
Usage guidelines
When to use
- You will almost always want to use the datepicker component instead of this one. The datepicker component has a more fully-featured calendar interface synced with a text input.
- Use a calendar instead of a datepicker when the selection of a date is the single most important visible action.
- Use a calendar instead of a datepicker when you need to support ranges of dates; the datepicker does not support ranges.
- If you need to support datetime (not just "January 2nd" but "January 2nd at 11pm"), use the datepicker component instead.
Technical notes
Attributes
An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.
<res-component booleanAttribute stringAttribute="parameter">
<child-element></child-element>
</res-component>
| Attribute | Type | Description |
|---|
range | boolean | Allow range selection of dates |
API
| Name | Type | Data | Description |
|---|
calendar | property | object | Returns a Promise for the asynchronously loaded calendar. Call .then(calendar => {... on this member to reference the Flatpickr instance. (read only) |
History
| Version | Note |
|---|
| 0.12.0 | Apply new spacing scale. |
| 0.11.0 | Tweaks to accommodate new icon set |
| 0.10.0 | Color update. Remove design attribute since dark design is no longer needed. |
| 0.7.0 | Refactored for use with external CSS and local Flatpickr module. |
| 0.5.0 | Initial build to spec. |
