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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

JavaScript. Полное руководство

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

Подробнее

Метки: ,

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

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

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