Copyright © 2023 MIT License. | Design and development by Yury Uvarov.
Getting Started

Installation

The calendar is developed in native JS using TypeScript, without any dependencies. If you want to try VanillaCalendar, this section will help you get started.

Try VanillaCalendar

You don't need to install anything to try VanillaCalendar. Try editing this sandbox!

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

NPM

VanillaCalendar is available as an NPM package for use with a module builder:

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

It is also available as a pre-compiled js file that defines the window.VanillaCalendar global variable. This file can be downloaded and connected directly via the <script> tag. See an example of such a connection below in the CDN section.

CDN

Because VanillaCalendar is available as a package on NPM, you can connect it via any CDN that supports it, like jsdelivr.com.

Include all necessary files in 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>
  </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>
  </body>
</html>

Locally

To include all required files locally, download this archive vanilla-calendar.zip with the latest version of the plugin and include all required 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>
  </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>
  </body>
</html>