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 |
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();
Generates a calendar based on year and month arguments. If no arguments are passed, the calendar renders the current month and year.
| 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). |
| 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. |
| 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. |
| Name | Type | Description |
|---|---|---|
| td | HTMLTableCellElement |
Current td being rendered. |
| dateISOString | string |
ISO formatted date of the cell being rendered. |
| Name | Type | Description |
|---|---|---|
| event | Event |
The Event triggered. |
| dateISOString | string |
ISO formatted date of cell clicked. |
const cal = new Calendar(document.getElementById('calendar'));
cal.render();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>const cal = new Calendar(document.getElementById('calendar'));
cal.options.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
cal.render();const cal = new Calendar(document.getElementById('calendar'));
cal.options.startDay = 'Mon';
cal.render();const cal = new Calendar(document.getElementById('calendar'));
cal.options.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
cal.options.startDay = 'Tu';
cal.render();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);const cal = new Calendar(document.getElementById('calendar'));
cal.options.onCellAdded = (args: OnCellAddedArgs) => {
args.td.innerHTML = `<div>${args.cellDate.getDate()}</div>`;
};
cal.render();const cal = new Calendar(document.getElementById('calendar'));
cal.options.onDateClicked = (args: OnDateClickedArgs) => {
console.log(args);
// > {event: MouseEvent, dateISOString: "YYYY-MM-DD"}
};
cal.render();