ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/calendar
History
CircleCI 37fd54a421 chore: release new versions 
- @lion/button@0.3.46
 - @lion/calendar@0.4.2
 - @lion/checkbox-group@0.3.8
 - @lion/checkbox@0.2.10
 - @lion/choice-input@0.4.8
 - @lion/dialog@0.2.2
 - @lion/field@0.6.7
 - @lion/fieldset@0.5.2
 - @lion/form-system@0.2.8
 - @lion/form@0.3.8
 - @lion/input-amount@0.3.8
 - @lion/input-date@0.3.8
 - @lion/input-datepicker@0.5.2
 - @lion/input-email@0.3.8
 - @lion/input-iban@0.3.8
 - @lion/input@0.3.8
 - @lion/option@0.3.8
 - @lion/popup@0.4.2
 - @lion/radio-group@0.3.8
 - @lion/radio@0.2.10
 - @lion/select-rich@0.7.2
 - @lion/select@0.3.8
 - @lion/switch@0.3.9
 - @lion/textarea@0.3.8
 - @lion/tooltip@0.4.2
 - @lion/validate@0.5.2
2019-12-03 17:46:30 +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(overlays): improve API for overriding controller config in mixin 2019-11-29 17:34:46 +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-03 17:46:30 +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-03 17:46:30 +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>