ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/calendar
History
CircleCI d705a35eda chore: release new versions 
- @lion/button@0.4.1
 - @lion/calendar@0.5.1
 - @lion/checkbox-group@0.4.0
 - @lion/checkbox@0.2.11
 - @lion/choice-input@0.4.9
 - @lion/field@0.6.8
 - @lion/fieldset@0.5.3
 - @lion/form-system@0.2.9
 - @lion/form@0.3.9
 - @lion/input-amount@0.4.0
 - @lion/input-date@0.4.0
 - @lion/input-datepicker@0.6.1
 - @lion/input-email@0.4.0
 - @lion/input-iban@0.4.0
 - @lion/input@0.4.0
 - @lion/option@0.3.9
 - @lion/popup@0.4.4
 - @lion/radio-group@0.4.0
 - @lion/radio@0.2.11
 - @lion/select-rich@0.8.1
 - @lion/select@0.4.0
 - @lion/switch@0.3.11
 - @lion/textarea@0.4.0
2019-12-04 16:17:27 +00:00
..
src fix(calendar): make calendar more accessible 2019-11-13 11:01:37 +01:00
stories feat(calendar): add reusable calendar 2019-05-13 17:46:00 +02:00
test feat: integrate and pass automated a11y testing 2019-12-03 15:15:01 +01:00
test-helpers fix: public test-helpers 2019-07-30 15:50:53 +02:00
translations fix: support Chinese language 2019-07-17 10:11:32 +02:00
CHANGELOG.md chore: release new versions 2019-12-04 16:17:27 +00:00
index.js feat(calendar): add reusable calendar 2019-05-13 17:46:00 +02:00
lion-calendar.js feat(calendar): add reusable calendar 2019-05-13 17:46:00 +02:00
package.json chore: release new versions 2019-12-04 16:17:27 +00:00
README.md chore: fix prepublish pattern format 2019-07-23 17:03:37 +02:00
test-helpers.js fix: public test-helpers 2019-07-30 15:50:53 +02:00

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>