Copyright © 2023 MIT License. | Design and development by Yury Uvarov.
💢 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>

JS

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.

js
// JS Script
import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
 
// Basic styles
import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 
// Additional styles
import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
js
// JS Script
import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
 
// Basic styles
import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 
// Additional styles
import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';

The file «vanilla-calendar.min.css» contains the calendar's skeleton properties. Other CSS files in the «themes» directory contain only the color scheme of the calendar.

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.

js
const calendar = new VanillaCalendar('#calendar');
calendar.init();
js
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.

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>
    <!-- Plugin CSS -->
    <link href="./vanilla-calendar.min.css" rel="stylesheet">
    <link href="./themes/light.min.css" rel="stylesheet">
    <link href="./themes/dark.min.css" rel="stylesheet">
    <!-- Plugin JS -->
    <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>
    <!-- Plugin CSS -->
    <link href="./vanilla-calendar.min.css" rel="stylesheet">
    <link href="./themes/light.min.css" rel="stylesheet">
    <link href="./themes/dark.min.css" rel="stylesheet">
    <!-- Plugin JS -->
    <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.