💢 Usage example
biletiki.store — a website example for searching for flight tickets and hotels using vanilla-calendar.
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>