Le même agenda que Gastero Prod avec SPIP

Il peut être tentant d’utiliser SPIP pour présenter un agenda d’événements sous forme de calendrier. Plutôt que devoir intégrer un logiciel externe spécialisé, et en attendant que SPIP intègre peut-être un jour un nouveau type de données dédié aux événements, voici un squelette mêlant boucles SPIP et code PHP.

ATTENTION, cette contrib ne semble plus fonctionner avec les versions de SPIP ultérieure à la 1.8.2, ce qui a mené à « La fin de l’agenda Gastero Prod… »

Cet article présente une évolution de la méthode déjà présentée sur le site des contributions pour SPIP : spip_contrib.

Exemple d’agenda. L’agenda de Gastero Prod

De quelles informations avons-nous besoin ?

La première étape consiste à déterminer comment les informations seront stockées dans SPIP, et donc saisies par les rédacteurs.

L’objectif principal étant qu’un rédacteur puisse définir une date à laquelle un événement donné doit avoir lieu, nous avons besoin des éléments suivants :

  • Au moins un champ de type texte ;
  • Un champ de type date.

Pour le champ texte, c’est simple, et nous allons même pouvoir nous régaler. SPIP nous en propose au moins 3 très utiles et systématiquement présents quel que soit le paramétrage du site :

  • le titre,
  • le descriptif
  • et le texte.

La date de publication antérieure ou la vraie date de publication ?

La date de publication d’un article est déterminée automatiquement lors de sa validation, ce qui signifie que l’auteur ne peut pas la préciser à l’avance. Elle peut en revanche être modifiée par les administrateurs une fois que l’article est validé, mais l’auteur initial n’y a plus accès s’il n’est pas lui-même administrateur.

Pour utiliser cette date, il est de plus nécessaire de configurer le site pour que SPIP publie les articles post-datés, ce qui peut être gênant par ailleurs.

Cette date n’est donc pas vraiment utile pour indiquer une date d’événement.

Heureusement, SPIP propose aussi une date de publication antérieure, normalement utilisée pour indiquer à quelle date a été publié un article repris ultérieurement dans SPIP, et qui peut être définie librement par le rédacteur1.

C’est cette date que nous allons utiliser pour définir les événements de l’agenda.

Utilisation de la date de publication antérieure

Organiser les événements

Si l’agenda doit contenir beaucoup d’informations de natures diverses, il peut s’avérer utile de les qualifier (concert, film, réunion, etc.) pour les mettre en évidence et éventuellement ensuite les afficher de manière sélective.

Dans SPIP deux méthodes de classement viennent immédiatement à l’esprit :

  • classement par rubrique et sous-rubriques
  • classement par mot-clé

Pour l’agenda, nous allons utiliser les rubriques, ce qui nous permettra de constituer toute une arborescence pour stocker les articles événements. Cela va nous permettre de filtrer les types d’événements avec une notion de granularité progressive grâce au critère {branche}2.

Une hiérarchie de rubriques pour les thèmes

Dans l’agenda de Gastero Prod, le rubriquage n’est pas très développé, mais il est déjà possible de sélectionner uniquement les événements musicaux, et éventuellement de filtrer encore plus en ne considérant que les concerts.

Notez au passage que les logos des rubriques sont utilisés pour illustrer les événements.

Le rendu de la sélection thématique

Intégrer l’agenda dans la partie publique

Voilà, les événements sont créés dans une arborescence de rubriques thématiques et sont positionnés à une date, passons aux choses sérieuses, l’intégration de l’agenda résultant dans les pages du site.

Pour insérer l’agenda dans votre site, le plus simple est de créer un squelette particulier pour la rubrique de votre agenda.

J’ai par exemple créé le squelette agenda.html sur Gastero Prod, et je l’utilise selon le principe classique de SPIP dans le script agenda.php3.

Revenons calmement sur les parties importantes de ce squelette …

