cbd1f8af25
- @lion/button@0.3.1 - @lion/calendar@0.1.47 - @lion/checkbox-group@0.1.46 - @lion/form-system@0.0.48 - @lion/form@0.1.45 - @lion/input-datepicker@0.1.50 - @lion/popup@0.2.27 - @lion/radio-group@0.1.46 - @lion/select-rich@0.1.3 - @lion/textarea@0.1.43 - @lion/tooltip@0.2.27 |
||
|---|---|---|
| .. | ||
| src | ||
| stories | ||
| test | ||
| translations | ||
| CHANGELOG.md | ||
| index.js | ||
| lion-calendar.js | ||
| package.json | ||
| README.md | ||
Calendar
lion-calendar is a reusable and accessible calendar view.
Features
- fully accessible keyboard navigation (Arrow Keys, PgUp, PgDn, ALT+PgUp, ALT+PgDn)
- minDate: disables all dates before a given date
- maxDate: disables all dates after a given date
- disableDates: disables some dates within an available range
- selectedDate: currently selected date
- centralDate: date that determines the currently visible month and that will be focused when keyboard moves the focus to the month grid
- focusedDate: (getter only) currently focused date (if there is any with real focus)
- focusDate(date): focus on a certain date
- focusSelectedDate(): focus on the current selected date
- focusCentralDate(): focus on the current central date
- firstDayOfWeek: typically Sunday (default) or Monday
- weekdayHeaderNotation: long/short/narrow for the current locale (e.g. Thursday/Thu/T)
- locale: different locale for the current component only
How to use
Installation
npm i --save @lion/calendar
import '@lion/calendar/lion-calendar.js';
Example
<lion-calendar
.minDate="${new Date()}"
.maxDate="${new Date('2019/12/09')}"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
>
</lion-calendar>