Simple Multilingual Calendar Component With Vanilla JavaScript

Preview:

Description:

A tiny clean calendar in Vanilla JavaScript. Create a beautiful customizable calendar for your website, using the ISO 8601 standard. No dependencies, no jQuery, and no frameworks.

Key features include custom holidays, multiple date selection, inbuilt language support, and minified size of only 9kb.

The code is easy to understand and is a good starting point if you want to display events and schedules on the page.

How to use it:

1. Install and import the VanillaCalendar component.

# NPM
$ npm i @uvarov.frontend/vanilla-calendar

import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';

2. Or load the JavaScript library directly in the document.

<link rel="stylesheet" href="build/vanilla-calendar.min.css" />
<script src="build/vanilla-calendar.min.js"></script>

3. Add the CSS class ‘vanilla-calendar’ to the target container where the library generates the calendar.

<div class="vanilla-calendar">
  
</div>

4. Generate a basic calendar.

const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
});
calendar.init();

5. Set today’s date.

const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      date: new Date('2022-01-01'),
});

6. Determine whether to use ISO 8601 format. (Default: true,)

const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        iso8601: false,
      },
});
calendar.init();

7. Disable date selection.

const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        selecting: false,
      },
});
calendar.init();

8. Set the date range.

const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        range: {
          min: '2022-05-01',
          max: '2022-05-13',
          values: ['2022-05-16', '2022-05-17'],
        },
      },
});
calendar.init();

9. Specify the selected dates.

const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        selected: {
         date: '2022-05-14',
         month: 5,
         year: 2022,
         holidays: ['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04'],
        },
      },
});
calendar.init();

10. Set the visibility of the component.

const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        isibility: {
         // hightlights weekends
         weekend: true,
         // highlights today
         today: true,
         // shows months
         months: false,
         // shows years
         year: true,
         // shows navigation buttons
         arrows: {
          prev: true,
          next: true,
         },
        },
      },
});
calendar.init();

11. Set the language of the calendar.

const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        lang: 'en', // or 'ru'
      },
});
calendar.init();

12. Change the default DOM templates.

new VanillaCalendar('#calendar', {
    DOMTemplates: {
      default: `
        <div class="vanilla-calendar-header">
          <#ArrowPrev />
          <div class="vanilla-calendar-header__content">
            <#Month />
            <#Year />
          </div>
          <#ArrowNext />
        </div>
        <div class="vanilla-calendar-wrapper">
          <#WeekNumbers />
          <div class="vanilla-calendar-content">
            <#Week />
            <#Days />
          </div>
        </div>
        <#ControlTime />
      `
    }
});

13. Change settings and update the calendar.

calendar.date.today = new Date('2022-07-25');
calendar.settings.lang = 'en';
calendar.settings.selected.date = '2022-07-15';
calendar.update();

Changelog:

v2.2.5 (11/21/2022)

• Added clickArrow method to intercept clicks on arrows. Returns the current month and current year.

v2.2.4 (11/17/2022)

• createWeek fixes

v2.2.3 (11/16/2022)

• TypeScript fixes
• Fixes bug calendarSelectedYear for DOMTemplates
• Refactoring createPopup method

v2.2.1 (11/16/2022)

• Bugfix

v2.2.0 (11/16/2022)

• Added feature DOMTemplates
• Added feature CSSClasses
• Other fixes

v2.1.7 (11/11/2022)

• Allow adding multiple modifier classes to popups

v2.1.6 (11/08/2022)

• Fix types
• Added SSR fix

v2.1.5 (11/06/2022)

• Bugfix

v2.1.3 (10/30/2022)

• Bugfix

v2.1.1 (10/26/2022)

• Bugfix

v2.1.0 (10/25/2022)

• Fixed interface and export declare VanillaCalendar;
• Fixed “update()” method;

v2.0.0 (08/27/2022)

• Update

v1.5.5 (08/27/2022)

• Update

v1.4.9 (07/20/2022)

• Update

v1.4.8 (07/16/2022)

• Update

v1.4.7 (07/15/2022)

• Update

v1.4.6 (07/14/2022)

• Update

v1.4.5 (07/13/2022)

• Update

v1.4.3 (07/10/2022)

• Update

v1.4.0 (07/04/2022)

• bugfix

v1.3.5 (06/26/2022)

• added langs

v1.3.4 (06/24/2022)

• updated package

v1.3.2 (06/16/2022)

• updated package

v1.3.1 (06/12/2022)

• updated package

v1.2.8 (06/06/2022)

• updated package

v1.2.6 (05/28/2022)

• fix size plugins

v1.2.4 (05/18/2022)

• fix adaptive of demo