Travis CI Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

Calendar Widget

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

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit


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


The widget accepts an object with 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": [
    	"prevMonth": "←",
    	"nextMonth": "→",
    	"prevMonthTitle": "Previous month",
    	"nextMonthTitle": "Next month"


# Via NPM
npm i simple-calendar-widget

# Via Yarn
yarn add simple-calendar-widget


import { renderCalendarWidget } from 'simple-calendar-widget';

// Default settings

// Or custom settings
	startYear: 2018,
	startMonth: 0,
	container: '#calendar',
	translations: {
		days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		months: [
		prevMonth: '←',
		nextMonth: '→',
		prevMonthTitle: 'Previous month',
		nextMonthTitle: 'Next month'

TypeScript support

The package is written in TypeScript and provides full TypeScript support. The widget exports several types which are automatically found by TypeScript.


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);

You can also include the stylesheet in a <link> in your markup:

<link rel="stylesheet" href="PATH_TO_CALENDAR_WIDGET_SOURCE/dist/index.css" />



Connect with me:


Support and sponsor my work:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image