Установка и использование
Vanilla Calendar Pro легко интегрируется в любые проекты. Существует несколько способов установки, в зависимости от того, как вы предпочитаете управлять зависимостями и сборкой вашего проекта.
Установка через пакетный менеджер
Самый распространенный способ установки Vanilla Calendar Pro — это использование пакетного менеджера. Этот метод идеально подходит для проектов с использованием Node.js и современных сборщиков.
- Установите пакет:
npm install vanilla-calendar-pro
# or
yarn add vanilla-calendar-pro
# or
pnpm add vanilla-calendar-pro
- Создайте HTML-элемент в теле вашего документа с произвольным CSS селектором:
<html>
<head>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
В качестве демонстрации в этом разделе мы будем использовать
#calendar
в качестве селектора CSS, но вы можете создать и использовать любой другой селектор.- Импортируйте скрипт, создайте экземпляр календаря и инициализируйте его в вашем JavaScript или TypeScript файле.
import { Calendar } from 'vanilla-calendar-pro';
const calendar = new Calendar('#calendar', {
// Ваши настройки
});
calendar.init();
- Импортируйте стили в этом же файле. Файл
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'; // Темная тема
// или любая другая пользовательская тема...
- Полный пример простой инициализации без каких-либо пользовательских настроек:
Как вы, возможно, заметили в этом примере, мы используем плоский вид календаря без использования поля ввода «Input», если вас интересует, как можно интегрировать календарь в «Input», посмотрите этот пример.
Локально или 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>