v2.8.4
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

Installation

VanillaCalendar is developed in native JS using TypeScript and has no external dependencies. You can easily incorporate it into your project by following the instructions below.

Try VanillaCalendar

To simply try out VanillaCalendar, you can use the online code editor.

You can edit it directly or open it in a new tab. Most pages in this documentation include such sandboxes.

Installation using NPM or Yarn

You can install VanillaCalendar using NPM or Yarn.

shell
npm install @uvarov.frontend/vanilla-calendar
# or
yarn add @uvarov.frontend/vanilla-calendar
shell
npm install @uvarov.frontend/vanilla-calendar
# or
yarn add @uvarov.frontend/vanilla-calendar

Local Installation

To include VanillaCalendar locally, follow these steps:

  • Download the archive with the latest version of VanillaCalendar from this link.
  • Unzip the archive into your project's folder.
  • Include all the necessary files in your HTML document.
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>
    <!-- Your content and initialization of VanillaCalendar -->
  </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>
    <!-- Your content and initialization of VanillaCalendar -->
  </body>
</html>

Connection via CDN

VanillaCalendar is also available through a CDN. You can insert the following scripts and styles into your HTML document.

html
<html>
  <head>
    <!-- Plugin CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/themes/light.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css" rel="stylesheet">
    <!-- Plugin JS -->
    <script src="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.js" defer></script>
  </head>
  <body>
    <!-- Your content and initialization of VanillaCalendar -->
  </body>
</html>
html
<html>
  <head>
    <!-- Plugin CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/themes/light.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css" rel="stylesheet">
    <!-- Plugin JS -->
    <script src="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.js" defer></script>
  </head>
  <body>
    <!-- Your content and initialization of VanillaCalendar -->
  </body>
</html>