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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее

Метки:

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

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

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

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

  1. Олег

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

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