FullCalendar. Установка и настройка

FullCalendar. Установка и настройка

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

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

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

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

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

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

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

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

Теперь в файле main.js вызовем одноменный метод плагина:

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

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

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

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

Чтобы выбранная тема заработала, необходимо ее активировать в настройках плагина. Делается это крайне просто, с помощью свойства theme:

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

Последнее, что мы сделаем в текущем уроке, это русификация плагина FullCalendar. Сделать это также не сложно. После подключения плагина подключим дополнительный файл из его комплекта:

А в файле main.js добавим еще одну настройку:

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

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

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

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

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

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

Научиться

Метки:

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

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

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

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

  1. Олег

    Как можно настроить fullcalendar, чтобы на month представлении title был «Февраль 2016″, а на аgendaWeek — «02 — 08 февраля 2016″?
    В файле локализации есть два поля у объекта months: «format» и «standalone», но не нашел в коде плагина где это используется.

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

Ваш 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