ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/calendar
History
CircleCI e51bf720e5 chore: release new versions 
- @lion/button@0.4.4
 - @lion/calendar@0.5.5
 - @lion/checkbox-group@0.4.2
 - @lion/checkbox@0.2.12
 - @lion/choice-input@0.4.10
 - @lion/dialog@0.3.1
 - @lion/field@0.7.0
 - @lion/fieldset@0.5.5
 - @lion/form-system@0.2.13
 - @lion/form@0.3.12
 - @lion/input-amount@0.4.1
 - @lion/input-date@0.4.1
 - @lion/input-datepicker@0.7.1
 - @lion/input-email@0.4.1
 - @lion/input-iban@0.4.1
 - @lion/input@0.4.1
 - @lion/option@0.3.10
 - @lion/overlays@0.10.0
 - @lion/radio-group@0.4.3
 - @lion/radio@0.2.12
 - @lion/select-rich@0.8.5
 - @lion/select@0.4.1
 - @lion/switch@0.4.0
 - @lion/textarea@0.4.1
 - @lion/tooltip@0.6.0
 - @lion/validate@0.5.3
2019-12-13 14:23:06 +00:00
..
src fix(catalog): add info for next/previous month on to the buttons (#384) 2019-12-05 15:17:26 +01:00
stories feat(calendar): add reusable calendar 2019-05-13 17:46:00 +02:00
test fix(calendar): make tests independents of execution date 2019-12-05 17:15:26 +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-13 14:23:06 +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-13 14:23:06 +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>