kp-year-calendar

A fully customizable year calendar view widget

Requirements

This plugin uses pure javascript. No library is required.

Installation

You can get the widget using the following methods:

• From the Node package manager, using the following command: npm install js-year-calendar
• From Yarn, using the following command: yarn add js-year-calendar
• From the CDN, by adding the following script directly in your HTML page:

AND

Initialization

If you're using javascript modules, don't forget to import the library:

import Calendar from 'js-year-calendar';
import 'js-year-calendar/dist/js-year-calendar.css';

Usage

You can create a calendar using the following javascript code :

new Calendar('.calendar')

Or

new Calendar(document.querySelector('.calendar'));

Where .calendar is the selector of a DIV element that should contain your calendar.

You can also use the following HTML if you don't want to use javascript to initialize the calendar

<div data-provide="calendar"></div>

The calendar will be automatically created when the page will finish loading

Using options

You can specify options to customize the calendar:

new Calendar('.calendar', {
    style: 'background',
    minDate: new Date()
})

Language

If you want to use the calendar in a different language, you should import the locale file corresponding to the language you want to use, and then set the language prop of the calendar:

import Calendar from 'js-year-calendar';
import 'js-year-calendar/locales/js-year-calendar.fr';

OR

Then

new Calendar('.calendar', {
    language: 'fr'
})

Updating calendar

You can update the calendar after being instantiated:

const calendar = new Calendar('.calendar');

calendar.setStyle('background');
calendar.setMaxDate(new Date());

Events

You can bind events to the calendar at initialization

const calendar = new Calendar('.calendar', {
    clickDay: function(e) {
        alert('Click on day ' + e.date.toString());
    }
});

or later

new Calendar('.calendar');
document.querySelector('.calendar').addEventListener('clickDay', function(e) {
    alert('Click on day ' + e.date.toString());
});