calendula v0.10.0

Calendula

Особенный календарь 📅 на JavaScript

Возможности:

• эргономичный дизайн;
• отсутствие зависимостей от сторонних библиотек;
• отложенная инициализация;
• темы оформления;
• подсветка праздничных дней: ru, tr и uk;
• локализация.

Поддержка в браузерах:

• Internet Explorer 11 и выше;
• Mozilla Firefox 46 и выше;
• Google Chrome 67 и выше;
• Safari 8 и выше.

Примеры

• Все темы
• Расширенный
• Цветные подсказки
• Моя тема
• Простой

Подключение

npm install calendula

<link rel="stylesheet" href="node_modules/calendula/dist/calendula.all.css" />
<script src="node_modules/calendula/dist/calendula.all.js"></script>

Для подключения только нужной локали и темы:

<link rel="stylesheet" href="node_modules/calendula/dist/calendula.css" />
<link rel="stylesheet" href="node_modules/calendula/dist/themes/default.css" />
<script src="node_modules/calendula/dist/calendula.js"></script>
<script src="node_modules/calendula/dist/locales/en.js"></script>

Или воспользуйтесь инструментом для сборки.

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

var c = new Calendula({
    theme: 'ios',
    locale: 'en',
    value: '2018-10-11'
    //...
});

Поддерживаемые форматы дат:

• 2018-11-22 2018/11/22 2018.11.22
• 22-11-2018 22/11/2018 22.11.2018
• new Date(2018, 11, 12)
• 1418328000000
• {day: 22, month: 10 /* 0-11 */, year: 2018}

API

.open()

Открыть календарь.

.close()

Закрыть календарь.

.toggle()

Открыть/закрыть календарь.

.isOpened()

Проверка открытия календаря.

.setting(name, value)

Получить или установить значение настройки.

.on(type, callback)

Установить событие.

c.on('select', function(e, data) {
  console.log(data.day, data.month, data.year);
});

.off(type, callback)

Снять событие.

.title.set(data)

Установить цветную подсказку на дату.

c.title.set({date: '2018-12-15', text: 'Hello world!', color: 'red'});

c.title.set([
    {date: '2018-12-11', text: 'Hello world!', color: 'red'},
    {date: '2018-12-12', text: 'Hello world!', color: 'orange'},
    {date: '2018-12-13', text: 'Hello world!', color: 'blue'}
]);

.title.remove(date)

Удалить цветную подсказку.

c.title.remove('2018-12-15');

c.title.remove(['2018-12-11', '2018-12-12', '2018-12-13']);

.title.removeAll()

Удалить все цветные подсказки.

.destroy()

Уничтожить календарь: привязку событий, DOM-элементы и пр.

События

open

Календарь открыт.

close

Календарь закрыт.

select

Выбрана дата.

Разработка

Тесты:

npm test

Пересборка:

npm run build

Лицензия

MIT License