Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Calendar

Добавляем календарь на сайт, используя Jalendar 2

by
Read Time:9 minsLanguages:

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 2Jalendar 2Jalendar 2
Jalendar 2

После загрузки ZIP-файла Jalendar 2 распакуйте его в свой рабочий каталог. Файл zip должен содержать следующие файлы:

В верхнем каталоге есть две папки (js и style) и примеры HTML файлов. Каталог js содержит JavaScript для программы Jalendar 2. Он также содержит версию jQuery, которую он использует.

В своем проекте вы будете использовать jalendar.min.js. Он обеспечивает самое быстрое время загрузки вашего сайта. Автор говорит, что вы можете использовать любую версию jQuery 1.11.3 или новее. Но когда я попробовал jQuery 3.1.1, некоторые функции отвалились. Поэтому я просто использую копию jQuery, поставляемую с загрузкой.

Каталог стилей содержит файлы CSS для Jalendar 2. В каталоге стилей есть файл jalendar.less. Этот файл создает файлы jalendar.css и jalendar.css.map при обработке Less. Less это препроцессор CSS для более простого создания CSS файлов. Использование файлов Less потребуется только при внесении больших изменений в файлы стилей календаря. А так как, вы можете изменить цвет через настройки, в изменении файлов Less нет необходимости.

Базовый календарь

В рабочем каталоге этого проекта, создайте каталог js. Затем, скопируйте туда jalendar.min.js и jquery-1.11.3.min.js. Затем, создайте каталог css и положите туда файл jalendar.css.

В корневой папке создайте файл с названием Basic.html и вставьте туда этот код:

Это минимальная установка Jalendar 2. Это базовый шаблон HTML, для создания календаря. Строки 8 и 10 подгружают файлы для Jalendar 2. Строка 9 загружает jQuery. В строке 15 — HTML код для div, где будет находиться календарь. В id div'а можете написать что угодно. Class должен содержать слово jalendar. В противном случае, календарь не будет настроен должным образом.

Строки с 17 по 19 содержат JavaScript код для отображения календаря. Для поиска id div'а и выполнение на нём функции jalendar() используется jQuery.

Default Jalendar CalendarDefault Jalendar CalendarDefault Jalendar Calendar
Календарь Jalendar по умолчанию

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

Добавление событий

Отображать события в календаре довольно просто. Создайте серию div'ов событий внутри div календаря. div события должен выглядеть вот так:

<link to event details> это ссылка на страницу на вашем или другом сайте, для отображения деталей об этом событии. <date of event> это дата события. Формат даты по умолчанию dd-mm-yyyy. <title of the event> этот текст, показываемый внизу календаря, когда пользователь выбирает дату события. Добавьте следующие в HTML файл внутрь div'а календаря:

Теперь перезагрузите страницу и вы увидите это событие.

An Event Added to the Basic CalendarAn Event Added to the Basic CalendarAn Event Added to the Basic Calendar
Событие добавлено в основной календарь

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

Настройка Jalendar 2

Пока что я использовал только базовые особенности Jalendar 2. Вы можете настроить его с 17 различными свойствами. Полный список вы можете посмотреть на сайте Jalendar 2.

Первое что я собираюсь сделать, это подстроить календарь вот мой веб-сайт. Основной цвет моего сайта — коричневый. Мне нравится этот голубой, но слегка не подходит. Меняем код скрипта на:

Этот код настроен на показ любого дня через свойство customDay. Я устанавливаю там определенный день, таким образом, что когда вы будете тестировать это на своей системе, вы увидите тот же результат. 

Настройка цветов осуществляется свойствами color и color2. Свойство color устанавливает основной верхний цвет. Свойством color2 задается лёгкий градиент от верхнего цвета к нижнему цвету. Свойствами titleColor, weekColor, и todayColor настраиваются цвета заголовка, дней недели, и сегодняшний день календаря.

Формат dateType устанавливают формат даты для события и для свойства customDay.

Jalendar With Custom ParametersJalendar With Custom ParametersJalendar With Custom Parameters
Jalendar с пользовательскими настройками

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

Jalendar With Custom ParametersJalendar With Custom ParametersJalendar With Custom Parameters
Jalendar с моими настройками

В инспекторе, я могу переключать параметры CSS и определить, что нужно изменить чтобы получить требуемый результат.  По CSS пути .jalendar .jalendar-container .jalendar-pages можно задать скругленные уголки. Когда я задаю свойству border-radius значение 20px, получается что-то вроде этого.

Jalendar With Custom ParametersJalendar With Custom ParametersJalendar With Custom Parameters
Jalendar с моими настройками

Это уже ближе, но всё ещё есть проблемка. Нижняя кнопка "закрыть" оставляет легкий темный оттенок на нижних углах. Инспектор показал что за это отвечает .jalendar .jalendar-container .jalendar-pages .add-event .close-button. Поэтому потребуется добавить 2 правила оформления в HTML.

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

Добавляем календарь на веб-сайт под управлением goPress

Теперь, когда я сделал такой внешний вид, какой я хочу, я могу добавить его на свой веб-сайт. Для этого руководства я подготовил копию моего goPress сервера для загрузки, тот, который я использую с моей темой сайта. Обратитесь к руководству goPress Server по созданию сервера.

Добавьте следующий код в файл site/parts/sidebar.html:

Затем, вам нужно добавить jalendar.css каталог site/css. Файлы jquery-1.11.3.min.js иjalendar.min.js идут в каталог site/js. Так как файлы JavaScript зависимы от порядка загрузки, добавьте 00- к файлу jQuery и 01- к файлу Jalendar 2. Я установил ширину для дива .jalendar с центрированием по календарю. В файле jalendar.css уже установлены отступы для календаря, как auto. Проблема в том, что браузер не центрирует его до тех пор, пока вы не зададите ширину.

Теперь, вам нужно задать код, для обработки календаря в файле site/js/02-site.js. Откройте этот файл и добавьте такой код:

Код SyntaxHighlighter.all() для включения подсветки кода всей страницы. Остальное я скопировал из кода последнего тестирования Jalendar 2, из предыдущего раздела.

The Test Website with Jalendar 2The Test Website with Jalendar 2The Test Website with Jalendar 2
Тестовый веб-сайт с Jalendar 2

Когда вы запускаете сервер goPress, вы должны увидеть страницу выше. Календарь, отцентрированный по боковой колонке, с правильным цветом подстать теме.

Добавляем выбор даты (Date Picker)

Временами, вам может потребоваться выбор даты, прямо на вашей странице. Jalendar 2 отлично подходит для этого. В файл site/main.html добавьте следующие строки:

А затем добавьте следующий код в файл site/js/02-site.js:

Этот код идёт прямо после кода для инициализации календаря в боковой панели. Свойство type установлено в selector для создания селектора даты. Свойство selectingBeforeToday установлено в false. Это гарантирует, что пользователь не сможет выбрать дату до текущей даты. Если свойству selectionAfterToday устанавливается значение true. Это гарантирует, что пользователь может выбирать даты после текущей даты.

The Test Website with Jalendar 2The Test Website with Jalendar 2The Test Website with Jalendar 2
Тестовый веб-сайт с Jalendar 2

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

Заключение

С правильными инструментами, добавлять что-либо на ваш веб-сайт довольно просто. Jalendar 2 очень просто интегрируется с любыми веб-сайтами и выглядит очень хорошо. Теперь, вам осталось только добавить его на ваш веб-сайт. На CodeCanyon есть больше штучек, которые вы можете добавить на ваш сайт.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.