[contact-form-7 id="24085" title="Feedback RU"]

Новые шаблоны

JS Animated. Как работать с плагином FullCalendar

В этом уроке мы Вам покажем, как работать с плагином FullCalendar, который можно найти в некоторых JavaScript анимированных шаблонах.

JS Animated. Как работать с плагином FullCalendar

FullCalendar – это jQuery плагин, позволяющий создать полноразмерный календарь с функцией drag & drop. Он использует AJAX, чтобы выбирать на лету события для каждого месяца. Легко конфигурируется.

Основное использование

Если в шаблоне есть такой календарь, то это означает, что плагин в <head> области страницы уже связан с JavaScript и CSS файлами, включая FullCalendar стили, а также FullCalendar и jQuery JS файлы:

<link rel="stylesheet" href="css/fullcalendar.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/fullcalendar.min.js"></script>

Помимо этих зависимостей у веб-страницы также должен быть JavaScript код, который инициализирует календарь. Этот код должен быть выполнен после инициализации страницы с помощью функции jQuery’s $(document).ready, заключенной в <script> тег в «голове» страницы:

<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
</script>

где:

  1. new Date() создает новую Дату с текущей датой и временем
  2. getDate() возвращает день месяца (от 1 до 31) для указанной даты
  3. getMonth() возвращает месяц (от 0 до 11) для указанной даты, в соответствии с местным временем (январь — 0, февраль – 1 и т.д.)
  4. getFullYear() возвращает год (четыре цифры) для указанной даты (напр 2013) .

Остаток кода должен выглядеть вот так:

		$('#calendar').fullCalendar({
			editable: true,
			weekMode: 'liquid',
			url:'#',

  1. editable — определяет можно ли изменять события в календаре
  2. weekMode — указывает, сколько недель отображается в месяце. Также обозначает высоту каждой недели. Доступные опции:
    • ‘fixed’— Календарь будет всегда показывать 6 недель. Высота будет та же, что указали в height, contentHeight, или aspectRatio.
    • ‘liquid’ — В зависимости от месяца у календаря будет 4,5 или 6 недель. Высота недели будет изменяться, чтобы заполнить высоту, указанную в height, contentHeight, или aspectRatio.
    • ‘variable’— В зависимости от месяца у календаря будет 4,5 или 6 недель. У каждой недели своя фиксированная высота и это означает, что высота в каждом месяце меняется.
  3. url:’#’,— FullCalendar может отображать события из Google Calendar. Он может служить в качестве бэкэнд (административная часть сайта, то, что простые посетители не видят), которая управляет и постоянно хранит данные события (функция, которая в настоящее время отсутствует в FullCalendar).

Более детальную информацию об общих настройках изображения Вы можете узнать на http://arshaw.com/fullcalendar/docs/display/

Далее идет объект источника событий. "Источник событий" — это то, что предоставляет FullCalendar данные о событиях. Начиная с версии 1.5, у объектов событий могут быть «Настройки», связанные с ними:

events: [
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 2, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 4, 16, 00),
					allDay: false
				},
				{
					title: 'Aliquam erat volpat. Duis ac turpis',
					start: new Date(y, m, 9, 16, 00),
					allDay: false
				},
				{
					title: 'Donec in velit vel ipsum',
					start: new Date(y, m, 10, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 13, 9, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 15, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 17, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacusi',
					start: new Date(y, m, 18, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 19, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 23, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacus',
					start: new Date(y, m, 24, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 27, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 28, 16, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 29, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 30, 9, 00),
					allDay: false
				}
			]
		});
		
	});
    </script>

Чтобы отображались новые события нужно отредактировать существующие JavaScript объекты, которые использует FullCalendar для хранения информации о событиях календаря. Можно их скопировать, чтобы добавить больше событий. Ниже приведен пример куска кода, который нужно отредактировать или скопировать:

				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
                

Давайте внимательнее рассмотрим свойства:

  1. title (String. обязательно) — Текст на событии. Например, можно изменить на
    ‘A new event’,
  2. start (Date. обязательно) – Дата или время начала события. Например, если вы собираетесь добавить новое мероприятие, которое пройдет 05.23 (текущего года) и начнется после обеда в 4.30, то строку нужно изменить так:
    start: new Date(y, m, 23, 16, 30);
  3. allDay (true или false. необязательно) — Если событие происходит в определенное время суток. Это свойство определяет, показывать ли время мероприятия.
    Если указывая Event Objects (объекты события) для событий или eventSources (источники событий) Вы не задали значения для этого свойства, то они будут взяты из allDayDefault, которое обычно стоит на true.
  4. end (Date. необязательно) – Дата или время окончания события.
  • Если мероприятие проходит целый день (all-day)… дата окончания включительна. Это означает, что событие, которое началось 10 ноября и закончилось 12 ноября, в календаре будет охватывать 3 дня. .
  • Если событие проходит НЕ длится целый день (NOT all-day) … дата окончания единична. Это означает, что ваше мероприятие заканчивается в полночь, и не будет отображаться на следующий день.

Для других событий, которые можно использовать смотрите http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

Этот код использует индентификатор "calendar" в теле страницы. Календарь (calendar) помещают в тег div:

Благодаря этому появляется календарь на месяц с некоторыми случайными событиями на нем.

Опции

Большинство документация FullCalendar описывает опции, которые \ влияют на внешний вид или поведение календаря. Опции обычно устанавливают, когда календарь инициализирован. Как, например:

$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});

Функции Callback

Callbacks являются вроде как опциями, но это функции, которые звонят, когда происходит что-то особенное. В следующем примере, окно предупреждения появляется, когда пользователь нажимает на день:

$('#calendar').fullCalendar({

    dayClick: function() { 

        alert('a day has been clicked!');

    }

});

Для более детальной информации о плагине FullCalendar посетите http://arshaw.com/fullcalendar/. Здесь можно скачать самые последние версии плагина и также получить поддержку от разработчиков.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже:

JS Animated. Как работать с плагином FullCalendar