Afficher nos événements
FullCalendar, peut s'occuper seul d'afficher les informations si on
lui envoi un flux JSON.
On va donc faire une vue qui retourne nos events sous forme de JSON.
# -*- coding: utf-8 -*-
from django import http
from django.utils import simplejson as json
from django.utils import timezone
from schedule.models import Event
def events_json(request):
# Get all events - Pas encore terminé
events = Event.objects.all()
# Create the fullcalendar json events list
event_list = []
for event in events:
# On récupère les dates dans le bon fuseau horaire
event_start = event.start.astimezone(timezone.get_default_timezone())
event_end = event.end.astimezone(timezone.get_default_timezone())
# On décide que si l'événement commence à minuit c'est un
# événement sur la journée
if event_start.hour == 0 and event_start.minute == 0:
allDay = True
else:
allDay = False
if not event.is_cancelled:
event_list.append({
'id': event.id,
'start': event_start.strftime('%Y-%m-%d %H:%M:%S'),
'end': event_end.strftime('%Y-%m-%d %H:%M:%S'),
'title': event.title,
'allDay': allDay
})
if len(event_list) == 0:
raise http.Http404
else:
return http.HttpResponse(json.dumps(event_list),
content_type='application/json')
On créé l'URL :
# -*- coding: utf-8 -*-
from django.conf.urls import patterns, include, url
from django.views.generic import TemplateView
urlpatterns = patterns('',
url(r'^$', TemplateView.as_view(template_name="schedule/base.html"), name='schedule'),
url(r'^events.json$', 'schedule.views.events_json', name='events.json'),
)
On configure fullcalendar pour qu'il utilise le flux JSON
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: '/schedule/events.json'
});
});
</script>
Bonus
Si maintenant on souhaite afficher les dates et boutons de fullcalendar en Français
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet',
'Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort:
['Janv.','Févr.','Mars','Avr.','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
titleFormat: {
month: 'MMMM yyyy', // ex : Janvier 2010
week: "d[ MMMM][ yyyy]{ - d MMMM yyyy}", // ex : 10 — 16 Janvier 2010, semaine à cheval : 28 Décembre 2009 - 3 Janvier 2010
// todo : ajouter le numéro de la semaine
day: 'dddd d MMMM yyyy' // ex : Jeudi 14 Janvier 2010
},
columnFormat: {
month: 'ddd', // Ven.
week: 'ddd d', // Ven. 15
day: '' // affichage déja complet au niveau du 'titleFormat'
},
axisFormat: 'H:mm', // la demande de ferdinand.amoi : 15:00 (pour 15, simplement supprimer le ':mm'
timeFormat: {
'': 'H:mm', // événements vue mensuelle.
agenda: 'H:mm{ - H:mm}' // événements vue agenda
},
firstDay:1, // Lundi premier jour de la semaine
buttonText: {
prev: ' ◄ ', // left triangle
next: ' ► ', // right triangle
prevYear: ' << ', // <<
nextYear: ' >> ', // >>
today: 'Aujourd\'hui',
month: 'Mois',
week: 'Semaine',
day: 'Jour'
},
events: '/schedule/events.json'
});
});
Clic sur un événement pour le modifier
Il suffit d'ajouter ceci pour pouvoir le modifier dans l'admin
eventClick: function(calEvent, jsEvent, view) {
document.location.href = '/admin/schedule/event/'+ calEvent.id + '/';
},
dayClick: function(date, allDay, jsEvent, view) {
document.location.href = '/admin/schedule/event/add/';
}
Bien évidement, c'est un peu trop simpliste.
Nous allons donc voir dans l'article suivant comment utiliser les
forms pour intégrer cette fonctionnalité à notre app.