💢 Usage example

biletiki.store — a website example for searching for flight tickets and hotels using vanilla-calendar.

Getting Started

Usage

Now that you have installed VanillaCalendar, you can create your first calendar. VanillaCalendar can be used in combination with «Input» or statically without «Input».

Almost all pages in this section use the simplest option — statically without «Input». If you're interested in how to use this calendar in combination with «Input», visit the page «Date Selection in Input».

HTML

Create an HTML tag with any unique CSS selector anywhere on your page; the calendar will reference it and use it as an identifier.

As an example in this documentation, an «id» attribute with the value «calendar» will be used.

html

<html>
  <head>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

html

<html>
  <head>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

JavaScript

If you installed VanillaCalendar using NPM or Yarn, you need to import JavaScript and the necessary styles. If you connected VanillaCalendar locally or used a CDN, you can skip this step.

import VanillaCalendar from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

import VanillaCalendar from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

In addition to the file «vanilla-calendar.min.css», which contains all possible calendar styles, there are separate style files in the «build» directory. Please include them instead of «vanilla-calendar.min.css» if you find it necessary.

// Only layout calendar
import 'vanilla-calendar-pro/build/vanilla-calendar.layout.min.css';
 
// Themes
import 'vanilla-calendar-pro/build/themes/light.min.css';
import 'vanilla-calendar-pro/build/themes/dark.min.css';

// Only layout calendar
import 'vanilla-calendar-pro/build/vanilla-calendar.layout.min.css';
 
// Themes
import 'vanilla-calendar-pro/build/themes/light.min.css';
import 'vanilla-calendar-pro/build/themes/dark.min.css';

The calendar automatically displays the theme used in the user's system. You can disable this default behavior and forcibly set any of the themes. In this case, you don't need to import all the themes.

Now, create an instance of VanillaCalendar with default parameters and initialize it.

const calendar = new VanillaCalendar('#calendar');
calendar.init();

const calendar = new VanillaCalendar('#calendar');
calendar.init();

The full example with html and js files can be viewed in the sandbox by clicking the "Open" button at the top right.

TypeScript

If you installed VanillaCalendar using NPM or Yarn and you use TypeScript, the usage is similar to JavaScript except that the types use different imports as shown below.

import VanillaCalendar from 'vanilla-calendar-pro';
import type { IOptions, ISettings } from 'vanilla-calendar-pro/types';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';
 
// use the types in your code
import class Example {
  init() {
    const options: IOptions = {
      settings: {
        selected: {
          dates: ['2024-08-20'],
        },
      },
    };
 
    const calendar = new VanillaCalendar('#calendar', options);
    calendar.init();
 
    const newOptions: IOptions['settings'] = {
      selected: {
        dates: ['2024-08-22'],
      },
    };
 
    this.changeSetting(calendar, newOptions as ISettings);
    calendar.update({ dates: true });
  }
 
  changeSetting(calendar: VanillaCalendar, settings: ISettings) {
    calendar.settings = { ...calendar.settings, ...settings };
  }
}

import VanillaCalendar from 'vanilla-calendar-pro';
import type { IOptions, ISettings } from 'vanilla-calendar-pro/types';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';
 
// use the types in your code
import class Example {
  init() {
    const options: IOptions = {
      settings: {
        selected: {
          dates: ['2024-08-20'],
        },
      },
    };
 
    const calendar = new VanillaCalendar('#calendar', options);
    calendar.init();
 
    const newOptions: IOptions['settings'] = {
      selected: {
        dates: ['2024-08-22'],
      },
    };
 
    this.changeSetting(calendar, newOptions as ISettings);
    calendar.update({ dates: true });
  }
 
  changeSetting(calendar: VanillaCalendar, settings: ISettings) {
    calendar.settings = { ...calendar.settings, ...settings };
  }
}

Locally or via CDN

If you want to use CDN, insert the scripts and styles into your HTML document from the «Connection via CDN».

html

<html>
  <head>
    <link href="./vanilla-calendar.min.css" rel="stylesheet">
    <script src="./vanilla-calendar.min.js" defer></script>
  </head>
  <body>
    <div id="calendar"></div>
 
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const calendar = new VanillaCalendar('#calendar');
        calendar.init();
      });
    </script>
  </body>
</html>

html

<html>
  <head>
    <link href="./vanilla-calendar.min.css" rel="stylesheet">
    <script src="./vanilla-calendar.min.js" defer></script>
  </head>
  <body>
    <div id="calendar"></div>
 
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const calendar = new VanillaCalendar('#calendar');
        calendar.init();
      });
    </script>
  </body>
</html>

Now, you have a simple calendar with default parameters. You can customize it to suit your needs, as described in other sections of the documentation.

Edit this page on GitHub

On this page

HTML
JavaScript
TypeScript
Locally or via CDN