FullCalender met jQuery

Wat is FullCalendar?

Simpel gezegd, is FullCalendar een (opensource) agenda, voor jQuery. De kalender ondersteund “drag & drop”, wat inhoud dat je een afspraak kunt verslepen naar een andere dag / tijdstip en dat het middels Ajax real-time wordt bijgewerkt. Tevens heeft de kalender ondersteuning voor een koppeling met google calendar. Maar uiteraard kun je er ook je eigen event feed aan geven.

Installatie en configuratie

Voor je het kan gebruiken dien je dus jQuery geïnstalleerd te hebben, download de bestanden en include alles in de header van je website, hiervoor kun je de documentatie van jQuery en FullCalendar raadplegen. Standaard staat de kalender niet optimaal ingesteld voor Nederlandse gebruikers, daarom heb ik mijn configuratie hieronder weergegeven.

$(document).ready(function(){
 $('#calendar').fullCalendar({
 header: {
 left: 'prev,next today',
 center: 'title',
 right: 'month,agendaWeek,agendaDay'
 },
 defaultView: 'month',
 axisFormat: 'H:mm',
 timeFormat: 'H:mm{ - H:mm}',
 firstHour: 8,
 events: 'calendar.php?action=show',
 editable: true,
 disableResizing: true,
 draggable: true,
 eventDrop: function(event, dayDelta, minuteDelta)
 {
 $.ajax({
 url: 'calendar.php?action=alterDrag&AppointmentID=' + event.id + '&date=' + dayDelta + '&time=' + minuteDelta,
 dataType: 'json',
 async: false,
 error: function(xhr, ajaxOptions, thrownError)
 {
 alert("An error occurred: " + thrownError);
 },
 success: function(msg){
 alert(msg);
 }
 });
 },
 eventClick: function(calEvent, jsEvent, view){
 // Hier kun je zelf code plaatsen om uit te voeren bij het klikken op een event.
 }
 });
 });

Event weergeven

Zoals in het voorbeeld hierboven weergegeven haal ik mijn events op via een Ajax json call. Hierbij roep ik het bestand calendar.php aan waarbij ik aangeef dat ik de actie “show” wil uitvoeren. Vervolgens zal het bestand een query uitvoeren om alle events welke tussen de start en eind datums vallen op te halen (de start en eind datums worden automatisch aan de URL van de Ajax call toegevoegd, deze zijn namelijk afhankelijk van je agenda weergave veld, maand / week / dag), en vervolgens in json formaat zal terug sturen.

De inhoud van wat je terug stuurt is natuurlijk geheel afhankelijk van je eigen omgeving, daarom zal ik niet mijn complete code gaan weergeven, maar alleen het deel van de data welke ik in een array stop.

$items[] = array(
 'id' => ‘je event ID’,(
 'title' => ‘de titel’,(
 'start' => ‘YYYY-MM-DD HH:MM:SS’,(
 'end' => ‘YYYY-MM-DD HH:MM:SS’,(
 'allDay' => false(
 );

Vervolgens return je de data door:

echo json_encode($items);

 

Peter Venema
Qlic