Пятница, 17 Октябрь 2014 08:42

FullCalendar. Часть 1. Первые шаги – установка, настройка, локализация

Автор 
Оцените материал
(6 голосов)

В современном мире глобальной информатизации практически у каждого человека возникает необходимость использовать вспомогательные инструменты для хранения и напоминания каких-либо событий, встреч, дат и т.д. Органайзеры, календари, ежедневники одинаково играют немаловажную роль в жизни не только людей бизнеса (расписание дня, деловые встречи, переговоры, поездки и т.д.), но и рядовых работников и домохозяек (дни рождения, встречи с друзьями, семейные праздники и события). С развитием компьютерной и мобильной техники данные инструменты начали переходить от бумажной формы к электронной. Ведь у каждого в кармане был свой персональный органайзер мобильного телефона. Позже, с развитием общедоступного интернета и мобильных гаджетов необходимость хранить свои события вышла за рамки одного мобильного телефона. На сегодняшний день существуют множество он-лайн порталов, предоставляющих свои услуги хранения ваших событий, встреч, дней рождения и т.д.

Именно с такой задачей нам и пришлось встретиться на одном из недавних проектов. Именно тогда нам и пришлось познакомиться с простым, но достаточно мощным плагином для jQuery – FullCalendar.

FullCalendar – это календарь событий, который имеет довольно обширные функциональные возможности, использует технологию AJAX, легко настраивается и предоставляет множество инструментов для работы с событиями. В данной статье я постараюсь на простых примерах описать установку и настройку плагина.

Примечание: примеры в данной статье приведены для версии FullCalendar 2.1.1, которая является последней на момент написания статьи.

 

Установка FullCalendar

Для установки плагина его сначала нужно скачать. Для его работы, конечно же, понадобится подключена библиотека jQuery. Для работы с датами необходимо также подключить библиотеку Moment. Обычно весь набор необходимых библиотек уже присутствует в архиве при скачивании FullCalendar, но лучше скачать их отдельно с официальных сайтов, чтобы получить последние актуальные версии.

Для установки плагина достаточно подключить его таблицу стилей и сценарий JavaScript. В архиве присутствуют полные и сжатые версии этих файлов. При необходимости работы с печатью календаря рекомендуется подключить отдельную таблицу стилей для печати (также присутствует в архиве).

<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='fullcalendar/fullcalendar.js'></script>

Примечание: библиотеки jQuery и Moment должны быть подключены перед подключаемым JavaScript-файлом плагина FullCalendar.

В html-верстке FullCalendar помещается в тэг div. Для этого в определенном месте страницы нужно лишь вставить следующий код:

<div id='calendar'></div>

Для инициализации FullCalendar необходимо выполнить следующий JavaScript код:

$('#calendar').fullCalendar({
   // сюда пишем опции и callback-функции
});

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

 

Настройка FullCalendar

Первое, на что стоит обратить внимание, это опция header. Данная опция отвечает за отображение шапки календаря. Обычно в шапке содержатся кнопки управления календарем и title. Очень удобно, что header предоставляет возможность задавать кнопки управления в трех выравниваемых блоках:

  • left — выравнивается по левому краю
  • center — выравнивается по центру
  • right — выравнивается по правому краю

Это упрощает процесс стилизации календаря.

Еще одной особенностью данной опции является то, что в каждом выравниваемом блоке можно задать по несколько элементов управления. Причем, если разделить их пробелом, то кнопки будут раздельные, а если запятой без пробела — кнопки будут отображаться слитно. Пример использования опции header:

header: {
   left: 'month,agendaWeek,agendaDay',
   center: 'title',
   right: 'today prev,next'
}

Результат будет следующий:

В качестве параметров в данную конструкцию можно передавать следующие значения:

  • title — текст, содержащий текущий месяц/неделю/день
  • prev — кнопка перехода на предыдущий месяц/неделю/день
  • next — кнопка перехода на следующий месяц/неделю/день
  • prevYear — кнопка перехода на предыдущий год
  • nextYear — кнопка перехода на следующий год
  • today — кнопка перехода на текущий месяц/неделю/день

Также в качестве параметров можно передавать название доступных видов календаря:

  • month — кнопка переключения вида календаря на просмотр месяца
  • basicWeek — кнопка переключения вида календаря на основное представление недели с разделением на дни
  • basicDay — кнопка переключения вида календаря на основное представление дня
  • agendaWeek — кнопка переключения вида календаря на детализированное представление недели с разделением на дни и часы
  • agendaDay — кнопка переключения вида календаря на детализированное представление дня с разделением на часы

Следующим полезным параметром является параметр firstDay. Он отвечает за то, с какого дня будет начинаться неделя в календаре. По умолчанию firstDay равно нулю и неделя начинается с воскресенья. Чтобы это исправить, достаточно при инициализации FullCalendar присвоить параметру firstDay единицу, тогда неделя будет начинаться с понедельника.

Параметр weekends определяет, будут ли отображаться выходные дни (суббота и воскресенье) в календаре. По умолчанию true.

Следующий параметр hiddenDays, похож на предыдущий. Разница состоит лишь в том, что данный параметр исключает определенные дни недели. В качестве значения передается массив дней недели (числа от 0 до 6, 0 = воскресенье), которые нужно скрыть. Примеры использования:

hiddenDays: [2, 4] // скрывает вторники и четверги
hiddenDays: [1, 3, 5] // скрывает понедельники, среды и пятницы

