SPIP 3, Agenda et FullCalendar

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

Depuis SPIP 3, l’affichage d’un agenda sous forme de calendrier par jour/semaine/mois à changé. Les filtres |agenda_memo et apparentés sont désormais obsolètes. Il en est de même pour les filtres agendafull_memo et apparentés du plugin Agenda.

Désormais, l’affichage d’un calendrier s’appuie sur la librairie javascript FullCalendar. Voici un tutoriel pour comprendre comment s’en servir avec Agenda 3.0.

Pour une première approche, vous pouvez utiliser le plugin Agenda Fullcalendar facile.

Attention : le présent tutoriel n’est plus adapté aux version de SPIP > 3.2, car cette dernière change la version de fullcalendar utilisée.. Vous pouvez utiliser la nouvelle version du tutoriel.

Souhait

Nous souhaitons afficher tous les événements (publiés) du site sous forme calendaire, en proposant d’abord un affichage par mois, avec possibilité de basculer en affichage par semaine ou par jour.

Agenda souhaité au final

Pré-requis

  • SPIP 3.0.x, en ayant conservé l’organiseur dans plugins-dist.
  • Plugin Agenda 3.6.11 minimum.
  • Compréhension de la mécanique des squelettes de SPIP.
  • Quelques évènements à afficher.

Vous n’avez pas besoin d’installer la librairire FullCalendar : elle est livrée avec SPIP.

Principe de base

Pour afficher notre agenda nous allons :

  1. créer un squelette agenda.html, avec un div dont l’attribut id est agenda.
  2. appeler dans le squelette le script fullcalendar et ses feuilles de styles.
  3. utiliser ce script pour afficher l’agenda dans dans la div#agenda.
  4. créer un squelette agenda.json.html fournissant au script les données à afficher dans l’agenda.

Fichiers manipulés

 
Dans cet article nous manipulons deux fichiers squelettes : 

  • agenda.html (qui contient le code nécessaire à l’affichage du calendrier).
  • agenda.json.html (qui nous permet de générer une liste d’événements compatible avec le script fullcalendar).

Si l’un de ces squelette existe déjà, je vous invite à utiliser le mécanisme de surcharge de SPIP.

Création du squelette

Il nous faut créer un squelette agenda.html complet (à savoir une page SPIP classique avec les balises <head><body> etc), dans lequel nous mettons un div dont l’attribut id est agenda à l’endroit où nous souhaitons que l’agenda s’affiche.

Au dessus de ce div, nous allons appeler :

  • la version compressée du script fullcalendar
  • les styles associés à ce script.

Pour ce faire, nous utilisons la balise #CHEMIN :

<link rel='stylesheet' type='text/css' href='#CHEMIN{lib/fullcalendar/fullcalendar.css}' />
<script type='text/javascript' src='#CHEMIN{lib/fullcalendar/fullcalendar.min.js}'></script>
<div id="agenda">
</div>

Appel à l’agenda

Nous allons maintenant ajouter les fonctions javascript qui permette d’afficher l’agenda. Pour ce faire, nous allons mettre au dessus du div (cela pourrait être dedans ou en dessous, cela importe peu) le code suivant, que je vais commenter :

