Generate A Clean Calendar For Any Month And Year – Calendar.js

Category: Date & Time , Javascript | November 1, 2023
Author:jpvmrcd
Views Total:307 views
Official Page:Go to website
Last Update:November 1, 2023
License:MIT

Preview:

Generate A Clean Calendar For Any Month And Year – Calendar.js

Description:

Calendar.js is a tiny JavaScript library for generating a calendar UI based on the year and month you specify.

The calendar renders with basic HTML table styling that is easy to override with CSS. Lightweight size at just 1KB makes this a great option to add a calendar without bloat.

How to use it:

1. Install and import the Calendar component.

# NPM
$ npm i @jpvmrcd/calendar
import { Calendar } from '@jpvmrcd/calendar';
// Browser
<script src="/dist/calendar.min.js"></script>

2. Create an empty in which the component renders the calendar.

<div id="demo"></div>

3. Create a new Calendar instance.

const instance = new Calendar(document.getElementById('demo'));
// Browser
var instance = new jpvmrcd.calendar.Calendar(document.getElementById('demo'));

4. Render a default calendar UI.

instance.render();

5. Pass arguments for custom month.

// Dec, 2023
instance.render(2023, 11);

6. Customize the start day of the week. Default: ‘Sun’.

instance.options.startDay = 'Mon';

7. Customize the days of the week.

instance..options.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];

8. Event handlers.

instance.options.onCellAdded = (args: OnCellAddedArgs) => {
  args.td.innerHTML = `<div>${args.cellDate.getDate()}</div>`;
};
instance.options.onDateClicked = (args: OnDateClickedArgs) => {
  console.log(args);
  // > {event: MouseEvent, dateISOString: "YYYY-MM-DD"}
};

You Might Be Interested In:


Leave a Reply