0.2.0 • Published 9 months ago
@jpvmrcd/calendar v0.2.0
📅 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();