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

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

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

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

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

Комментарии (9)

  1. Талгат

    Здравствуйте, спасибо Вам за урок, именно такой календарь мне нужен, но вот с этим плагином у меня такая вот ситуация, на мазиле и интернет эксплоере работает, а на опере и хроме там где должны выводиться события выводится ошибка «error getting json», подскажите пожалуйста как исправить эту ошибку.

    • Андрей Кудлай

      Здравствуйте. Для того, чтобы работало в других браузерах, необходим сервер, если не ошибаюсь, я говорил об этом. Поместите исходники на сервер и запускайте приложение по протоколу http — все и везде будет работать.

  2. Антон

    Здравствуйте!
    Большое спасибо за урок. Календарь отображается, события тоже.

    У меня ситуация следующая: по клику на названии события не появляется кнопка «Смотреть».
    Также при подключении файла с событиями (data.json) календарь не перелистывается, хотя события текущего месяца отображаются.

    При объявлении событий через переменную (var data = [....]) календарь перелистывается без проблем.

    Сайт на PHP.

    Делал всё как по видео. Из исходников не копировал.

    Подскажите пожалуйста, где может быть ошибка?

    • Андрей Кудлай

      Здравствуйте, Антон.
      Где-то в JS возможно ошибки. Попробуйте посмотреть в консоль, возможно там есть ошибки, которые нужно исправить.

  3. Антон

    Здравствуйте!

    Спасибо Вам за урок. Календарь именно такой, какой нужен. У меня возникла такая ситуация: календарь отображается нормально. События выводятся.

    Но если события подключать через файл .json, то календарь не перелистывается.

    Если события прописать через переменную, то календарь перелистывается нормально.

    И ещё по клику на названии события не появляется кнопка «Смотреть».

    Сайт на PHP.

    Подскажите, пожалуйста, как исправить эту ошибку?

  4. Антон

    Здравствуйте!

    Разобрался всё-таки я с этой ошибкой. Нужно подключить библиотеку jquery-1.11.1.min.js.

    Тогда всё будет работать (как на видео(и кнопки формируются, и ссылки открываются в новом окне и с .json нормально работает)).

    У меня была подключена библиотека jquery-3.2.1.min.js и в консоли вылезала такая ошибка: «desc.find(….).size is not a function».

    Ссылка вела на jquery.eventCalendar.js. С новой библиотекой jquery-3.3.1.min.js ошибка осталась. Тогда я просто перешёл по ссылке «http://code.jquery.com/jquery.min.js» и в комментарии увидел версию данной библиотеки.

    Данная библиотека у меня уже была.

    У меня вопрос (просто интересно): почему новая версия библиотеки не работает?

  5. Антон

    Здравствуйте!

    Мне удалось решить проблему с ошибкой «desc.find(….).size is not a function», но частично.

    По информации с сайта https://api.jquery.com/size/ «метод .size() устарел. Используйте вместо этого свойство .length».

    После замены данного метода в библиотеке jquery.eventCalendar.js все заработало отлично, но только, если события описаны через переменную.

    Если подключить файл .json, то события также отображаются, но календарь не перематывается и кнопки для перехода не формируются. В консоли появляется ошибка: «$.getJSON(…).error is not a function».

    По информации с сайта https://api.jquery.com/error/ «метод .error() также является устаревшим.

    Вместо этого необходимо использовать свойство .on( «error», handler )».

    Буду разбираться

    • Андрей Кудлай

      Здравствуйте.
      Самый правильный способ — добиться совместимости jQuery и плагина календаря, т.е. установить совместимые версии. Посмотрите, если есть более новая версия плагина, которая будет работать с jQuery 3, тогда возьмите ее. Если же нет — тогда либо поищите более современную альтернативу плагину, либо используйте jQuery 2.

  6. Антон

    Здравствуйте!

    Большое спасибо за урок № 2 (подключение событий из базы данных). События я подключил, запросы выполняются, календарь работает нормально, но только если не подключать .json.

    Подскажите, пожалуйста, как получить выбранную дату из календаря (допустим, выбрана какая-либо дата в календаре(текущая дата либо другая))?

    (для формирования запроса к БД по событиям за определенную дату).

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

Ваш 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