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