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

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

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

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

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

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

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

<!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 вызовем одноменный метод плагина:

$(function(){
	$('#calendar').fullCalendar();
});

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

<link rel="stylesheet" href="css/jquery-ui.css">

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

$(function(){

	$('#calendar').fullCalendar({
		theme: true,

});

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

#calendar{
	max-width: 900px;
	margin: auto;
}
#calendar .fc-today{
	background: #ccc;
}
#calendar .fc-day{
	transition: all .5s;
}
#calendar .fc-day:hover{
	background: #ccc;
}

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

<script src="fc/lang-all.js"></script>

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

$(function(){

	$('#calendar').fullCalendar({
		theme: true,
		lang: 'ru',
});

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

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

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

Научиться

Метки:

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree