GitHub issues GitHub last commit Build Status Analytics

Calendar Widget

A super simple calendar widget written in TypeScript and SCSS implemented with a11y (accessibility) and i18n (internationalization) in mind.


If you wish to go directly to the demo, please click here.


The widget accepts four options which are optional:

  1. Start year - number - defaults to current year.
  2. Start month - number - defaults to current month (It is zero based).
  3. ID of the container which will hold the calendar - String - defaults to body.
  4. An object with strings used for internationalization - Object - defaults to:
    	"days": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    	"months": ["January", "February", "March", "April", "May", "June", "July", "August", "Septemer", "October", "November", "December"],
    	"prevMonth": "←",
    	"nextMonth": "→",
    	"prevMonthTitle": "Previous month",
    	"nextMonthTitle": "Next month"


The Calendar Widget assumes that you are using a module bundler such as Webpack, Rollup or SystemJS.

If you don't use any of those, please open an issue and I will provide you with a fallback script.

First, install or download this repository.

Then import the script in your file:

import { renderCalendarWidget } from 'calendar-widget';

// Or if you downloaded it manually

import { renderCalendarWidget } from '../your-downloaded-scripts/calendar-widget/dist/index.js';

// You can also use the default export:
import CalendarWidget from 'calendar-widget';

You can now use the widget:

// With default settings

// With custom settings
renderCalendarWidget(2019, 4, 'my-calendar-container', {
	days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
	months: [
	prevMonth: '←',
	nextMonth: '→',
	prevMonthTitle: 'Previous month',
	nextMonthTitle: 'Next month'


The widget exports several types which are automatically found by TypeScript. The typings are located in the dist folder.


The widget comes with an optional stylesheet. You can see the default styling in the demo above.

In order to use the default style, you should have used the default settings:

/* If you used the default settings */
@import 'calendar-widget/dist/index.css';

If you are using SCSS and wish to use the widget with custom settings, you can import the SCSS mixin and tweak it a bit:

@import 'calendar-widget/index.scss';

#my-calendar-container {
	$calendar-width: 400px;
	$calendar-color: rebeccapurple;
	@include calendar($calendar-width, $calendar-color);