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

  • 11

    bonjour,

    Le calendrier marche très bien, je le fais fonctionner avec Zpip.

    Par contre, quand je clique sur un événement, je ne récupère pas la mise en page...

    Je ne sais pas trop si je dois poser la question ici ou sur une contrib sur Z, mais peut-être aurez-vous une idée ?

    http://librairielembarcadere.com/spip.php?page=agenda

    http://librairielembarcadere.com/spip.php?evenement57

    • problème de zpip, pas de ce plugin. Cela étant, je pense que votre problème c’est que vous avez mis le squelette page-agenda.html directement dans votre dossier « squelettes » et non pas dans « squelettes/contenu ».

    • hmm, c’est pas le cas, mais je vais voir avec zpip

      sinon, je me rend compte que mes événements ne sont visible que quand je suis logguée !

      on peut mettre des permissions spéciales ?

    • je voulais dire le fichier page-evenement.html.

      Il n’y pas de restriction d’affichage sur les évènements. Du reste, je vois bien l’évènement en étant non logé, ici http://librairielembarcadere.com/spip.php?evenement57.

    • j’ai regardé votre squelette :
      -  renommer contenu/evenement.html en contenu/page-evenement.html. Ceci explique votre bug d’affichage des évènements en Zpip.
      -  déplacer contenu/agenda.json.html à la racine de squelettes, et par conséquent modifier events: "spip.php?page=contenu/Fagenda.json" en events: "spip.php?page=agenda.json". Ceci explique votre non affichage lorsque non connecté. En effet, pour des raisons de sécurité, seuls les webmestres peuvent requeter directement sur un squelette dans un sous-dossier. Pour les visiteurs, le requete doit se faire sur le dossier principal (dans le cas de Z, celui-ci construit automatiquement le squelette du dossier principal).

    • oui, j’ai essayé diverses places, notamment pour agenda.json.html

      Du coup, c’est bon pour voir les evts sans être loggué, mais toujours pas de prise en compte de l’environnement zpip (meme avec page-evenement dans contenu)

    • envoyez moi un login/mdp d’admin en privé. il faut que j’utilise le mode debug pour saisir le pb.

    • ok, c’est un bug lié au fait que squelette_einsteiniumist redéfinit le squelette evenement.html (voir http://librairielembarcadere.com/plugins/auto/squelette_einsteiniumist/v1.0.2/evenement.html, le problème a été découvert grâce au var_mode=inclure).

      Donc il faut surcharger cette surcharge, en s’arrangeant pour appeler le code de Z. En mettant à la racine de squelettes un fichier evenement comprenant la ligne suivante :

      <INCLURE{fond=structure,type=page,composition=evenement,env} />

      Du reste je me demande si ce n’est pas un bug du squelette einsteiniumist, à signaler dans le forum du squelette en question.

    • ps : il reste encore un référence à inclure/agenda.json dans http://librairielembarcadere.com/squelettes/contenu/page-agenda.html.

      A corriger, car c’est problèmatique pour l’accessibilité (et le référencement !)

    • Ouiii, merci beaucoup !

    • oula, par contre il y a un souci sur le pied de page. je regarde d’où peut venir le pb.

    • a je viens de vérifier. C’est ta version du squelette qui est bugé. Jamais ce fichier page-agenda.html n’aurait du se trouver à la racine du plugin. Regarde le zip actuel http://files.spip.org/spip-zone/squelette_einsteiniumist.zip.

      Donc :
      -  supprimer le dossier auto/squelette_einsteiniumist
      -  reinstalle le plugin
      -  supprime le fichier evenement.html à la racine de ton dossier squelette

      et cela devrait jouer.

    Répondre à ce message

  • 1

    Question à propos du plugin « Organiseur » v0.8.10 intégré dans SPIP 3.0.17.

    1°) Chez mon hébergeur " PHP Version 5.3.3-7+squeeze19, MySql version 5.1.73

    Dans l’espace privé, la vignette « Agenda interne » me renvoie sur l’espace public avec le texte « Contenus publiés le lundi 10 novembre 2014 » par exemple.
    Ce lien ouvre le calendrier « Full Calendar » dans l’espace public sous une page SPIP minimaliste .

    2°) En local sous Wamp Apache 2.2.21, PHP 5.3.10, MySql 5.5.20

    Tout se passe normalement avec ouverture du calendrier dans l’espace privé.

    Que faire pour améliorer les choses ?
    Merci de votre aide.

    • Question à propos du plugin « Organiseur » v0.8.10 intégré dans SPIP 3.0.17.

      Problème résolu !!

      Il s’agissait d’une confusion entre deux calendriers implantés dans "squelettes".
      Un calendrier visible dans l’espace public et le FullCalendar dans l’espace privé.
      Tous les deux avec l’appellation "calendrier" .

      Désolé ... si quelqu’un s’est penché sur ma question !!!

    Répondre à ce message

  • 9

    Bonsoir,

    merci pour ce forum !

    Je suis un peu perdu, il faut dire les choses comme elles sont...

    J’ai un proto de site associatif sous SPIP 3, visible ici : http://sqgd.web4me.fr/spip/

    Souhaitant y adjoindre un agenda, j’ai donc installé Agenda 3.14.3 mais j’ai aussi Mini Calendrier 2.3.6... je suppose que ça n’était pas à faire ? En attendant, j’ai suivi au plus près les instructions données ici-même, mais j’ai une question quant aux squelettes agenda.html et/ou article.html, ce n’est pas clair, j’ai bricolé sans trop comprendre... ou alors il y a quelque chose d’implicite qui m’échappe !

    En attendant, sur les pages d’articles où est censé s’afficher un agenda apparaît l’erreur
    http://sqgd.web4me.fr/spip/spip.php?article1&var_mode=debug&var_mode_objet=html_a91b80203e88c621937dac15517c2969&var_mode_affiche=squelette#L0

    Bref je suis largué !
    merci pour le coup de main...
    Gérard.

    • a priori peut de chance que le minicalendrier rentre en conflit avec l’agenda, sur ce problème du moins. Mais j’avoue ne jamais avoir utilisé le mini-calendrier.

      Ton erreur je ne peux pas la voir car tu pointe vers un lien en var_mode=debug, dont l’accès est reservé aux administrateurs. Et en tant que simple visiteur je ne vois aucun bug.

      Si tu veux tu peux m’envoyer par message privé un login/mdp pour que je regarde.

    • hop, avec ton code j’ai pu voir ce qui clochait.

      Ton problème ne vient pas d’une mécompréhension du fonctionnement du calendrier mini, et n’a pas directement un lien avec mon article.

      Dans ton squelette article.html, tu appelle :

      #CALENDRIER_MINI{date, var_date, url, url_json}

      tu n’a du lire que la moitié de la doc de calendrier mini, puisque ce que tu copie c’est juste la doc de la syntaxe. Autrement dit, date, var_date, url, url_json sont à remplacer par d’autres valeurs.

      Il se trouve que la doc donne un exemple qui devrait correspondre à ton besoin ("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}})]

      Donc si tu remplace ton #CALENDRIER_MINI{date, var_date, url, url_json} par le code sus-cité tu devrais avoir ton calendrier mini fonctionnel.

    • Bonjour,

      merci pour ta réponse, ok en effet...

      Ce que tu as dit dans 1re réponse laissait à penser que MiniCalendrier est à part, les 2 pouvant coexister. Et là en quelque sorte tu dis qu’il faut laisser #CALENDRIER_MINI ?

      En fait, je me prépare à supprimer le plugin MiniCalendrier pour ne pas compliquer les choses.
      Je te confirme cependant que, pour le moment, je n’y comprends rien !...
      Merci pour ta patience !
      Gérard.

    • pour résumer, et parce que ma première réponse était écrite trop rapidement :

      -  le plugin agenda a besoin du plugin calendrier mini pour fonctionner.
      -  pour afficher les evenements tu peux utiliser #CALENDRIER_MINI ou bien un autre système, celui que je décrit dans le présent article. Ce sont juste deux modes de présentations différents (et tu peux ,ême en utiliser d’autres)

    • Bonsoir,

      merci pour ta réponse, bien utile, je me préparais à désactiver calendrier mini...

      J’ai donc corrigé comme demandé.

      A présent, le calendrier apparaît bien mais sans rien dans un jour où j’ai créé un événement, dans un article donné. Si je clique sur ce jour-là, j’ai l’erreur « Aucun squelette jour.html n’est disponible... »

      Merci !
      Gérard.

    • honnetement je ne sais pas, je ne connais pas le calendrier mini, ni comment il fonctionne...

    • Bonsoir,

      pourrais-tu expliciter ceci :

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

      En effet, je ne comprends pas bien la seconde partie de la phrase, car pour moi j’appelle la fonction d’affichage du calendrier via la balise #CALENDRIER_MIN dans par exemple un squelette article.html, à l’endroit ou je souhaite en effet que l’agenda s’affiche !

      Merci de m’éclairer !
      Gérard.

    • Bonjour,

      j’ai fini par comprendre un peu mieux et retomber sur mes pieds !

      Pour ceux que ça pourrait aider, voici quelques « tuyaux » basiques :

      1. il faut effectivement créer une page squelette agenda.html à part, avec dedans tout ce qui est préconisé par Maïeul au dessus ;
      2. cette page sera référencée à part, j’ai choisi, dans le sommaire, dans les rubriques, dans les articles, d’insérer un lien dans la div à droite « aside », car elle n’a pas le statut d’article et donc elle n’est pas incluse dans les menus automatiques SPIP ;
      3. du coup, je n’ai plus besoin d’insérer #CALENDRIER_MINI dans mon squelette article, le squelette agenda fait très bien l’affaire, inutile d’avoir un calendrier dans chaque article.

      Il y a certainement d’autres façons de procéder, plus académiques, je ne sais pas... En tout cas, ça semble bien marcher, je ne boude pas mon plaisir d’y être arrivé !

      Merci à Maïeul !
      Gérard.

    • c’est exactement le but de cette contrib : un agenda sur une page à part. Pas la même chose qu’un agenda sur la page d’article...

    Répondre à ce message

  • 1

    Bonjour,
    je débute avec SPIP. Mêmes si la documentation ne manque pas, les écueils sont nombreux.

    Le plugin Agenda 3.0 correspond à mon attente ; après quelque tâtonnements j’ai configuré un agenda qui me satisfait : les évènement s’affichent à ma convenance.

    J’aimerais désormais coupler cet Agenda avec Calendrier Mini 2.0.
    Pour cela j’ai intégré le code suivant dans un squelette ’complet’ :

    (#CALENDRIER_MINI#ENVdate,
    date,
    #URL_PAGEagenda,
    #URL_PAGEagenda.json)]

    Les jours avec évènements apparaissent dans le Calendrier Mini  ; Toutefois lorsque je clique sur un jour, je suppose que je devrais voir s’afficher l’Agenda pour la période correspondante. Or rien ne se passe ; la période correspondant au jour courant reste à l’affichage.

    J’espère être assez clair !

    Pouvez-vous me fournir une piste d’investigations, ou mieux encore la solution à mon problème ?

    Merci d’avance.
    Bonne fin de journée.

    • Je ne sais pas si tu as trouvé depuis.
      Il faut appeler la page agenda jour :

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

      dd

    Répondre à ce message

  • 5

    bonjour,

    Ce plugin marche très bien chez moi (bien qu’il n’y ait pas de bulle au survol avec le descriptif : est-ce normal ?), et j’aimerai maintenant le modifier un peu.

    en effet, je l’utilise pour afficher des événements pour un mois qui sont regroupés dans un seul article. Du coup, quand on clique sur un des événements, on arrive sur l’article avec tout, alors que je préfèrerais avoir une page avec seulement l’événement en question (ou les événements du jour)

    Il me semblait bien avoir vu un jour un tuto qui expliquait comment créer un squelette de page pour un jour, mais c’était il y a bien longtemps, et je ne sais pas si c’est toujours d’actualité pour Spip 3 (et en plus, je ne trouve plus le lien).

    Une idée ?

    • cela n’a pas grand chose à voir avec le plugin. Tu utilise quel squelette ?

    • einsteinumlist, mais j’ai fait la page d’événement à partir du tuto Agenda... Quand on clique sur un événement et qu’on arrive sur un article, c’est pas du fait de la page agenda ?

      http://librairielembarcadere.com/spip.php?page=agenda

    • je ne comprend pas : a tu d’abord créé une squelettes evenement ?
      ds tous les cas il faut que :
      -  tu ais un squelettes evenement.html, classique, ou simplement tu utilise une boucle evenement pour décrire ton evenement. C’est un squelette comme les autres, juste que tu prend un autre boucle.
      -  dans agenda.json.html tu remplace url,#URL_ARTICLE, par url,#URL_EVENEMENT,

    • ah ben oui, tout simplement, merci...
      Faut juste que je retrouve le squelette evenement.html de base pour le modifier...
      Il est quelque part, mais je ne retrouve pas où. Et avec &var_mode=inclure, j’arrive sur /tmp/quelquechose
      J’ai pourtant désactivé la compression dans les fonctions avancées

    • bizarre ca le bug avec var_mode=inclure. Tu devrais faire une copie d’écran et le reporté. Sinon a priori evenement de base se trouve dans le dossier du plugin

    Répondre à ce message

  • 2

    Bonjour

    J’utilise avec bonheur ce plugin dans mon squelette Escal sur un spip3 mais j’ai un petit souci. Dans la config du plugin agenda, quel que soit mon choix pour la présentation de l’agenda (« Début de la liste » et « Lister les événements sur »), l’affichage reste obstinément le même, c’est à dire sur l’affichage du mois en cours.

    Qu’aurais-je pu louper ?

    Répondre à ce message

  • 50

    Bonjour tout d’abors merci beaucoup pour ce guide j’ai voulu migrer en 3.0 et je comprenais pas pourquois le calendrier ne marchais pas.

    Est t’il possible d’afficher plusieurs évenements différent avec plusieurs couleur différente en fonction du mot clé de l’article ou se situe l’évenement ?

    Par exemple j’ai 1 article avec le mot clé « rouge » avec des évenement que je souhaite faire apparaitre dans un fond rouge dans le calendrier et 1 article avec le mot clé « bleu » avec des évenements que je souhaite faire apparaitre dans un fond bleu dans le calendrier

    J’ai essayé de coller le code du fichier agenda.json.html plusieurs fois d’affiler mais dès que j’en met plusieurs plus rien ne s’affiche.

    Merci d’avance pour vos réponses

    Cordialement

    Michael

    • oui, c’est possible. En fait, plusieurs solutions existent :
      -  on peut definir une classe css pour chaque évenement : c’est className
      -  on peut utiliser les options color, backgroundColor,textColor et borderColor

      Voir http://arshaw.com/fullcalendar/docs/event_data/Event_Object/.

      Toute la difficulté est d’ajouter l’une de ces options dans le #ARRAY, sachant qu’on ne peut faire de boucle à l’intérieur des accolades du #ARRAY.

      On va donc mettre la boucle mot autour du #ARRAY :

      [<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}}}
      	>
      <BOUCLE_mot(MOTS){id_article}>
      					[(#ARRAY{id,#ID_EVENEMENT,
      title,[(#_evenement:TITRE|html2unicode|unicode2charset)],
      allDay,[(#HORAIRE|=={non}|?{true,false})],
      start,#DATE_DEBUT,
      end,#DATE_FIN,
      url,#URL_ARTICLE,
      className,#TITRE,
      description,[(#DESCRIPTIF|html2unicode|unicode2charset)]}|json_encode)]
      </BOUCLE_mot>
      </BOUCLE_evenements>]

      J’attire votre attention sur :

      • #_evenement:TITRE qui permet d’afficher le titre de l’évènement (cf http://programmer.spip.net/Contenu-de-boucles-parentes)
      • sur le fait que le code que je vous fournit la présuppose que :
        • chaque article ait au moins 1 mot-clef
        • chaque article ait au plus 1 mot-clef

      Il vous faudra modifier la boucle mots pour ajouter des critères de selections ajouter une partie alternative.

      Ps : je ne comprends pas pourquoi vous avez essayé de dupliquer le code. D’où vous est venu cette idée ?

    • Je ne comprend pas bien avec cette syntaxe comment je peu faire pour que les évenements de l’article avec le mot clé « rouge » aparraissent en rouge et ceux de l’article avec le mot clé « bleu » aparraissent en bleu. Vu qu’il n’y à pas de réstriction lié à un mot clé spécifique.

      Cordialement

      Brunner Michael

    • vous connaissez les css ? la on indique juste que chaque evenement doit porter la classe du mot lié à son article. Ensuite à vous de styler.

      Je ne vois pas quoi vous dire de plus.

    • Le probleme c’est que les mots clé que j’ai utilisé ne sont qu’un exemple (pour explicité mon idée)

      Les mots clé ne sont pas des couleurs (Louveteaux, Scouts, Pionniers, Compagnons, Groupe)

      Cordialement

      Brunner Michael

    • vous ne m’avez pas répondu : connaissez vous les css ? car ma réponse depend de vos connaissances …

    • Oui je connai un peu les css mais sans plus

    • En regardant mes articles contenant mes évennements je me suis rendu compte qu’ils n’ont pas qu’un seul mot clé (2, voir 3 ou 4 en général)

      Coordialement

      Brunner Michael

    • il vous faut donc modifier la boucle mots pour ne choisir d’afficher qu’un mot clef. Je vous invite à lire la documentation sur les critères de la boucle mots.

      Pour revenir au pb de couleur : supposons que vous avez associé le mot clef « toto », dont vous voudriez que les événements soient en rouge.

      Avec le code que je vous indique, vous allez inserer une class « toto » à l’évenement. En utilisant le Firebug (si vous êtes sous firefox, sinon les outils devellopeurs sous Safari ou Chrome), vous pouvez regarder la structure html de votre page, et notamment de votre agenda.

      Vous pouvez alors mettre le code suivant dans votre feuille de style :

      .fc-view .toto,.fc-view .toto .fc-event-skin{
          background-color:red;
          border-color:red;
      }

      Ceci aura pour effet de mettre en fond rouge et bordure rouge :
      -  le lien de l’évenement (.fc-view .toto)
      -  l’évènement proprement dit (fc-view .toto .fc-event-skin).

      Pour mieux comprendre les css, je vous invite à lire des tutoriels et a vous servir d’un outils comme firebug.

    • Est il possible de rajouter des boucles au dessus de la boucle evenement ?

      d’une forme comme celle ci par exemple

      #HTTP_HEADER{Content-type:text/javascript;}
      [<BOUCLE_rubrique(RUBRIQUES){par titre}{mots.titre="agenda"}>
      <BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}{id_rubrique}
      {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}|?{true,false})],
      start,#DATE_DEBUT,
      end,#DATE_FIN,
      url,#URL_ARTICLE,
      description,[(#DESCRIPTIF|html2unicode|unicode2charset)]}|json_encode)]
      </BOUCLE_evenements>
      </BOUCLE_rubrique>]

      Car en testant cette boucle je n’ai aucun évennements qui s’affiche dans l’agenda alors que sans la boucle de rubriques les évenements s’affichent

      Coordialement

      Brunner Michael

    • Oui c’est possible. A mon avis c’est votre boucle rubriques qui n’est pas correct.

      {mots.titre="agenda"}> devrait être {titre_mot=agenda}

    • Justement non avec spip 3.0 l’écriture titre_mot=agenda n’est plus valide, il faut écrire mots.titre=« agenda ».

      J’ai quasiment tous mon squelette de site qui fonctionne avec des mots clé et fonctionne avec la deuxième écriture.

      Cordialement

      Brunner Michael

    • très étonné de ce changement. Il est vrai que je n’ai jamais utilisé non plus l’ancienne syntaxe.

      Quoiqu’il en soit, cela sort du pb du plugin agenda. Il vous faudrait faire une boucle similaire de test avec juste du html et voir ce qui cloche.

    • En faisant une les meme boucles en html cela marche parfaitement

      Voici ce que j’ai mis pour le moment dans agenda.json.html

      #HTTP_HEADER{Content-type:text/javascript;}
      [<BOUCLE_rubrique_agenda(RUBRIQUES){mots.titre="agenda"}{tout_voir}>
      <BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}	
      {agendafull date_debut,date_fin}
      	>
      					[(#ARRAY{id,#ID_EVENEMENT,
      title,[(#TITRE|html2unicode|unicode2charset)],
      allDay,[(#HORAIRE|=={non}|?{true,false})],
      start,#DATE_DEBUT,
      end,#DATE_FIN,
      url,#URL_ARTICLE,
      description,[(#DESCRIPTIF|html2unicode|unicode2charset)]}|json_encode)]
      </BOUCLE_evenements>
      </BOUCLE_rubrique_agenda>]

      et ce que j’ai mis dans une page test.html

      [<BOUCLE_rubrique_agenda(RUBRIQUES){mots.titre="agenda"}{tout_voir}>
      <br>
      #TITRE
      <br>
      <BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}{id_rubrique}	
      {agendafull date_debut,date_fin}
      	>
      [(#ARRAY{id,#ID_EVENEMENT,
      title,[(#TITRE|html2unicode|unicode2charset)],
      allDay,[(#HORAIRE|=={non}|?{true,false})],
      start,#DATE_DEBUT,
      end,#DATE_FIN,
      url,#URL_ARTICLE,
      description,[(#DESCRIPTIF|html2unicode|unicode2charset)]}|json_encode)]
      </BOUCLE_evenements>
      </BOUCLE_rubrique_agenda>]

      Cette page de test me donne le retour suivant

      Agenda 
      {"id":"1","title":"Jour de l\u2019an","allDay":"true","start":"2011-01-01 00:00:00","end":"2011-01-01 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"5","title":"Vacances de No\u00ebl","allDay":"true","start":"2011-12-17 00:00:00","end":"2012-01-02 00:00:00","url":".\/?Vacances","description":""} , {"id":"2","title":"No\u00ebl","allDay":"true","start":"2011-12-25 00:00:00","end":"2011-12-25 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"3","title":"Saint Etienne","allDay":"true","start":"2011-12-26 00:00:00","end":"2011-12-26 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"4","title":"Jour de l\u2019an","allDay":"true","start":"2012-01-01 00:00:00","end":"2012-01-01 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"6","title":"Vacances d\u2019Hiver","allDay":"true","start":"2012-02-25 00:00:00","end":"2012-03-11 00:00:00","url":".\/?Vacances","description":""} , {"id":"10","title":"Vendredi saint","allDay":"true","start":"2012-04-06 00:00:00","end":"2012-04-06 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"11","title":"lundi de P\u00e2ques","allDay":"true","start":"2012-04-09 00:00:00","end":"2012-04-09 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"7","title":"Vacances de P\u00e2ques","allDay":"true","start":"2012-04-21 00:00:00","end":"2012-05-06 00:00:00","url":".\/?Vacances","description":""} , {"id":"12","title":"F\u00eate du travail","allDay":"true","start":"2012-05-01 00:00:00","end":"2012-05-01 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"13","title":"8 mai 1945","allDay":"true","start":"2012-05-08 00:00:00","end":"2012-05-08 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"14","title":"Ascension","allDay":"true","start":"2012-05-17 00:00:00","end":"2012-05-17 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"38","title":"F\u00eate de groupe 2012","allDay":"false","start":"2012-05-19 17:00:00","end":"2012-05-19 23:30:00","url":".\/?Agenda-groupe","description":""} , {"id":"55","title":"Cr\u00e9mation du b\u00fbcher","allDay":"false","start":"2012-05-26 21:30:00","end":"2012-05-27 00:00:00","url":".\/?Agenda-groupe","description":"
      \u00c9tant donn\u00e9 que nous n\u2019avons pas pu allumer notre b\u00fbcher durant la f\u00eate de groupe car le temps ne le permettais pas, nous vous proposons de venir ce samedi participer \u00e0 la cr\u00e9mation de celui-ci en famille ou entre amis.<\/p>"} , {"id":"8","title":"Vacances d\u2019\u00e9t\u00e9","allDay":"true","start":"2012-07-06 00:00:00","end":"2012-09-02 00:00:00","url":".\/?Vacances","description":""} , {"id":"15","title":"F\u00eate nationale","allDay":"true","start":"2012-07-14 00:00:00","end":"2012-07-14 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"16","title":"Assomption","allDay":"true","start":"2012-08-15 00:00:00","end":"2012-08-15 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"9","title":"Vacances de la toussaint","allDay":"true","start":"2012-10-27 00:00:00","end":"2012-11-07 00:00:00","url":".\/?Vacances","description":""} , {"id":"17","title":"Toussaint","allDay":"true","start":"2012-11-01 00:00:00","end":"2012-11-01 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"18","title":"No\u00ebl","allDay":"true","start":"2012-12-25 00:00:00","end":"2012-12-25 00:00:00","url":".\/?Jours-feries","description":""} , {"id":"19","title":"Saint Etienne","allDay":"true","start":"2012-12-26 00:00:00","end":"2012-12-26 00:00:00","url":".\/?Jours-feries","description":""} 
      Agenda louveteaux / Jeannettes 
      {"id":"26","title":"Weekend de Neige","allDay":"false","start":"2012-02-11 14:30:00","end":"2012-02-12 17:00:00","url":".\/?Agenda-louveteaux-Jeannettes-14","description":"
      
      Bonjour \u00e0 tous ,<\/p>\n\n
      
      Eh voil\u00e0, comme certain l\u2019on remarqu\u00e9 sur les circulaires, la date du weekend de neige viens de tomber. 
      Pour tout ceux qui s\u2019inqui\u00e8te du mauvais temps, ce weekend devrai se faire dans un chalet. <\/p>\n\n
      
      Passer une bonne semaine.<\/p>\n\n
      
      [\/ La ma\u00eetrise louveteaux<\/span> \/]<\/p>"}

      Donc je ne vois pas d’ou peu venir le probleme

      Par contre j’ai remarquer un autre petit souci
      J’ai écrit {agendafull date_debut,date_fin} à la place de 2.

      {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}}}

      Car lorsque les évenements s’affichent et qu’ils dure au dela du mois en cours en changement de mois les évenements ne sont pas affiché alors qu’en gardant uniquement {agendafull date_debut,date_fin} les évenement sont bien affiché sur toutes leur durée

      Cordialement

      Brunner Michael

    • il faudrait que vous le critère {', '} dans la boucle rubriques, pour avoir une virgule au changement de rubrique.

      Je n’ai rien compris à votre dernière remarque.

    • En ajoutant {', '} dans la boucle rubrique cela ne change absolument rien je n’ai toujours aucun évenement qui s’affiche dans l’agenda

      Pour ma dèrnière remarque n’en tenez pas compte me suis planté

      Cordialement

      Brunner Michael

    • vous auriez un site publique, que je regarde ?

    • Non le site publique que j’ai es en 2.1.17 je suis entrain de le mettre a jour en 3.0 en local pour être sur que tout fonctionne lorsque je migrerais en 3.0 sur le net.

      Cordialement

      Brunner Michael

    • pourriez vous alors m’envoyer par email (monprenom@monprenom) un dump de la BDD ?

      je regarderai dans la semaine

    • Sous quel format et à quelle adresse mail ?

      Coordialement

      Brunner Michael

    • mon adresse c’est monprenom@monprenom.net (et monprenom c’est maieul).

      mettez en txt brut

    • ok, alors j’ai compris d’où vener le problème :

      Pour que le JSON soit correcteur, il faut qu’il se présente de la manière suivante :

      [
      {une entrée},
      {une entrée},
      {une entrée}
      ]

      Or en l’occurence elle se présentait de la forme suivante :

      [
      {une entrée},
      {une entrée},
      {une entrée},
      ,
      ,
      ,
      ]

      Pourquoi ces virgules en trop ? Parce que certaines rubriques avec le mot clef Agenda n’avaient pas d’articles avec des évènements, mais étaient bouclés pour autant. Résultats : on avait des virgules entre des rubriques, qui renvoyaient du vide. Conséquence : cela ne pouvait marcher.

      Une solution (pas forcéement la meilleure, mais la plus simple en première approche) pour éviter d’avoir à vérifier l’attribution du mot clef, c’est d’utiliser le code suivant :

      #HTTP_HEADER{Content-type:text/javascript;}
      #SET{virgule,''}
      [<BOUCLE_rubrique_agenda(RUBRIQUES){mots.titre="agenda"}{tout_voir}>
      <B_evenements>
      #GET{virgule}
      <BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}{id_rubrique}	
      {agendafull date_debut,date_fin}
      	>
      
      					[(#ARRAY{id,#ID_EVENEMENT,
      title,[(#TITRE|html2unicode|unicode2charset)],
      allDay,[(#HORAIRE|=={non}|?{true,false})],
      start,#DATE_DEBUT,
      end,#DATE_FIN,
      url,#URL_ARTICLE,
      description,[(#DESCRIPTIF|html2unicode|unicode2charset)]}|json_encode)]
      </BOUCLE_evenements>
      #SET{virgule,','}
      </B_evenements>
      </BOUCLE_rubrique_agenda>
      ]

      Explication : on initialise d’abord la variable virgule avec une valeur vide. Ainsi, à la première itération de la boucle RUBRIQUES, nous n’avons pas de virgule (en gros, pas de virgule immédiatement après le [).

      La première fois que la boucle EVENEMENTS retourne du contenu, on met dans cette variable virgule une … virgule. Résulat : au débuts des boucles EVENEMENTS suivantes (celles qui retournent du contenu), nous avons une virgule.

      Conséquence : on obtient bien :

      [
      {une entrée},
      {une entrée},
      {une entrée}
      ]
    • ps : j’ai rapidement regardé le code de vos squelettes. Quitte à migrer en SPIP 3, je vous conseille de lire mon article sur 7 bonnes pratiques de développement avec SPIP.

    • Ca marche nickel. Mais j’ai encor une petit question comment on fait pour qu’il affiche les horaires de l’évenement si l’évenement en a, et comme actuellemtn si il dure toute la journée ?

      Est il possible d’augmenter la taille du texte affiché dans le calendrier ?

      Cordialement

      Brunner Michael

    • il faut que vous lisiez la documentation de FullCalendar. Il doit y avoir une option pour les horaires. Pour la taille du texte, je vous invite à inspecter le code html avec firebug pour connaitre les classes css à styler.

    • Bonjour j’ai encor un petit problème.

      Mon site utilise barre de gestion de coockies qui sont en fait un #ID_secteur de l’icone selectionné dans la barre haute du menu, j’ai du faire cela car en fonction de ce coockie le site n’affiche pas les même données.

      M’a question est donc la suivante, sur l’ancienne version de spip et de l’agenda, j’avait fait plusieurs boucle de selection d’évennement pour que seule les évenement dans l’#ID_secteur identique au coockie ne s’affiche, ainsi que les évenements contenu dans les rubriques situé à la racine du site qui contienne un certain mot clé (par exemple « louveteaux »). Ne pouvant pas dupliquer le code #array comment puis continuer à ne garder que les évenement qui m’intéresse ?

      Coordialement

      Brunner Michael

    • ce n’est pas qu’il ne faut pas dupliquer le code, mais je vois pas en quoi cela vous aiderait. D’une manière générale, c’est un principe en informatique : on évite autant que possible de dupliquer le code, question de maintenance.

      Une solution serait de passer le secteur qui vous intéresse lors de l’appel au json :

      [(#URL_PAGE{agenda.json,id_secteur=#ID_SECTEUR})]

      pour avoir un json par secteur.

      Et dans le squelette json, rajoutez le critère {id_secteur ?} à la boucle evenements (le ? est là pour indiquer qu’il ne faut pas tenir compte du critère si aucun secteur n’est passé).

      Ensuite

    • Je pense que vous avez oublié de mettre la suite car a la fin de votre message il y à ensuite

      Coordialement

      Brunner Michael

    • et ben non, il y pas de suite ;-)

      normalement ca suffit …

    • Pour ce qui est de l’affichage des horaires dans l’agenda je pense avoir trouvé d’ou vien le problème mais je ne sait comment le résoudre. Lorsque les donnée sont enodé via |json_encode cela donne quelque chose comme ceci « allDay » :« false » alors que dans la doc de fullcalendar il précise bien :

      allDay

      true ou false. Facultatif.

      Si un événement spécifique se produit à une heure du jour. Cette propriété affecte si le temps d’un événement est montré. En outre, dans les points de vue l’ordre du jour, détermine si elle est affichée dans la « toute la journée » section.

      Ne pas inclure les guillemets autour de votre true / false. Cette valeur n’est pas une chaîne !

      Lors de la spécification des objets d’événements pour des événements ou des eventSources, en omettant cette propriété, il sera hériter de allDayDefault, qui est normalement vrai.

      Donc j’ai l’impression que le problème vien du fait qu’il y à des guillement autour de false, quand l’agenda récupère les données des évenements et il ne l’interprete donc pas corectement

      Auriez vous une idée pour résoudre ce problème

      Cordialement

      Michael

    • vous avez raison sur le diagnostic. Je vais essayer de trouver comment résoudre.

    • donc la solution est de remplacer :

      [(#HORAIRE|=={non}|?{true,false})]

      par

      [(
      #HORAIRE|=={non}|
      ?{#EVAL{true},#EVAL{false}})]
    • Merci pour les horaires

      Encor une petite question est il possible de rajouter des valeurs à la suite dans le tableau array que l’on crée dans nos boucles ?

      Coordialement

      Brunner Michael

    • pas compris la question, mais je vous invite à lire la documentation de #ARRAY.

    • En fait j’aimerais pouvoir ajouter des valeur en dehors de la boucle dans le tableau puis le convertir en json

    • encore une fois lisez la documentation de #ARRAY. On explique comment stocker et manipuler les tableaux. Et si vraiment vous n’y arrivez pas, revenez. Mais je ne vais pas vous donner tout de suite la solution, cela ne serait pas pédagogique.

    • Justement c’est ce que j’ai déja fait j’ai essayé d’abord avec le filtre push, qui ne marche pas du fait qu’il numérote les clés automatiquement en partant de 0 donc cela ne nous interesse pas.

      Puis j’ai essayé avec le filtre |array_merge avec ce filtre cela fontionne mais le probleme est le suivant : Attention (1) : si une clé apparaît plusieurs fois, seule la dernière valeur pour cette clé sera retenue

      Donc dans mon cas cela ne m’arrange pas du tout, j’aimerais un filtre similaire mais qui ajoute les valeurs à la suite dans le tableau que la clé éxiste déja ou non.

      Cordialement

      Brunner Michael

    • ce que vous demandez n’est conceptuellement pas possible, puisque par principe dans un tableau associatif une clef est unique. Pour quoi avez vous besoin de cela ?

    • J’en ai besion afin de résoudre mon probleme afin d’avoir le calendrier qui ne garde que les évenement qui m’intéresse en fonction du cockie enregistrer sur le pc

      CAD une boucle qui ne prend que les évenement de l’id_secteur = au coockie et une boucle qui ne prend que les évnements de la rubrique racine qui contient un mot clé qui dépend du coockie enregistré

      Coordialement

      Brunner Michael

    • Par contre dans le tableau crée par le fichier agenda.json.html il y à plusieurs fois la même clé (pour chaque évenement) ? En quoi est ce différent ?

    • vous confondez les niveaux de tableau.

      Il faut comprendre que vous avez un tableau json principal, qui possède une entrée par évenement. Chacune de ces entrée est elle même un tableau json. Pour des raisons pratiques, on passe d’abord par un tableau #ARRAY, donc SPIP / PHP, que l’on convertir en tableau json.

      Le tableau principal est délimité par [], chaque entrée est séparée de la précédente par une virgule. C’est un tableau de type numérique : la clef d’une entrée est simplement un nombre, qui n’est pas affiché, puisque ce nombre est automatiquement incrémenté.

      En revanche les « tableau-evénements » sont délimités par {}. Chaque entrée possède une clé alphabétique, entre guillemet, et une valeur, entre guillemet. La clef est séparée de la valeur par les :. Et les entrée sont séparés les unes des autres par des virgules.

      Dans le cas qui vous intéresse, il faut donc que vous fassiez une boucle par type de requete, qui a utilisé doublons pour ne pas avoir d’évenements en double.

      [
      <BOUCLE_1(EVENEMENTS){critères}{doublons}{","}>
      </BOUCLE_1>
      <BOUCLE_2(EVENEMENTS){critères2}{doublons}{","}>
      </BOUCLE_2>
      ]

      pb : il faut mettre une virgule entre les 2 boucles, et ce uniquement si les 2 boucles retournent du contenu. La solution :

      [
      <BOUCLE_1(EVENEMENTS){critères}{doublons}{","}>
      </BOUCLE_1>
      [(#SET{virgule,","})]
      </B_1>
      <B_2>
      #GET{virgule}
      <BOUCLE_2(EVENEMENTS){critères2}{doublons}{","}>
      </BOUCLE_2>
      ]

      Si la boucle 1 renvoie quelque chose, on initialise la variable virgule. Si la boucle 2 renvoie quelquechose, on l’affiche avant de retourner le contenu de la boucle.

      A noter qu’on pourrait aussi remplir un mega tableau #ARRAY, puis le transformer. Mais étant donné les difficultés que vous semblez avoir à comprendre les tableau, je préfére mieux-pas.

    • en gros je doit faire quelque chose dans le genre :

      [
      <BOUCLE_1(EVENEMENTS){critères}{doublons}{","}>
      [(#ARRAY{id,#ID_EVENEMENT,
      title,[(#TITRE|html2unicode|unicode2charset)],
      allDay,[(#HORAIRE|=={non}|?{true,false})],
      start,#DATE_DEBUT,
      end,#DATE_FIN,
      url,#URL_ARTICLE,
      description,[(#DESCRIPTIF|html2unicode|unicode2charset)]}|json_encode)]
      </BOUCLE_1>
      [(#SET{virgule,","})]
      </B_1>
      <B_2>
      #GET{virgule}
      <BOUCLE_2(EVENEMENTS){critères2}{doublons}{","}>
      [(#ARRAY{id,#ID_EVENEMENT,
      title,[(#TITRE|html2unicode|unicode2charset)],
      allDay,[(#HORAIRE|=={non}|?{true,false})],
      start,#DATE_DEBUT,
      end,#DATE_FIN,
      url,#URL_ARTICLE,
      description,[(#DESCRIPTIF|html2unicode|unicode2charset)]}|json_encode)]
      </BOUCLE_2>
      ] 

      C’est cela ?

      Coordialement

      Brunner Michael

    • oui,

      n’oubliez simplement pas de remplacer

      [(#HORAIRE|=={non}|?{true,false})]

      par

      [(
      #HORAIRE|=={non}|
      ?{#EVAL{true},#EVAL{false}})]

      ps : inutile d’ajouter votre signature à chaque message : on sait que c’est vous, puis que vous remplissez le champ nom.

      ps 2 : si vous pouvez citer le code en utilisant <code class='spip'> cela permettrait d’avoir la coloration syntaxique.

    • Cela marche parfaitement, merci.

      J’ai encore 2 questions :

      Quel est le lien qui permet d’afficher directement l’agenda du jour lorsque l’on clique sur un jour du mini calendrier ?

      Est t’il possible d’afficher une infobulle lors du survol des évenements dans le calendrier ?
      Avec la version précédente je l’avait fait avec une class d’infobulle et les bornes
      <span>EN mettant ici les donnée que je veut avoir dans l'infobulle</span>,
      mais en essayant de l’ajouter dans le json cela ne le prend pas en compte, cela affiche tout directement sur le calendrier.

    • Je viens de passer mon site en version 3.04 mais la le calendrier et le calendrier mini ne fonctionne plus (ils fonctionnai parfaitement en local). A la place le site m’affiche le message d’erreur suivant : //scout.altkirch.free.fr/spip.php?page=calendrier mini event.json&lang=fr&start=1343772000&end=1346450400, json] 404

      D’ou peu venir le problème et comment le résoudre ?

      Petite info qui peu être utile mon site tourne chez free

      Merci d’avance

    • il faudrait que vous m’envoyiez l’url de la page qui pose problème pour que je puisse comprendre.

    • l’url du site est http://scout.altkirch.free.fr/ ne passer pas par IE le probleme fait planter tous le graphisme du site

      Apparement ca viendrai du fait que le serveur ne gere pas le json_encode du fait qu’il es en 5.1.3RC4-dev

      Est il possible de shinter ou d’ajouter la fonction ?

    • ouch,

      il faudrait poster une question sur spip-dev pour savoir si on peut avoir json encode sur une vieille version de PHP, cela sort de mes compétences (en tout cas des compétences que j’ai dans le délai qui arrive).

      Dans tout les cas je vous conseillerai personellement de prendre un autre hébergeur que Free. Aujourd’hui on en a des pas trop cher, et vous y gagneriez sans doute.

    • J’ai trouver une solution sur un site mais je ne vois pas comment la mettre en place sur un site spip

      http://www.g33k-zone.org/post/2009/06/05/json_encode-et-json_decode-en-PHP4

      j’ai collé la partis ci dessous dans mon fichier mes_fonctions.php et ajouter le fichier JSON.php dans le dossier de squelette, mais cela ne fonctionne pas (j’ai aussi tenté de modifier le json_encode du ficher agenda.json par #JSON_ENCODE, mais cela ne marche pas non plus

      <?php
      if ( !function_exists('json_decode') ){
      	require_once (dirname(__FILE__).'/JSON.php');
          function json_decode($content, $assoc=false){
      		if ( $assoc ){
      			$json = new Services_JSON(SERVICES_JSON_LOOSE_TYPE);
      		} else {
      			$json = new Services_JSON;
      		}
      		return $json->decode($content);
      	}
      }
       
      if ( !function_exists('json_encode') ){
      	require_once (dirname(__FILE__).'/JSON.php');
      	function json_encode($content){
      		$json = new Services_JSON;
      		return $json->encode($content);
          }
      }
      ?>

      Si jamais vous avez une idée je suis preneur

    • Grossbouff

      Bonjour,

      Merci Maieul pour cet article qui m’a permis d’implémenter sans problèmes un joli calendrier.

      Ayant le meme problème que Michael pour la gestion des couleurs des evenements (pour le meme besoin scout ;-), je l’ai résolu par la méthode conseillée :

      ...
      className,[(#_rub:TITRE|html2unicode|unicode2charset)],    
      ...

      Le titre de la rubrique contient le groupe => identifie la couleur

      dans le CSS

      .fc-view .Louveteaux,
      .fc-view .Louveteaux .fc-event-skin,
      .fc-view .Jeannettes,
      .fc-view .Jeannettes .fc-event-skin
      {
      		background-color: #E97A0E;
      		border-color: #E97A0E;
      }

      pour info notre site

    • tempusus

      Bonjour,

      Avez vous résolu votre problème avec json ?

      J’ai exactement le meme soucis :)

      merci d’avance

    Répondre à ce message

  • 1

    Dans cet article nous manipulons deux fichiers squelettes :
    article.html (qui contient le code nécessaire à l’affichage du calendrier).

    C’est le seul endroit de l’article ou « article.html » est nommé. A quel moment est-il donc manipulé ? Et pour en faire quoi (avec quel code dedans) ?

    Répondre à ce message

  • 4

    bonjour,

    je me penche de nouveau sur le calendrier.
    Petit problème : lorsque j’appelle la page agenda, les événements ne s’affichent pas.
    Si je vais sur le mois suivant, puis que je reviens, là, les événements apparaissent.

    Comment forcer le chargement des évenements ?

    • il faudrait que j’ai l’url de la page pour savoir d’où vient le pb... chez moi ca charge dès le début :p

    • même souci que pour avant : on a un $ et pas un jQuery.

      Tu dois avoir un plugin qui cause l’incompatibilité, mais je ne peux pas te dire lequel.

      Remplace

      loading: function(bool) {
      				if (bool) $('#calendrier-loading').show();
      				else $('#calendrier-loading').hide();
      			},

      par

      loading: function(bool) {
      				if (bool) jQuery('#calendrier-loading').show();
      				else jQuery('#calendrier-loading').hide();
      			},

      et cela devrait faire l’affaire ...

    • Oui !

      J’ai fait quelques tests, et le plugin qui était en cause était Squelette Einsteiniumist (mais j’en ai vraiment besoin...)

      Merci beaucoup, Maïeul !

    Répondre à ce message

  • 7

    bonjour,

    je tente de suivre le tuto sous spip 3+Zpip, mais j’ai l’impression qu’aucun appel n’est fait à fullcalendar

    Est-ce que cela ne viendrait pas de l’appel au js+css par
    #CHEMIN{lib/fullcalendar/fullcalendar.css}

    alors que le répertoire lib n’existe pas ? Mais où est fullcalendar, alors ?

    • non, car c’est un chemin au sens spip, donc à compter de la base de chaque dossier plugin (cf http://programmer.spip.net/La-notion-de-chemin).

      En l’occurrence le dossier liv devrait se trouver dans le plugin-dist organiseur. Vérifie si tu l’as bien.

    • il est bien présent.
      Mais lorsque j’appelle la page agenda, j’ai juste une liste d’événements qui s’affiche, et non un calendrier...

    • bon, je vais poser ma question très con :

      dans le <div id="agenda">
      , on met une boucle événement ? Genre celle qui est donnée en exemple ?

    • Tu as du louper la parti « Sélection des évènements à afficher ». Mais le mieux pour que je sache d’où vient le problème ait que j’ai accès à une version en ligne. Là comme cela le pb peut venir de plein d’endroit...

    • les evenements sont bien appelés dans la page json ? Je l’ai recopiée telle qu’elle.

      Le site : http://librairielembarcadere.com

      je t’envoie un login pour le voir en mp

    • hum, si je me rend sur http://librairielembarcadere.com/spip.php?page=agenda.json, j’ai un js qui contient

      test
      
      []

      Deja il faudra a un moment enlever ce « test ».

      Second souci : le js n’est effectivement pas chargé (on le voit en utilisant les outils de dev de firefox ou chrome).

      En consultant la console JS, on tombe sur cela :

      Uncaught TypeError: Property '$' of object [object Object] is not a function

      à la ligne qui est censer charger le json.

      Je ne sais pas d’où ca vient exactement, mais apparement jquery a une double syntaxe :
      -  syntaxe courte avec un $
      -  syntaxe longue avec jQuery.

      Il faudrait pour éviter le problème mettre jQuery à la place du $, dans le squelette principale.

      Cela étant, pas normal qu’il y ait cet erreur : il faudrait désactiver tous les plugins non indispensables pour voir si l’erreur est là. Puis réactiver un à un pour voir celui qui cause le souci.

    • oui, ça marche !!
      enfin, le calendrier s’affiche, et les événements en dessous, mais normalement, j’ai tous les ingrédients, yapuka les mettre ensemble

      j’avais mis le mot ’test’, car je ne savais pas si je devais mettre le fichier json dans le répertoire squelettes/contenu ou directement squelettes (pour ceux qui se posent la question, c’est dans squelettes...)

      il y a des incompatibilités entre mini-calendrier et le plugin en travaux : ça doit venir de là, le problème...

    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