v2.8.4
💢 Пример использования

biletiki.store — пример сайта для поиска авиабилетов и отелей с помощью vanilla-calendar.

Начало работы

Установка

VanillaCalendar разработан на нативном JS с использованием TypeScript и не имеет внешних зависимостей. Вы можете просто включить его в свой проект, следуя инструкциям ниже.

Попробовать VanillaCalendar

Чтобы просто попробовать VanillaCalendar, вы можете воспользоваться онлайн-редактором кода.

Вы можете отредактировать его напрямую или открыть в новой вкладке. Большинство страниц в этой документации содержат такие песочницы.

Установка с помощью NPM или Yarn

Вы можете установить VanillaCalendar с помощью NPM или 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

Установка локально

Чтобы подключить VanillaCalendar локально, выполните следующие шаги:

  • Скачайте архив с последней версией VanillaCalendar по ссылке.
  • Распакуйте архив в папку вашего проекта.
  • Включите все необходимые файлы в вашем 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>
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>

Подключение через CDN

VanillaCalendar также доступен через CDN. Вы можете вставить следующие скрипты и стили в ваш 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>
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>