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:
npm install @uvarov.frontend/vanilla-calendar
# or
yarn add @uvarov.frontend/vanilla-calendar
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>
<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>
<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>
<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>
<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>