Лучшие плагины и библиотеки JavaScript для создания календарей

Перевод статьи «Top JavaScript calendar plugins».

Календари это важная часть нашей жизни. Сегодня люди, в основном, пользуются ими в электронном виде. Их можно найти где угодно, включая разнообразные приложения для заказа билетов, для путешествий, для менеджмента проектов и т. п.

Календарь может понадобиться и пользователям сайтов. Например, для выбора даты при заполнении какой-нибудь формы.

Несомненно, этот компонент является очень важным для бизнес-приложений. Только представьте, к каким последствиям для бизнеса может привести плохо настроенный или плохо разработанный календарь.

В общем, такой вещи как календарь следует уделить особое внимание при разработке приложения или сайта.

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

Чем отличается хороший календарь для веб-приложений?

Мы разделили наши критерии оценки на 4 блока:

• Документация. Какое бы программное обеспечение вы ни использовали, жизненно важно, чтобы оно имело хорошую документацию. Это позволит вам изучить его работу, узнать, как его собрать или переделать. Продукт без документации вообще не имеет права на существование.
• Кастомизация. В хорошей библиотеке должна быть возможность добавлять или исключать отдельные части функционала. Это особенно касается ПО с открытым исходным кодом.
• Совместимость. Кто захочет посещать сайт с календарем, работающим только в последних версиях Chrome? Многие бизнес-приложения по-прежнему работают в legacy-браузерах.
• Пользовательский опыт. Спросите себя, должен ли плагин быть удобным для ваших пользователей? Должен ли он вписываться в общий стиль продукта? В конечном счете, в библиотеке самое главное — то, как она решает вашу проблему. По сравнению с этим даже качество документации отходит на второй план.

Топ «календарных» библиотек

Мы включили в наш список разные календарные библиотеки, основанные на React, Angular, Vue, Bootstrap и jQuery. Одни из них более богаты функционалом, другие легче кастомизировать. Надеемся, этот каталог поможет вам в вашей работе.

Fullcalendar.io

Звезд на GitHub: 9400
Стоимость и лицензия: MIT
Сайт/демо-версия: https://fullcalendar.io/
Github: https://github.com/fullcalendar/fullcalendar
Способ инсталляции: NPM, Yarn
Фреймворки: React, Vue, Angular

Хороший выбор для тех, кто знает, чего хочет. Здесь нет подробного пошагового руководства, в котором бы описывалось, как достичь цели. Есть только короткий Getting Started Guide и страница с документацией.

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

В календаре можно планировать ресурсы и помечать события. Есть просмотр с временной шкалой и различные темы оформления.

Солидный плюс — наличие документации для разработки в React, Vue и Angular.

Календарь Tui

Звезд на GitHub: 7328
Стоимость и лицензия: MIT
Сайт/демо-версия: http://ui.toast.com/tui-calendar
Github: https://github.com/nhn/tui.calendar
Способ инсталляции: при помощи менеджера пакетов или CDN
Фреймворки: React, Vue, Angular wrappers

Tui это часть библиотеки TUI. Календарь создан на базе jquery, но есть возможность использования врапперов React, Angular и Vue. В календаре можно просматривать день, неделю, месяц (6 недель, 2 недели, 3 недели). Есть хорошая система управления метками и расписанием задач. Можно менять первый день недели, настраивать отображение даты.

Этот продукт полностью документирован и может быть установлен при помощи менеджеров пакетов или Content Delivery Network.

CLNDR

Звезд на GitHub: 2760
Стоимость и лицензия: MIT
Сайт/демо-версия: http://kylestetz.github.io/CLNDR/
Github: https://github.com/kylestetz/CLNDR
Способ инсталляции: при помощи менеджеров пакетов или CDN
Фреймворки: React, Vue, Angular wrappers