Параметр weekNumbers определяет, будут ли отображаться номера недель в календаре. По умолчанию имеет значению false. Если задать true, тогда при виде месяца слева появляется дополнительная колонка с номерами недель, а при других видах номер недели пишется в левом верхнем углу календаря.

Параметр height позволяет задать фиксированную высоту календаря в пикселях, включая шапку. По умолчанию имеет значение auto.

Примечание: ширина календаря опционально не задается. Календарь занимает 100% разрешаемого пространства. Поэтому ширину календаря необходимо регулировать с помощью CSS.

Параметр eventLimit позволяет ограничить количество событий, отображаемых в ячейке дня. Если событий слишком много, появляется ссылка вида «+2 еще». При значении false (стоит по умолчанию) отображаются все события. При значении true количество событий ограничивается высотой ячейки дня. Если в значении стоит целое число, количество событий ограничивается данным числом.

Параметр eventLimitClick указывает, что делать при нажатии ссылки вида «+2 еще», созданной предыдущим параметром. Возможны следующие значения:

  • "popover" — показывает всплывающую панель со списком всех событий (по умолчанию)
  • "week" — переходит на вид недели, оглашенный в параметре header
  • "day" — переходит на вид дня, оглашенный в параметре header
  • название вида — текстовое название вида из списка доступных видов
  • функция — callback-функция для выполнения произвольного кода

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

 

Локализация FullCalendar

По умолчанию FullCalendar отображает все названия месяцев, дней недели и надписи кнопок на английском языке. Если вам необходимо использовать другой язык в своем календаре, вы можете легко это сделать. Дело в том, что FullCalendar предоставляет множество различных языков, которые можно использовать для отображения календаря. Все языки содержатся в папке lang скачанного архива. Их там около 45. Все, что вам нужно сделать, это выбрать нужный вам языковый файл и подключить его.

<script type='text/javascript' src='fullcalendar/lang/ru.js'></script>

Теперь ваш календарь будет отображаться на русском языке.

FullCalendar имеет параметр lang, который определяет, какой язык использовать для отображения календаря. В качестве значения нужно передавать двухсимвольное название языка («en», «de», «ru» и т.д.) Если вы подключили только один языковый файл, то использование параметра lang не обязательно — FullCalendar сам определит язык подключенного файла и будет его применять. Если же вам необходима мультиязычность календаря, вам нужно будет подключить файлы необходимых вам языков и в параметре lang указывать, какой из подключенных языков применять для отображения календаря в данный момент. Вы можете подключать языковые файлы отдельно по одному или подключить один файл lang-all.js, который содержит все языки.

<script src='fullcalendar/lang-all.js'></script>
<script>
   $(document).ready(function() {
      $('#calendar').fullCalendar({
         lang: 'ru'
      });
   });
</script>

Если вы хотите использовать какие-то свои индивидуальные названия месяцев, дней недели и надписи кнопок, вы можете это сделать с помощью следующих параметров:

  • buttonText — определяет надписи кнопок
  • monthNames — определяет названия месяцев
  • monthNamesShort — определяет сокращенные названия месяцев
  • dayNames — определяет названия дней недели
  • dayNamesShort — определяет сокращенные названия дней недели

Пример использования:

$('#calendar').fullCalendar({
   buttonText: {
      prev: "&nbsp;&#9668;&nbsp;",
      next: "&nbsp;&#9658;&nbsp;",
      prevYear: "&nbsp;&lt;&lt;&nbsp;",
      nextYear: "&nbsp;&gt;&gt;&nbsp;",
      today: "Сегодня",
      month: "Месяц",
      week: "Неделя",
      day: "День"
   },
   monthNames: ['Январь','Февраль','Март','Апрель','Май','οюнь','οюль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
   monthNamesShort: ['Янв.','Фев.','Март','Апр.','Май','οюнь','οюль','Авг.','Сент.','Окт.','Ноя.','Дек.'],
   dayNames: ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],
   dayNamesShort: ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"]
});

Иногда возникает необходимость использовать часовые пояса для корректного отображения времени. Для этого FullCalendar имеет параметр timezone. Значениями данного параметра могут быть следующие:

  • false — не используется информация часового пояса (по умолчанию)
  • «local» — используется информация часового пояса клиента
  • «UTC» — используется информация часового пояса, отображаемого в формате UTC
  • название часового пояса (например, «Europe/Kiev») — используется информация указанного часового пояса

 

Таким образом, мы подключили плагин FullCalendar, настроили его основные параметры и включили для него локализацию. В следующей статье я расскажу о том, как настроить отображение событий в календаре, как добавлять, редактировать и удалять события.

Последнее изменение Понедельник, 27 Октябрь 2014 20:22
Другие материалы в этой категории:
« Как правильно организовать цикл по датам

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Подать запрос

Если Вам нужна еще информация, заполните, пожалуйста, этот формуляр.Мы свяжемся с Вами немедленно.
*Обязательные поля

Почему клиенты выбирают именно нас?

  • Отправка запроса и создание предложения у нас бесплатны
  • Мы ценим Ваши персональные данные
  • Соответствие цены и качества услуг
  • Наши консультации основываются на многолетнем опыте
  • Прозрачный процес работы над проектом и открытая коммуникация
  • Качественные услуги на основе современных технологий
  • Длительная поддержка