ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/calendar
History
CircleCI a598a47dab chore: release new versions 
- @lion/button@0.1.33
 - @lion/calendar@0.1.29
 - @lion/checkbox-group@0.1.30
 - @lion/checkbox@0.1.28
 - @lion/choice-input@0.2.5
 - @lion/field@0.1.26
 - @lion/fieldset@0.1.27
 - @lion/form-system@0.0.32
 - @lion/form@0.1.29
 - @lion/input-amount@0.1.28
 - @lion/input-date@0.1.27
 - @lion/input-datepicker@0.1.30
 - @lion/input-email@0.1.27
 - @lion/input-iban@0.1.28
 - @lion/input@0.1.27
 - @lion/localize@0.4.2
 - @lion/popup@0.2.7
 - @lion/radio-group@0.1.30
 - @lion/radio@0.1.28
 - @lion/select@0.1.26
 - @lion/textarea@0.1.27
 - @lion/tooltip@0.2.7
 - @lion/validate@0.2.12
2019-07-09 16:31:07 +00:00
..
src fix: support en-PH locale for polymer-cli 2019-06-20 10:49:06 +02:00
stories feat(calendar): add reusable calendar 2019-05-13 17:46:00 +02:00
test fix(calendar): init centralDate from selectedDate when today is disabled 2019-06-04 16:00:52 +02:00
translations feat(calendar): add reusable calendar 2019-05-13 17:46:00 +02:00
CHANGELOG.md chore: release new versions 2019-07-09 16:31:07 +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-07-09 16:31:07 +00:00
README.md feat(calendar): add reusable calendar 2019-05-13 17:46:00 +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>