Simple Multilingual Calendar Component With Vanilla JavaScript

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 simple localization, CSS/HTML customization, multiple calendar instances on a single page, automatic theme switching (light and dark), customizable week starts and weekends, week number display, accessibility features (ARIA labels, tabindex, keyboard navigation), and date/time range selection with limits and custom popups.

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 vanilla-calendar-pro

// JavaScript
import Calendar from 'vanilla-calendar-pro';

// Core Stylesheet
import 'vanilla-calendar-pro/styles/vanilla-calendar.min.css';

// Themes
import 'vanilla-calendar-pro/styles/themes/dark.min.css';
import 'vanilla-calendar-pro/styles/themes/light.min.css';

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

<link href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/styles/index.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/index.js" defer></script>

3. Create a container in which you want to render the calendar

<div id="calendar">
</div>

4. Generate a basic calendar.

const calendar = new Calendar('#calendar');
// Browser usages
const { Calendar } = window.VanillaCalendarPro;

// initialize the calendar
calendar.init();

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

const calendar = new Calendar('#calendar', {
      type: 'multiple',
});

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

const calendar = new Calendar('#calendar', {
      displayMonthsCount: 2,
});

7. Date configs.

const calendar = new Calendar('#calendar', {
      dateToday: 'today',
      dateMin: '1970-01-01',
      dateMax: '2470-12-31',
});

8. Set the language of the calendar.

const calendar = new Calendar('#calendar', {
      locale: 'de-AT',
});

// OR
const calendar = new Calendar('#calendar', {
      locale: {
        months: {
          short: ['Vör', 'Thors', 'Skadi', 'Freya', 'Baldur', 'Njord', 'Tyr', 'Frigg', 'Odin', 'Loki', 'Hel', 'Idunn'],
          long: [
            'Vörmánuðr',
            'Thorsmánuðr',
            'Skadimánuðr',
            'Freymánuðr',
            'Baldurmánuðr',
            'Njordmánuðr',
            'Tyrmánuðr',
            'Friggmánuðr',
            'Odinmánuðr',
            'Lokimánuðr',
            'Helmánuðr',
            'Idunnmánuðr',
          ],
        },
        weekdays: {
          short: ['Sunna', 'Mani', 'Tiw', 'Woden', 'Thor', 'Frigg', 'Saturn'],
          long: ['Sunnandæg', 'Manadæg', 'Tiwesdæg', 'Wodensdæg', 'Thorsdæg', 'Friggsdæg', 'Saturnsdag'],
        },
      },
});

9. Config the hover-triggered popup.

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

10. Change the default layout template.

// Default
new Calendar('#calendar', {
  layouts: {
    default: `
      <div class="${self.styles.header}" data-vc="header" role="toolbar" aria-label="${self.labels.navigation}">
        <#ArrowPrev [month] />
        <div class="${self.styles.headerContent}" data-vc-header="content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext [month] />
      </div>
      <div class="${self.styles.wrapper}" data-vc="wrapper">
        <#WeekNumbers />
        <div class="${self.styles.content}" data-vc="content">
          <#Week />
          <#Dates />
          <#DateRangeTooltip />
        </div>
      </div>
      <#ControlTime />
    `
  }
});

// Multiple
new Calendar('#calendar', {
  layouts: {
    multiple: `
      <div class="${self.styles.controls}" data-vc="controls" role="toolbar" aria-label="${self.labels.navigation}">
        <#ArrowPrev [month] />
        <#ArrowNext [month] />
      </div>
      <div class="${self.styles.grid}" data-vc="grid">
        <#Multiple>
          <div class="${self.styles.column}" data-vc="column" role="region">
            <div class="${self.styles.header}" data-vc="header">
              <div class="${self.styles.headerContent}" data-vc-header="content">
                <#Month />
                <#Year />
              </div>
            </div>
            <div class="${self.styles.wrapper}" data-vc="wrapper">
              <#WeekNumbers />
              <div class="${self.styles.content}" data-vc="content">
                <#Week />
                <#Dates />
              </div>
            </div>
          </div>
        <#/Multiple>
        <#DateRangeTooltip />
      </div>
      <#ControlTime />
    `
  }
});

