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

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
import VanillaCalendar from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';
js
import VanillaCalendar from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

Помимо файла «vanilla-calendar.min.css», содержащего все возможные стили календаря, в каталоге «build» существуют отдельные файлы стилей. Пожалуйста, включите их вместо «vanilla-calendar.min.css», если считаете это необходимым.

js
// Only layout calendar
import 'vanilla-calendar-pro/build/vanilla-calendar.layout.min.css';
 
// Themes
import 'vanilla-calendar-pro/build/themes/light.min.css';
import 'vanilla-calendar-pro/build/themes/dark.min.css';
js
// Only layout calendar
import 'vanilla-calendar-pro/build/vanilla-calendar.layout.min.css';
 
// Themes
import 'vanilla-calendar-pro/build/themes/light.min.css';
import 'vanilla-calendar-pro/build/themes/dark.min.css';

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

Теперь создайте экземпляр 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>
    <link href="./vanilla-calendar.min.css" rel="stylesheet">
    <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>
    <link href="./vanilla-calendar.min.css" rel="stylesheet">
    <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>

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