Les paramètres de navigation d’un mois à l’autre sont passés dans l’URL au travers de la variable date3.

Cela permet à l’agenda de ne récupérer directement en boucle SPIP que les événements du mois donné, alors que dans la version précédente de l’agenda, la sélection se faisait en PHP après une sélection en SPIP de tous les événements. La différence est donc de taille au niveau des performances.

Il faut récupérer tous les événements qui d’une part ont lieu dans le mois courant de cette date, et qui d’autre part font partie de la sélection thématique.

Sachant que la date n’est utilisable que dans une boucle de premier niveau, et que le critère {branche} n’est utilisable que dans une boucle incluse dans une boucle RUBRIQUE, donc au moins de second niveau, il est malheureusement impossible de réaliser la sélection d’événement en SPIP pur.

Tout d’abord, on prépare quelques données qui seront utilisées par la suite :

$months = array('', 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
$days = array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');

if (!isset($date) || $date == '') $date = date('Y-m-d');
ereg("^([0-9]{4})-([0-9]{2})-([0-9]{2}).*$", $date, $regs);
$cal_day = mktime(0, 0, 0, $regs[2], $regs[3], $regs[1]);

$D = date('d', $cal_day);
$M = date('m', $cal_day);
$Y = date('Y', $cal_day);

Ensuite, on rempli un tableau avec la liste des rubriques thématiques retenues :

$branche = array();
<BOUCLE_courante(RUBRIQUES){id_rubrique}>
    <BOUCLE_branche(RUBRIQUES){branche}>
        $branche[] = #ID_RUBRIQUE;
    </BOUCLE_branche>
</BOUCLE_courante>

Puis on récupère dans un nouveau tableau la liste des événements du mois donné4 :

$events = array();
<BOUCLE_evts(ARTICLES){id_secteur=43}{age_relatif_redac > -38}{age_relatif_redac < 38}{par date_redac}>
    if (in_array(#ID_RUBRIQUE, $branche)) {
        $dateEvt = ereg_replace("^([0-9]{4})-([0-9]{2})-([0-9]{2}).*$", "\\1\\2\\3", '#DATE_REDAC');
        if (!isset($events[$dateEvt])) {
            $events[$dateEvt] = array();
        }
        $events[$dateEvt][] = array('rub' => #ID_RUBRIQUE, 'link' => '#URL_ARTICLE', 'title' => '[(#TITRE|texte_script)]', 'logo' => '<img src="#URL_SITE_SPIP/IMG/[(#LOGO_ARTICLE_RUBRIQUE|fichier)]" />');
    }
</BOUCLE_evts>
?>

Une fois que l’on a notre tableau rempli de dates et événements, il ne reste plus qu’à l’afficher.

Voici le code brut du tableau représentant l’agenda :

<table cellpadding="5" cellspacing="0" align="center" border="1" class="agenda">
<form name="navigation" method="get">
<tr>
  <th colspan="7" class="agendaNav">
    <a href="#URL_SITE_SPIP/agenda.php3?id_rubrique=#ID_RUBRIQUE&date=-1-12-01"><b>&lt;&lt;</b></a>
    &nbsp;&nbsp;&nbsp;
    <select name="var_nav_month">
    <option value="01"></option><option value="02"></option><option value="03"></option><option value="04"></option><option value="05"></option><option value="06"></option><option value="07"></option><option value="08"></option><option value="09"></option><option value="10"></option><option value="11"></option><option value="12"></option>    </select>
    <select name="var_nav_year">
    <option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option>    </select>
    <input type="button" value="go" onClick="document.location.href='#URL_SITE_SPIP/agenda.php3?id_rubrique=#ID_RUBRIQUE&date=' + window.document.navigation.var_nav_year.value + '-' + window.document.navigation.var_nav_month.value + '-01'; return false;" />
    &nbsp;&nbsp;&nbsp;
    <a href="#URL_SITE_SPIP/agenda.php3?id_rubrique=#ID_RUBRIQUE&date=-012-01"><b>&gt;&gt;</b></a>
    &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    <a href="#URL_SITE_SPIP/agenda.php3?id_rubrique=#ID_RUBRIQUE&date=2016-08-04"><b>Aujourd'hui</b></a>
  </th>
</tr>
</form>
<tr>
  <th width="14%" class="agendaHead"></th><th width="14%" class="agendaHead"></th><th width="14%" class="agendaHead"></th><th width="14%" class="agendaHead"></th><th width="14%" class="agendaHead"></th><th width="14%" class="agendaHead"></th><th width="14%" class="agendaHead"></th></tr><tr><td width="14%" height="50" valign="top" class="agendaNotThisMonth">29</td><td width="14%" height="50" valign="top" class="agendaNotThisMonth">30</td><td width="14%" height="50" valign="top" class="agendaNotThisMonth">1</td><td width="14%" height="50" valign="top" class="agendaNotThisMonth">2</td><td width="14%" height="50" valign="top" class="agendaNotThisMonth">3</td><td width="14%" height="50" valign="top" class="agendaNotThisMonth">4</td><td width="14%" height="50" valign="top" class="agendaNotThisMonth">5</td></tr>
</table>

Ce n’est pas ce qu’il y a de plus simple à comprendre, mais ça devrait fonctionner sans problème, donc c’est le principal.

Personnaliser le look de l’agenda

La représentation de l’agenda pouvant difficilement se faire autrement que par un tableau, la personnalisation du look de l’agenda va essentiellement concerner les couleurs et autres caractéristiques du même type.

Il suffit en fait de placer dans une feuille de style les éléments suivants, dont les noms indiquent d’eux-mêmes la fonction :

table.agenda, table.agenda tr, table.agenda th, table.agenda td {
  font-size: 10px;
}

.agendaNav {
  background-color: #f90;
  text-align: center;
}

.agendaHead {
  background-color: #fc3;
}

.agendaThisDay {
  background-color: #fc3;
}

.agendaThisMonth {
  background-color: #eee;
}

.agendaNotThisMonth {
  background: #ddd;
}

ul.agendaThemes {
  list-style: none;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

ul.agendaThemes ul.agendaThemes {
  list-style: none;
  margin: 5px 0px 0px 15px;
  padding: 0px;
}

table.agenda select {
  font-size: 10px;
  background-color: #f90;
}

Les paramètres sont ceux de Gastero Prod, essayez de faire preuve d’initiative et de créer vos propres jeux de couleurs …

  1. Vérifiez que vous avez configuré votre site pour gérer ce type de date supplémentaire. ⬆︎

  2. Voir la documentation du critère branche ⬆︎

  3. Le paramètre date est pris en charge automatiquement par SPIP depuis sa version 1.6 dans le contexte des boucles de premier niveau ⬆︎

  4. Et des jours proches des mois précédent et suivant, puisqu’on les affiche … ⬆︎

Si vous voulez signaler une erreur ou proposer une modification de ce texte, n'hésitez pas à l'éditer directement à la source sur Github.

24 commentaires

  • Super l'agenda, il manque juste la gestion d'évenement sur plusieurs jours et sur plusieurs mois.

  • Les événements sur plusieurs jours, ce serait en effet réellement intéressant, mais j'ai des scrupules à utiliser les extras qui ne sont pas encore une fonctionnalité officielle de SPIP, et vont peut-être finir par disparaître.

    Les événements sur plusieurs mois, ce sont des répétitions, je suppose ? Si c'est le cas, il est hors de question de le faire avec SPIP, ça devient vraiment spécifique à un outil de gestion d'agenda.

  • Pour les événement sur plusieurs jours c'est bon j'ai réussi à intégrer une modification donnée dans les commentaires sur spip-contrib.

    En ce qui concerce ceux qui s'étalent sur plusieurs mois, non ce n'est pas une répétition mais imagine un festival qui dure du 28 février au 3 mars… comment le gérer pour qu'il apparaisse sur février et sur mars ? En fait ce n'est pas tellement la gestion sur plusieurs mois qui pose problème puisque, par exemple, pour février 2005 il apparait le 28 février, le 1, 2, 3, 4, 5, 6 mars sur la même page. C'est plutôt le changement de page qui est problématique.
    Il serait peut-être interressant d'utiliser la date de publication comme date de début de l'événement et la date de publication antérieur comme date de fin de l'événement. Certe on perd l'intéret de savoir quand à été écrit l'article mais pour un agenda est-ce nécessaire ?

  • OK, je vois effectivement le souci.

    Pour un événement qui couvre juste deux mois, ça peut se faire, il suffit de ramener les événements commençants le mois précédent pour voir s'ils continuent ce moi-ci.

    Par contre, pour des événements plus longs, ce n'est pas franchement pratique, on rique de devoir tout ramener, ce qui sera très négatif pour les performances.

    Pour ce qui est d'utiliser la date de publication, je ne pense pas que ce soit une bonne idée, on peut en avoir besoin pour mettre en évidence les nouveautés. C'est prévu de longue date sur Gastero Prod, mais je n'ai pas encore trouvé le temps …

  • Bonjour,
    Très bel agenda, que j'ai un peu de mal à faire fonctionner !
    Il ne me manque pas grand chose (j'ai réussi à l'afficher pour la date du jour). Etant débutant et malgré avoir fait moult recherches sur spip.net et spip contrib, je ne comprend pas comment inclure la feuille agenda.html comme page d'affichage de la rubrique spécifique N°10. En effet, l'agenda sur mon site a ce N° de rubrique. Bref, comment comprendre la phrase :

    "Pour insérer l'agenda dans votre site, le plus simple est de créer un squelette particulier pour la rubrique de votre agenda.
    J'ai par exemple créé le squelette agenda.html sur Gastero Prod, et je l'utilise selon le principe classique de SPIP dans le script agenda.php3."

    Merci d'éclairer ma lanterne…

  • Bonjour,

    Ne pourrait-on pas créer un champ extra date_fin_event qui permettrait de prendre en compte une période.

  • Bonjour,

    En relisant la discussion, je vois que la possibilité des champs extra a été évitée pour ne pas se trouver en défaut dans une version ultérieure de SPIP.

    Donc mon idée n'est pas la bonne…

  • Bonour,
    J'ai implenté votre agenda avec succès et satisfaction (à 3, on en fait plus :-))

    Il me reste un petit problème…

    Les rédacteurs n'ont pas accès à la date de publication antérieure… Seuls les administrateurs l'ont.

    J'ai du merdu quelquepart…

    Une idée ?

    Merci en tout cas pour cet contrib…

  • Je me répond moi-même, en utilisant l'interface complète plutôt que simplifiée, ça marche..

    Merci encore…

  • Super et beau boulot, j'adore !

    Juste une question, j'ai donc créé sous spip 1.8 les fichiers agenda.html et php3
    puis les 2 fichiers agenda-thèmes

    et dans ma rubrique pour l'agenda, j'appelle le fichier agenda par un
    INCLURE (agenda.php3) id_rubrique

    Juque là, tout va bien. Votre bel agenda apparaît.
    Mais quand je clique sur ">>" pour passer au mois suivant, tout mon habillage disparaît et je n'ai plus que l'agenda.

    J'ai essayé de remplacer les appels "agenda.php3" dans votre fichier par "rubrique.php3" mais là c'est l'inverse.

    N'y connaissant strictement rien en php, pourriez-vous me dire ce que je dois faire, merci ?

  • Je pense que j'ai trouvé la "coquille" :
    dans la ligne où il y a
    le lien sur le >> (je n'arrive pas à mettre le code html)
    il faut remplacer le "php echo printf" par "php printf"

    Dis-moi si ça fonctionne

    Cécile

  • Oui, bien vu pour cette coquille, je risquais pas de la trouver celle-là et je te remercie de me l'avoir donnée sur la liste spip.

    J'aiaussi modifié les liens pour garder le reste de ma page :

    "#URL_SITE_SPIP/agenda.php3 ?id_rubrique=#ID_RUBRIQUE….

    est devenu
    "#URL_SITE_SPIP/rubrique.php3 ?id_rubrique=2…

    MAIS, car il y a a un "mais", je n'arrive toujours pas à faire apparaître les évènements dans l'agenda alors que les rubriques apparaissent dans les thèmes.

    Monsieur le concepteur, si vous me lisez … ;-)

  • je progresse

    Après avoir testé d'autres choses, j'ai essayé de mettre le contenu du fichier agenda.html directement dans le squelette et là Ô miracle, tout fonctionne !

    Reste que je ne comprends pas comment appeler ce fichier avec un inclure.

    J'ai essayé

    Rien n'y fait, j'ai bien l'agenda mais vide !

    Voilà si quelqu'un a une idée, merci !

  • Ca m'intéresse ça mais dans spip-contrib,il est indiqué que cette modification pour gérer les evénements sur plusieurs jours ne fonctionne pas avec la nouvelle version. N'ayant aucune connaissance en php, je ne risque pas de l'adapter.
    Pouvez-vous m'indiquer ce qu'il faut modifier et comment ?

  • Je viens de mettre en place ce superbe agenda.
    Sur mon site, je rattache les événements à un diocèse. Les 91 diocèses correspondent à 91 mots clés dans un groupe de mots clés intitulé "Diocèses". Comment afficher le titre de l'événement puis, entre parenthèses, le diocèse, càd le mot clé ?
    Merci de votre aide.

  • Bonjour,

    j'ajoute un bravo à la liste déjà longue pour cet agenda. J'ai quand même une question. Lorsqu'il n'y a aucun evenement pour un mois donné, comment faire en sorte qu'il n'affiche pas qu'un horrible " Il n'y a pas d'article à cette adresse"

  • Normalement, ça marchait très bien (je me rends compte à l'instant que celui de ce site ne marche plus du tout !), mais des changements de SPIP ont sans doute impacté ces squelettes très particuliers.

    Je conseille à tout le monde de passer à SPIP 1.8.2 et d'utiliser l'agenda natif, ce sera plus pertinent.

  • bonjour

    je suis néophyte en ce qui concerne SPIP et je cherche à implementer un module agenda

    je cherche comment faire avec l'agenda natif de spip 1.8.3 mais je ne trouve pas documentation suffisament claire

    pouvez-vous m'aider ?

  • Bonjour,
    Je découvre avec ce fil avec surprise,
    j'avais adapté la contribution gasteroprod à mes besoins et à SPIP 1.8.3 puis 1.9.2c sans réaliser qu'un agenda public était présent dans Spip 1.9.2…

    Si cela intéresse quelqu'un je peux bien fournir mon code agenda.html qui fonctionne toujours …

    a voir sur http://assoalphonseguerin.free.fr/spip.php?page=agenda

    Merci en tous les cas à gasteroprod ‼

  • Bonjour,

    Je cherche depuis quel que temps à faire fonctionner un agenda tel que celui présent sur votre site, mais en vain. Je serais effectivement intéressée par votre code html, si cela est possible. En vous remerciant.

  • bonjour

    je suis néophyte en ce qui concerne SPIP et je cherche à implementer un module agenda

    je cherche comment faire avec l'agenda natif de spip 1.8.3 mais je ne trouve pas documentation suffisament claire

    pouvez-vous m'aider ?

    Yemek Tarifleri

  • er un agenda d'événements sous forme de calendrier. Plutôt que devoir intégrer un logiciel externe spécialisé, et en attendant que SPIP intègre peut-être un jour un nouveau type de donnée

Twitter 500px Flickr Facebook Instagram Github Feed