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