FullCalendar. Установка та налаштування

21

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

FullCalendar. Установка та налаштуванняFullCalendar. Установка та налаштування

Отже, приступимо до завантаження та встановлення плагіну FullCalendar. Актуальну версію плагіна можна знайти і завантажити на офіційному сайті або ж можете взяти її з исходников до уроку.

Створимо файл index.html і кілька папок поруч з ним. Це будуть папки css, js і fc. В останню папку помістимо всі файли плагіна. В папку css помістимо власний файл стилів style.css, а в папку js — власний файл скриптів main.js.

Підключимо все необхідне у файлі index.html, а також додамо єдиний необхідний для календаря елемент — це буде div #calendar:

FullCalendar

Тепер у файлі main.js викличемо одноменный метод плагіна:

$(function(){
$(‘#calendar’).fullCalendar();
});

Якщо все зроблено вірно, тоді ми вже повинні побачити на сторінці календар. Поки що порожній, без подій, але вже цілком працює. Тепер давайте трохи оформимо його. Плагін FullCalendar підтримує роботу з темами бібліотеки jQuery UI. Перейдемо на сайт бібліотеки, виберемо вподобану тему і завантажити її. В папку css візьмемо з архіву файл jquery-ui.css і папку з картинками. Підключимо новий файл перед файлом стилів календаря.

Щоб обрана тема запрацювала, необхідно активувати в налаштуваннях плагіна. Робиться це дуже просто, за допомогою властивості тему:

$(function(){
$(‘#calendar’).fullCalendar({
theme: true,
});

Заодно давайте трохи обмежимо максимальну ширину календаря і додамо кілька додаткових правил для його оформлення в файл стилів style.css:

#calendar{
max-width: 900px;
margin: auto;
}
#calendar .fc-today{
background: #ccc;
}
#calendar .fc-day{
transition: all .5s;
}
#calendar .fc-day:hover{
background: #ccc;
}

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

А у файлі main.js додамо ще одну налаштування:

$(function(){
$(‘#calendar’).fullCalendar({
theme: true,
lang: ‘uk’,
});

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