// Month
new Calendar('#calendar', {
  layouts: {
    month: `
      <div class="${self.styles.header}" data-vc="header" role="toolbar" aria-label="${self.labels.navigation}">
        <div class="${self.styles.headerContent}" data-vc-header="content">
          <#Month />
          <#Year />
        </div>
      </div>
      <div class="${self.styles.wrapper}" data-vc="wrapper">
        <div class="${self.styles.content}" data-vc="content">
          <#Months />
        </div>
      </div>
    `
  }
});

// Year
new Calendar('#calendar', {
  layouts: {
    year: `
      <div class="${self.styles.header}" data-vc="header" role="toolbar" aria-label="${self.labels.navigation}">
        <#ArrowPrev [year] />
        <div class="${self.styles.headerContent}" data-vc-header="content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext [year] />
      </div>
      <div class="${self.styles.wrapper}" data-vc="wrapper">
        <div class="${self.styles.content}" data-vc="content">
          <#Years />
        </div>
      </div>
    `
  }
});

11. Override the default CSS classes.

new Calendar('#calendar', {
  styles: {
    calendar: 'vc',
    controls: 'vc-controls',
    grid: 'vc-grid',
    column: 'vc-column',
    header: 'vc-header',
    headerContent: 'vc-header__content',
    month: 'vc-month',
    year: 'vc-year',
    arrowPrev: 'vc-arrow vc-arrow_prev',
    arrowNext: 'vc-arrow vc-arrow_next',
    wrapper: 'vc-wrapper',
    content: 'vc-content',
    months: 'vc-months',
    monthsMonth: 'vc-months__month',
    years: 'vc-years',
    yearsYear: 'vc-years__year',
    week: 'vc-week',
    weekDay: 'vc-week__day',
    weekNumbers: 'vc-week-numbers',
    weekNumbersTitle: 'vc-week-numbers__title',
    weekNumbersContent: 'vc-week-numbers__content',
    weekNumber: 'vc-week-number',
    dates: 'vc-dates',
    date: 'vc-date',
    dateBtn: 'vc-date__btn',
    datePopup: 'vc-date__popup',
    dateRangeTooltip: 'vc-date-range-tooltip',
    time: 'vc-time',
    timeContent: 'vc-time__content',
    timeHour: 'vc-time__hour',
    timeMinute: 'vc-time__minute',
    timeKeeping: 'vc-time__keeping',
    timeRanges: 'vc-time__ranges',
    timeRange: 'vc-time__range',
  },
});

12. Override the default ARIA labels.

new Calendar('#calendar', {
  labels: {
    application: 'Calendar',
    navigation: 'Calendar Navigation',
    arrowNext: {
      month: 'Next month',
      year: 'Next list of years',
    },
    arrowPrev: {
      month: 'Previous month',
      year: 'Previous list of years',
    },
    month: 'Select month, current selected month:',
    months: 'List of months',
    year: 'Select year, current selected year:',
    years: 'List of years',
    week: 'Days of the week',
    weekNumber: 'Numbers of weeks in a year',
    dates: 'Dates in the current month',
    selectingTime: 'Selecting a time ',
    inputHour: 'Hours',
    inputMinute: 'Minutes',
    rangeHour: 'Slider for selecting hours',
    rangeMinute: 'Slider for selecting minutes',
    btnKeeping: 'Switch AM/PM, current position:',
  },
});

13. Callback functions.

new Calendar('#calendar', {
  onClickDate!: (self: Calendar, event: MouseEvent) => void;
  onClickWeekDay!: (self: Calendar, day: number, dateEls: HTMLElement[], event: MouseEvent) => void;
  onClickWeekNumber!: (self: Calendar, number: number, year: number, dateEls: HTMLElement[], event: MouseEvent) => void;
  onClickTitle!: (self: Calendar, event: MouseEvent) => void;
  onClickMonth!: (self: Calendar, event: MouseEvent) => void;
  onClickYear!: (self: Calendar, event: MouseEvent) => void;
  onClickArrow!: (self: Calendar, event: MouseEvent) => void;
  onChangeTime!: (self: Calendar, event: Event, isError: boolean) => void;
  onChangeToInput!: (self: Calendar, event: Event) => void;
  onCreateDateRangeTooltip!: (self: Calendar, dateEl: HTMLElement, tooltipEl: HTMLElement, dateElBCR: DOMRect, mainElBCR: DOMRect) => string;
  onCreateDateEls!: (self: Calendar, dateEl: HTMLElement) => void;
  onCreateMonthEls!: (self: Calendar, monthEl: HTMLElement) => void;
  onCreateYearEls!: (self: Calendar, yearEl: HTMLElement) => void;
  onInit!: (self: Calendar) => void;
  onUpdate!: (self: Calendar) => void;
  onDestroy!: (self: Calendar) => void;
  onShow!: (self: Calendar) => void;
  onHide!: (self: Calendar) => void;
});

