TP : Agenda - Views¶
date: | 2012-05-01 23:26 |
---|---|
tags: | django, python |
category: | Django |
author: | Rémy Hubscher |
Énoncé¶
Nous souhaitons réaliser un agenda qui nous permettra :
- De gérer plusieurs agenda
- D’intégrer des événements dans l’agenda
- D’ajouter, modifier, supprimer, déplacer un événement
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.
Conclusion¶
Nous avons maintenant une view pour afficher notre agenda, en cliquant sur un événement nous pouvons le modifier en cliquant sur un case vide en ajouter un.
Vous pouvez le tester ici : http://django-story.ionyse.com/demos/schedule/ - (login/pwd : demo)