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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Для того, чтобы использовать плагин, достаточно создать на странице пустой div и вызвать для него одноименный метод плагина — eventCalendar, передав в качестве параметра источник данных. Создадим такой div:

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

Научиться

Метки: ,

Похожие статьи:

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

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

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

  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.

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

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

  7. Сергей

    Идет смещение события после текущей даты. т.е. До сегодняшнего числа все отлично работает. Когда событие добавляем после текущей даты идет смещение на одну позицию. Подскажите где исправить

  8. Сергей

    Со смещением разобрался. У меня дата была типа 2018-10-26 00:00:00 так вот время должно быть не 00:00:00 а хотя-бы иметь хоть какое-то значение например 2018-10-26 10:00:00

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

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

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

Я не робот.

Spam Protection by WP-SpamFree