Skip to content

πŸ“… 1KB JavaScript library for generating simple HTML table calendar

License

Notifications You must be signed in to change notification settings

jpvmrcd/calendar

Repository files navigation

πŸ“… Calendar

Coverage Status

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