Generate Custom Monthly Calendar With JavaScript – Calendarize

Preview:

Description:

Calendarize is a super tiny JavaScript library to generate a custom monthly calendar on the page.

The plugin returns a week array that each weak container an array of 7 numbers depending on the current month & year:

[
  [ 0,  0,  0,  0,  1,  2,  3],
  [ 4,  5,  6,  7,  8,  9, 10],
  [11, 12, 13, 14, 15, 16, 17],
  [18, 19, 20, 21, 22, 23, 24],
  [25, 26, 27, 28, 29, 30,  0]
]

How to use it:

1. Install the package and import the Calendarize as a module.

# NPM
$ npm install calendarize --save

import calendarize from 'calendarize';

2. Or load the umd version of the Calendarize library in the document.

<script src="dist/calendarize.min.js"></script>
<!-- Or From A CDN -->
<script src="https://cdn.jsdelivr.net/npm/calendarize"></script>

3. Create a new monthly calendar and determine the date you want to process.

const monthView = calendarize(new Date('2020-01-24'));
const monthView = calendarize(new Date('Jan 24, 2019'));
const monthView = calendarize(new Date('Today'));

4. Determine the first day of the week. Default: 0 (Sunday).

// 1 = Monday, 2 = Tuesday, ...
const monthView = calendarize(new Date('2020-01-24'), 1);