Carnet Wiki

Calendrier et SPIP 3

Version 4 — Août 2012 Maïeul

Pour faire/utiliser un calendrier avec SPIP 3, de nouvelles possibilités apparaissent, avec les approches "FullCalendar et Organiseur : mémorisation des éléments disponibles d’après la liste (avant la rédaction d’un tutoriel complet..)

Un tutoriel existe désormais : SPIP 3, Agenda et FullCalendar

Depuis la version 1.8, SPIP est doté d’un puissant outil pour l’affichage de toutes sortes de de listes de dates sous forme d’agenda :
http://www.spip.net/en_article5295.html

Une version plus « moderne » cad « ajax » existe pour SPIP 2 et 2.1 comme plugin Fullcalendar de Ngombe :
http://www.spip-contrib.net/FullCalendar,3736

A mon avis sous SPIP 3 on peut remplacer ce dernier par le calendrier de l’extension « Organiseur » (Cédric du Collectif SPIP ?), mais la démarche à suivre manque encore d’un tutoriel.

A ma connaissance il faut passer un fichier Json à l’organiseur, mais bien des questions restent ouvertes :

-  Comment coder un calendrier qui reprend les données Google ?
-  Comment éviter de toujours charger la totalité des données ?
-  Comment contrôler les couleurs et la mise en page de l’agenda SPIP 3 ?
-  Le plugin Fullcallendar pour SPIP 2 possède une interface avec jQueryUI, on peut donc le colorier avec http://jqueryui.com/themeroller/ - Est-ce que c’est également possible avec l’agenda de l’organiseur et est-ce qu’il est possible de gérer les CSS d’un site ZPIP avec Themeroller ?
-  Comment fabriquer un agenda qui marche aussi sans Javascript ?

J’aimerais pourvoir utiliser Fullcalendar dans sa version SPIP et je sais qu’il y a beaucoup de points à développer pour arriver à créer une documentation. Je veux bien y contribuer, mais il me faudrait un point de départ afin de réussir à entrer plus profondément dans la question.

Quelques clés (indiquées par Cedric)

-  le plugin organiseur contient un squelette d’exemple contenu/calendrier.html utilisé dans ?page=calendrier de la dist
-  ce squelette installe le calendrier fullcalendar sur la div#calendrier, en lui indiquant comme source de données :
events: "[(#URL_PAGE{calendrier_quete.json}|parametre_url{id_mot,#ENV{id_mot,''}}|parametre_url{id_rubrique,#ENV{id_rubrique,''}})]"
c’est à dire que fullcalendar va appeller l’url
spip.php ?page=calendrier_quete.json&start=xxx&end=yyy
à chaque affichage de mois/semaine/jour.
start et end sont la date de début et de fin affichée sur la vue du calendrier

Le squelette calendrier_quete.json.html est donc chargé de lister tous les événements à afficher entre ces deux dates, au format json

On a donc d’un côté un squelette chargé de l’affichage (qui lance le javascript de fullcalendar, et que l’on paramètre comme l’on veut avec les options de fullcalendar), et d’un autre côté un squelette chargé de fournir les données (« événements ») affichées dans le calendrier.

Le plugin organiseur fournit un exemple de squelette calendrier_quete.json.html :

[<BOUCLE_periode(ARTICLES){id_mot?}{id_rubrique?}
	{agenda date, periode,
	#ENV{start}|todate|affdate{Y}, #ENV{start}|todate|affdate{m}, #ENV{start}|todate|affdate{d},
	#ENV{end}|todate|affdate{Y}, #ENV{end}|todate|affdate{m}, #ENV{end}|todate|affdate{d}}{', '}>
[(#ARRAY{id,#ID_ARTICLE,title,[(#TITRE|html2unicode|unicode2charset)],allDay,#EVAL{false},start,#DATE,end,#DATE,url,#URL_ARTICLE,className,calendrier-couleur6,description,[(#INTRODUCTION|html2unicode|unicode2charset)]}|json_encode)]</BOUCLE_periode>]

On peut remarquer que ce squelette utilise le critère agenda sur la boucle ARTICLES, en prenant en référence start et end. La seule subtilité est que start et end sont fournies au format timestamp, et il faut donc les mettre en forme en jour, mois, année comme attendu par le critère agenda.

Le contenu de la boucle fabrique un tableau avec les entrées suivants :
id : id unique de l’événement (ici l’id_article)
title : titre de l’événement
start : date de début de l’événement
end : date de fin de l’événement
url : url sur laquelle on envoi lors du clic sur l’événement
className : classe css appliquée à l’événement (tu peux réutiliser ici les calendrier-couleurxx du vieux calendrier de SPIP, qui sont encore supportées)
description : courte description de l’événement, affichée dans le calendrier

Le tableau est encodé au format json via json_encode, et le squelette doit renvoyer un json valide.

Comme c’est ce squelette qui produit les données, tu peux tout aussi bien aller chercher des articles, des breves, des articles syndiqués, ou des événement d’un google calendar via une boucle DATA, du moment que ton squelette renvoie bien les événements entre les deux dates, décrits par le tableau au format json avec les entrées ci-dessus.

Il n’y a pas d’intégration poussée de fullcalendar, et il serait sans doute judicieux de porter le plugin homonyme sous SPIP 3, en enlevant ce qui fait doublon, mais je n’ai pas creusé ce point. En particulier, je n’ai pas regardé comment utiliser les themeRoller de jQueryUI pour le fullcalendar (et NON tu ne peux pas gérer les CSS de Zpip par themeRoller, mais c’est une question qui n’a rien à voir).

Pour l’alternative sans javascript, celle-ci n’est pas mise en oeuvre dans le calendrier du plugin organiseur.
Je l’ai fait dans le cadre du mini-calendrier, et il faudrait que je le refasse proprement pareil dans le squelette calendrier du plugin organiseur.

En deux mots, j’ai pris pour principe simple d’afficher les événements sous forme de liste à la place du calendrier quand celui-ci n’est pas affiché faute de JS. L’astuce est que j’utilise une boucle DATA sur le même squelette json que FullCalendar, ce qui permet d’avoir un truc homogène et de ne pas avoir à se soucier d’écrire les boucles qui piochent les données dans 2 squelettes différents.

Memorisation d’echages Cedric/Klauss.. sur la liste