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

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

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

Использование

Теперь, после того как вы установили VanillaCalendar, вы можете создать свой первый календарь. VanillaCalendar можно использовать в сочетании с «Input» или статически без «Input».

Практически на всех страницах этого раздела используется самый простой вариант — статически без «Input». Если вас интересует, как этот календарь можно использовать в сочетании с «Input», посетите страницу «Выбор даты в input».

HTML

Создайте HTML-тег с любым уникальным CSS-селектором в любом месте вашей страницы, каледарь будет ссылаться на него и использовать в качестве идентификатора.

В качестве примера в этой документации будет используеться атрибут «id» со значением «calendar».

html
<html>
  <head>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>
html
<html>
  <head>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

JS

Если вы установили VanillaCalendar с помощью NPM или Yarn, вам нужно импортировать JavaScript и необходимые стили. Если вы подключили VanillaCalendar локально или использовали CDN, вы можете пропустить этот шаг.

js
// JS Script
import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
 
// Basic styles
import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 
// Additional styles
import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';
js
// JS Script
import VanillaCalendar from '@uvarov.frontend/vanilla-calendar';
 
// Basic styles
import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css';
 
// Additional styles
import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css';
import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css';

Файл «vanilla-calendar.min.css» содержит свойства скелета календаря, другие файлы css в каталоге «themes» содержат только цветовую схему календаря.

Календарь автоматически отображает тему, используемую в системе пользователя. Вы можете отключить это поведение по умолчанию и принудительно установить любую из тем. В этом случае вам не нужно импортировать все темы.

Теперь создайте экземпляр VanillaCalendar с параметрами по умолчанию и инициализируйте его.

js
const calendar = new VanillaCalendar('#calendar');
calendar.init();
js
const calendar = new VanillaCalendar('#calendar');
calendar.init();

Полный пример с файлами html и js можно просмотреть в песочнице, для этого нажмите кнопку «Открыть» вверху справа.

Локально или CDN

Если вы хотите использовать CDN, вставьте скрипты и стили в ваш HTML-документ из раздела «Подключение через CDN».

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>
    <div id="calendar"></div>
 
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const calendar = new VanillaCalendar('#calendar');
        calendar.init();
      });
    </script>
  </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>
    <div id="calendar"></div>
 
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const calendar = new VanillaCalendar('#calendar');
        calendar.init();
      });
    </script>
  </body>
</html>

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