jQuery Event Calendar — Календарь событий

jQuery Event Calendar - Календарь событий

От автора: в этом уроке мы познакомимся с плагином jQuery Event Calendar, который позволяет легко организовать на сайте календарь событий. Такими событиями могут быть опубликованные статьи на сайте, встречи, приемы и т.п. Плагин имеет множество настроек, с некоторыми из которых мы и разберемся в текущем уроке.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

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

<link rel="stylesheet" href="css/eventCalendar.css">
<link rel="stylesheet" href="css/eventCalendar_theme_responsive.css">

Теперь подключим библиотеку jQuery и файлы JS плагина перед закрывающим тэгом body:

<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:

<div id="eventCalendar" style="width: 300px; margin: 50px auto;"></div>

Теперь вызовем метод плагина и передадим данные в формате JSON:

// данные о событиях
var data = [
	{ "date": "2015-09-21 10:15:20", "title": "Событие 1", "description": "Lorem Ipsum dolor set", "url": "http://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": "http://www.event3.com/" },
	{ "date": "2015-10-21 10:15:20", "title": "Событие 4", "description": "Lorem Ipsum dolor set", "url": "http://www.event3.com/" },
];
$('#eventCalendar').eventCalendar({
	jsonData: data,
	jsonDateFormat: 'human',
});

Если все сделано верно, тогда на странице должен появиться календарь с несколькими событиями.

Сейчас мы формируем массив событий в текущем файле. Также этот массив данных можно получать из внешнего файла. Для этого создадим файл data.json со следующим содержимым:

[
	{ "date": "2015-09-21 10:15:20", "title": "Событие 1", "description": "Lorem Ipsum dolor set", "url": "http://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": "http://www.event3.com/" },
	{ "date": "2015-10-21 10:15:20", "title": "Событие 4", "description": "Lorem Ipsum dolor set", "url": "http://www.event3.com/" },
	{ "date": "2015-08-21 10:15:20", "title": "Событие 4", "description": "Lorem Ipsum dolor set", "url": "http://www.event3.com/" }
]

И немного изменим вызов плагина, убрав переменную data с данными и вместо параметра jsonData используем параметр eventsjson, в котором укажем путь к файлу с данными:

$('#eventCalendar').eventCalendar({
	eventsjson: 'data.json',
	jsonDateFormat: 'human',
});

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

На этом текущий урок завершен. Удачи и до новых встреч!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree