Generate A Clean Calendar For Any Month And Year – Calendar.js

Calendar.js is a tiny JavaScript library for generating a calendar UI based on the year and month you specify.

The calendar renders with basic HTML table styling that is easy to override with CSS. Lightweight size at just 1KB makes this a great option to add a calendar without bloat.

How to use it:

1. Install and import the Calendar component.

# NPM
$ npm i @jpvmrcd/calendar

import { Calendar } from '@jpvmrcd/calendar';

// Browser
<script src="/dist/calendar.min.js"></script>

2. Create an empty in which the component renders the calendar.

<div id="demo"></div>

3. Create a new Calendar instance.

const instance = new Calendar(document.getElementById('demo'));

// Browser
var instance = new jpvmrcd.calendar.Calendar(document.getElementById('demo'));

4. Render a default calendar UI.

instance.render();

5. Pass arguments for custom month.

// Dec, 2023
instance.render(2023, 11);

6. Customize the start day of the week. Default: ‘Sun’.

instance.options.startDay = 'Mon';

7. Customize the days of the week.

instance..options.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];

8. Event handlers.

instance.options.onCellAdded = (args: OnCellAddedArgs) => {
  args.td.innerHTML = `<div>${args.cellDate.getDate()}</div>`;
};
instance.options.onDateClicked = (args: OnDateClickedArgs) => {
  console.log(args);
  // > {event: MouseEvent, dateISOString: "YYYY-MM-DD"}
};
instance.options.onHeaderCellAdded = (args: OnHeaderCellAddedArgs) => {
  console.log(args);
};

Changelog:

v0.2.2 (04/01/2026)

• Update dependency

v0.2.0 (10/14/2024)

• add OnHeaderCellAddedArgs

v0.1.2 (09/24/2024)

• Update dependencies