Este pequeno tutorial irá ensinar a você os fundamentos da busca de eventos do MySQL e renderizar os dados com FullCalendar.js usando PHP, Javascript e PDO. Vamos fazer isso em 2 etapas fáceis.
- Crie um arquivo html que produzirá o resultado final:
calendar.html
<div id="calendar"></div>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
defaultView: 'agendaWeek',
events: {
url: 'json-events-feed.php',
type: 'POST', // Send post data
error: function() {
alert('There was an error while fetching events.');
}
}
});
});
- Crie um arquivo php que ecoará nossos eventos no formato json:
events.php
try {
// Connect to database
$connection = new PDO($url, $username, $password);
// Prepare and execute query
$query = "SELECT * FROM events";
$sth = $connection->prepare($query);
$sth->execute();
// Returning array
$events = array();
// Fetch results
while ($row = $sth->fetch(PDO::FETCH_ASSOC) {
$e = array();
$e['id'] = $row['id'];
$e['title'] = "Lorem Ipsum";
$e['start'] = $row['start'];
$e['end'] = $row['end'];
$e['allDay'] = false;
// Merge the event array into the return array
array_push($events, $e);
}
// Output json for our calendar
echo json_encode($events);
exit();
} catch (PDOException $e){
echo $e->getMessage();
}
Claro, há espaço para otimização e personalização adicional. Confira a API para a lista completa de recursos.
Diverta-se!