Від автора: у цьому уроці ми з вами продовжимо роботу з потужним плагіном для організації календаря подій — FullCalendar. Поки що в нашому календарі немає жодної події, давайте отримаємо і виведемо їх. В уроці ми розглянемо декілька варіантів отримання даних про події. Зокрема, ми будемо використовувати як статичні події, зашиті в код, так і події, отримані з бази даних (БД).
Оскільки ми будемо працювати з БД, перше, що нам потрібно зробити, змінити розширення файлу з html на php і перенести роботу на сервер. Базу даних можемо використовувати з попереднього варіанту календаря подій, внісши в неї невеликі правки.
На початку файлу index.php підключимо файл конфігурації, в якому відбувається з’єднання з БД, а також підключаємо файл функцій.
Також внесемо невеликі правки в коді функцій get_events і get_json (їх код можна взяти з исходников до уроку). Перед підключенням бібліотеки jQuery збережемо в JS змінну events дані про події, одержуваних з БД:
var events = ;
Тепер можемо використовувати змінну 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: ‘uk’,
eventSources : [
{
events : events,
color : ‘#0EB6A2’,
textColor : ‘#fff’
}
]
});
Якщо ми ніде не помилилися, тоді в календарі повинні з’явитися події, записані в БД, а при кліці по числу в календарі повинен відправлятися запит на сервер, відомості про яку можна побачити в консолі.
На цьому поточний урок завершено. Удачі і до нових зустрічей!
