Squelette d’Agenda grâce au plugin Agenda

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Comment faire un agenda « qui fonctionne » dans la partie publique de son site, avec
-  un affichage par mois, semaine et Jour
-  un défilement de calendrier qui fonctionne
-  la possibilité de modifier les événements
-  et de les créer.
-  avec ou sans Zpip.

NB : cet article est écrit comme un tutoriel, si vous « savez faire » sautez à la fin et télécharger juste le Zip, qui contient les morceaux de squelette utiles.

La documentation de la partie Agenda de spip est éparse et quelquefois difficile à suivre, principalement on la retrouve sur spip.net (Pour le calendrier original, qui se sert uniquement de la date de l’article) et sur spip-contrib (Plugin Agenda, versions 1.9 et 2.1 ).

Si la partie privée est largement développée, facile à utiliser, la partie publique est beaucoup plus délicate. Pour les besoins d’un site associatif j’avais développé une première version qui obligeait à des forks [1] multiples et qui est visible sur l’ancien site du comité de lutte contre le sida.

L’évolution du site m’a obligé à replonger et les discussions sur le forum et la liste ont conduit à ce que je propose sur le nouveau site et qui est utilisé en routine pour gérer les activités de l’association.

Le but est de présenter dans la partie publique un calendrier (cases de jours) qui reprend les événements du site, et permet de les modifier ou d’en ajouter toujours depuis la partie publique.

Prérequis

Ces squelettes nécessitent le plugin agenda, donc le plugin Bonux.

Ils peuvent être utilisés avec ou sans Zpip, et Zen-Garden le thème de base est Arclite.

Principes des agendas de spip

Pour se comprendre il faut poser des bases qui viennent de la doc du plugin Agenda original :

  • Les événements sont associés à un article de spip, donc à une rubrique. Pas d’événement sans article associé.
  • Ils peuvent être munis de mots-clefs
  • La structure d’un événement et les balises associées sont bien décrites toujours dans la doc du Plugin Agenda

On suppose donc que des événements sont créés et associés à un ou plusieurs articles (j’ai pris l’option d’un seul article pour tous les événements, mais ça ne change pas le fonctionnement des squelettes).

Pour afficher les événements, sous forme de calendrier il faut deux choses (les boucles complètes sont dans les squelettes).
-  Il faut d’abord une boucle qui balaye ces événements et les « stocke pour affichage » grâce au filtre Agenda_memo_full sous la forme

