Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
package.json v2.0.0 Oct 19, 2019
tsconfig.json feat: add wired-calendar initial commit May 28, 2019

wired calendar


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

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


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">


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 corresponing formated text.

format - gets/sets the javascript function to format a Date object into a formated 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.


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


MIT License (c) Preet Shihn


Eduardo Martinez

You can’t perform that action at this time.