wired-calendar

Calendar control with a hand-drawn, wireframe like, style.

For demo and view the complete set of wired-elements: wiredjs.com

Usage

Add wired-calendar to your project:

npm i wired-calendar

Import wired-calendar definition into your HTML page:

<script type="module" src="wired-calendar/lib/wired-calendar.js"></script>

Or into your module script:

import { WiredCalendar } from "wired-calendar"

Use it in your web page:

<wired-calendar selected="Jul 4, 2019">
</wired-calendar>

Properties

elevation - Numerical number between 1-5 (inclusive) - sets the elevation of the card. Default is 1.

selected - Optional string value that will be parsed as Date. Pre selects a date highlighted in the calendar.

firstdate - Optional string value that will be parsed as Date. Lower limit of valid dates.

lastdate - Optional string value that will be parsed as Date. Higher limit of valid dates.

locale - Optional string value to set locale used ONLY FOR RENDERING headers in calendar. Default to browser locale. Note: All internal and external dates handling are not affected by locale.

disabled - Boolean value that disables the calendar selector. Default value is false.

initials - Boolean value to use initials in weekdays names. Default value is false.

value - javascript object that contains the selected Date object and the corresponding formatted text.

format - gets/sets the javascript function to format a Date object into a formatted text.

Custom CSS Variables

--wired-calendar-bg Background color of the calendar. Default white.

--wired-calendar-color Calendar sketch line color. Default black.

--wired-calendar-selected-color Selected date sketch line color. Default red.

--wired-calendar-dimmed-color Font color days not belonging to calendar actual month. Default gray.

Events

selected event fired when a date is selected by the user.

License

MIT License (c) Preet Shihn

Contributor

Eduardo Martinez