Simple Multilingual Calendar Component With Vanilla JavaScript

Category: Date & Time , Javascript , Recommended | March 11, 2024
Author:uvarov-frontend
Views Total:890 views
Official Page:Go to website
Last Update:March 11, 2024
License:MIT

Preview:

Simple Multilingual Calendar Component With Vanilla JavaScript

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
// JavaScript
import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
// Core Stylesheet
import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
// Themes
import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';

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

<!-- Core Stylesheet -->
<link rel="stylesheet" href="vanilla-calendar.min.css" />
<!-- Themes -->
<link rel="stylesheet" href="themes/dark.min.css" />
<link rel="stylesheet" href="themes/light.min.css" />
<!-- JavaScript -->
<script src="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('#vanilla-calendar', {
      // Options
});
calendar.init();

5. Set the calendar type: ‘default’ | ‘multiple’ | ‘month’ | ‘year’.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      type: 'multiple',
});

6. Specify the number of months to display if the calendar type is defined as “multiple”. Default: 2.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      months: 2,
});

7. Date configs.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      date: {
        min: '1970-01-01',
        max: '2470-12-31',
        today: new Date('2022-01-07'),
      },
});

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

const calendar = new VanillaCalendar('#vanilla-calendar', {
      settings: {
        iso8601: false,
      },
});

9. Date range configs.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      settings: {
        range: {
          min: '2022-05-01',
          max: '2022-05-13',
          disablePast: false, 
          disableGaps: false,
          disableWeekday: false,
          disabled: [], // disabled dates
          enabled: [], // disabled dates
        },
      },
});

10. Date selection configs.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      settings: {
        selected: {
          dates: ['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04'],
          time: '03:44 AM',
          month: 5,
          year: 2022,
          holidays: ['2022-12-24', '2022-12-25'],
        },
        selection: {
          day: 'single', // 'single' | 'multiple' | 'multiple-ranged'
          month: true,
          year: true,
          time: false,
          controlTime: 'all', // 'all' | 'range'
          stepHours: 1,
          stepMinutes: 1,
          cancelableDay: false,
        },
      },
});

11. Set the visibility of the calendar.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      settings: {
        visibility: {
         // hightlights weekends
         weekend: true,
         // highlights today
         today: true,
         // abbreviated names of months in the month selection
         monthShort: true,
         // show week numbers of the year
         weekNumbers: false,
         // show all days, including disabled ones.s
         disabled: false,
         // show the days of the past and next month.
         daysOutside: true,
        },
      },
});

12. Set the language of the calendar.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      settings: {
        lang: 'en',
      },
});
// OR
const calendar = new VanillaCalendar('#vanilla-calendar', {
      settings: {
        lang: 'define',
      },
      locale: {
        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        weekday: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      },
});