14. More configuration options.

inputMode: boolean = false;
positionToInput: PositionToInput = 'left';

firstWeekday: WeekDayID = 1;
monthsToSwitch: 1 | MonthsCount = 1;
themeAttrDetect: string = 'html[data-theme]';

displayDateMin!: DateAny;
displayDateMax!: DateAny;
displayDatesOutside: boolean = true;
displayDisabledDates: boolean = false;
displayMonthsCount!: MonthsCount;

disableDates: DatesArr = [];
disableAllDates: boolean = false;
disableDatesPast: boolean = false;
disableDatesGaps: boolean = false;
disableWeekdays: Range<7>[] = [];
disableToday: boolean = false;

enableDates: DatesArr = [];
enableEdgeDatesOnly: boolean = true;
enableDateToggle: ToggleSelected = true;
enableWeekNumbers: boolean = false;
enableMonthChangeOnDayClick: boolean = true;
enableJumpToSelectedDate: boolean = false;

// 'single' | 'multiple' | 'multiple-ranged' | false
selectionDatesMode: false | DateMode = 'single';
selectionMonthsMode: boolean | 'only-arrows' = true;
selectionYearsMode: boolean | 'only-arrows' = true;
selectionTimeMode: false | 12 | 24 = false;

selectedDates: DatesArr = [];
selectedMonth!: Range<12>;
selectedYear!: number;
selectedHolidays: DatesArr = [];
selectedWeekends: WeekDays<WeekDayID> = [0, 6];
selectedTime!: string;
// string (custom theme) | 'light' | 'dark' | 'system'
selectedTheme: ThemesDefault | string = 'system';

timeMinHour: Range<24> = 0;
timeMaxHour: Range<24> = 23;
timeMinMinute: Range<60> = 0;
timeMaxMinute: Range<60> = 59;
timeControls: TimeControl = 'all';
timeStepHour: number = 1;
timeStepMinute: number = 1;

sanitizerHTML: (dirtyHtml: string) => string = (dirtyHtml: string) => dirtyHtml;

15. API methods.

// update
calendar.update({
  year: boolean;
  month: boolean;
  dates: boolean | 'only-first';
  holidays: boolean;
  time: boolean;
});

// set
calendar.set({
  locale: 'de-AT',
  firstWeekday: 0,
}, {
  dates: true,
});

// show
calendar.show();

// hide
calendar.hide();

// destroy
calendar.destroy();

Changelog:

v3.0.5 (04/14/2025)

• fix: allow onHover logic for dates to work with Web components
• fix: use setTimeout for cross-compatibility
• fix: Add displayClosestValidDate

v3.0.4 (04/14/2025)

• Replace unused ko-fi funding donate button
• Refactoring/363 input show and hide

v3.0.3 (12/18/2024)

• Bugfixes

v3.0.2 (12/17/2024)

• Bugfixes

v3.0.1 (12/02/2024)

• Major update
• Doc update

v2.9.10 (08/21/2024)

• bugfixes

v2.9.9 (08/17/2024)

• bugfixes

v2.9.8 (08/03/2024)

• feat: add new edgesOnly to return only start/end dates in selection range
• fix: ViteJS has problems finding CSS file from package exports
• fix: cross platform compatibility, make sure replaceWith() exists before using it
• feat: add auto option to positionToInput for auto-positioning
• Add focus event listener and handle esc key
• Add version number to the builds
• Fix bug with disableGaps

v2.9.7 (07/28/2024)

• feat: add jumpToSelectedDate option
• feat: add sanitizer option to be CSP safe
• feat: add ‘today’ as a shortcut to range min/max date
• feat: allow providing Date to min/max and selected dates
• feat: add new toggleSelected option
• fix: use .appendChild for cross platform compatibility
• Fix “Button outline obscured by adjacent button.

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

The post Simple Multilingual Calendar Component With Vanilla JavaScript appeared first on CSS Script.