От автора: данный урок является логическим продолжение уроков по работе с плагином jQuery Event Calendar. В этом уроке мы начнем работать с мощным плагином для представления календарных событий — FullCalendar. Установка и настройка плагина FullCalendar — основная задача текущего урока.
Итак, приступим к скачиванию и установке плагина FullCalendar. Актуальную версию плагина можно найти и скачать на официальном сайте или же можете взять ее из исходников к уроку.
Создадим файл index.html и несколько папок рядом с ним. Это будут папки css, js и fc. В последнюю папку поместим все файлы плагина. В папку css поместим собственный файл стилей style.css, а в папку js — собственный файл скриптов main.js.
Подключим все необходимое в файле index.html, а также добавим единственный необходимый для календаря элемент — это будет div с #calendar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FullCalendar</title> <link rel="stylesheet" href="fc/fullcalendar.css"> <link rel="stylesheet" href="fc/fullcalendar.print.css" media="print"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="calendar"></div> <script src="//code.jquery.com/jquery.min.js"></script> <script src="fc/lib/moment.min.js"></script> <script src="fc/fullcalendar.js"></script> <script src="js/main.js"></script> </body> </html> |
Теперь в файле main.js вызовем одноменный метод плагина:
|
1 2 3 |
$(function(){ $('#calendar').fullCalendar(); }); |
Если все сделано верно, тогда мы уже должны увидеть на странице календарь. Пока что пустой, без событий, но уже вполне работающий. Теперь давайте немного оформим его. Плагин FullCalendar поддерживает работу с темами библиотеки jQuery UI. Перейдем на сайт библиотеки, выберем понравившуюся тему и скачаем ее. В папку css возьмем из архива файл jquery-ui.css и папку с картинками. Подключим новый файл перед файлом стилей календаря.
|
1 |
<link rel="stylesheet" href="css/jquery-ui.css"> |
Чтобы выбранная тема заработала, необходимо ее активировать в настройках плагина. Делается это крайне просто, с помощью свойства theme:
|
1 2 3 4 5 6 |
$(function(){ $('#calendar').fullCalendar({ theme: true, }); |
Заодно давайте немного ограничим максимальную ширину календаря и добавим несколько дополнительных правил для его оформления в файл стилей style.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#calendar{ max-width: 900px; margin: auto; } #calendar .fc-today{ background: #ccc; } #calendar .fc-day{ transition: all .5s; } #calendar .fc-day:hover{ background: #ccc; } |
Последнее, что мы сделаем в текущем уроке, это русификация плагина FullCalendar. Сделать это также не сложно. После подключения плагина подключим дополнительный файл из его комплекта:
|
1 |
<script src="fc/lang-all.js"></script> |
А в файле main.js добавим еще одну настройку:
|
1 2 3 4 5 6 |
$(function(){ $('#calendar').fullCalendar({ theme: true, lang: 'ru', }); |
На этом текущий урок завершен. Удачи и до новых встреч!
Комментарии (1)