Установка и использование

Vanilla Calendar Pro легко интегрируется в любые проекты. Существует несколько способов установки, в зависимости от того, как вы предпочитаете управлять зависимостями и сборкой вашего проекта.

Установка через пакетный менеджер

Самый распространенный способ установки Vanilla Calendar Pro — это использование пакетного менеджера. Этот метод идеально подходит для проектов с использованием Node.js и современных сборщиков.

1. Установите пакет:

npm install vanilla-calendar-pro
# or
yarn add vanilla-calendar-pro
# or
pnpm add vanilla-calendar-pro

2. Создайте HTML-элемент в теле вашего документа с произвольным CSS селектором:

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

3. Импортируйте скрипт, создайте экземпляр календаря и инициализируйте его в вашем JavaScript или TypeScript файле.

import { Calendar } from 'vanilla-calendar-pro';
 
const calendar = new Calendar('#calendar', {
  // Ваши настройки
});
calendar.init();

4. Импортируйте стили в этом же файле. Файл index.css содержит в себе сетку для макета календаря, светлую и темную тему.

import 'vanilla-calendar-pro/styles/index.css';

Вы так же имеете возможность подключить стили для макета календаря и темы отдельно, вот так:

import 'vanilla-calendar-pro/styles/layout.css'; // Только скелет
import 'vanilla-calendar-pro/styles/themes/light.css'; // Светлая тема
import 'vanilla-calendar-pro/styles/themes/dark.css'; // Темная тема
// или любая другая пользовательская тема...

5. Полный пример простой инициализации без каких-либо пользовательских настроек:

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

Если вам нужно быстро интегрировать Vanilla Calendar Pro без использования сборщиков или пакетных менеджеров, вы можете подключить его через CDN или скачать архив с актуальной версий и подключить локально.

<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/styles/index.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/index.js" defer></script>
  </head>
  <body style="display: flex; align-items: start">
    <div id="calendar"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        // Деструктуризация конструктора Calendar
        const { Calendar } = window.VanillaCalendarPro;
        // Создайте экземпляр календаря и инициализируйте его.
        const calendar = new Calendar('#calendar');
        calendar.init();
      });
    </script>
  </body>
</html>

extensions

motion предоставляет анимации и жесты. time отвечает за выбор времени в формате 12/24 часа. annotations добавляет попапы, модификаторы дат и тултип диапазона. weeks предоставляет недельный вид, сворачивание, номера недель и обработчики кликов по дням и номерам недель. months отображает несколько месяцев и управляет их навигацией. Сборщик ESM может удалить расширения, которые вы не импортируете и не подключаете.

import { Calendar, motion, time, annotations } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css';
 
const calendar = new Calendar('#calendar', {
  extensions: [motion, time, annotations],
  animation: true,
  selectionTimeMode: 24,
  popups: { '2026-09-21': { html: 'Event' } },
});
calendar.init();

Календарь в инпуте, выбор дат и диапазонов, выбор месяца и года остаются в ядре. Обычные заголовки дней недели не требуют расширения. Полная сборка для обычного <script> / CommonJS автоматически включает все пять расширений. Импорты CSS не меняются.

Модульные стили

Существующие импорты styles/index.css, styles/layout.css и styles/themes/*.css остаются полными и совместимыми. Для уменьшения CSS подключайте только нужные части. Регистрация расширения JavaScript сама по себе не загружает CSS.

Выборочное подключение CSS описано в справочнике стилей. Старые полные файлы поддерживаются; примеры подключают только необходимые части.