SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 271 visiteurs en ce moment

Accueil > Dates, calendriers et agendas > Plugin Agenda > Squelette d’Agenda grâce au plugin Agenda

Squelette d’Agenda grâce au plugin Agenda

2 janvier 2011 – par mj – 37 commentaires

8 votes

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.

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

Télécharger

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

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

Télécharger

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 :

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

Télécharger

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.

  1. <BOUCLE_event(spip_evenements){id_evenement}>
  2. <BOUCLE_A(ARTICLES){id_article}>
  3. <div class='cadre-formulaire-editer'>
  4. <div class="entete-formulaire">
  5. #ENV**{icone_retour}
  6. [<p>(#ENV{id_evenement}|intval|?{<:agenda:titre_cadre_modifier_evenement:>,<:agenda:titre_cadre_ajouter_evenement:>})</p>]
  7. [<h1>(#ENV{id_evenement}|intval|?{##ENV{id_evenement}})</h1>]
  8. </div>
  9. #FORMULAIRE_EDITER_EVENEMENT{#ENV{id_evenement},#ENV{id_article},
  10. #EVAL{$GLOBALS[_SERVER][HTTP_REFERER]}, [(#REM) La page d'où on vient]
  11. #ENV{lier_trad},#ENV{config_fonc},#ENV{row}}
  12. </div>
  13. </BOUCLE_A>
  14. </BOUCLE_event>
  15. </B_event>
  16. [(#REM) pas d'evenement, on le rajoute donc il faut trouver un article
  17. on prend celui du premier evenement de la base]
  18. <BOUCLE_e2(spip_evenements){tout}{par date_debut}{0,1}>
  19. <div class='cadre-formulaire-editer'>
  20. <div class="entete-formulaire">
  21. #ENV**{icone_retour}
  22. <p><:agenda:titre_cadre_ajouter_evenement:></p>
  23. </div>
  24. #FORMULAIRE_EDITER_EVENEMENT{0,#ID_ARTICLE,#EVAL{$GLOBALS[_SERVER][HTTP_REFERER]},#ENV{lier_trad},#ENV{config_fonc},#ENV{row}}
  25. </div>
  26. </BOUCLE_e2>
  27. <//B_event>

Télécharger

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 8 janvier 2011

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 21 novembre 2012 à 12:17, par Patrick En réponse à : Squelette d’Agenda grâce au plugin Agenda

    Bonjour,
    J’ai trouvé ce code dans des archives spip qui permet de lister des évènements :
    fichier joint en image.

    J’aimerais savoir comment faire pour qu’au survol de l’évènement, cluetip ouvre une fenêtre comme dans votre article.
    Je bloque car je n’aimerais pas ouvrir tout le calendrier, seulement les évènements publics .

    Visible ici :
    Merci par avance.

    GIF - 14 ko
    • Le 22 novembre 2012 à 09:49, par Patrick En réponse à : Squelette d’Agenda grâce au plugin Agenda

      Et (désolé d’avoir été malpoli) merci pour cette contribution.
      La démo concerne le paragraphe « Evènements à venir ».
      Bonne journée.

    Répondre à ce message

  • Le 8 novembre 2012 à 12:18, par dut En réponse à : Squelette d’Agenda grâce au plugin Agenda

    J’ai éprouvé le souhait de permettre sur le formulaire de géolocaliser un événement.
    Un ajout dans mod_evenement.html dans ce genre le permet

    <div>
    <BOUCLE_agenda_gis(GIS){id_evenement}>
    [(#INCLURE{fond=modeles/carte_gis_preview,id_objet=#ID_EVENEMENT,evenement})]
    </BOUCLE_agenda_gis>

    [(#INCLURE{fond=prive/inclure/gis_objet_formulaires,objet=evenement,id_objet=#ID_EVENEMENT,ajax})]
    </div>

    Répondre à ce message

  • Le 24 octobre 2012 à 14:45, par dut En réponse à : Squelette d’Agenda grâce au plugin Agenda

    Je vois ce que fait le critère

    [(#DATE_DEBUT|affdate{'Y-m'}|=={[(#ENV{annee})]-[(#ENV{mois})]}|?{#DATE_DEBUT,[(#ENV{annee})]-[(#ENV{mois})]-01 00:00:00}

    Mais je rencontre le soucis suivant : j’ai un calendrier qui s’étend sur plusieurs mois donc les événements commençant au délà du 1er du second mois ne sont pas correctement traités.

    J’aurais plutôt besoin d’un critère qui remplace #DATE_DEBUT seulement si celle ci est avant la borne définie par #ENV annee et #ENV mois.
    Je patauge un peu et n’arrive pas à créer un critère adéquat.

    Répondre à ce message

  • Le 1er octobre 2012 à 08:02, par dut En réponse à : Squelette d’Agenda grâce au plugin Agenda

    J’aimerai exclure certains événements de l’affichage en fonction de la durée de l’événement.

    Comment spécifier cela. J’ai installé le filtre durée qui me permet de connaitre la durée de chaque événement ,mais je ne sais pas comment désactiver l’affichage des événements souhaités.

    Répondre à ce message

  • Le 1er octobre 2012 à 07:54, par dut En réponse à : Squelette d’Agenda grâce au plugin Agenda

    Quand un événement n’a pas d’heure de fin, je spécifie une heure de fin identiques à celle de début, cela permet de n’afficher que la date de début et fonctionne sur l’ensemble du site.

    Malheureusement, agenda_full propose systématiquement les deux heures.

    J’ai un peu regardé du côté de agenda_memo_evt_full, qui ne propose pas les heures, pour traiter celles-ci dans mon squelette. Hélas, quand j’utilise cette instruction, la pagination de mon calendrier ne fonctionne plus.

    Comment obteniir un calendrier conforme à mes souhaits, soit en amendant la fonction agenda_memo_evt_full, soit en permettant la pagination.

    Merci.

    Répondre à ce message

  • Le 28 septembre 2012 à 22:54, par Stéphane Santon En réponse à : Squelette d’Agenda grâce au plugin Agenda

    L’insertion de nouvel événement est par
    #FORMULAIRE_EDITER_EVENEMENT{0,#ID_ARTICLE,#EVAL{$GLOBALS[_SERVER][HTTP_REFERER]},#ENV{lier_trad},#ENV{config_fonc},#ENV{row}}

    Comment définir une fonction callback à appeler au retour de la création d’événement (clic [Enregistrer]) sans recharger toute la page ?

    • Le 29 septembre 2012 à 01:31, par mj En réponse à : Squelette d’Agenda grâce au plugin Agenda

      Honnêtement j’ai cherché et je n’ai pas trouvé la solution hélas...

    • Le 29 septembre 2012 à 08:55, par Stéphane Santon En réponse à : Squelette d’Agenda grâce au plugin Agenda

      Bonjour,

      Merci de la réponse, ça m’évitera de chercher plus.
      Ce serait pourtant bien utile pour rafraichir une liste dans laquelle l’événement a été créé.
      La solution serait donc de mettre le formulaire dans le même bloc ajax que la liste, mais pas toujours glop pour la mise en page...

    • Le 29 septembre 2012 à 09:45, par Cerdic En réponse à : Squelette d’Agenda grâce au plugin Agenda

      Bonjour,

      Plusieurs solutions pour faire cela :

      • se brancher sur le pipeline formulaires_traiter(), et ajouter le javascript nécessaire a $flux['data']['message_ok'] pour ce formulaire là. Inconvénient : ce n’est pas contextuel, et cela oblige à faire reference dans le php (côté serveur) à la structure de la page (client)

      Plus propre, en 2 étapes :

      • côté PHP se brancher sur le pipeline formulaires_traiter(), et ajouter un marqueur HTML (un div caché avec une classe particulière) qui indique qu’un événement a été créé ou modifié.
      • côté HTML, lancer une fonction javascript sur onAjaxLoad() qui sera appelée automatiquement après soumission du formulaire ajax. Dans cette fonction regarder si le marqueur HTML est présent dans la page, et le cas echeant lancer le rafraichissement de la liste.

      Je note que ceci pourrait être simplifié en déclenchant automatiquement un événement javascript lors du retour ajax d’un formulaire (amélioration pour plus tard)

    • Le 29 septembre 2012 à 09:49, par Stéphane Santon En réponse à : Squelette d’Agenda grâce au plugin Agenda

      Wouahou ! Quelle technique ! ;-)

      Merci beaucoup Cédric pour la solution. Il me faudra un moment bien calme pour la mettre en œuvre...

    Répondre à ce message

  • Le 1er juillet 2012 à 08:28, par Gil En réponse à : Squelette d’Agenda grâce au plugin Agenda

    Couleurs / mot-clés et agenda

    Bonjour,

    N’ayant toujours pas trouvé, je réitère ma question :

    J’ai attribué un mot clé aux évènements de l’agenda.
    Je souhaite que quand le mot clé « Complet » est ajouté à l’évènement, le fond de la case du jour correspondant devienne rouge.

    Plusieurs essais, mais rien de concluant.
    J’affiche l’infobulle avec le Mot « Complet », mais je ne parviens pas attribuer un style dans calendrier mini.

    Quelqu’un a-t-il une réponse ?

    Merci

    Répondre à ce message

  • Le 14 mars 2012 à 20:41, par Sylvano En réponse à : Squelette d’Agenda grâce au plugin Agenda

    Bonsoir !

    Je bloque sur l’affichage du formulaire_editer_evenement dans une modalbox : pas de modalbox chez moi...
    Je patauge un peu en js et jQuery... Après avoir comparé les fichiers téléchargés et le code présenté sur le site donné en exemple, j’ai cru qu’il fallait corriger dans le fichier head.html :

    -  après : $(this).click(function(e){

    remplacer la ligne existante par ces deux lignes :

    var K="[(#URL_PAGE{mod_evenement})]&id_evenement="+ X[1];
    jQuery.modalbox(K,{iframe:true,width:"55%",height:"90%",autoResize:true});

    Seulement ça ne marche toujours pas chez moi... Où est l’erreur ?

    Merci !

    Sylvano

    • Le 16 mars 2012 à 07:29, par Sylvano En réponse à : Squelette d’Agenda grâce au plugin Agenda

      Hello,
      J’ai résolu mon problème par les grands moyens. J’avais installé le plugin « fancybox » pour un autre propos, alors : j’ai résumé ça

      $(this).click(function(e){
      jQuery.fn.modalbox({href:"#URL_SITE_SPIP"});
      return false;
      });

      par ça :

      $(this).fancybox();

      C’est plus clair pour moi ;)

      Sylvano

    Répondre à ce message

  • Le 29 septembre 2011 à 18:47, par Mib68 En réponse à : Squelette d’Agenda grâce au plugin Agenda

    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

  • Le 16 août 2011 à 20:13, par Renée Picard En réponse à : Squelette d’Agenda grâce au plugin Agenda

    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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là