FullCalendar. Получение данных из базы данных

FullCalendar. Получение данных из базы данных

От автора: в этом уроке мы с вами продолжим работу с мощным плагином для организации календаря событий — FullCalendar. Пока что в нашем календаре нет ни одного события, давайте получим и выведем их. В уроке мы рассмотрим несколько вариантов получения данных о событиях. В частности, мы будем использовать как статичные события, зашитые в код, так и события, получаемые из базы данных (БД).

автор

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

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

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

Поскольку мы будем работать с БД, первое, что нам нужно сделать, изменить расширение файла с html на php и перенести работу на сервер. Базу данных можем использовать из предыдущего варианта календаря событий, внеся в нее небольшие правки.

В начале файла index.php подключим файл конфигурации, в котором происходит соединения с БД, а также подключим файл функций.

<?php
require_once 'config.php';
require_once 'functions.php';
$events = get_events();
$events = get_json($events);
?>
<!DOCTYPE html>

Также внесем небольшие правки в код функций get_events и get_json (их код можно взять из исходников к уроку). Перед подключением библиотеки jQuery сохраним в JS переменную events данные о событиях, получаемых из БД:

<script>var events = <?php echo $events ?>;</script>

Теперь можем использовать переменную events в качестве источника данных для настроек плагина. Также сделаем небольшой задел для следующего урока и попробуем отправить AJAX запрос при клике по какому-либо числу:

$('#calendar').fullCalendar({
		dayClick: function(date, jsEvent, view) {
	        var clickDate = date.format();
	        $.ajax({
	        	url : 'index.php',
	        	type: 'POST',
	        	data : {clickDate : clickDate},
	        	success : function(res){
	        		console.log(res);
	        	},
	        	error : function(){
	        		alert('Error!');
	        	}
	        });
    	},
		theme: true,
		lang: 'ru',
		eventSources : [
			{
				events : events,
				color : '#0EB6A2',
				textColor : '#fff'
			}
		]
	});

Если мы нигде не ошиблись, тогда в календаре должны появиться события, записанные в БД, а при клике по числу в календаре должен отправляться запрос на сервер, сведения о котором можно увидеть в консоли.

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

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