<script type="text/javascript">/*<![CDATA[*/
jQuery(document).ready(function() {

	
	jQuery('#agenda').fullCalendar({
			editable: false,
			events: "[(#URL_PAGE{agenda.json})]",
			header: {
				left: 'prevYear,prev,next,nextYear today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			firstDay: 1,
			monthNames:['<:date_mois_1|attribut_html:>','<:date_mois_2|attribut_html:>','<:date_mois_3|attribut_html:>','<:date_mois_4|attribut_html:>','<:date_mois_5|attribut_html:>','<:date_mois_6|attribut_html:>','<:date_mois_7|attribut_html:>','<:date_mois_8|attribut_html:>','<:date_mois_9|attribut_html:>','<:date_mois_10|attribut_html:>','<:date_mois_11|attribut_html:>','<:date_mois_12|attribut_html:>'],
			monthNamesShort:['<:date_mois_1_abbr|attribut_html:>','<:date_mois_2_abbr|attribut_html:>','<:date_mois_3_abbr|attribut_html:>','<:date_mois_4_abbr|attribut_html:>','<:date_mois_5_abbr|attribut_html:>','<:date_mois_6_abbr|attribut_html:>','<:date_mois_7_abbr|attribut_html:>','<:date_mois_8_abbr|attribut_html:>','<:date_mois_9_abbr|attribut_html:>','<:date_mois_10_abbr|attribut_html:>','<:date_mois_11_abbr|attribut_html:>','<:date_mois_12_abbr|attribut_html:>'],
			dayNames:['<:date_jour_1|attribut_html:>','<:date_jour_2|attribut_html:>','<:date_jour_3|attribut_html:>','<:date_jour_4|attribut_html:>','<:date_jour_5|attribut_html:>','<:date_jour_6|attribut_html:>','<:date_jour_7|attribut_html:>'],
			dayNamesShort:['<:date_jour_1_abbr|attribut_html:>','<:date_jour_2_abbr|attribut_html:>','<:date_jour_3_abbr|attribut_html:>','<:date_jour_4_abbr|attribut_html:>','<:date_jour_5_abbr|attribut_html:>','<:date_jour_6_abbr|attribut_html:>','<:date_jour_7_abbr|attribut_html:>'],
			buttonText: {
					today: '<:date_aujourdhui|attribut_html:>',
					month: '<:organiseur:cal_par_mois|attribut_html:>',
					day: '<:organiseur:cal_par_jour|attribut_html:>',
					week: '<:organiseur:cal_par_semaine|attribut_html:>'
			},
			weekMode : 'liquid',
			loading: function(bool) {
				if (bool) $('#calendrier-loading').show();
				else $('#calendrier-loading').hide();
			},
			timeFormat: {
				
				agenda: "H'h'mm{ - H'h'mm}", 
				
				'': "H'h'(mm)" 
			},
			axisFormat: "H'h'(mm)",
			allDayText:'<:organiseur:cal_jour_entier|attribut_html:>',
			columnFormat: {
				month: 'ddd',    
				week: 'ddd d/M', 
				day: 'dddd d/M'  
			},
			titleFormat: {
				month: 'MMMM yyyy',                             
				week: "d [ MMM] [ yyyy]{ '&#8212;' d MMM yyyy}", 
				day: 'dddd d MMM yyyy'                  
			},
			dayClick: function(date, allDay, jsEvent, view) {
				if(view.name=='month'){
					$('.fc-button-agendaWeek').click();
					$('#calendrier').fullCalendar( 'gotoDate', date );
				}
				else
					if(view.name=='agendaWeek'){
						$('.fc-button-agendaDay').click();
						$('#calendrier').fullCalendar( 'gotoDate', date );
					}
			},
			isRTL : [(#LANG_DIR|=={rtl}|?{true,false})]
	})

});
/*]]>*/</script>
  • l. 2 jQuery(document).ready(function() signifie qu’à la fin du chargement du document, le navigateur va exécuter la fonction dans les accolades qui suivent.
  • l. 5 $('#agenda').fullCalendar signifie que nous allons demander à javascript de modifier le div dont l’id est égale à agenda pour y mettre à la place .…l’agenda.
  • Le code entre parenthèse puis accolade correspond aux options passées à l’agenda (l. 5-59) :
    • l. 6 : on ne peut éditer les évènements depuis l’agenda.
    • l. 7 : on récuperera la liste des évènements via un squelette agenda.json.html, nous détaillerons ce squelette dans la partie suivante
    • l. 8-12 : qu’affiche-t-on dans l’entête de l’agenda ? :
      • l. 9 : à gauche, on met les boutons de navigation par mois/semaines/jours (selon le type de calendrier) et par années (dans tout les cas).
      • l. 10 : au centre, on affiche le titre de l’agenda, correspondant à la période affichée (par ex. « Août 2012 »).
      • l. 11 : à droite, on affiche la bascule vers l’agenda en mode mois, semaine ou jour.
    • l. 13 : le premier jour de la semaine est le lundi (=1)
    • l. 14 : noms des mois, définis avec les chaînes de langues de SPIP.
    • l. 15 : noms des mois en abrégé.
    • l. 16 : noms des jours.
    • l. 17 : nom des jours en abrégé.
    • l. 18-23 : textes des boutons.
    • l. 24 : selon les mois, on affichera 4, 5 ou 6 semaines, mais en faisant varier visuellement la hauteur des semaines, pour avoir un mois dont la hauteur est constante. Je renvoie à la documentation sur weekMode.
    • l. 25-27 : permet d’afficher un contenu le temps que l’agenda se charge. Nous en parlerons plus loins.
    • l. 29-34 : formatage des heures dans l’agenda :
      • l. 31 : lorsqu’on est par semaine ou par jour, on affiche l’heure et les minutes.
      • l. 33 : dans les autres cas, juste l’heure.
    • l. 35 : formatage des heures sur l’axe vertical (pour l’affichage par jours).
    • l. 36 : texte indiquant qu’un événement dure une journée entière.
    • l. 37-41 : formatage des dates dans les entêtes de colonnes :
      • l. 38 : pour l’affichage par mois.
      • l. 39 : pour l’affichage par semaines.
      • l. 40 : pour l’affichage par jours.
    • l. 42-46 : titre de l’agenda :
      • l. 43 : lors de l’affichage par mois.
      • l. 44 : lors de l’affichage par semaines.
      • l. 46 : lors de l’affichage par jours.
    • l. 47-57 : action à executer lorsqu’on clique sur un jour.
    • l. 58 : notre agenda doit-il se lire de gauche à droite ou de droite à gauche ?

D’autres options sont bien sûr possible : on se reportera à la documentation de FullCalendar.

Sélection des évènements à afficher

Pour pouvoir afficher les évènements, il va falloir nous fabriquer un squelette agenda.json.html (cf. l. 7) qui retournera les évènements qui nous intéreressent sous forme de donnée JSON.

La page spip.php?page=agenda.json sera automatiquement appelée par FullCalendar, qui lui passera deux arguments, variant selon la période demandée :

  • start, correspondant au timestamp de la date de début.
  • end, correspondant au timestamp de la date de fin.

Dans le squelette agenda.json.html correspondant à cette page, nous pourrons récuperer ces informations via : #ENV{start} et #ENV{end} (voir mon article sur la balise #ENV). On pourrait éventuellement passer d’autres arguments, en appliquant le filtre |parametre_url sur #URL_PAGE{agenda.json}.

Voilà un squelette agenda.json.html basique :

#HTTP_HEADER{Content-Type: application/json; charset=#CHARSET}
[<BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}	
{agendafull date_debut,date_fin, periode,
	#VAL{Y}|date{#ENV{start}}, #VAL{m}|date{#ENV{start}},     #VAL{d}|date{#ENV{start}},
	#VAL{Y}|date{#ENV{end}}, #VAL{m}|date{#ENV{end}}, #VAL{d}|date{#ENV{end}}}
	>
					[(#ARRAY{id,#ID_EVENEMENT,
title,[(#TITRE|html2unicode|unicode2charset)],
allDay,[(#HORAIRE|=={non}|?{#EVAL{true},#EVAL{false}})],
start,#DATE_DEBUT,
end,#DATE_FIN,
url,#URL_ARTICLE,
description,[(#DESCRIPTIF|html2unicode|unicode2charset)]}|json_encode)]
</BOUCLE_evenements>]

Je commente rapidement ce squelette :

  • l. 1. On demande à SPIP de :
    • Ne pas insérer de boutons d’administration.
    • Dire au navigateur que la page retournée est du json, et fournir le charset.
    • l. 2 et l .15, les crochets servent à indiquer que nous retournons plusieurs objets JSON, chacun correspondant à un évènements.
    • l. 2 nous bouclons sur les évènements. Entre chaque élèment de la boucle, nous affichons une virgule ({", "}). Nous trions par date de début : ceci servira plus loin lors de l’affichage des données sans Javascript.
    • l. 3-5 pour sélectionner les évènements, nous utilisons le critère agendafull. Les options de ce critère nous indique :
      • date_debut : que le champ date_debut servira pour repérer … date de début de sélection.
      • date_fin : que le champ date_fin servira pour repérer … date de fin de sélection.
      • periode que la période sélectionné sera déterminée par les options suivantes.
      • #VAL{Y}|date{#ENV{start}}, #VAL{m}|date{#ENV{start}},     #VAL{d}|date{#ENV{start}} que le début de la période correspond à la date passée dans #ENV{start}. La syntaxe un peu absconse que vous voyiez issu permet d’extraire, respectivement, l’année, le mois et la jour depuis un timestamp.
      • #VAL{Y}|date{#ENV{end}}, #VAL{m}|date{#ENV{end}}, #VAL{d}|date{#ENV{end}}</cpde> que la fin de la période correspond à la date passée dans <code>#ENV{end}.
  • l. 7-14 : nous remplissons un tableau SPIP via #ARRAY, puis nous le transformons en objet JSON, via le filtre ||json_encode. Ce tableau comprend les entrées suivantes :
    • id : identifiant unique pour FullCalendar. Ca tombe bien, SPIP attribut un identifiant à chaque évenement : #ID_EVENEMENT
    • title : le titre. On transforme les entité HTML en caractère unicode (|html2unicode) puis on s’assure de proposer des données avec le bon charset (|unicode2charset).
    • allDay : on précise si l’évènement dure toute la journée. Utilisée pour l’affichage par jour. Pour préciser cela, on s’appuie sur le champ #HORAIRE qui contient justement cette information. On utilise #EVAL pour indiquer qu’on insére une valeur booléenne et non pas textuelle.
    • start : date de début. On garde le format SQL.
    • end : date de fin. On garde le format SQL.
    • url : lien. Pour le coup, on renvoie vers l’article.
    • description : description de l’évènement. Là encore, on converti en Unicode, puis dans le charset correct.

À noter que l’on pourrait définir d’autres données pour chaque évènement : on se refera à la documentation de l’objet Event de FullCalendar. Par exemple, on pourrait indiquer des classe HTML en fonction de la rubrique.

Il vous faut également créer un fichier agenda.json_fonctions.php contenant les lignes suivantes :

<?php

include_spip('inc/json');
?>

Ceci assurera que le filtre json_encode est bien chargé [1].

Et pour les personnes sans Javascript ?

Et oui, tout le monde n’a pas de Javascript. Comment on fait alors ? La solution consiste à afficher un calendrier sous forme de liste dans un div dont l’id est calendrier-loading. Si Javascript est activé, FullCalendar va masquer ce div.

Comme on a déjà fabriqué une boucle dans le squelette agenda.json.html, nous allons nous en reservir, afin d’éviter de dupliquer les critères. Pour ce faire, nous allons utiliser la boucle DATA de SPIP 3.

Nous mettons donc dans le squelette agenda.html :

<B_agenda>
<div id="calendrier-loading">
<p class="pagination">#PAGINATION</p>
<BOUCLE_agenda(DATA){source json, #PRODUIRE{fond=agenda.json, start=0,end=2147483647,_=#REM|time}}{pagination 15}>
    <dl>
        [<dt><:agenda:evenement_titre:></dt>
        <dd><a href="#VALEUR{url}">(#VALEUR{title})</a></dd>]
        
        [<dt><:agenda:evenement_date:></dt>
        <dd>(#VALEUR{start}|Agenda_affdate_debut_fin{#VALEUR{end},#VALEUR{allDay}|=={true}|?{non,oui}})</dd>]
        
        [<dt><:agenda:evenement_descriptif:></dt>
        <dd>(#VALEUR{description})</dd>]
    </dl>
</BOUCLE_agenda>
<p class="pagination">#PAGINATION</p>
</div>
</B_agenda>
  • l. 1-3 : partie optionnelle avant de la boucle, avec la pagination éventuelle.
  • l. 4 : code de la boucle. Nous bouclons sur des données ((DATA)) au format json ({source json) extrait du fichier produit (#PRODUIRE) par le squelette agenda.json.html avec la valeur de start égale à 0, c’est à dire au 1 janvier 1970 à minuit, et la valeur end égale à 2147483647, c’est à dire à la date maximale gérée par les ordinateurs actuel, le 19 janvier 2038, 3h14m7s [2]. Ainsi, nous sommes sûr de récuperer tout les évènements de l’agenda. L’option _=#REM|time permet de s’assurer de ne pas avoir de cache, puisque nous passons comme argument le moment d’appel (|time). Nous paginons de 15 en 15.
  • l. 5-14 : nous affichons les données pour chaque évènement, via #VALEUR{donne}. Ces données sont tirées du JSON.
  • l. 16 et suivante ; partie optionelle arrière de la boucle.

On obtient alors un agenda, certe sommaire, mais au moins existant sans Javascript :

Agenda pour les personnes sans Javascript

Conclusion

Vous voilà maintenant prêt à avoir un agenda avec FullCalendar. Bien sûr, il y aurait beaucoup de chose à améliorer, cependant cet article aborde déjà beaucoup de notions :
-  produire du JSON avec SPIP.
-  le formatage de FullCalendar.
-  les boucles DATA.

Notes

[1Dans certain cas, que je n’ai pas encore réussi à déterminer précisément, il n’y a pas besoin de cela...

[2Voir l’article sur le bug de l’an 2038.

Discussion

65 discussions

  • 2

    Bonjour,

    Cet agenda marche nickel pour un agenda qui regroupe tous les événements du site mais je dois maintenant faire un agenda par rubrique et je sèche complètement.

    J’ai inclus un calendrier sur une page rubrique avec la boucle englobante

    <BOUCLE_contenu_rubrique(RUBRIQUES){id_rubrique}> 
    [(#INCLURE{fond=contenu/page-agenda,id_rubrique,env})]
    
    ..

    mais je n’arrive pas à afficher uniquement les rubriques de la rubrique en cours (tous les événements du site s’y retrouvent).

    Et je cherche désespérément le fichier agenda.json.html mentionné dans la doc mais je ne le trouve pas. il faut le créer ? Mais alors où ?

    merci de votre aide

    dd

    • Je ne comprend pas comment tu peux dire que cela marche si tu n’as pas créé le fichier agenda.json.html.

      Je cite l’article

      Pour pouvoir afficher les évènements, il va falloir nous fabriquer un squelette agenda.json.html (cf. l. 7) qui retournera les évènements qui nous intéreressent sous forme de donnée JSON.

      .... une fois ce point résolu on pourra s’attaquer au reste de ton problème...

    • Bonjour et merci de ta réponse rapide,

      Tu as raison, je n’avais pas les yeux en face des trous : le fichier agenda.jason.html est bien présent dans /squelettes/

      Maintenant je fais apparaître les événements de la rubrique souhaitée en jouant sur les doublons :

      <BOUCLE_art(ARTICLES){id_rubrique=130}>
      <BOUCLE_calendrier(EVENEMENTS) {id_article=#ID_ARTICLE}{doublons}	>
      </BOUCLE_calendrier>
      </BOUCLE_art>
      
      <BOUCLE_evenements(EVENEMENTS){doublons}{', '}
      {par date_debut}{agendafull date_debut,date_fin, periode,
      .......

      C’est pas très dynamique mais je n’ai pas trouvé comment sélectionner les événements de la rubrique en cours ni d’une branche à l’intérieur d’un secteur.

      Dans l’idéal absolu ce serait bien si le lien sur le titre d’un événement au calendrier ouvrait une boite modale du genre :

      "[(#URL_PAGE{evenement,id_evenement=#ID_EVENEMENT})]"  title="#TITRE"
       onclick="jQuery.modalbox('[(#URL_PAGE{evenement,id_evenement=#ID_EVENEMENT}
      |parametre_url{url,#SELF}|parametre_url{var_zajax,contenu})]');return false;"

      à la place de #URL_EVENEMENT

      Ceci fonctionne sur un squelette article du site mais pas sur l’agenda.

      Il me reste aussi à trouver pourquoi il me rajoute le minicalendrier en plus sur la page :
      plugins/auto/agenda/v3.12.1/squelettes/extra1/agenda.html
      plugins/auto/calendriermini/v2.3.5/formulaires/calendrier_mini.html

      Bonne fin de journée
      dd

    Répondre à ce message

  • 6
    Thiébaut

    Grâce à votre article, j’ai pu mettre le calendrier dans le squelette d’une rubrique dédiée (dans mon site, il s’agit de la rubrique 3, donc du squelette rubrique=3.html placé dans le dossier squelettes.

    Lorsque je clique sur l’un des évenements, je suis renvoyé sur la page de l’article auquel il est rattaché.

    Je m’attendais à ce que les évènements liés à l’article s’affichent dans la page article, mais il n’y a rien. Je suppose qu’il faut ajouter une boucle dans le squelette article pour que ça fonctionne... mais laquelle ? (Je ne suis pas très doué...)

    Le contexte : un site d’information local qui recense tous les évènements de la Vallée du Cousin, un site naturel remarquable aux portes du Morvan (près d’Avallon). L’idéal serait que le descriptif détaillé des évènements s’affiche directement sous le calendrier, comme sur le site Un autre cantal.

    Merci par avance de me donner une piste !

    SPIP 3.0.10 + Agenda 3.12.0 + Mini Calendrier 2.3.4

    • il vous faut effectivement modifier votre page squelette article.html pour pouvoir y mettre une boucle EVENEMENTS.

      Après le contenu exact de cette boucle, et bien tout dépend de quels événements vous voulez afficher, et de ce que vous voulez afficher d’un événement.

      Je vous invite à regarder la description de la boucle EVENEMENTS dans Plugin Agenda pour SPIP 1.9.

      Ps : il faut absolument que je passe vous voir la prochaine fois que je suis au pavé de cousin le pont.

    • Thiébaut

      Eh bien, on dirait que le monde est petit, c’est rigolo ça. :-)

      J’ai simplement recopié la boucle EVENEMENTS dans l’article et ça fonctionne ! Merci.

      Maintenant, j’aimerais pouvoir afficher les évènements directement
      dans la rubrique calendrier, sous le calendrier, tel que sur le site Un autre cantal.

      Histoire de comparer ce qui est le plus ergonomique...

      Quelle genre de boucle pourrais-je mettre ? Si je mets le même code, il faudra que j’ajoute quelque chose pour qu’il recharge la rubrique en tenant compte de la date choisie sur le calendrier... Mais comment ? Si vous avez une piste, je suis preneur.

      Et en attendant, à bientôt au pavé !

    • je n’ai pas compris la question exacte...

    • Thiébaut

      Bon, eh bien c’est que je me suis mal exprimé. Voici une capture d’écran qui aidera peut-être.

      Actuellement, le calendrier s’affiche dans la rubrique « Le calendrier », qui lui est dédiée. Sur ce calendier, on peut lire les titres des objets « évènements ». Pour l’affichage complet d’un « évènement », il faut cliquer dessus et charger la page article correspondante.

      Cela est pertinent quand l’article apporte des informations vraiment complémentaires à celles que contient déjà l’objet « évènement ».

      Mais la plupart du temps, l’objet « évènement » est suffisamment complet pour se suffire à lui-même.

      Après réflexion, je trouverais donc plus ergonomique que l’évènement sur lequel on a cliqué s’affiche directement, avec tous ses éléments, sous le calendrier... (dans le squelette rubrique). Rien n’empêcherait que l’évènement contienne, quand cela se justifie, un lien de type « en savoir plus » pointant vers sa page article.

      Autrement dit, j’aimerais que l’on ne quitte pas le calendrier à chaque fois que l’on clique sur un évènement et si possible qu’il reste également sur le mois en cours.

      Mais cela est sûrement complexe à réaliser... Ne perdez pas votre temps précieux s’il vous semble que le jeu n’en vaut pas la chandelle !

      Merci.

    • c’est effectivement un brin complexe (il faudrait faire de l’ajax reload etc).

      Mais comme c’est pour le morvan, je veux bien essayer de m’entraîner sur le sujet ... mais il faudrait que vous m’envoyiez des squelettes + une petite base de donnée, pour que je fasse des tests. Là comme cela je n’ai pas la réponse directe

    • Thiébaut

      Merci pour votre réponse. Le jeu n’en vaut pas la chandelle... Ne perdons plus de temps avec ça.

      Si je dois vous solliciter à nouveau pour le site, je préfère que ce soit pour de meilleures raisons. Par le formulaire de contact de spip contrib, je vous ai envoyé un login et un mot de passe « auteur » pour que vous puissiez suivre l’évolution de valleeducousin.fr

      Quand il y aura suffisamment de contenu, dans quelques mois, il sera temps de voir si des trucs sont à améliorer.

      Merci pour tout !

    Répondre à ce message

  • Bonjour,

    Merci pour ce plugin fort utile que j’utilise depuis quelques temps.

    Un champs « email » associé à l’événement me semblerait utile pour permettre ce mode de contact (email seul ou formulaire de contact) et/ou mettre en place des notifications...

    Je n’en vois pas.

    Est-ce bien le cas ?
    Est-ce parce que le besoin n’est pas avéré ?
    Est-ce parce qu’un gentil développeur (ne pouvant tout faire en même temps !) est entrain de le concocter ?
    Est-ce parce qu’il y a une autre façon de le faire ?

    Qu’en pensez-vous ?

    Répondre à ce message

  • 2
    Tropicaloo

    Bonsoir,

    Je cherche à afficher également les annonces, les penses-bête et les messages internes pour un calendrier en accès restreint côté public.
    Quelles sont les balises, boucles, etc pour les annonces et penses-bête à mettre dans un agenda.json.html ? Je n’ai pour le moment rien trouvé sur les différents sites de SPiP sur les annonces et penses-bête.
    Merci pour votre aide.

    • la boucle est spip_messages (voir tester MESSAGES, sans garanti).

      Les balises disponibles sont :

      #ID_MESSAGE
      #TITRE
      #TEXTE
      #TYPE
      #DATE_HEURE
      #DATE_FIN
      #RV
      #STATUT
      #ID_AUTEUR
      #MAJ
      #DESTINATAIRES

      et les critères correspondant.

    • Tropicaloo

      Maïeul, merci beaucoup !

    Répondre à ce message

  • 12

    Hello

    Un exemple pour colorier les évènements en fonctions d’un mot clé.
    L’idée est de définir des mots-clés dans un groupe dédié avec les noms qu’on veut et de mettre une couleur dans le descriptif du mot-clé.
    Puis de récupérer la valeur de ce descriptif pour colorer les évènements de l’agenda.
    Si l’évènement à un mot-clé du groupe dédié (exemple Agenda_couleur), cette couleur est mise en fond, sinon, on met une couleur par défaut (grey par exemple).
    Et hop !

    #HTTP_HEADER{Content-type:text/javascript;}
        [<BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}{titre_mot?}
        {agendafull date_debut,date_fin, periode,
                #VAL{Y}|date{#ENV{start}}, #VAL{m}|date{#ENV{start}}, #VAL{d}|date{#ENV{start}},
                #VAL{Y}|date{#ENV{end}}, #VAL{m}|date{#ENV{end}}, #VAL{d}|date{#ENV{end}}}
          >
        <BOUCLE_mot(MOTS){id_evenement}{type=Agenda_couleur}>
        [(#ARRAY{
        id,#ID_EVENEMENT,
        title,[(#_evenements:TITRE|html2unicode|unicode2charset)],
        allDay,[(#HORAIRE|=={non}|?{#EVAL{true},#EVAL{false}})],
        start,#DATE_DEBUT,
        end,#DATE_FIN,
        url,#URL_EVENEMENT,
        color,[(#DESCRIPTIF|PtoBR|html2unicode|unicode2charset)]
        }|json_encode)]
        </BOUCLE_mot>
        [(#ARRAY{
        id,#ID_EVENEMENT,
        title,[(#_evenements:TITRE|html2unicode|unicode2charset)],
        allDay,[(#HORAIRE|=={non}|?{#EVAL{true},#EVAL{false}})],
        start,#DATE_DEBUT,
        end,#DATE_FIN,
        url,#URL_EVENEMENT,
        color,grey
        }|json_encode)]
        <//B_mot>
        </BOUCLE_evenements>]

    Une question, à quoi sert le
    description,[(#DESCRIPTIF|html2unicode|unicode2charset)]
    proposé dans l’exemple de cet article ?

    • En fait ça fonctionne avec
      [(#DESCRIPTIF*)]
      ou
      [(#DESCRIPTIF|PtoBR|html2unicode|unicode2charset)]
      ou même
      [(#DESCRIPTIF|PtoBR)]

      C’est quoi le mieux ?

    • [(#DESCRIPTIF*)] n’est pas à utilisez, car cela signifie que les raccourcis typographiques ne sont pas interprétés, et donc qu’on peut se retrouver avec des accolades.

      [(#DESCRIPTIF|PtoBR)] interpréte les raccourcis, puis transforme les changement de paragraphes rupture de ligne. Pas mal, mais le problème est qu’on a des caractères accentués sous forme d’entités html, ce qui posera pb dans l’interprétation du js.

      [(#DESCRIPTIF|PtoBR|html2unicode|unicode2charset)] transforme les entités html en caractère unicode, puis fait éventuellement la conversion vers le charset du site -> la meilleure solution

    • Ok je vais suivre tes conseils avisés.

      Et le rôle de
      description,[(#DESCRIPTIF|html2unicode|unicode2charset)] ?

    • simplement indiqué qu’elle est la description de l’evt. Je comprend pas le pb

    • ça doit afficher le descriptif quelque part ? si oui, où ?
      Car je ne le vois pas apparaitre dans l’agenda alors que j’ai des évènements avec un descriptif.

    • aucune idée, il faut regarder je pense dans la doc de fullcalendar il doit y avoir des détails

    • C’est ce que je viens justement de faire. D’après ce que j’en ai compris, on doit pouvoir faire apparaitre ce descriptif dans une infobulle avec du javascript. Mais c’est un peu trop trapu pour moi. Ce serait sympa si c’était intégré dans Agenda ...

      Autre question : j’essaye de jouer avec la couleur du texte en rajoutant textColor,red dans le premier array et textColor,green dans le 2e mais tout les évènements se retrouvent écrits en rouge. L’idée est de jouer ensuite avec les filtres couleur_extreme et couleur_inverser

      Une idée ?

      #HTTP_HEADER{Content-type:text/javascript;}
          [<BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}{titre_mot?}
          {agendafull date_debut,date_fin, periode,
                  #VAL{Y}|date{#ENV{start}}, #VAL{m}|date{#ENV{start}}, #VAL{d}|date{#ENV{start}},
                  #VAL{Y}|date{#ENV{end}}, #VAL{m}|date{#ENV{end}}, #VAL{d}|date{#ENV{end}}}
            >
          <BOUCLE_mot(MOTS){id_evenement}{type=Agenda_couleur}{0,1}>
          [(#ARRAY{
          id,#ID_EVENEMENT,
          title,[(#_evenements:TITRE|html2unicode|unicode2charset)],
          allDay,[(#HORAIRE|=={non}|?{#EVAL{true},#EVAL{false}})],
          start,#DATE_DEBUT,
          end,#DATE_FIN,
          url,#URL_EVENEMENT,
          color,[(#DESCRIPTIF|PtoBR|html2unicode|unicode2charset)],
          textColor,red
          }|json_encode)]
          </BOUCLE_mot>
          </B_mot>
          [(#ARRAY{
          id,#ID_EVENEMENT,
          title,[(#_evenements:TITRE|html2unicode|unicode2charset)],
          allDay,[(#HORAIRE|=={non}|?{#EVAL{true},#EVAL{false}})],
          start,#DATE_DEBUT,
          end,#DATE_FIN,
          url,#URL_EVENEMENT,
          color,#336699,
          textColor,green
          }|json_encode)]
          <//B_mot>
          </BOUCLE_evenements>]
    • il faut regarder ce que donne concrètement le fichier .js produit pour voir où se trouve le couac.

      Quand à intégrer à Agenda, c’est deja intégré. Le pb est d’intégrer dans full calendar, et ça et bien il faut lire la doc...

    • Vu mon niveau en js et en anglais, je crois que ça va attendre un peu ;-)

    • Bonjour à vous tous et merci pour vos différents commentaires qui aident bcp,
      J’aimerai savoir s’il ya possibilité de coloré les évènements SANS les mots clés, juste au niveau du css ?? Je m’explique, j’ai une rub agenda et deux sous rubrique (ssrub1 et ssrub2) et les évènements sont dans les articles des sous rub. L’idée est d’avoir
      1/ un fullcalendar qui affiche tous les évènements (ssrub1 et ssrub2) coloré en fonction des sousrubrique

      2/ Ensuite afficher le fullcalendar pour chaque sous rubrique et biensure on aura cette fois une seule couleur

      J’ai fais des boucles pour modifier mais rien ne marche. Merci de votre aide

    • Bonjour,
      J’ai réussi à faire ce que je voulais, mais mon problème où je peux placer mon class=toto pour jouer ensuite avec le css. Voici ma boucle :

      #HTTP_HEADER{Content-type:text/javascript;}
         [<BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}{titre_mot?}
         {agendafull date_debut,date_fin, periode,
                 #VAL{Y}|date{#ENV{start}}, #VAL{m}|date{#ENV{start}}, #VAL{d}|date{#ENV{start}},
                 #VAL{Y}|date{#ENV{end}}, #VAL{m}|date{#ENV{end}}, #VAL{d}|date{#ENV{end}}}
           >
         <BOUCLE_mot(MOTS){id_evenement}{type=Agenda}>
         [(#ARRAY{
         id,#ID_EVENEMENT,
         title,[(#_evenements:TITRE|html2unicode|unicode2charset)],
         allDay,[(#HORAIRE|=={non}|?{#EVAL{true},#EVAL{false}})],
         start,#DATE_DEBUT,
         end,#DATE_FIN,
         url,#URL_ARTICLE,
         color,[(#DESCRIPTIF|PtoBR|html2unicode|unicode2charset)]
         }|json_encode)]
         </BOUCLE_mot>
         </BOUCLE_evenements>]
    • d’après la documentation de full calendar je ne vois pas d’endroit où préciser la classe ...

    Répondre à ce message

  • Bonjour,

    Les événements ne s’affichent pas dans le calendrier-mini avec calendrier_mini_event.json mais les articles, par contre, s’affichent correctement avec calendrier_mini.json

    Je ne vois pas quels paramètres j’aurais pu omettre ?

    J’utilise en local spip SPIP 3.0.5 [19905] et les plugins Agenda 3.11.2 - Mini Calendrier 2.3.4

    Voici le code que j’insère dans mon fichier sommaire.html :

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

    Toute aide est la bienvenue, merci :-)

    Répondre à ce message

  • 1
    ChristopheD

    Bonjour

    Un grand merci pour votre contribution, dont je me suis largement inspiré pour réaliser un calendrier récapitulant différents événements stockés dans ma base - la différence majeure est que je n’ai pas utilisé le plugin « événements », mais directement les articles, en récupérant leur date de publication et leur date de rédaction antérieure (considérée pour les besoins de la cause comme la date de fin des évènements).

    Tout va pour le mieux... hormis un détail qui coince tout : les évènements sont invisibles pour les visiteurs, et n’apparaissent que pour ceux qui se sont authentifiés sur le site (webmestre ou administrateurs).

    Vérification faite, pour les visiteurs, ce sont les différents fichiers xxxx.json.html qui sont inaccessibles (un lien vers eux retourne une page « agenda/xxx.json.html : accès interdit ».

    Une idée qui me sauverait la vie ?

    • ChristopheD

      Bon, j’ai résolu le problème sans piger son origine, simplement en changeant les fichiers incriminés de répertoire...

    Répondre à ce message

  • 7

    Bonjour dans le calendrier généré est il possible de faire afficher une infobulle (qui aparait lors d’un clic sur un évennement) comme celle qui s’affiche sur les agenda google. Avec le titre de l’évenement le lieu ect, ...

    Coordialement

    • Bonjour,

      encore une fois cela depend de FullCalendar et non pas de SPIP stricto sensu. Je vous invite donc à lire la documentation de FulLCalendar

    • Regarde ici http://contrib.spip.net/Squelette-d... c’est peut être une piste. Il y a des infobules effectivement qui s’affichent au survol, avec possibilité de présenter une image si elle a été placée dans le descriptif.
      NB : le plugin agenda est aussi nécessaire, l’affichage ne fait pas appel à fullcalendar mais à l’agenda privé ce spip, moins « fun » à mon gout.

    • Bonjour,
      En plaçant ceci

      eventMouseover : function(event)
      // opens events in a popup window
      window.open(event.url, ’agendaevent’, ’width=850,height=700’) ;
      return false ;
      ,

      sous

      events : « [(#URL_PAGEagenda.json)] »,

      dans agenda.html, j’ai une pop up qui s’ouvre, j’aurais aimé une tooltip, mais..
      Cette pop up contient l’article cible et non le desciptif de l’évènement.
      Ce n’est pas le top, mais on avance.
      Je soumets.
      A+

    • Bonjour patrick,

      en placant le code à l’endroit dont tu parle je n’obtien rien du tout

      a++

    • Excuses, je n’ai pas recopié tout le code...

      eventMouseover : function(event)
      // opens events in a popup window
      window.open(event.url, ’agendaevent’, ’width=850,height=700’) ;
      return false ;
      ,

      Deux ennuis avec ce code que j’ai abandonné :
      -  il renvoie sur l’article cible et non sur le descriptif de l’évènement (ce qu’on obtient en un clic sans ce bout de code, peut être changer le json de mouseover et au lieu de ).
      -  il ouvrira autant de pop ups que tu as survolé de lignes sur ta page agenda, sauf si on passe par le côtés de l’agenda pour ne survoler qu’une ligne d’évènement (les explications au visiteur risquent d’être cocasses).
      Tiré du zip démos du site officiel et des descriptifs de event.
      Je n’ai pas le temps de voir s’il existe un mouse out pour fermer le pop up.
      A++Patrick

    • eventMouseover : function(event)
      // opens events in a popup window
      window.open(event.url, ’survolevent’, ’width=850,height=700’) ;
      return false ;
      ,
      eventMousout : function(event)
      // opens events in a popup window
      window.close(event.url, ’survolevent’, ’width=0,height=0’) ;
      return false ;
      ,

      permet (si on passe doucement sur l’évènement) de passer d’un évènement à un autre, mais la fenêtre reste ouverte à la fin...

    • ChristopheD

      Bonjour

      Pour programmer des infos-bulles sur des événements de calendrier, j’ai utilisé le plugin jquery qtip. C’est (assez) simple et ça marche très bien.

    Répondre à ce message

  • 1

    Bonjour,

    Est-ce qu’il-y-a un astuce ou un petit plugin qui permet de répéter un evement de manière hebdomadaire ?

    La seule possibilité que j’ai trouvé c’est de le faire manuellement avec l’inconvénience que la date de l’événement ne change pas et les répétitions réferent toujours à l’événement « mère ».

    Quelqu’un connait une meilleure solution ?

    Merci pour l’aide
    Serge du Luxembourg

    • Salut et bonne année. La question ne concerne pas cette contrib (affichage du calendrier) mais celle sur le plugin agenda (entrée des données).

      Je vous invite à la reposer sur le forum ad hoc Plugin Agenda pour SPIP 1.9

    Répondre à ce message

  • 1

    Bonjour,

    Je découvre juste cette nouvelle manière d’afficher les événements, et je ne comprends pas l’affichage obtenu :

    J’utilise ZPIP et j’ai donc mis la page agenda.html et agenda.jason.html dans /squelettes/contenu

    j’obtiens un mini calendrier dans la colonne « navigation » à droite de la page : il contient bien les événements du site.
    Mais dans la partie centrale de la même page j’obtiens « Aucun événement ».

    Si je mets les 2 fichiers dans /squelettes/ il n’y a que la version sans javascript qui s’affiche.

    Merci de vos lumières.

    dd

    PS dans l’explication ci-dessus il est écrit « Dans cet article nous manipulons deux fichiers squelettes : article.html (qui contient le code nécessaire à l’affichage du calendrier). »

    est-ce que e n’est pas plutôt agenda.html ?

    • OK je me réponds, j’aurais du y penser :
      avec zpip la page est page-agenda.html dans squelettes/contenu et le fichier agenda.json.html est lui à placer dans squelettes/

      dd

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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