CLNDR.js это календарный jQuery-плагин. В отличие от большинства подобных плагинов он не генерирует разметку. Вместо этого вы предоставляете Underscore.js HTML-шаблон, а в ответ CLNDR предоставляет вам множество данных для использования в нем. HTML-шаблоны хорошо подходят для этой задачи благодаря своей гибкости, позволяющей нам определять, где именно в нашей разметке мы хотим разместить полученные данные.

CLNDR берет ваш шаблон и вставляет в него данные. Эти данные содержат все, что нужно для создания календаря.

Kendo UI Scheduler

Звезд на GitHub: 2160
Стоимость и лицензия: Apache License, $899 – $2199
Сайт/демо-версия: https://demos.telerik.com/kendo-ui/scheduler/index
Github: –
Способ инсталляции: менеджеры пакетов
Фреймворки: React, Angular, Vue, jQuery

Kendo UI это большой и хорошо развитый JavaScript-фреймворк. Он содержит множество виджетов и инструментов. Но если вы не планируете пользоваться другими компонентами этого фреймворка, помимо Scheduler Widget, возможно, не стоит его использовать.

Документация Kendo UI написана хорошо, можно просмотреть несколько демок с примерами кода. Кстати о коде: создание базового планировщика расписания и добавление в него функционала не отнимет много времени. Внешний вид календаря по умолчанию довольно простой, но это легко изменить.

React big calendar

Звезд на GitHub: 3254
Стоимость и лицензия: MIT
Сайт/демо-версия: http://intljusticemission.github.io/react-big-calendar/examples/index.html
Github: https://github.com/intljusticemission/react-big-calendar
Способ инсталляции: менеджеры пакетов
Фреймворки: React

React big calendar («большой календарь React») это календарь событий, построенный для React. Он создан в расчете на современные браузеры (читай: IE10+) и использует flexbox поверх классического подхода tables-ception.

Что касается формата даты и культурной локализации, в React big calendar эти вещи зависят от того, какую из двух библиотек даты и времени вы предпочтете: Moment.js или Globalize.js.

Можно воспользоваться готовым календарем, «из коробки», включающим скомпилированные CSS-файлы. Но, возможно, вы захотите подогнать внешний вид календаря под стиль вашего приложения. Для этого в React big calendar включены файлы SASS. Реализация SASS предоставляет файл с переменными цвета и размера — этот файл вы можете отредактировать, чтобы изменить стиль календаря.

Отзывчивый календарь Mobiscroll

Звезд на GitHub:–
Стоимость и лицензия: бесплатно, $95, $595
Сайт/демо-версия: https://mobiscroll.com/responsive-calendar
Github: –
Способ инсталляции: скопировать и вставить скрипт
Фреймворки: Angular, Ionic, React, jQuery, простой JS

Календарь Mobiscroll это отзывчивый мультифреймворковый календарь, который прекрасно работает в мобильных и веб-приложениях.

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

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

Используя Mobiscroll, можно подсветить дни, имеющие особое значение для пользователей. А чтобы дополнительно указать, чем именно так важен определенный день, можно использовать значки и текст.

Продукт поддерживает локализацию и многоязычные приложения. Он предоставляет UI с правильными культурными настройками. Также включена возможность RTL.

React-календарь Syncfusion

Звезд на GitHub: –
Стоимость и лицензия: $2495 – $4995 за все компоненты
Сайт/демо-версия: https://www.syncfusion.com/react-ui-components/react-calendar
Github: –
Способ инсталляции: скопировать и вставить скрипт
Фреймворки: Angular, Blazor, простой JS, Vue, React

Календарь Syncfusion предназначен для отображения даты и дней недели. Есть несколько вариантов просмотра — месяц, год, десятилетие — для быстрого перехода к нужной дате. Для ограничения возможностей выбора даты календарь поддерживает минимальные и максимальные, а также запрещенные значения дат. Продукт легковесный и легко настраиваемый.

Что касается внешнего вида, вы можете выбирать из нескольких тем, включая Material design. Помимо стандартной, встроенной темы, этот календарь предоставляет полный контроль над своим видом, позволяя подогнать его под стиль вашего приложения.

Календарь Angular

