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

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

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

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

Поскольку мы будем работать с БД, первое, что нам нужно сделать, изменить расширение файла с 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 данные о событиях, получаемых из БД:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
<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'
 }
  ]
 });

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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