Calendrier Mini 2.0

Ce plugin ajoute la balise #CALENDRIER_MINI qui insère un petit widget de navigation par mois dans les dates des évènements.

Fonctionnement du mini calendrier

Le mini calendrier présente un mois à la fois. Les jours du mois comportant des évènements sont surlignés. Un clic sur l’un de ces jours permet de naviguer vers une page qui présentera les évènements de ce jour.

Le mini calendrier comporte deux liens de navigation pour passer au mois précédent ou au mois suivant, ainsi que deux champs de sélection pour aller directement à n’importe quel autre mois ou année.

La navigation d’un mois à un autre se fait immédiatement, sans rechargement de la page. La liste des évènements pour le mois en cours est rechargée en tâche de fond et mise à jour sur le mini calendrier (chargement asynchrone au format JSON).

Les évènements affichés par le mini calendrier peuvent être de n’importe quelle nature (publication des articles du site, commentaires, objets évènements du plugin agenda).

A partir de la version 2.3.0, la liste des événements d’une journée est affichée au survol (tooltip).

Accessibilité et alternative
Le mini calendrier insère également une alternative qui permet aux utilisateurs sans javascript ainsi qu’aux robots d’indexation de disposer des liens vers chaque jour (pour peu qu’il contienne un évènement) du mois en cours ainsi que vers le mois précédent ou le mois suivant.

Insertion du mini calendrier

Le mini-calendrier est inséré simplement dans vos squelettes au moyen de la balise #CALENDRIER_MINI