Звезд на GitHub: 1662
Стоимость и лицензия: MIT
Сайт/демо-версия: https://mattlewis92.github.io/angular-calendar/#/kitchen-sink
Github: https://github.com/mattlewis92/angular-calendar
Способ инсталляции: менеджер пакетов
Фреймворки: Angular

Этот продукт — календарный компонент для Angular 6.0+. Может отображать события для месяца, недели или дня. Шаблон очень настраиваемый. Вы можете создавать собственные компоненты вместо тех, которые не подходят для вашего проекта.

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

Календарь Bootstrap

Звезд на GitHub: 2867
Стоимость и лицензия: MIT
Сайт/демо-версия: http://bootstrap-calendar.eivissapp.com/
Github: https://github.com/Serhioromano/bootstrap-calendar
Способ инсталляции: менеджер пакетов
Фреймворки: Bootstrap

Полнофункциональный календарь, созданный на базе самого популярного HTML-фреймворка Twitter Bootstrap. Этот продукт можно использовать многократно (имеется в виду, что в нем нет UI). Все кнопки для переключения просмотра или загрузки событий сделаны отдельно друг от друга. В конечном итоге у вас получится ваш собственный уникальный дизайн календаря.

Но вместе с тем календарь основан на шаблонах: шаблоны лежат в основе всех видов просмотра, включая год, месяц, неделю и день. Вы можете с легкостью изменить вид календаря или его стиль, и даже добавить новый пользовательский вид просмотра. Подгонять стили можно, редактируя файл с переменными LESS.

Для наполнения календаря событиями используется AJAX. Вы предоставляете URL и просто возвращаете по нему список событий JSON. Языковые файлы для интернационализации подключены раздельно. Можно перевести календарь на свой язык. Праздники в календаре также отображаются в соответствии с вашим языком.

V-Calendar

Звезд на GitHub: 1316
Стоимость и лицензия: MIT
Сайт/демо-версия: https://vcalendar.io/
Github: https://github.com/nathanreyes/v-calendar
Способ инсталляции: менеджер пакетов
Фреймворки: Vue

V-Calendar это чистый и легковесный плагин для отображения простых календарей в Vue.js. Он использует атрибуты для украшения календаря различными визуальными индикаторами, включающими подсветку диапазона дат, точки, подчеркивания, стили содержимого, всплывающие подсказки.

Каждый атрибут может содержать один объект каждого типа и отображаться для отдельной даты, диапазона дат и даже сложных шаблонов дат вроде «пятница, через одну», «15-е число каждого месяца» или «последняя пятница каждого второго месяца».

Календарь Dhtmlx

Звезд на GitHub: –
Стоимость и лицензия: from $599
Сайт/демо-версия: https://dhtmlx.com/docs/products/dhtmlxCalendar/
Github: –
Способ инсталляции: менеджер пакетов
Фреймворки: Vue, Angular, React

Это очень хороший выбор, если все, что вам нужно, это календарь. Есть пример интеграции с Google maps, так что при желании можно расширить базовый функционал. Страница документации содержит набор руководств, которые могут пригодиться новичкам. Поначалу вас может смутить обилие контейнеров <div>, необходимых для работы этого календаря, но в целом процесс кодинга достаточно очевиден.

Этот продукт обладает следующими особенностями:

• кроссбраузерная совместимость
• поддержка IE11+
• полное управление при помощи JavaScript API
• возможность устанавливать неактивные даты
• настраиваемый первый день недели
• встроенная поддержка многоязычности
• 12- и 24-часовой формат времени
• 3 вида просмотра: календарь, месяц, год.

Отличный вариант для создания корпоративного продукта. Компания предоставляет хорошую поддержку и имеет гибкие цены.

Заключение

Мы рассмотрели как базовые, так и более продвинутые календари. Если вам нужно простое решение, легко настраиваемое, пускай и без поддержки, – выбирайте один из бесплатных вариантов. Что касается более сложных продуктов, мы включили в наш список и платные решения с хорошей поддержкой.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]