От автора: в этом уроке мы с вами продолжим работу с мощным плагином для организации календаря событий — FullCalendar. Пока что в нашем календаре нет ни одного события, давайте получим и выведем их. В уроке мы рассмотрим несколько вариантов получения данных о событиях. В частности, мы будем использовать как статичные события, зашитые в код, так и события, получаемые из базы данных (БД).
Поскольку мы будем работать с БД, первое, что нам нужно сделать, изменить расширение файла с html на php и перенести работу на сервер. Базу данных можем использовать из предыдущего варианта календаря событий, внеся в нее небольшие правки.
В начале файла index.php подключим файл конфигурации, в котором происходит соединения с БД, а также подключим файл функций.
1 2 3 4 5 6 7 |
<?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 данные о событиях, получаемых из БД:
1 |
<script>var events = <?php echo $events ?>;</script> |
Теперь можем использовать переменную events в качестве источника данных для настроек плагина. Также сделаем небольшой задел для следующего урока и попробуем отправить AJAX запрос при клике по какому-либо числу:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$('#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' } ] }); |
Если мы нигде не ошиблись, тогда в календаре должны появиться события, записанные в БД, а при клике по числу в календаре должен отправляться запрос на сервер, сведения о котором можно увидеть в консоли.
На этом текущий урок завершен. Удачи и до новых встреч!