13. 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 />
      `
    }
});
// default month selection template
const calendar = new VanillaCalendar('#vanilla-calendar', {
      DOMTemplates: {
        month: `
          <div class="vanilla-calendar-header">
            <div class="vanilla-calendar-header__content">
              <#Month />
              <#Year />
            </div>
          </div>
          <div class="vanilla-calendar-wrapper">
            <div class="vanilla-calendar-content">
              <#Months />
            </div>
          </div>
        `
      }
});

14. Available actions (event handlers) which can be used to various interaction data.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      actions: {
        clickDay(event, dates) {},
        clickWeekNumber(event, number, days, year) {},
        clickMonth(e, month) {},
        clickYear(event, year) {},
        clickArrow(event, year, month) {},
        changeTime(event, time, hours, minutes, keeping) {},
        hangeToInput(e, calendar, dates, time, hours, minutes, keeping) {},
        getDays(day, date, HTMLElement, HTMLButtonElement) {},
        showCalendar(HTMLInputElement, HTMLElement) {},
        hideCalendar(HTMLInputElement, HTMLElement) {},
      },
});

15. Config the hover-triggered popup.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      popups: {
        '2022-06-28': {
          modifier: 'bg-red',
          html: 'Meeting at 9:00 PM',
        },
      }
});

16. Override the default CSS classes.

const calendar = new VanillaCalendar('#vanilla-calendar', {
      CSSClasses: {
        calendar: 'vanilla-calendar',
        calendarDefault: 'vanilla-calendar_default',
        calendarMultiple: 'vanilla-calendar_multiple',
        calendarMonth: 'vanilla-calendar_month',
        calendarYear: 'vanilla-calendar_year',
        controls: 'vanilla-calendar-controls',
        grid: 'vanilla-calendar-grid',
        column: 'vanilla-calendar-column',
        header: 'vanilla-calendar-header',
        headerContent: 'vanilla-calendar-header__content',
        month: 'vanilla-calendar-month',
        monthDisabled: 'vanilla-calendar-month_disabled',
        year: 'vanilla-calendar-year',
        yearDisabled: 'vanilla-calendar-year_disabled',
        arrow: 'vanilla-calendar-arrow',
        arrowPrev: 'vanilla-calendar-arrow_prev',
        arrowNext: 'vanilla-calendar-arrow_next',
        wrapper: 'vanilla-calendar-wrapper',
        content: 'vanilla-calendar-content',
        week: 'vanilla-calendar-week',
        weekDay: 'vanilla-calendar-week__day',
        weekDayWeekend: 'vanilla-calendar-week__day_weekend',
        days: 'vanilla-calendar-days',
        daysSelecting: 'vanilla-calendar-days_selecting',
        months: 'vanilla-calendar-months',
        monthsSelecting: 'vanilla-calendar-months_selecting',
        monthsMonth: 'vanilla-calendar-months__month',
        monthsMonthSelected: 'vanilla-calendar-months__month_selected',
        monthsMonthDisabled: 'vanilla-calendar-months__month_disabled',
        years: 'vanilla-calendar-years',
        yearsSelecting: 'vanilla-calendar-years_selecting',
        yearsYear: 'vanilla-calendar-years__year',
        yearsYearSelected: 'vanilla-calendar-years__year_selected',
        yearsYearDisabled: 'vanilla-calendar-years__year_disabled',
        time: 'vanilla-calendar-time',
        timeContent: 'vanilla-calendar-time__content',
        timeHours: 'vanilla-calendar-time__hours',
        timeMinutes: 'vanilla-calendar-time__minutes',
        timeKeeping: 'vanilla-calendar-time__keeping',
        timeRanges: 'vanilla-calendar-time__ranges',
        timeRange: 'vanilla-calendar-time__range',
        day: 'vanilla-calendar-day',
        daySelected: 'vanilla-calendar-day_selected',
        daySelectedFirst: 'vanilla-calendar-day_selected-first',
        daySelectedLast: 'vanilla-calendar-day_selected-last',
        daySelectedIntermediate: 'vanilla-calendar-day_selected-intermediate',
        dayPopup: 'vanilla-calendar-day__popup',
        dayBtn: 'vanilla-calendar-day__btn',
        dayBtnPrev: 'vanilla-calendar-day__btn_prev',
        dayBtnNext: 'vanilla-calendar-day__btn_next',
        dayBtnToday: 'vanilla-calendar-day__btn_today',
        dayBtnSelected: 'vanilla-calendar-day__btn_selected',
        dayBtnHover: 'vanilla-calendar-day__btn_hover',
        dayBtnDisabled: 'vanilla-calendar-day__btn_disabled',
        dayBtnIntermediate: 'vanilla-calendar-day__btn_intermediate',
        dayBtnWeekend: 'vanilla-calendar-day__btn_weekend',
        dayBtnHoliday: 'vanilla-calendar-day__btn_holiday',
        weekNumbers: 'vanilla-calendar-week-numbers',
        weekNumbersTitle: 'vanilla-calendar-week-numbers__title',
        weekNumbersContent: 'vanilla-calendar-week-numbers__content',
        weekNumber: 'vanilla-calendar-week-number',
        isFocus: 'vanilla-calendar-is-focus',
      },
});

17. 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();
calendar.reset();
calendar.destroy();

Changelog:

v2.9.6 (03/11/2024)

  • Updated

v2.9.5 (02/19/2024)

  • Bugfixed

v2.9.4 (02/18/2024)

  • Bugfixed
  • Add getMonths and getYears methods to config

v2.9.3 (01/27/2024)

  • Bugfixed

v2.9.2 (12/09/2023)

  • Fixing CSS Class Types
  • Сorrect the choice of one day in ‘multiple-ranged’
  • Fix hover effect on days

v2.9.1 (12/08/2023)

  • The final js files are now even smaller
  • Added new parameter positionToInput
  • Added a resize event listener that allows the calendar to automatically change position when the screen size changes
  • Add minify js
  • Fix range enabled and disabled dates bug
  • Fix update method
  • Fix position calendar input

v2.9.0 (12/06/2023)

  • Added a new option cancelableDay – allows you to disable canceling the selected date by clicking again.
  • Big changes in how actions work.
  • The reset() method has been merged with update(), and arguments to control the reset have been added to update().
  • Added date formatting utilities.

v2.8.5 (11/30/2023)

  • Add general css

v2.8.4 (11/29/2023)

  • Bug fixes in the new version and other changes

v2.8.3 (11/28/2023)

  • Complete refactoring of all files;
  • Deep analysis and optimization of the entire project;
  • Bug fixing and optimization of TypeScript;
  • Reduced size of the final JS file;
  • Reduced size of the npm package;
  • Minor changes in basic styles;

v2.7.2 (11/08/2023)

  • Bugfixes

v2.7.1 (11/07/2023)

  • Add hideCalendar() and showCalendar() actions
  • Add a calendar destroy method

v2.7.0 (10/13/2023)

  • Bugfixes

v2.6.8 (10/10/2023)

  • Bugfixes

v2.6.7 (10/04/2023)

  • Bugfixes

v2.6.6 (10/02/2023)

  • Fix year selection in type: ‘multiple’
  • Add the ability to control how you are allowed to switch month and year.
  • Hotfix/jumpMonths for select month

v2.6.5 (09/30/2023)

  • Add month and year selection in type: ‘multiple’

v2.6.4 (09/21/2023)

  • Hotfix JumpDate UTC

v2.6.3 (09/19/2023)

  • Fix jumpDate

v2.6.2 (09/14/2023)

  • Add jumpMonths
  • Add getDays

v2.6.1 (06/21/2023)

  • Bugfix

v2.6.0 (05/11/2023)

  • Fix invalid date in safari
  • Fix event “change” theme

v2.5.9 (05/01/2023)

  • Update

v2.5.8 (04/26/2023)

  • Fix update method

v2.5.7 (04/24/2023)

  • Add .reset()
  • Add themeDetect
  • Fix selectedKeeping

v2.5.6 (04/10/2023)

  • add additional-features-date-picker-in-input.js

v2.5.4 (04/06/2023)

  • Add readonly params
  • Fix disableAllDays

v2.5.3 (03/31/2023)

  • Hotfixes

v2.5.2 (03/30/2023)

  • Hotfixes

v2.5.1 (03/15/2023)

  • Bugfixes

v2.5.0 (03/11/2023)

  • The new version has completely redesigned the style files. If you are not ready to use the new styles, the old style file is available for import with the same name but contains the prefix “_”.

v2.4.0 (02/19/2023)

  • Add option to turn off past days
  • Add the ability to specify a date range for all date arrays
  • Option to only select ranges that are continuously enabled
  • Disable days of the week
  • Add selectors for selected days
  • Update doc

v2.3.0 (02/15/2023)

  • Show multiple months
  • Do not create days from past and future months
  • Bugfix

v2.2.8 (02/14/2023)

  • Hotfix highlighting the date range on hover
  • Add the ability to deselect a date range

v2.2.7 (02/12/2023)

  • Highlighting the date range on hover, before I click to select the second date
  • Week number clickable

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

You Might Be Interested In:


One thought on “Simple Multilingual Calendar Component With Vanilla JavaScript

  1. Fergus Sawyer

    Hey, we need to update the documentation on this site, the author’s method of passing the HTML-element has changed in new versions and new features have been added. By the way, the actual documentation is available on his website.

    Reply

Leave a Reply