От автора: в этом уроке мы познакомимся с плагином jQuery Event Calendar, который позволяет легко организовать на сайте календарь событий. Такими событиями могут быть опубликованные статьи на сайте, встречи, приемы и т.п. Плагин имеет множество настроек, с некоторыми из которых мы и разберемся в текущем уроке.
Итак, обратимся к официальной странице плагина. Здесь можно найти его описание и ссылки на скачивание и примеры использования. Скачаем плагин и подключим необходимые файлы плагина к нашей странице. Подключаем файлы стилей между тегами head:
|
1 2 |
<link rel="stylesheet" href="css/eventCalendar.css"> <link rel="stylesheet" href="css/eventCalendar_theme_responsive.css"> |
Теперь подключим библиотеку jQuery и файлы JS плагина перед закрывающим тэгом body:
|
1 2 3 4 5 6 7 |
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/moment.js"></script> <script src="js/jquery.eventCalendar.js"></script> <script> $(function(){ // здесь работаем с плагином });</script> |
Для того, чтобы использовать плагин, достаточно создать на странице пустой div и вызвать для него одноименный метод плагина — eventCalendar, передав в качестве параметра источник данных. Создадим такой div:
|
1 |
<div id="eventCalendar" style="width: 300px; margin: 50px auto;"></div> |
Теперь вызовем метод плагина и передадим данные в формате JSON:
|
1 2 3 4 5 6 7 8 9 10 11 |
// данные о событиях var data = [ { "date": "2015-09-21 10:15:20", "title": "Событие 1", "description": "Lorem Ipsum dolor set", "url": "//www.event3.com/" }, { "date": "2015-09-21 10:15:20", "title": "Событие 2", "description": "Lorem Ipsum dolor set", "url": "" }, { "date": "2015-09-01 10:15:20", "title": "Событие 3", "description": "Lorem Ipsum dolor set", "url": "//www.event3.com/" }, { "date": "2015-10-21 10:15:20", "title": "Событие 4", "description": "Lorem Ipsum dolor set", "url": "//www.event3.com/" }, ]; $('#eventCalendar').eventCalendar({ jsonData: data, jsonDateFormat: 'human', }); |
Если все сделано верно, тогда на странице должен появиться календарь с несколькими событиями.
Сейчас мы формируем массив событий в текущем файле. Также этот массив данных можно получать из внешнего файла. Для этого создадим файл data.json со следующим содержимым:
|
1 2 3 4 5 6 7 |
[ { "date": "2015-09-21 10:15:20", "title": "Событие 1", "description": "Lorem Ipsum dolor set", "url": "//www.event3.com/" }, { "date": "2015-09-21 10:15:20", "title": "Событие 2", "description": "Lorem Ipsum dolor set", "url": "" }, { "date": "2015-09-01 10:15:20", "title": "Событие 3", "description": "Lorem Ipsum dolor set", "url": "//www.event3.com/" }, { "date": "2015-10-21 10:15:20", "title": "Событие 4", "description": "Lorem Ipsum dolor set", "url": "//www.event3.com/" }, { "date": "2015-08-21 10:15:20", "title": "Событие 4", "description": "Lorem Ipsum dolor set", "url": "//www.event3.com/" } ] |
И немного изменим вызов плагина, убрав переменную data с данными и вместо параметра jsonData используем параметр eventsjson, в котором укажем путь к файлу с данными:
|
1 2 3 4 |
$('#eventCalendar').eventCalendar({ eventsjson: 'data.json', jsonDateFormat: 'human', }); |
Теперь данные мы получаем из внешнего файла. Как я отмечал выше, плагин имеет массу настроек, с которыми вы можете детальнее познакомиться в видеоверсии урока. В следующем уроке мы попробуем получать данные о событиях динамически — из базы данных.
На этом текущий урок завершен. Удачи и до новых встреч!
Комментарии (14)