Календарь событий PHP + Javascript
Недавно возникла потребность создать календарь событий, где каждая дата в календаре будет подсвечена ссылкой, если какое-нибудь событие присутствует для каждого числа. Если мне разрешат оставить ссылку, здесь демонстрация работы календаря.
Задача вроде бы не сложная, но среди немногочисленных решений в интернете я не нашел подходящего по следующим причинам: слишком сложный и непонятный код, медленные запросы к БД (это особенно ощущается, если в базе много записей), использование библиотеки jQuery, к которой я отношусь не очень хорошо.
Итак, к плюсам моего календаря можно отнесли следующее:
Логика
Календарь генерируется средствами php для текущего месяца. Для каждого дня проверяем нет ли записей в БД, если есть, — формируем ссылку на событие. Дописываем javascript код для перелистывание месяцев, который обращается к скрипту через ajax. Задача усложняется тем, что события растянуты во времени, то есть, начинаются в один день, а заканчиваются через несколько дней или даже месяцев. На всем временном промежутке существование события нужно его подсветить ссылкой для каждого дня.
Генерируем календарь на PHP
Таким образом, мы выбрали все записи, которые есть в текущем месяце.
Дальше самое интересное: заполняем обходочный массив. Для того, чтобы не крутить лишний раз все заново, если находится соответствие, элемент массива удаляется и следующий цикл имеет меньше итераций.
Собственно, сам календарь:
Javascript код для перематывание месяцев
Он немного упрощен для наглядности (отсутствуют эффекты скольжения):
Закрываем тег таблицы:
Выводы
Таким образом получился простой и легко встраиваемый календарь событий, который быстро работает и легко настраивается, работающий на чистом PHP+javascript без дополнительных библиотек.
Верстаем flex-календарик
Идет 2018 год, модные пацаны давно уже верстают на grid, а я все на третьем бутстрапе сижу с col-md кочерячусь, мельком поглядывая на четвертый.
Решил я, что это не дело, и стоит немного знания освежить, но у grid вроде как поддержка пока хромает, а вот flex технологию уже даже утюги поддерживают.
Вот и решил его освоить. И процессом усвоения с вами поделится. В общем, будем верстать календарик на весь год.
Результат будет выглядеть примерно вот так:
Так получилось, что я адепт vue, и поэтому для рендера буду использовать его. Для работы с датами буду использовать библиотечку moment, можно и без нее обойтись, но мне с ней привычнее.
Подготовка
Устанавливаем vue-cli, если у вас её еще нет:
создаем проект на базе шаблона webpack-simple, я буду использовать scss (в основном для комментов), поэтому когда визард спросит вас
ответьте y(es), в общем запускаем:
добавим библиотечку moment.js
очищаем файлик App.vue
Создадим файлик Calendar.vue:
подключим компоненту глобально в main.js
добавим компоненту в App.vue
Если все верно сделали, то увидим слово «Календарь» на белом фоне.
Готовим данные
Прежде чем что-то рисовать надо подготовить данные для календаря. Я предлагаю упихать данные по году в массив из месяцев. В свою очередь, каждый месяц будет представлять собой объект вида:
то бишь название месяца и массив из недель. Каждая неделя будет представлять собой объект где к каждому дню (от 1 до 7) будет привязана дата и может еще какая-нибудь мета информация:
переключимся на файлик Calendar.vue, и обновим часть ответственную за скрипт:
Можно заглянуть в vue-devtools и увидеть там:
Верстаем
Ну давайте чего-нибудь уже выведем. Сначала научимся верстать один месяц, а потом, как освоимся, выведем все остальные. В общем, правим шаблон Calendar.vue:
Сначала заставим отображать даты в нашей неделе в ряд, для этого поправим стиль:
теперь укажем, что каждый день должен занимать одинаковое количество места в нашем ряду:
Ну вроде поприличнее стало, только цифры таки скачут. Происходит это потому, что flex-grow по сути распределяет пустое пространство, а текст цифр в это пустое пространство не входит, поэтому, чтобы ячейки с цифрами стали действительно равными надо указать в стиле, чтобы ширина текста не учитывалась. Для этого установим свойству flex-basis на ноль.
Если не совсем понятно что я говорю, попробуйте поизучать данную картинку:
Ну как? Правим стиль:
Я думаю мы теперь готовы к тому, чтобы попробовать вывести все месяцы, правим шаблон:
Отлично, у нас уже своего рода респонсивный календарь:
Но нам этого мало, у нас календарь отображается в столбик, как завещал дедушка div, а нам бы в строчку… Сделаем по аналоги. Только что мы каждую неделю назначили flex контейнером для ее дней. А теперь наш блок year назначим flex контейнером для его месяцев. Добавим стили:
причина сей каши в том, что по умолчанию flex не делает переносов, а пытается все отобразить в одну строчку, ну и соответственно сжимает покуда сил хватает, а их не хватает. Чтобы включить режим переносов, надо в нашем контейнер year добавить свойство flex-wrap, сделаем это:
Ну, эээ… типа получше стало, хотя б переносит:
Тут воздух маловато, но нам кстати так даже интереснее. Очевидно, что лучше всего чувствуют себя ноябрь и декабрь, но так как мы за равенство, то давайте ужмем их, чтобы сильно не выделялись.
Чтобы ужать, надо убрать flex-grow: 1 у month, (ток добавили, теперь удалять. ), который отвечает за растяжение в рамках строки:
За то как будут располагаться последние два (на самом деле не только за них) висящих элемента отвечает justify-content в стиле контейнере, по умолчанию он равен flex-start. Можно выровнять в конец.
Вот гифка с разными значениями:
Так как я планирую, что у меня будет всегда одинаковое количество месяцев в строке, и хочу чтобы они занимали все свободное место, то я пожалуй верну flex-grow: 1; обратно, и добавлю немного воздуха:
Еще раз вернусь к justify-content и flex-grow: 1. Сравните две гифки, на первой у month flex-grow = 1, на второй — свойство отсутствует:
Какой вариант вам больше по душе, решайте сами.
Добавим строчку с днями недели. Сначала добавим вычислимое свойство в скрипт
а теперь отобразим их в шаблоне:
Я хочу чтобы воскресенье у меня было красненькое, давайте добавим динамический стиль к узлу .day:
А теперь подкорректируем стили, чуток красоты наведем:
Ну и последние штрихи: добавим возможность менять год и сделаем фиксированный заголовок средствами flex.
Переключимся на App.vue файл, и откорректируем шаблон:
добавилась строчка с годом, пока, как видно, не фиксированная:
Подправим стили в App.vue, уберем отступы в body, установим высоту html и body на всю высоту окна, и сделаем заголовок покрасивше, я намеренно использую два узла style, один для глобальных стилей второй для локальных:
Идея создания фиксированного заголовка на flex заключается в использовании двух вложенных контейнеров flex, один из которых ограничивает высоту всего содержимого, а второй, вложенный, использует flex-direction: column.
Классно, да? Вы можете даже сделать футер:
Ну и давайте кнопки для переключения года добавим:
Воспользуемся уже полученными знаниями, и сделаем заголовок более flex-образным, правим стили:
Хм… что-то тут не так. Чет наши заголовки прям сдавило и верстка поплыла. К сожалению это тот момент, который я не до конца понял почему так произошло. Но как я полагаю, это из-за того что display: flex задает динамическую высоту, и находясь внутри другого flex контейнера, ориентируется на размеры заданные своим родителем.
В общем, чтобы это вылечить, надо запретить flex контейнеру внутри которого находится наш header сжимать его размеры, для этого добавим свойство flex-shrink:
Ну вот и все, теперь у вас есть flex-календарь на любой год!
В это статье не удалось показать все возможности flex, но общий подход работы с ним, думаю, отразить получилось.
Я надеюсь, что статья поможет тем, кто как и я застрял в css-временах где-то между 3-м и 4-м бутстрапом, сделать свои первые шаги навстречу современному css.
Добавляем календарь на сайт, используя Jalendar 2
Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
На любом веб-сайте есть потребность в календаре. Проблема со многими календарными программами заключается в повторном использовании. Они часто работают только с одной системой управления контентом (CMS). Когда вам нужно перейти на другую, они не работают.
Если вы создаете свой собственный сайт со статическими файлами или своей собственной CMS, то вам обычно приходится разрабатывать собственный календарь. Это была моя дилемма с CMS GoPress, которую я написал. Затем на CodeCanyon я нашел Jalendar 2.
Загрузка и распаковка
Первое, что вам нужно сделать, это купить Jalendar 2 на CodeCanyon.
Jalendar 2
После загрузки ZIP-файла Jalendar 2 распакуйте его в свой рабочий каталог. Файл zip должен содержать следующие файлы:
В верхнем каталоге есть две папки (js и style) и примеры HTML файлов. Каталог js содержит JavaScript для программы Jalendar 2. Он также содержит версию jQuery, которую он использует.
Базовый календарь
В корневой папке создайте файл с названием Basic.html и вставьте туда этот код:
Строки с 17 по 19 содержат JavaScript код для отображения календаря. Для поиска id div’а и выполнение на нём функции jalendar() используется jQuery.
Календарь Jalendar по умолчанию
Когда вы загрузите этот файл в свой браузер, вы увидите календарь приятного синего цвета. Вы можете использовать стрелки вверху, чтобы перейти к предыдущему или следующему месяцу. Этот календарь будет отлично смотреться на любом сайте!
Добавление событий
Отображать события в календаре довольно просто. Создайте серию div ‘ов событий внутри div календаря. div события должен выглядеть вот так:
Теперь перезагрузите страницу и вы увидите это событие.
Событие добавлено в основной календарь
При выборе даты события, будет показан текст, который вы предоставили, внизу календаря. Вы можете закрыть список событий нажав на кнопку Close внизу.
Настройка Jalendar 2
Пока что я использовал только базовые особенности Jalendar 2. Вы можете настроить его с 17 различными свойствами. Полный список вы можете посмотреть на сайте Jalendar 2.
Первое что я собираюсь сделать, это подстроить календарь вот мой веб-сайт. Основной цвет моего сайта — коричневый. Мне нравится этот голубой, но слегка не подходит. Меняем код скрипта на:
Jalendar с пользовательскими настройками
С этими настройками, я близок к тому виду, который мне нужен. Но я хочу чтобы углы были более закругленные. Для этого нет опции, но я могу посмотреть как это сделать с помощью инспектора.
Jalendar с моими настройками
Jalendar с моими настройками
Таким образом, очень прост редактировать выбранные CSS свойства. Исправлять оригинальный CSS файл будет посложнее. Также, это позволяет держать ваши изменения отдельно. При обновлении на новую версию, вы не потеряете изменения, которые вы сделали.
Добавляем календарь на веб-сайт под управлением goPress
Теперь, когда я сделал такой внешний вид, какой я хочу, я могу добавить его на свой веб-сайт. Для этого руководства я подготовил копию моего goPress сервера для загрузки, тот, который я использую с моей темой сайта. Обратитесь к руководству goPress Server по созданию сервера.
Добавьте следующий код в файл site/parts/sidebar.html :
Код SyntaxHighlighter.all() для включения подсветки кода всей страницы. Остальное я скопировал из кода последнего тестирования Jalendar 2, из предыдущего раздела.
Тестовый веб-сайт с Jalendar 2
Когда вы запускаете сервер goPress, вы должны увидеть страницу выше. Календарь, отцентрированный по боковой колонке, с правильным цветом подстать теме.
Добавляем выбор даты (Date Picker)
Временами, вам может потребоваться выбор даты, прямо на вашей странице. Jalendar 2 отлично подходит для этого. В файл site/main.html добавьте следующие строки:
А затем добавьте следующий код в файл site/js/02-site.js :
Этот код идёт прямо после кода для инициализации календаря в боковой панели. Свойство type установлено в selector для создания селектора даты. Свойство selectingBeforeToday установлено в false. Это гарантирует, что пользователь не сможет выбрать дату до текущей даты. Если свойству selectionAfterToday устанавливается значение true. Это гарантирует, что пользователь может выбирать даты после текущей даты.
Тестовый веб-сайт с Jalendar 2
В результате, выборщик даты выглядит точно также, как календарь сбоку. Есть два основных отличия. Он показывает текущую дату и пользователь может выбрать только даты после текущей даты. При выборе даты, она размещается в текстовом поле над календарем.
Заключение
С правильными инструментами, добавлять что-либо на ваш веб-сайт довольно просто. Jalendar 2 очень просто интегрируется с любыми веб-сайтами и выглядит очень хорошо. Теперь, вам осталось только добавить его на ваш веб-сайт. На CodeCanyon есть больше штучек, которые вы можете добавить на ваш сайт.
КАЛЕНДАРЬ
Календарь для сайта
Данную страницу сайта создал для получения практических навыков использования JavaScript. Показываю работу кода автоматического календаря, спрограммированного во время изучения этой технологии.
Сделал его начало с 2010 года, и по 2021 год включительно.
Хороший календарь
При старте: показывает текущий год, месяц и день (его сделал бирюзовым).
Этот календарь хорош тем, что может рассчитывать, сколько дней в месяце, и какими днями недели будут числа в выбранных месяцах и годах, подсвечивать нужную дату.
Настройка дизайна календаря
Этот календарь имеет достаточно много настроек в коде, позволяющих настраивать его дизайн, как угодно.
В нём можно сделать так, чтобы текущее число выделялось не бирюзовым («aqua»), а любым другим, каким только захочется цветом.
Все значения указал, начиная с КОНЦА выражения!
Таким образом, меняя значения цветов в указанной строчке кода функции, можно настроить дизайн данного календаря, подходящим под любой сайт.
Как сделать календарь
Чтобы установить на своем сайте календарь, нужно написать два JavaScript-кода.
Рекомендуется «вынести» этот код в отдельный js-файл, чтоб не прописывать на каждой странице, а просто «подгружать» его на нужных страничках сайта.
В данном случае я так и сделал, и код моего календаря «живёт» в отдельном каталоге.
**Prim. Скачать себе на компьютер этот самый большой скрипт можно у меня же на сайте в разделе «Полезное» из подраздела «Полезная информация о JavaScript и jQuery».
Прописывание JavaScript-кодов
Важно!
В одну строку следует объединять строчки, которые заканчиваются на знак » + «, либо » ‘ «, или » = «.
Очерёдность кодов календаря
Другие календари для сайта
Кроме упомянутых здесь, на этой странице, способов сделать календарь для своего сайта, есть, разумеется, и другие.
Сейчас, практически, любой поисковик, будь то «Yandex», «Mail», или «Google», даёт возможность подключить к сайту календарь. Достаточно будет вставить на свой сайт код, который они дают любому желающему пользователю уже готовый.
Однако! Нужно помнить! Подробно разобранный на этой странице способ сделать календарь будет работать только на «ручных» сайтах, т.е. сделанных исключительно БЕЗ использования всевозможных конструкторов, и всяких там разных CMS.
Примеры на этой странице сделаны во время изучения, и приведены ДЛЯ изучения технологии JavaScript!
Стрелка «НАЗАД» вернёт обратно в раздел «JavaScript» для просмотра других примеров использования этой технологии.
Лучшие плагины и библиотеки JavaScript для создания календарей
Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Перевод статьи «Top JavaScript calendar plugins».
Календари это важная часть нашей жизни. Сегодня люди, в основном, пользуются ими в электронном виде. Их можно найти где угодно, включая разнообразные приложения для заказа билетов, для путешествий, для менеджмента проектов и т. п.
Календарь может понадобиться и пользователям сайтов. Например, для выбора даты при заполнении какой-нибудь формы.
Несомненно, этот компонент является очень важным для бизнес-приложений. Только представьте, к каким последствиям для бизнеса может привести плохо настроенный или плохо разработанный календарь.
В общем, такой вещи как календарь следует уделить особое внимание при разработке приложения или сайта.
В этой статье мы рассмотрим критерии отбора хорошего календаря для веб-приложений. Также мы познакомим вас с лучшими библиотеками в различных фреймворках, на основе которых вы сможете создавать собственные решения.
Чем отличается хороший календарь для веб-приложений?
Мы разделили наши критерии оценки на 4 блока:
Топ «календарных» библиотек
Мы включили в наш список разные календарные библиотеки, основанные на 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
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
Календарь Mobiscroll это отзывчивый мультифреймворковый календарь, который прекрасно работает в мобильных и веб-приложениях.
В этом календаре пользователи могут выбирать не только дни по одному, но и целые недели. Также есть возможность легко менять месяц и год, без непрерывного свайпинга.
Mobiscroll помогает пользователям визуализировать два или три месяца подряд — благодаря одновременному отображению нескольких месяцев. В ячейках дней может быть представлена полезная информация.
Используя Mobiscroll, можно подсветить дни, имеющие особое значение для пользователей. А чтобы дополнительно указать, чем именно так важен определенный день, можно использовать значки и текст.
Продукт поддерживает локализацию и многоязычные приложения. Он предоставляет UI с правильными культурными настройками. Также включена возможность RTL.
React-календарь Syncfusion
Календарь 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
Это очень хороший выбор, если все, что вам нужно, это календарь. Есть пример интеграции с Google maps, так что при желании можно расширить базовый функционал. Страница документации содержит набор руководств, которые могут пригодиться новичкам. Поначалу вас может смутить обилие контейнеров
Этот продукт обладает следующими особенностями:
Отличный вариант для создания корпоративного продукта. Компания предоставляет хорошую поддержку и имеет гибкие цены.
Заключение
Мы рассмотрели как базовые, так и более продвинутые календари. Если вам нужно простое решение, легко настраиваемое, пускай и без поддержки, – выбирайте один из бесплатных вариантов. Что касается более сложных продуктов, мы включили в наш список и платные решения с хорошей поддержкой.
