ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/calendar
History
CircleCI 0ca59c82cc chore: release new versions 
- @lion/button@0.3.27
 - @lion/calendar@0.2.5
 - @lion/input-datepicker@0.2.5
 - @lion/popup@0.3.4
 - @lion/select-rich@0.3.7
 - @lion/tooltip@0.3.4
2019-10-21 07:31:11 +00:00
..
src fix(calendar): issue 302 part 2 - skipped month 2019-10-18 10:07:18 +02:00
stories feat(calendar): add reusable calendar 2019-05-13 17:46:00 +02:00
test fix(calendar): issue 302 part 2 - skipped month 2019-10-18 10:07:18 +02: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-10-21 07:31:11 +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-10-21 07:31:11 +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>