jQuery Calendar — Календар подій

18

Від автора: у цьому уроці ми познайомимося з плагіном jQuery Calendar, який дозволяє легко організувати на сайті календар подій. Такими подіями можуть бути опубліковані статті на сайті, зустрічі, прийоми і т. п. Плагін має безліч налаштувань, з деякими з яких ми і розберемося в поточному уроці.

jQuery Calendar — Календар подійjQuery Calendar — Календар подій

Отже, звернемося до офіційній сторінці плагіна. Тут можна знайти його опис та посилання на скачування і приклади використання. Завантажити плагін та підключимо необхідні файли плагіна до нашої сторінці. Підключаємо файли стилів між тегами head:

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

$(function(){
// тут працюємо з плагіном
});

Для того, щоб використовувати плагін, досить створити на сторінці порожній div і викликати для нього однойменний метод плагіна — eventCalendar, передавши в якості параметра джерело даних. Створимо такий 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’,
});

Тепер дані ми отримуємо із зовнішнього файлу. Як я зазначав вище, плагін має масу настройок, з якими ви можете детальніше ознайомитися у відеоверсії уроку. У наступному уроці ми спробуємо отримувати дані про події динамічно — з бази даних.

На цьому поточний урок завершено. Удачі і до нових зустрічей!