Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
На любом веб-сайте есть потребность в календаре. Проблема со многими календарными программами заключается в повторном использовании. Они часто работают только с одной системой управления контентом (CMS). Когда вам нужно перейти на другую, они не работают.
Если вы создаете свой собственный сайт со статическими файлами или своей собственной CMS, то вам обычно приходится разрабатывать собственный календарь. Это была моя дилемма с CMS GoPress, которую я написал. Затем на CodeCanyon я нашел Jalendar 2.
Загрузка и распаковка
Первое, что вам нужно сделать, это купить Jalendar 2 на CodeCanyon.
После загрузки ZIP-файла Jalendar 2 распакуйте его в свой рабочий каталог. Файл zip должен содержать следующие файлы:
1 |
~/D/R/r/J/codecanyon-12662442-jalendar-2-calendar-pack-event-range-and-more ➜ tree .
|
2 |
.
|
3 |
├── jalendar-event-demo.html |
4 |
├── jalendar-linker-demo.html |
5 |
├── jalendar-range-demo.html |
6 |
├── jalendar-selector-demo.html |
7 |
├── js |
8 |
│ ├── jalendar.js |
9 |
│ ├── jalendar.min.js |
10 |
│ ├── jalendar.min.js.map |
11 |
│ └── jquery-1.11.3.min.js |
12 |
└── style |
13 |
├── jalendar.css |
14 |
├── jalendar.css.map |
15 |
└── jalendar.less |
16 |
2 directories, 12 files |
В верхнем каталоге есть две папки (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 и вставьте туда этот код:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="UTF-8"> |
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 |
|
7 |
<!–Jalendar 2 Files–> |
8 |
<link rel="stylesheet" href="css/jalendar.css" type="text/css" /> |
9 |
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> |
10 |
<script type="text/javascript" src="js/jalendar.min.js"></script> |
11 |
|
12 |
<title>Jalendar 2 Demo</title> |
13 |
</head>
|
14 |
<body>
|
15 |
<div id="calendar" class="jalendar"> |
16 |
</div>
|
17 |
|
18 |
<script>
|
19 |
$('#calendar').jalendar(); |
20 |
</script> |
21 |
</body>
|
22 |
</html>
|
Это минимальная установка Jalendar 2. Это базовый шаблон HTML, для создания календаря. Строки 8 и 10 подгружают файлы для Jalendar 2. Строка 9 загружает jQuery. В строке 15 — HTML код для div, где будет находиться календарь. В id div'а можете написать что угодно. Class должен содержать слово jalendar. В противном случае, календарь не будет настроен должным образом.
Строки с 17 по 19 содержат JavaScript код для отображения календаря. Для поиска id div'а и выполнение на нём функции jalendar() используется jQuery.
Когда вы загрузите этот файл в свой браузер, вы увидите календарь приятного синего цвета. Вы можете использовать стрелки вверху, чтобы перейти к предыдущему или следующему месяцу. Этот календарь будет отлично смотреться на любом сайте!
Добавление событий
Отображать события в календаре довольно просто. Создайте серию div'ов событий внутри div календаря. div события должен выглядеть вот так:
1 |
<div class="added-event" |
2 |
data-link="<link to event details" |
3 |
data-date="<date of event>" |
4 |
data-title="<title of the event>"> |
5 |
</div>
|
<link to event details> это ссылка на страницу на вашем или другом сайте, для отображения деталей об этом событии. <date of event> это дата события. Формат даты по умолчанию dd-mm-yyyy. <title of the event> этот текст, показываемый внизу календаря, когда пользователь выбирает дату события. Добавьте следующие в HTML файл внутрь div'а календаря:
1 |
<div class="added-event" data-date="25-12-2016" data-title="Christmas Day"></div> |
Теперь перезагрузите страницу и вы увидите это событие.
При выборе даты события, будет показан текст, который вы предоставили, внизу календаря. Вы можете закрыть список событий нажав на кнопку Close внизу.
Настройка Jalendar 2
Пока что я использовал только базовые особенности Jalendar 2. Вы можете настроить его с 17 различными свойствами. Полный список вы можете посмотреть на сайте Jalendar 2.
Первое что я собираюсь сделать, это подстроить календарь вот мой веб-сайт. Основной цвет моего сайта — коричневый. Мне нравится этот голубой, но слегка не подходит. Меняем код скрипта на:
1 |
$('#calendar').jalendar({ |
2 |
customDay: '12-23-2016', |
3 |
color: '#f2ce95', |
4 |
color2: '#f7edde', |
5 |
titleColor: "black", |
6 |
weekColor: "black", |
7 |
todayColor: "black", |
8 |
dateType: "mm-dd-yyyy" |
9 |
});
|
Этот код настроен на показ любого дня через свойство customDay. Я устанавливаю там определенный день, таким образом, что когда вы будете тестировать это на своей системе, вы увидите тот же результат.
Настройка цветов осуществляется свойствами color и color2. Свойство color устанавливает основной верхний цвет. Свойством color2 задается лёгкий градиент от верхнего цвета к нижнему цвету. Свойствами titleColor, weekColor, и todayColor настраиваются цвета заголовка, дней недели, и сегодняшний день календаря.
Формат dateType устанавливают формат даты для события и для свойства customDay.
С этими настройками, я близок к тому виду, который мне нужен. Но я хочу чтобы углы были более закругленные. Для этого нет опции, но я могу посмотреть как это сделать с помощью инспектора.
В инспекторе, я могу переключать параметры CSS и определить, что нужно изменить чтобы получить требуемый результат. По CSS пути .jalendar .jalendar-container .jalendar-pages можно задать скругленные уголки. Когда я задаю свойству border-radius значение 20px, получается что-то вроде этого.
Это уже ближе, но всё ещё есть проблемка. Нижняя кнопка "закрыть" оставляет легкий темный оттенок на нижних углах. Инспектор показал что за это отвечает .jalendar .jalendar-container .jalendar-pages .add-event .close-button. Поэтому потребуется добавить 2 правила оформления в HTML.
1 |
<style>
|
2 |
.jalendar .jalendar-container .jalendar-pages { |
3 |
border-radius: 20px; |
4 |
} |
5 |
.jalendar .jalendar-container .jalendar-pages .add-event .close-button { |
6 |
border-radius: 0 0 20px 20px; |
7 |
} |
8 |
</style>
|
Таким образом, очень прост редактировать выбранные CSS свойства. Исправлять оригинальный CSS файл будет посложнее. Также, это позволяет держать ваши изменения отдельно. При обновлении на новую версию, вы не потеряете изменения, которые вы сделали.
Добавляем календарь на веб-сайт под управлением goPress
Теперь, когда я сделал такой внешний вид, какой я хочу, я могу добавить его на свой веб-сайт. Для этого руководства я подготовил копию моего goPress сервера для загрузки, тот, который я использую с моей темой сайта. Обратитесь к руководству goPress Server по созданию сервера.
Добавьте следующий код в файл site/parts/sidebar.html:
1 |
<h2 class="sidebarTitle">Events</h2> |
2 |
<div id="EventCalendar"> |
3 |
<div id="calendar" class="jalendar"> |
4 |
<div class="added-event" data-date="12-25-2016" data-title="Christmas Day"></div> |
5 |
<div class="added-event" data-date="12-24-2016" data-title="Christmas Eve"></div> |
6 |
<div class="added-event" data-date="12-31-2016" data-title="New Years Eve"></div> |
7 |
<div class="added-event" data-date="01-01-2017" data-title="New Years Day"></div> |
8 |
</div>
|
9 |
</div>
|
10 |
<style>
|
11 |
.jalendar .jalendar-container .jalendar-pages { |
12 |
border-radius: 20px; |
13 |
} |
14 |
.jalendar .jalendar-container .jalendar-pages .add-event .close-button { |
15 |
border-radius: 0 0 20px 20px; |
16 |
} |
17 |
.jalendar { |
18 |
width: 300px; |
19 |
} |
20 |
</style>
|
21 |
<hr>
|
Затем, вам нужно добавить 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. Откройте этот файл и добавьте такой код:
1 |
jQuery(document).ready(function () { |
2 |
SyntaxHighlighter.all(); |
3 |
$('#calendar').jalendar({ |
4 |
customDay: '12-23-2016', |
5 |
color: '#f2ce95', |
6 |
color2: '#C7AB82', |
7 |
titleColor: "black", |
8 |
weekColor: "black", |
9 |
todayColor: "black", |
10 |
dateType: "mm-dd-yyyy" |
11 |
}); |
12 |
});
|
Код SyntaxHighlighter.all() для включения подсветки кода всей страницы. Остальное я скопировал из кода последнего тестирования Jalendar 2, из предыдущего раздела.
Когда вы запускаете сервер goPress, вы должны увидеть страницу выше. Календарь, отцентрированный по боковой колонке, с правильным цветом подстать теме.
Добавляем выбор даты (Date Picker)
Временами, вам может потребоваться выбор даты, прямо на вашей странице. Jalendar 2 отлично подходит для этого. В файл site/main.html добавьте следующие строки:
1 |
<h3>Testing Jalendar 2</h3> |
2 |
|
3 |
<h4>Date Picker</h4> |
4 |
<div class="jalendar-input"> |
5 |
<input type="text" readonly /> |
6 |
<div id="dateInputCal" class="jalendar"></div> |
7 |
</div>
|
А затем добавьте следующий код в файл site/js/02-site.js:
1 |
$('#dateInputCal').jalendar({ |
2 |
type: 'selector', |
3 |
selectingBeforeToday: false, |
4 |
selectingAfterToday: true, |
5 |
color: '#f2ce95', |
6 |
color2: '#C7AB82', |
7 |
titleColor: "black", |
8 |
weekColor: "black", |
9 |
todayColor: "black" |
10 |
});
|
Этот код идёт прямо после кода для инициализации календаря в боковой панели. Свойство type установлено в selector для создания селектора даты. Свойство selectingBeforeToday установлено в false. Это гарантирует, что пользователь не сможет выбрать дату до текущей даты. Если свойству selectionAfterToday устанавливается значение true. Это гарантирует, что пользователь может выбирать даты после текущей даты.
В результате, выборщик даты выглядит точно также, как календарь сбоку. Есть два основных отличия. Он показывает текущую дату и пользователь может выбрать только даты после текущей даты. При выборе даты, она размещается в текстовом поле над календарем.
Заключение
С правильными инструментами, добавлять что-либо на ваш веб-сайт довольно просто. Jalendar 2 очень просто интегрируется с любыми веб-сайтами и выглядит очень хорошо. Теперь, вам осталось только добавить его на ваш веб-сайт. На CodeCanyon есть больше штучек, которые вы можете добавить на ваш сайт.
By