Cette version 2.0 du plugin reprend la syntaxe des versions précédentes du plugin « Calendrier mini » : #CALENDRIER_MINI{url, url_json}

  • url désigne l’URL de la page sur laquelle envoyer le visiteur lorsqu’il clique sur un jour (#SELF par défaut)
  • url_json désigne l’URL appelée pour charger la liste en JSON des évènements entre deux dates (#URL_PAGE{calendrier_mini.json} par défaut).

Dans cette syntaxe courte, la variable date utilisée est nommée archives et la date courante est automatiquement capturée d’après #ENV{archives}.
Un exemple d’utilisation est :

  1. #CALENDRIER_MINI{#SELF, #URL_PAGE{mes_evenements.json}}

Le plugin supporte également la syntaxe longue utilisée dans le plugin « Agenda » :
#CALENDRIER_MINI{date, var_date, url, url_json}

  • date est la valeur courante de la date ; le mini calendrier se positionnera sur le mois correspondant ;
  • var_date est le nom de la variable date qui sera passée en argument à la page appelée quand le visiteur clique sur un jour ;
  • url désigne l’URL de la page sur laquelle envoyer le visiteur lorsqu’il clique sur un jour (#SELF par défaut) ;
  • url_json désigne l’URL appelée pour charger la liste en JSON des évènements entre deux dates (#URL_PAGE{calendrier_mini.json} par défaut).

Un exemple d’utilisation de cette syntaxe est :

  1. #CALENDRIER_MINI{#ENV{date}, date, #SELF, #URL_PAGE{evenements_mini.json}}

Exemple : afficher les évènements créés dans le plugin « Agenda »

[(#CALENDRIER_MINI{#ENV{date},
  date, 
  #URL_PAGE{jour},
  #URL_PAGE{calendrier_mini_event.json}})]

Dans cet exemple :

  • on utilise le squelette « calendrier_mini_event.json.html » fourni par le plugin « Agenda » pour récupérer les évènements créés dans l’agenda ;
  • la page d’affichage des évènements lorsque l’on clique sur une date (avec au moins un évènement !) utilise le squelette « jour.html », lui aussi fourni dans le plugin « Agenda » ;
  • le squelette « jour.html » utilisant le paramètre d’environnement date pour boucler dans les évènements, on prend soin de passer date en 2e paramètre de la balise.

Liste des évènements

Les évènements affichés dans le mini-calendrier sont fournis au format JSON par un squelette qui est appelé à chaque changement de mois du mini calendrier.

Par défaut c’est calendrier_mini.json.html qui génère la liste des articles publiés entre start et end fournis tous deux au format « timestamp » (nombre de secondes depuis 1970) dans l’URL.

Pour modifier la liste des évènements affichés dans le mini calendrier, il suffit de modifier le squelette calendrier_mini.json.html (ou de le copier sous un autre nom en passant ensuite la valeur correspondante pour l’argument url_json).

Le title de chaque événement envoyé par le squelette sert à afficher le tooltip au survol de chaque date. Vous pouvez le personnaliser en le préfixant de l’heure de début par exemple, quand cela est pertinent.

Collecte automatique de id_article, id_rubrique et id_mot

Quand elle est utilisée avec la syntaxe sans l’url de la page JSON, la balise #CALENDRIER_MINI collecte automatiquement (comme elle le faisait auparavant) les #ID_ARTICLE, #ID_RUBRIQUE et #ID_MOT du contexte où elle est appelée. Les valeurs de id_article, id_rubrique et id_mot sont alors passées à l’url de la page JSON par défaut.

Dès que vous précisez en dernier argument de #CALENDRIER_MINI l’url de la page JSON qui fournit les événements, il vous appartient d’y préciser les id_article, id_rubrique ou id_mot que vous souhaitez prendre en compte, car ceux-ci ne sont plus transmis automatiquement.
Ce fonctionnement vous permet ainsi de désactiver la transmission automatique au besoin.

Personnalisation de l’apparence

L’apparence du mini-calendrier est prise en charge par la feuille de style css/minical.css. La feuille de style est minimale afin que le mini-calendrier hérite au maximum de l’apparence de votre site. Cette feuille de style peut être personnalisée dans votre dossier squelettes/.
Voici un autre exemple d’insertion du mini-calendrier sans modification de la feuille de style :

Pour des raisons de performance, la feuille de style est insérée inline dans le HTML de la page qui contient le mini calendrier. Si elle référence des images, celles-ci doivent donc être référencées avec leur URL absolue.

Les boutons pour passer vers les mois précédents ou suivants utilisent l’image css/img/month_prev_next-32x16.png qui peut être personalisée dans votre dossier squelettes/.

Le pied du mini-calendrier qui contient le bouton aujourd’hui peut-être masqué simplement en CSS.

En dernier recours, si c’est vraiment nécessaire pour la personnalisation, vous pouvez aussi modifier le squelette formulaires/calendrier_mini.html. Toutefois ceci est déconseillé car hypothèque la compatibilité de votre squelette avec les évolutions futures du plugin.

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

Discussion

102 discussions

  • 2

    J’ai un problème de liens avec le mini agenda.
    SPIP 3,, sarkaspip-R 4.5, Agenda 3.29.0, Mini Calendrier 2.4.1

    Lorsqu’on clique dans le mini-agenda sur une date comportant plusieurs événements, tout va bien, on arrive sur une page agenda qui affiche les différents événements du jour.. Mais si on clique sur une date ne comportant qu’un seul événement, on obtient une page correspondant bien à l’article correspondant, mais sans aucun événement affichés.
    En y regardant de plus près, l’url de la page affichée est, dans ce cas de la forme
    [...]spip.php ?article2931&id_evenement=1091

    si on remplace par
    [...]spip.php ?article2931&id_evenement=1091
    tout va bien.

    Quelqu’un verrait-il d’où peut venir ce « amp ; » superfétatoire ? c’est bien évidemment un problème d’encodage du « & », mais pourquoi uniquement dans ce cas là ? Car dans le cas où il y a plusieurs entrées, l’url est
    [...]spip.php ?page=jour&date_debut=2019-03-14 , avec un « & » correctement encodé, sans répétition...

    Merci d’avance pour vos idées.

    • Oups, un oubli : bonjour :-)

    • Bon, après avoir pas mal joué avec les boucles de la page « jour » d’agenda, je suis revenu à un fonctionnement normal.
      Seul problème : sans rien modifier !

      Peut-être un effet pervers des caches divers et variés ? Espérons que ça va se stabiliser !

      En attendant, pardon pour le bruit. Je reviendrai si je peyx mettre en évidence un problème ... reproductible !

      Pardon encore.

    Répondre à ce message

  • Bonjour.
    Est-il possible d’avoir, comme dans les anciennes versions, les prochains événements affichés en bas du mini-calendrier ? Certes, l’affichage au survol est élégant, mais ne remplit pas la même fonctionnalité : voir rapidement l’information sans avoir à chercher avec la souris, plus cliquer pour aller dans l’agenda.
    Comme je en suis pas calé en css, je sèche un peu.
    Merci d’avance pour vos suggestions...

    Répondre à ce message

  • 2

    Bonjour,

    Sur un site, j’ai une majorité d’événements d’une journée et quelques fois des événements annuels. J’aimerais savoir s’il est possible de construire une boucle qui ne prendrait en compte que les événements d’une durée de moins de 3 mois ?
    Sauriez-vous me dire comment ou m’orienter ?
    En vous remerciant

    • Hello,

      Une boucle comme :
      <BOUCLE_vevent(EVENEMENTS){par date_debut}{age_fin<=0}{age_debut>=-16}{unique}>...

      sélectionne les évènements relatifs à la date actuelle. Donc dans cet exemple qui ont une date de fin entre maintenant et dans 16 jours

    • Hello,

      Une boucle comme :
      <BOUCLE_vevent(EVENEMENTS){par date_debut}{age_fin<=0}{age_debut>=-16}{unique}>...

      sélectionne les évènements relatifs à la date actuelle. Donc dans cet exemple qui ont une date de fin entre maintenant et dans 16 jours

    Répondre à ce message

  • 2

    Bonjour,

    J’ai migré spip de la version 1.9.2 à la version 3.2. Tous fonctionne correctement excepté mon mini-calendrier.
    Mon problème est qu’une grande partie de événement n’apparait pas dans le mini-calendrier. J’appelle mon calendrier avec ceci :

    1. #CALENDRIER_MINI{#ENV{date},date,#URL_PAGE{jour}}

    J’ai comparé les entrées dans la DB entre un événement qui fonctionne et un autre non. Aucun changement de valeur qui pourrait être la cause, rien dans les logs.

    Je ne sais plus où chercher. Pouvez-vous m’aider ?

    • Avec ceci le problème est corrigé :

      [(#CALENDRIER_MINI{#ENV{date},
      date,
      #URL_PAGE{page-jour},
      #URL_PAGE{calendrier_mini_event.json,id_rubrique}})]

      Mais un autre problème est toujours présent. Le mois de décembre dans mon mini-calendrier charge en boucle et n’affiche pas les événements. Il y a plusieurs mois qui ont ce problème (environ 1 sur 2). Merci de m’aider.

    • Je répond un peu tard, mais j’ai eu le même problème. Le calendrier tourne en boucle quand il y a des accents dans le titre de l’événement. Un bug ?

    Répondre à ce message

  • 1

    Hello :-)
    Dans la doc, cela dit :
    Exemple : afficher les évènements créés dans le plugin « Agenda » C’est supposer fonctionner avec la dist de spip 3.2 ?
    J’ai essayer :

    [(#CALENDRIER_MINI{#ENV{date},
      date, 
      #URL_PAGE{jour},
      #URL_PAGE{calendrier_mini_event.json}})]
    [(#CALENDRIER_MINI{#ENV{date},
      date, 
      #URL_PAGE{content/jour},
      #URL_PAGE{calendrier_mini_event.json}})]
    [(#CALENDRIER_MINI{#ENV{date},
      date, 
      #URL_PAGE{contenu/page-jour},
      #URL_PAGE{calendrier_mini_event.json}})]

    J’ai même essayer de faire un copier/coller des fichiers "jour" et aussi "page-jour" pour les mettre dans mon dossier squelettes, mais cela ne change rien, si je clique sur le lien d’un evenement qui apparait à par exemple à la page.../spip.php ?page=page-jour&date=2019-02-09, cela me dit "404 not found"
    Donc, la doc ou le plug sont t’il toujours d’actualité avec le squelette de la dist 3.2 ???

    • Bon alors, après beaucoup beaucoup d’essai, et un passage sur l’irc, j’ai fini par comprendre que mon problème venait des droits des fichiers qui ne semblait pas bon...
      Donc, pour faire simple, dans la doc, ne faudrait t’il pas faire l’ajout que concernant le squelette de la dist, il suffit de faire :

      [(#CALENDRIER_MINI{#ENV{date},
        date, 
        #URL_PAGE{jour},
        #URL_PAGE{calendrier_mini_event.json}})]

      Et de faire un copier des fichiers « jour.html » qui se trouve dans « squelettes/content » et de « evenement.html » qui se trouve dans « squelettes/inclure/resume » du plugin « agenda » pour les coller dans sont propre dossier « squelettes » ?

    Répondre à ce message

  • Mon calendrier mini ne s’affiche plus. Depuis quand exactement je ne sais pas (passage en SPIP 3.2 peut être)
    Je suis en SPIP 3.2.3, avec Agenda et Mini calendrier à jour.

    Je l’appel avec le code suivant :

    [(#CALENDRIER_MINI{#ENV{date},
      date, 
      #URL_PAGE{jour},
      #URL_PAGE{calendrier_mini.json}})]

    …et la console me dit :

    TypeError : $.ui is undefined
    TypeError : minical is undefined

    Répondre à ce message

  • 1

    Bonjour,
    je ne trouve pas la solution pour masquer le bouton « aujourd’hui ».
    Merci

    • La réponse vient probablement un peu tard. Mais pour ceux qui souhaitent masquer le bouton « aujourd’hui » il faut ajouter dans votre css :

      .calendriermini .ui-datepicker-buttonpane button
      display : none ;

    Répondre à ce message

  • 1

    Bonjour,

    tout comme grems, plus d’affichage du minicalendrier après un passage de 3.1 à 3.2.
    Par contre, je n’ai ni htaccess ni mes_options.php, donc pas de conflit à voir de ce côté là.

    Ma balise c’est :
    #SETdate_debut,#DATE|affdateY-m-01
    #CALENDRIER_MINI#GETdate_debut,date_debut,#URL_PAGEagenda_jour,#URL_PAGEcalendrier_mini_event.json

    Si je mets des [( ça ne change rien.

    Une idée ?
    Merci d’avance,
    Etienne

    • Bonjour,
      je me réponds :
      j’avais un fichier /squelettes/formulaires/calendrier_mini.html dont la partie
      « Chargement du javascript du mini-calendrier »
      n’était semble t-il pas adaptée à spip3.2. Je l’ai remplacée par la même partie du fichier « plugins/auto/calendriermini/v2.4.1/formulaires/calendrier_mini.html »
      Et ça fonctionne.

    Répondre à ce message

  • 1

    Bonjour,

    J’aurais aimé trouver une solution pour ajaxer ma div où j’affiche mes événements lorsque je clique sur mois suivant/précédant du calendrier mini ?

    Quelqu’un peut-il m’aider ?

    Merci

    • Ok, j’ai fini par trouver tout seul :-)
      Il faut juste modifier le fichier calendrier_mini.js.html
      Là où se trouve la fonction change_month_year :
      y ajouter le code

                      var changeDate = year+"-"+month+"-01";
                      $('#tableau_des_evenements').ajaxReload({args:{date:changeDate}});

      où #tableau_des_evenements est la div qui recevra la boucle événement en fonction de la date retournée.

      Merci à cette page : https://www.spip.net/fr_article3753.html qui m’a permis de trouver la solution.

    Répondre à ce message

  • Bonjour, Nous rencontrons un problème d’affichage d’événement dans le mini-calendrier. Cela se passe uniquement quand un événement de plusieurs jours est à cheval sur deux mois. L’événement s’affiche bien sur le premier mois, mais pas dans le mois suivant. Nous rencontrons ce problème par exemple pour les vacances de Toussaint et fin d’année. Avez-vous déjà rencontré cette erreur ? Merci par avance de votre réponse Cordialement

    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