@lion/calendar
TypeScript icon, indicating that this package has built-in type declarations

0.20.1 • Public • Published

Calendar >> Overview ||10

A reusable and accessible calendar view web component.

import { html, css } from '@mdjs/mdjs-preview';
import '@lion/calendar/define';
export const main = () => {
  return html`
    <style>
      .demo-calendar {
        border: 1px solid #adadad;
        box-shadow: 0 0 16px #ccc;
        max-width: 500px;
      }
    </style>
    <lion-calendar class="demo-calendar"></lion-calendar>
  `;
};

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

Installation

npm i --save @lion/calendar
import '@lion/calendar/define';

Package Sidebar

Install

npm i @lion/calendar

Weekly Downloads

1,003

Version

0.20.1

License

MIT

Unpacked Size

233 kB

Total Files

93

Last publish

Collaborators

  • tlouisse
  • narzac
  • d4kmor