📅 Calendar

A lightweight JavaScript library for generating simple HTML table calendar.

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