[(#DATE_DEBUT|Agenda_memo_full{#DATE_FIN,#TITRE,#DESCRIPTIF,#LIEU,#URL_ARTICLE, 'couleur'})]

  • #DATE_DEBUT et #DATE_FIN seront affichés comme les dates/heures de l’événement
  • #TITRE et #LIEU seront visibles dans la case du jour de l’événement
  • #DESCRIPTIF sera visible au survol
  • #URL_ARTICLE sera l’Url pointée lors d’un click sur le texte de l’événement (on peut préférer #URL_EVENEMENT)
  • 'couleur' est un style css appliqué à la div de l’événement.

Cette boucle peut utiliser tous les critères généraux de spip, des critères d’âge, et des critères d’agenda expliqués dans la doc du plugin Agenda pour afficher seulement les événements d’un secteur, d’un article,....

Il est crucial que la boucle utilise le critère agendafull qui permet de ne retenir dans les événements que ceux qui sont concernés par le mois/jour/semaine que l’on affiche.
La syntaxe est
{agendafull date_debut, date_fin, type, AAAA, MM, JJ}

  • date_debut  et date_fin sont les champs dans la base qui contiennent les dates de début et fin de l’événement
  • type est ’mois’, ’semaine’ ou ’jour’ selon ce qu’on veut afficher comme calendrier
  • AAAA MM et JJ sont les années, mois et jour du calendrier que l’on voudra afficher.

-  Deuxièmement, en fin de boucle, il nous faut le filtre d’affichage [(#TOTAL_BOUCLE|Agenda_affiche_full{<:aucun_article:>, 'mois'})]

  • <:aucun_article:> est affiché si rien n’est stocké dans cet agenda
  • 'mois' est le type de l’agenda à afficher,ça pourrait être 'jour' 'semaine' 'période' 'mois' , ce qui affichera des calendriers correspondants.

Cette contribution concerne les événements du plugin Agenda. Spip fournit des squelettes prêts à l’emploi agenda_jour, agenda_semaine, agenda_mois MAIS ils concernent le calendrier « original » de spip donc sont hors sujet.

Le Plugin Agenda fournit des squelettes de même nom mais que nous avons modifiés
-  pour pointer sur #URL_EVENEMENT
-  pour être compatible avec Zpip.

Les morceaux de squelette pour affichage

On souhaite obtenir un calendrier par jour, semaine et mois qui présente les événements du site. On reprend pour ce faire le principe des squelettes agenda.

#SET{tt,#EVAL{$_GET['type']}}
[(#INCLURE{fond=inclure/agenda_#GET{tt,"mois"}} {ajax}{annee=#ENV{annee,#DATE|annee}} {mois=#ENV{mois,#DATE|mois}}{type=#GET{tt}}{env})]

Le 'type' de l’agenda est récupéré par un #EVAL car dans le cas de squelettes Zpip, #ENV{type} est utilisé pour autre chose.

Exemple d’agenda_mois

<BOUCLE_mois(EVENEMENTS)
	{agendafull date_debut,date_fin, mois, #ENV{annee}, #ENV{mois}}
>[(#DATE_DEBUT|affdate{'Y-m'}|=={[(#ENV{annee})]-[(#ENV{mois})]}|?{#DATE_DEBUT,[(#ENV{annee})]-[(#ENV{mois})]-01 00:00:00}
|agenda_memo_full
	{#DATE_FIN,
	[(#TITRE)], [(#REM) ce qui apparait et qui pointe <a>]
	#DESCRIPTIF,[(#REM) ce qui apparait au survol]
	#LIEU,		[(#REM) ce qui apparait sous le <a>]
	[(#URL_EVENEMENT|parametre_url{id_evenement,#ID_EVENEMENT})]   [(#REM) l'url pointée)]
	calendrier-couleur[(#ID_SECTEUR|modulo{14,1})]})]
</BOUCLE_mois>[(#DATE|agenda_affiche_full{<:aucun_article:>, 'mois'})]<//B_mois>

Les critères [(#DATE_DEBUT|affdate{'Y-m'}|=={[(#ENV{annee})]-[(#ENV{mois})]}|?{#DATE_DEBUT,[(#ENV{annee})]-[(#ENV{mois})]-01 00:00:00} servent à gérer les évènements dont le début est avant le mois en cours, et la fin après.

Cette phrase se lit : si le mois et l’année de la date de début de l’évènement sont les mêmes que celles de l’environnement, alors passe la date de début de l’évènement, sinon passe la date du premier jour du mois demandé par l’environnement.

C’est aussi simple dans le cas d’un squelette « jour » où il faut remplacer « mois et annee » par « mois, jour et annee ».

Par contre, dans le cas d’un squelette semaine, ca se complique un peu. L’idée est que si la date de début est antérieure au début de la semaine, il faut passer la date du début de la semaine. Pas simple, il a fallu développer un filtre pour cela.

Si on ne gère pas ces cas « étranges » générés par les évènements longs qui commencent avant la date demandée, on s’expose à un bug de blocage bien expliqué dans ce post de forum de REM (Merci à lui...)(le zip a été modifié le 8/01)

Les classes ’calendrier-couleur’ de 1 à 14 sont utilisées pour colorer différemment les évènements selon le secteur dans cet exemple.

Ces squelettes vont donc fonctionner « tels que » dans un site.

Reste à être compatible avec Zpip

Zpip comporte des méthodes de fourniture de page extrêmement élégantes, il suffit dans notre cas de mettre notre squelette dans contenu/page-agenda, pour que tout se passe bien. C’est a dire que notre agenda s’affichera dans le « contenu » de zpip, et que Zpip gérera le reste autour.

SAUF que Zpip utilise la variable #ENV{type} que l’agenda utilise aussi. D’où l’écriture #SET{tt,#EVAL{$_GET['type']}} qui permet de contourner l’affaire.

Un peu de jquery ne nuit pas

Pour obtenir un affichage « plus sympa », ou « à la google agenda » des évènements, j’ai utilisé « cluetip » qui au survol d’un évènement va chercher en ajax un squelette « pop_event » qui se charge de fournir une vue de l’évènement. (Je n’ai pas trouvé de plugin Jquery qui serait « standard » par exemple avec spip-bonux ou avec Mediabox, pour réaliser la même chose, ce qui allègerait grandement l’affaire...)

Il devenait inutile de cliquer sur l’évènement pour le voir, j’en ai profité pour utiliser le clic pour modifier l’évènement. Cela donne le squelette agenda_mois comme suit :

<BOUCLE_mois(EVENEMENTS)
	{agendafull date_debut,date_fin, mois, #ENV{annee}, #ENV{mois}}
>[(#DATE_DEBUT|affdate{'Y-m'}|=={[(#ENV{annee})]-[(#ENV{mois})]}|?{#DATE_DEBUT,[(#ENV{annee})]-[(#ENV{mois})]-01 00:00:00}
|agenda_memo_full
	{#DATE_FIN,
	[(#TITRE)], [(#REM) ce qui apparait et qui pointe <a>]
	#DESCRIPTIF,[(#REM) ce qui apparait au survol]
	#LIEU,		[(#REM) ce qui apparait]
[(#URL_PAGE{mod_evenement}|parametre_url{id_evenement,#ID_EVENEMENT})],
	calendrier-couleur[(#ID_SECTEUR|modulo{14,1})]})]</BOUCLE_mois>[(#DATE|
	agenda_affiche_full{<:aucun_article:>, 'mois'}
)]<//B_mois>

On va utiliser #FORMULAIRE_EDITER_EVENEMENT dont la syntaxe est :

#FORMULAIRE_EDITER_EVENEMENT{id_evenement,id_article,url,lier_trad,config_fonc,row}
  • id_evenement est l’évènement à éditer, ou zéro pour en faire un nouveau,
  • id_article est l’article associé,
  • url est l’url où retourner après avoir validé le formulaire (dans mon cas, c’est la page appelante),
  • je suis moins savant sur
    • lier_trad,
    • config_fonc,
    • row qui ne m’ont pas livré leur secrets....

Le squelette mod_evenement se présente comme cela.

<BOUCLE_event(spip_evenements){id_evenement}>
<BOUCLE_A(ARTICLES){id_article}>
<div class='cadre-formulaire-editer'>
<div class="entete-formulaire">
	#ENV**{icone_retour}
	[<p>(#ENV{id_evenement}|intval|?{<:agenda:titre_cadre_modifier_evenement:>,<:agenda:titre_cadre_ajouter_evenement:>})</p>]
	[<h1>(#ENV{id_evenement}|intval|?{##ENV{id_evenement}})</h1>]
</div>
#FORMULAIRE_EDITER_EVENEMENT{#ENV{id_evenement},#ENV{id_article},
#EVAL{$GLOBALS[_SERVER][HTTP_REFERER]}, [(#REM) La page d'où on vient]
#ENV{lier_trad},#ENV{config_fonc},#ENV{row}}
</div>
</BOUCLE_A>
</BOUCLE_event>
</B_event>
[(#REM) pas d'evenement, on le rajoute donc il faut trouver un article 
on prend celui du premier evenement de la base]
<BOUCLE_e2(spip_evenements){tout}{par date_debut}{0,1}>
<div class='cadre-formulaire-editer'>
<div class="entete-formulaire">
	#ENV**{icone_retour}
	<p><:agenda:titre_cadre_ajouter_evenement:></p>
</div>
#FORMULAIRE_EDITER_EVENEMENT{0,#ID_ARTICLE,#EVAL{$GLOBALS[_SERVER][HTTP_REFERER]},#ENV{lier_trad},#ENV{config_fonc},#ENV{row}}
</div>
</BOUCLE_e2>
<//B_event>

Il faut une boucle article autour du #FORMULAIRE_EDITER_EVENEMENT (pas d’évènement sans article associé) même si l’évènement est à créer.

Conclusion

L’agenda du plugin Agenda de spip est très puissant, mais pas si simple à utiliser dans la partie publique des sites. L’apport du plugin Zpip et des squelettes Zpip-dist ainsi que des thèmes a été extrêmement précieux. Il reste encore quelques mystères autour de #FORMULAIRE_EVENEMENT, mais je suis sur que tout cela va s’éclaircir, d’autant qu’un Agenda 2.1 est sur la zone en train de s’améliorer.

Merci à tous les développeurs et aux contributeurs qui débroussaillent pour nous la jungle du php....

Notes

[1modifications du code de spip

Dernière modification de cette page le 9 février 2019

Discussion

23 discussions

  • Bonjour a tous j’aimerais bien utiliser cette contrib mais comment dois je faire pour l’installer sur mon site merci d’avance

    Répondre à ce message

  • Renée Picard

    Bonjour

    J’essaie d’installer un formulaire d’édition d’événements
    http://www.coffretsforest.com/spip.php?article50
    J’obtiens un formulaire mais je suis incapable d’ajouter un événement.

    Pour comprendre, je télécharge cette contrib et l’installe en local.
    Je bute sur cette erreur :
    Aucun squelette formulaires/administration.html n’est disponible...

    Je ne trouve pas comment corriger cela ???
    Merci
    RP

    Répondre à ce message

  • 1
    P-Yves

    Bonjour et merci de ces explications qui permettent de mieux comprendre le fonctionnement de l’agenda.

    Je butte néanmoins sur un problème qui est peut-être simple, mais qui résiste ;-) Il s’agit d’afficher un agenda (vue mensuelle) où les événements apparaissent avec des couleurs différentes selon un mot-clé associé à l’événement.

    Les événements correspondent en fait à des créneaux horaires. Si un créneau est libre (associé au mot clef « libre ») il faudrait que l’événement paraisse en vert, et sinon en rouge.

    Le filtre Agenda_memo_full accepte un paramètre qui permet de passe une couleur (utilisée ensuite comme style CSS). Ce serait parfait si la couleur n’était pas fixée « en dur » comme dans l’exemple ci-dessus, mais que l’on pouvait aller chercher le mot clef associé à l’article.

    Comme on ne peut pas remettre une boucle à l’intérieur des paramètres d’un filtre, je suis passé par une « noisette ».

    Ainsi j’ai dans mon squelette principal :

    <BOUCLE_mois(EVENEMENTS)
    	{agendafull date_debut,date_fin, mois, #ENV{annee}, #ENV{mois}}
    >[(#DATE_DEBUT|Agenda_memo_full{#DATE_FIN,'','','','',
    		[(#INCLURE{fond=mot-clef-creneau}{id_evenement})]})]</BOUCLE_mois>[(#DATE|
    	Agenda_affiche_full{<:aucun_article:>, 'mois'}
    )]<//B_mois>

    et dans la noisette mot-clef-creneau :

    1. <BOUCLE_mot_clef_creneau(MOTS){id_evenement}>couleur#ID_MOT</BOUCLE_mot_clef_creneau>

    Cela fonctionne presque : je récupère bien un style CSS correspondant à l’ID du mot clef... mais je tombe sur un autre problème : les événements dans chaque journée ne sont plus classés par ordre chronologique, mais par mot clef !

    Si je supprime la boucle MOTS dans la noisette, les événements reviennent aussitôt dans le bon ordre... mais je perds la gestion des couleurs.

    Avez-vous une idée de ce qu’il faudrait faire ?

    Merci d’avance,
    PY.

    Nota : je travaille sur SPIP 1.9.2 avec la version d’Agenda associée.

    • bonjour
      essaie peut-etre

      <BOUCLE_mois(EVENEMENTS)
              {agendafull date_debut,date_fin, mois, #ENV{annee}, #ENV{mois}}{par date_debut}
      >

      mais c’est bizarre,, as-tu un url public pour voir la bête ?

    Répondre à ce message

  • 1
    Frédéric Lorence

    Bonjour,
    Je travaille sur un site SPIP (2.1.8).
    Tout se passait jusqu’à ce que j’installe et active les plugins AGENDA_2 et Bonux.

    Depuis j’ai l’erreur suivante :

    « Fatal error : Cannot redeclare balise_CONFIG() (previously declared in C :\wamp\www\chantierecole2\plugins\spip-bonux\configurer\pipelines.php:297) in C :\wamp\www\chantierecole2\plugins\cfg\cfg_fonctions.php on line 45 »

    Apparemment conflit entre Bonux et cfg

    Je suis en local sous Wamp : Php 5.3 - MySql 5.1.36

    Pouvez-vous m’éclairer ?

    Merci de votre réponse

    FL

    — 

    • vu d’après ton message d’erreur, c’est dans cfg que ca se plante, remets cfg et spip-bonux à jour peut-être ?

    Répondre à ce message

  • 1

    La contrib qui m’a sauvée !
    Une petite erreur dans le squelette /contenu/evenement.html : l’ouverture conditionnelle de la boucle <B_MC> n’est pas fermée, ce qui provoque un div de trop quand elle est vide.

    • Hello,

      si cette modeste contrib t’a sauvée, c’est que tu n’était qu’un tout petit peu égarée.. merci en tout cas de la correction que je commiterait dès que possible.

    Répondre à ce message

  • Frédéric Lorence

    Oups...
    Problème résolu après mise à jour de cfg en 1.16...
    Veuillez ne pas tenir compte de mon message précédent...
    Désolé pour le dérangement...

    ... et merci pour ce plugin qui fonctionne...

    Répondre à ce message

  • 1

    Bonjour,

    J’aimerai savoir si c’est possible sur l’agenda d’afficher le titre et le chapo de l’article et non le titre et le descriptif de l’évènement ?? Si Oui quel fichier faut toucher ?

    PS : je veux dire l’article où est attaché l’évènement

    Merci

    • Dans agenda_mois tu vas trouver ceci

      <BOUCLE_mois(EVENEMENTS){id_article ?}
      	{agendafull date_debut,date_fin, mois, #ENV{annee}, #ENV{mois}}>[(#DATE_DEBUT|affdate{'Y-m'}|=={[(#ENV{annee})]-[(#ENV{mois})]}|?{#DATE_DEBUT,[(#ENV{annee})]-[(#ENV{mois})]-01 00:00:00}
      |agenda_memo_full
      	{#DATE_FIN,
      	[(#TITRE)], [(#REM) ce qui apparait et qui pointe <a>]
      	#DESCRIPTIF,[(#REM) ce qui apparait au survol]
      	#LIEU,		[(#REM) ce qui apparait]
      	[(#REM) #URL_EVENEMENT|parametre_url{id_evenement,#ID_EVENEMENT} , l'url pointée)]
      	[(#URL_PAGE{mod_evenement}|parametre_url{id_evenement,#ID_EVENEMENT})],
      	calendrier-couleur[(#HORAIRE|=={non}|?{'3',
      		[(#DATE_DEBUT|affdate{'Y-m-d'}|=={[(#DATE_FIN|affdate{'Y-m-d'})]}|?{'1','2'})]})]
      	})]</BOUCLE_mois>[(#DATE|
      	agenda_affiche_full{<:aucun_article:>, 'mois'}
      )]<//B_mois>

      Ce que tu veux changer est probablement
      #TITRE,#DESCRIPTIF,#LIEU,#URL_PAGE{mod_evenement}
      tu n’auras qu’a faire les modifs.
      Bons tests !

    Répondre à ce message

  • 1

    Bonjour,
    J’aime beaucoup les choix de cet agenda.
    A la vision de l’exemple je me pose la question de savoir si quelqu’un a fait un agenda avec les choix par menu déroulant des groupes de mots clés.
    Autrement dit, si on suit l’exemple, permettre au visiteur de sélectionner tous les événements de Marie (groupe intervenants), ou toutes les interventions courtes (groupe Type intervention).
    Merci beaucoup.

    • Je n’ai pas le temps la de suite, mais les évolutions vont être
      -  affichage/masquage des évènements par mot-clef ou groupe de mort-clefs (en jquery)
      -  import export de l’agenda vers de depuis les Agenda google (ca marche déjà, mais pas documenté, grâce aux itérateurs).

      Plus de news en mai a mon retour de vacances je pense.

      Merci en tout cas des compliments, ca fait plaisir de servir a quelque chose, et merci à ceux qui ont été aidés de publier les modifs sur le forum.

    Répondre à ce message

  • Bonjour,

    J’ai un menu en image-lien qui au clic nous permet d’accéder à une partie du site.
    Je cherchais un plugin permettant au survol de l’image-lien l’ouverture d’une « popup » contenant les rubriques contenues dans cette partie du site et suis tombée sur votre article :

    « Pour obtenir un affichage « plus sympa », ou « à la google agenda » des évènements, j’ai utilisé « cluetip » qui au survol d’un évènement va chercher en ajax un squelette « pop_event » qui se charge de fournir une vue de l’évènement. (Je n’ai pas trouvé de plugin Jquery qui serait « standard » par exemple avec spip-bonux ou avec Mediabox, pour réaliser la même chose, ce qui allègerait grandement l’affaire...) »

    Pour arriver au même résultat, que dois-je installer ?
    A l’avance merci de votre aide.

    Répondre à ce message

  • 2

    Bonjour à tous,

    je viens d’essayer ce squelette d’agenda sur une installation fraîche de SPIP 2.1.6 avec le plugin Agenda 2.0 mais je fais face à un bug.

    En effet, je remarque que lorsque l’on passe en vue par semaine, si un évènement est à cheval sur deux semaines (ou plus), il est impossible de passer à la semaine suivante. Les variables d’environnement sont bien passées par les liens, mais l’affichage ne s’actualise pas pour afficher la nouvelle semaine. Les événements qui ne sont pas à cheval disparaissent et seul celui à cheval s’affiche.

    Sinon, c’est une très bonne contribution pour aborder ce plugin pour SPIP très puissant mais relativement obscur. Merci beaucoup à son auteur.

    • effectivement il y a un bug sur les évènements longs dans la partie semaine comme tu le dis et aussi sur la partie jour. Je cherche... la boucle évènements trouve bien tous les évènements, mais l’appel à agenda_affiche se passe mal.

      VIsible ici : http://www.clcs.nc/?-45-Agenda-
      les passages en « jour » et en « semaine » dans la semaine 01 sont infructueux.

      Je cherche....

    • Merci d’avoir souligné le bug, j’ai corrigé l’article et le Zip viendra ce weekend. Il faudra rajouter un filtre dans mes_fonctions.php

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom