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: '&nbsp;&lt;&lt;&nbsp;', // <<
                nextYear: '&nbsp;&gt;&gt;&nbsp;', // >>
                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)