📅 Calendar

A lightweight JavaScript library for generating simple HTML table calendar.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
		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

Usage

Using npm:

npm install @jpvmrcd/calendar --save

<div id="calendar"></div>

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

const cal = new Calendar(document.getElementById('calendar'));
cal.render();

using CDN:

<div id="calendar"></div>

<script src="https://unpkg.com/@jpvmrcd/calendar/dist/calendar.min.js"></script>

var cal = new jpvmrcd.calendar.Calendar(document.getElementById('calendar'));
cal.render();

Methods

`render(year?: number, month?: number): Date`

Generates a calendar based on year and month arguments. If no arguments are passed, the calendar renders the current month and year.

Parameters

Name	Type	Description
year	`number`	A number corresponding the year to be rendered.
month	`number`	A zero based number corresponding the month to be rendered (zero is first month).

Properties

Name	Type	Description
options	calendarOptions	The rendering options for the calendar.
month	`number`	The zero based month of the rendered calendar.
year	`number`	The full year of the rendered calendar.
element	`HTMLElement`	The parent HTML element of the calendar.

Types

`calendarOptions`

Name	Type	Description
dayNames	`string[7]`	Sets the days of the week. Should start from Sunday.
startDay	`string`	Sets the start day of the week. The value for `startDay` should match one of the values defined in `dayNames`. Defaults to `Sun`.
onCellAdded	(args: onCellAddedArgs) => void	Event triggered on every calendar cell added to the calendar.
onDateClicked	(args: onDateClickedArgs) => void	Event triggered on every calendar date cell click.

`onCellAddedArgs`

Name	Type	Description
td	`HTMLTableCellElement`	Current `td` being rendered.
dateISOString	`string`	ISO formatted date of the cell being rendered.

`onDateClickedArgs`

Name	Type	Description
event	`Event`	The `Event` triggered.
dateISOString	`string`	ISO formatted date of cell clicked.

Examples

Render calendar for the current month year.

const cal = new Calendar(document.getElementById('calendar'));
cal.render();

Calendar properties and `render()` return value

const cal = new Calendar(document.getElementById('calendar'));
const date = cal.render(2021, 0);

console.log(cal.month);
> 0

console.log(cal.year);
> 2021

console.log(cal.element);
> <div id="calendar">...</div>

Render calendar with custom `option.dayNames`

const cal = new Calendar(document.getElementById('calendar'));
cal.options.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
cal.render();

Render calendar with `options.startDay`

const cal = new Calendar(document.getElementById('calendar'));
cal.options.startDay = 'Mon';
cal.render();

Render calendar with `option.dayNames` and `option.startDay`

const cal = new Calendar(document.getElementById('calendar'));
cal.options.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
cal.options.startDay = 'Tu';
cal.render();

Change rendered calendar

const cal = new Calendar(document.getElementById('calendar'));
cal.render(2021, 0);

// renders calendar for December 2020
cal.render(cal.year, cal.month + 1);

// renders calendar for January 2021
cal.render(cal.year, cal.month - 1);

Render calendar with customized cells using `options.onCellAdded`

const cal = new Calendar(document.getElementById('calendar'));
cal.options.onCellAdded = (args: OnCellAddedArgs) => {
  args.td.innerHTML = `<div>${args.cellDate.getDate()}</div>`;
};
cal.render();

Render calendar with `options.OnDateClicked`

const cal = new Calendar(document.getElementById('calendar'));
cal.options.onDateClicked = (args: OnDateClickedArgs) => {
  console.log(args);
  // > {event: MouseEvent, dateISOString: "YYYY-MM-DD"}
};
cal.render();

@jpvmrcd/calendar