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.
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 :
- créer un squelette agenda.html, avec un
divdont l’attributidestagenda. - appeler dans le squelette le script
fullcalendaret ses feuilles de styles. - utiliser ce script pour afficher l’agenda dans dans la
div#agenda. - créer un squelette
agenda.json.htmlfournissant 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]{ '—' 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').fullCalendarsignifie que nous allons demander à javascript de modifier ledivdont l’id est égale àagendapour 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 champdate_debutservira pour repérer … date de début de sélection. -
date_fin: que le champdate_finservira pour repérer … date de fin de sélection. -
periodeque 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#HORAIREqui contient justement cette information. On utilise#EVALpour 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 squeletteagenda.json.htmlavec la valeur destartégale à 0, c’est à dire au 1 janvier 1970 à minuit, et la valeurendé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|timepermet 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 :
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.
Discussions par date d’activité
65 discussions
Bonjour et bravo pour les détails.
Je ne suis pas très bon en programmation, j’en ai jamais fait.
Je travaille en local avec Wamp pour transposer un site existant, et faire des améliorations.
Je suis sous Spip 3.0.5 Sarka 3.2.10, j’utilise les plugins calendrier_mini 2.0 et Agenda 3.5 pour facilités la tenu à jour d’un agenda d’événements répétitifs qui n’ont pas besoin de grande explication.
J’ai mis en place, tel que vous le proposez et cela fonctionne correctement, j’ai le mini calendrier qui affiche les événements et la page agenda qui affiche également, mais tout en bleu.
J’ai 5 catégories d’évènements que j’ai mis dans 5 articles. J’ai créé un groupe mot-clé Couleur_agenda et les mot-clé : Rouge, vert, Or, Bleue, Mauve.
J’arrive là où je ne sais plus faire : j’ajoute une BOUCLE_mot, comme proposé dans le json. Que dois-je mettre pour que le choix de mes couleurs, s’affiche avec la couleur, bien sûr après je dois avoir mon CSS, cela je dois arrivé à le faire.
Je n’ai pas trouvé de solution dans l’utilisation des balises et filtres. Merci de votre aide.
Répondre à ce message
Bonjour
Un grand merci pour ce code, qui m’a permis d’avancer grandement. Il me manque encore un élément : je souhaite transmettre à ma page agenda.html (et au script qui s’y trouve) un certain nombre de paramètres supplémentaires correspondant à différents champs des articles de départ (sous-titre, texte, voire image jointe).
Or j’ai beau tout essayer, la transmission ne s’effectue pas. Sans doute cela a-t-il à voir avec le mystérieux « paramètre_url » dont vous semblez dire qu’il est là pour ça. Mais je ne pige pas où je suis censé le passer, et sous quelle forme. Pouvez-vous m’en dire un peu plus ?
Désolé pour le dérangement et merci d’avance...
Je pense que vous souhaitez passer l’nformation non pas à agenda.html mais à l’affichage de l’agenda.
Ou alors votre page agenda.html est spécifique à un article ?
dans tout les cas, il me faut préciser votre besoin, là je ne suis pas sûr de pouvoir vous répondre correctement
Je vais tâcher d’être plus précis (au risque de dire une ou deux âneries supplémentaires).
Le but est de réaliser des infos-bulles dans le calendrier, spécifiques à chaque évènement, et comportant pour cela des informations contenues dans divers champs des articles qui sont à la base de ces évènements. Donc, il s’agit bien de transmettre ces infos au calendrier - mais celui-ci étant conçu par un script se trouvant sur la page agenda.html, il me semblait (à tort ?) que le problème revenait à transmettre ces informations au squelette lui-même.
Est-ce plus clair à présent ?
Merci de votre aide !
je crois qu’effectivement vous n’avez pas compris le principe de l’agenda sous spip 3.
J’ai un fichier agenda.html, celui ci va appeler des scripts jquery pour afficher un agenda. Les élèments à afficher dans cette agenda (date, titre etc.) sont pour leur parts issues du fichier json calculé par le squelette
agenda.json.html(vous remarquerez que c’est à l’intérieur de ce squelette que ce situe les boucles agenda...Donc c’est à l’intérieur de
agenda.json.htmlque vous devriez selectionner les infos à afficher dans l’agenda.Dans le cas présent, je suppose que le plus « correcte » serait de mettre les infos tirés des articles dans la partie « description ».
C’est à dire remplacer le contenu de la ligne 11 du code suivant (repris de l’article)
Là méthode peut être de prendre le code suivant :
Explication de code :
- l. 7 on récupere l’article de l’évenement
- l. 9 on veut le titre de l’evenement, et non pas le titre de l’article (cf http://programmer.spip.net/Contenu-de-boucles-parentes)
- l. 14 on on récupere le texte de l’article.
J’ignore complètement comment s’affiche ce qui est passé comme « description ». Il faut regarder du côté de la doc de full calendar pour voir comment avoir des infos bulles
Hem. En fait, j’avais bien compris que c’était depuis agenda.json.html que je devais envoyer les bonnes infos. En fait, j’ai enfin tilté : ce qui coinçait, c’est que j’essayais de récupérer les champs de mes articles... au travers d’une boucle évènement. Forcément, ça ne pouvait pas marcher. On est peu de chose...
En attendant, merci à vous pour le coup de main !
Répondre à ce message
Bonjour,
Merci !
J’ai suivi le pas à pas depuis le début, collé les lignes de code comme expliqué, tout a marché tout de suite, alors que j’ai essayé une autre solution sans succès depuis hier, tout cela sur un spip 3.05 en local.
C’est tout à fait par hasard que je suis tombé sur votre article, en recherchant le plugin full calendar que j’ai mis en ligne avec une version 2.1.15 .
L’appel aux évènements est un plus et à mon sens plus facile à gérer que par le plugin.
Problème, lorsque l’on veut toucher aux css du calendrier, il faut toucher au plugin-dist, qui effacera la modification à la prochaine mise à jour.
Je suppose que l’appel à la css doit changer si on veut la sauvegarder et la conserver ?
Quoiqu’il en soit, encore merci.
A+Patrick
comme toujours en SPIP, il faut utilise le mecanisme de chemin pour permettre la surcharge... http://programmer.spip.net/Surcharger-un-fichier
Merci pour cette réponse rapide, ce sera fait.
Bonne journée.
Bonjour,
Comme convenu, c’est fait, et merci pour les chemins.
Chez free, je n’arrive pas à avoir les événements affichés ici, même s’ils sont sur les calendrier à l’accueil.
Par contre, ici c’est tout à fait l’effet attendu http://dupouy.leobaillard.org/spip.... ainsi qu’en local.
Dans les deux sites distants, il s’agit de spip 2115.
merci.
Répondre à ce message
Bonjour,
Merci !
J’ai suivi le pas à pas depuis le début, collé les lignes de code comme expliqué, tout a marché tout de suite, alors que j’ai essayé une autre solution sans succès depuis hier.
C’est tout à fait par hasard que je suis tombé sur votre article, en recherchant le plugin full calendar que j’ai mis en ligne avec une version 2.1.15 ici
http://imagesetpeche.free.fr/?FullC...
L’appel aux évènements est un plus et à mon sens plus facile à gérer que par le plugin.
Problème, lorsque l’on veut toucher aux css du calendrier, il faut toucher au plugin-dist, qui effacera la modification à la prochaine mise à jour.
Je suppose que l’appel à la css doit changer si on veut la sauvegarder et la conserver ?
Quoiqu’il en soit, encore merci.
A+Patrick
Répondre à ce message
en lisant cela
http://stackoverflow.com/questions/3408723/display-more-text-in-fullcalendar
j’ai compris comment afficher des champs de texte supplémentaire
mais j’ai encore une question basique, comment afficher les heures de début et de fin ?
ps : dans la cadre une mise à jour d’un site spip2 en spip3, je suis moi aussi, un peu dérouté par cette nouvelle dépendance à cette librairie javascript.
Répondre à ce message
Aie... Impossible de voir mon agenda (dernière version) sous SPIP 3.0.4
http://www.davduf.net/?page=agenda
http://www.davduf.net/?page=agenda.jason
Ne donnent rien.
J’ai copié collé les deux pages ci-dessus et pourtant, c’est vide.
Dans l’interface privée, ça marche super.
Mais dès que j’essaye de visualiser en ligne, impossible :
Si je fais http://www.davduf.net/?page=agenda
Une idée ? Merci d’avance !
J’ai installé la mise à jour 3.6.11
Merci d’avance !
bah en même tps, ton squelette contient juste le code que je met là, et rien autour. Il me paraissait pourtant comme allant de soi que le squelette devait être un squelette complet contenant tout les élèments qu’on attend (head, body etc.). Apparament non... faudra que je reformule ?
et ne me dis pas que tu ne sais pas faire un squelette complet ;-)
Oups... désolé... Je n’avais pas compris.
Oui, tu as raison : le reformuler dans le texte serait une bonne chose.
J’ai le calendrier désormais... Hélas, il ne contient rien...
http://www.davduf.net/?page=agenda&var_mode=calcul
http://www.davduf.net/bootcamp-a-l-inis-montreal?var_mode=calcul
c’est
agenda.jsonet pasagenda.jason.… Il faut que http://www.davduf.net/spip.php?page=agenda.json&start=1343599200&end=1346623200&_=1344720545377 te retourne du json (donc la tu met pour le coup que l’exemple que j’ai donné)Oh, excuse ,-) Et merci !
J’ai corrigé le agenda.json.html
Reste que mon calendrier est désespérement vide.
Et que si je vais sur un évévement (http://www.davduf.net/bootcamp-a-l-inis-montreal), SPIP m’indique toujours « Aucun squelette evenement.html n’est disponible... »
Comment faire ?
A force de cache vidée, ça marche ,-)
Tout était donc de mon fait. Ah, la la...
Quelques détails cependant :
- comment afficher autre chose que le calendrier ? Comment afficher les événements eux-mêmes, à la façon de ce qu’il y a dans l’interface privée ? Autrement dit : quel squelette prendre dans le plugin ?
- peux ton contourner le lien obligtoire vers un article ? Autrement dit : afficher un rendez-vous sans passer par un article ?
Merci encore
Tu peux créer un squelette evenement.html à ta sauce, en utilisant dedans une boucle évenement qui se contrefiche des articles.
Et pour mettre directement un lien vers ce squelette, je pense que
#URL_EVENEMENTà la place de#URL_ARTICLEdans le json devrait faire l’affaire.Ecoute, j’ai un peu de mal... en fait ,-)
Oui, mais quand je crée l’événement, via le plug-in, je suis obligé de le lier à un article, c’est ça qui m’embête...
Sinon, selon toi, ce squelette evenement.html je le mets où ?
OK, je vais essayer ,-)
Merci
tu t’en fiche, si côté public cela ne se voit pas. A la rigueur tu les lis tous au même article. Sinon faudrait modifier le plugin, et c’est pas dans les projets.
Et le squelette evenement.html, tu le met là où tu met tes autres squelettes …
#URL_EVENEMENT à la place de #URL_ARTICLE dans le json : parfait !
Maintenant, il ne me reste plus qu’à créer une page agenda qui reprendrait tous les rendez-vous à venir sous forme de liste plutôt qu’en mode du calendrier (tel que proposé par le plug-in).
Merci encore !
bonjour
Plug-in Agenda 3.6.11
spip 3.04
bonjour je n’arrive pas à afficher mon full calendar coté public
je viens de lire plusieurs tuto mais j’ai besoin d’aide
je débute avec spip
pour afficher le full calendar
j’ai créer un dossier squelettes à la racine de mon site
j’ai placer
le fichier agenda.htm
et le fichier agenda.json.html
mais je ne sais pas comment l’appeler
j’ai créer une rubique agenda qui comporte un article associé à un événement
tout semble fonctionner cote privé
mais je sais pas comment afficher mon calendrier cote public
merci pour votre aide
voici mon contact
il faut savoir que SPIP dispose de deux sortes de pages :
- les pages liés à des objets, par exemple les pages d’articles, de rubrique, etc.
- les pages autres, par exemple les pages de sommaire, 404 etc.
En l’occurence, la page en question est une page de la seconde catégorie. Votre squelette s’appellant
agenda.html, il faut y accéder en allant surhttp://monsite.com/?page=agenda.html.Si vous souhaitez produire un lien vers cette page depuis un autre squelette, vous devez utiliser
#URL_PAGE{agenda}.J’espère que cela eclairera votre lanterne ...
Répondre à ce message
Une méthode simple pour appeler les événements de l’Agenda :
Installer le plugin Calendrier-mini :
http://contrib.spip.net/Calendrier-Mini-2-0
Puis dans le fichier agenda.html, au niveau du script, remplacer l’exemple ci-dessus :
events : « [(#URL_PAGEagenda.json)] »,
par :
events : « [(#URL_PAGEcalendrier_mini_event.json)] »,
Explications : le plugin Calendrier-mini, dispo pour spip3, contient déjà un fichier json de récupération des seuls événements déclarés dans le plugin Agenda.
Ça évite de farfouiller dans la balise #ENV, à laquelle je n’ai par ailleurs rien capté.
oui, mais de fait vous perdez la souplesse que propose cette contrib.
Pour la balise #ENV je vous invite à lire La balise #ENV
Répondre à ce message
Bonjour,
cela fait quelques jour que j’essaie de faire fonctionner le plugin Agenda avec l’affichage fullcalendar, sans succès .
Ne trouvant pas comment faire, j’ai tenter de suivre scrupuleusement ce tutoriel .
Après plusieurs essais j’arive au mieux a avoir la liste des évènements sans le calendrier lorsque je demande la page ?page=agenda comme si le javascript n’était pas actif.
Spip 3.0.5 ,Calendrier mini 2.1.5 Agenda 3.6.11
Contenu page agenda.html
http://bibliosemliege.be/agenda/agenda.html
Contenu page agenda.json.html
#HTTP_HEADERContent-type:text/javascript ;
[ {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}}}
>
[(#ARRAYid,#ID_EVENEMENT,
title,[(#TITRE|html2unicode|unicode2charset)],
allDay,[(#HORAIRE|==non| ?#EVALtrue,#EVALfalse)],
start,#DATE_DEBUT,
end,#DATE_FIN,
url,#URL_ARTICLE,
description,[(#DESCRIPTIF|html2unicode|unicode2charset)]|json_encode)]
]
D’avance merci pour votre aide.
Loic.
on peut avoir une url de démo ?
il vous faut utiliser la balise
#INSERT_HEAD(qui est nécéssaire pour plein de plugins)Voila je viens de le mettre en ligne
http://bibliosemliege.be/?page=agenda
je confirme, il manque
#INSERT_HEADvoila j’ai rajouter la ligne qui contient le #INSERT_HEAD mais cela ne semble pas résoudre le soucis.
où avez vous placé cette
INSERT_HEADcomme son nom l’indique elle doit être placé dans la balise
headdu html.Je vous invite à lire sa doc
Le #INSERT_HEAD est bien dans le
<head></head>contenu inc-head
http://bibliosemliege.be/agenda/agenda.html
http://bibliosemliege.be/agenda/inc-head.html
http://bibliosemliege.be/agenda/agenda.json.html
je peux voir l’url du squelettes ?
Voici l’url du squelette
http://bibliosemliege.be/?page=agenda
Les trois pages sur le post précédent sont des copies des pages agenda et inc-head tel qu’elles sont dans le dossier squelettes
si vous regarder les sources de la page, vous voyez que le jquery est ajouté avant le code html.
Il faut que vous trouviez comment résoudre ce pb ...
Merci,
j’ai ajouter le #INSERT_HEAD et enlever l’inclure inc-head et cela fonctionne. je rajouterais juste les css spécifique a cette page sans passé par le inc-head.
Je vous remercie encore pour votre aide rapide.
Loic
Répondre à ce message
Salut Maïeul,
J’ai essayé avec succès et grande facilité FullCalender tel que décrit ici pour SPIP 2.1 :
7 avril 2011 – par ngombe
http://contrib.spip.net/FullCalendar,3736
Mes essai sont ici : http://contrib.spip.net/FullCalendar,3736#forum461092
Ta contribution pour SPIP 3 est certainement très utile, je l’ai survolée rapidement en diagonale mais je ne vois rien qui exploite un modèle avec des balises simples à intégrer dans le texte d’un article.
Donc, qu’en est-il de FullCalendar pour SPIP 3 dans cette optique ?
Cordialement
FDG
bah, si l’auteur ne porte pas sous SPIP 3 et si personne ne le fait, il n’en est rien …
Répondre à ce message
bonsoir Maïeul,
je voulais tester cet agenda-fullcalendar, et je comprenais pas mon problème, rien ne sortait dans l’agenda : il y a un petit bug dans le script qui appelle le fullcalendar, entre nextYear et today, un petit espace à changer en virgule...
devient
et les événements sont là !
;o)
merci pour tes explications...
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 :
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.
Suivre les commentaires :
|
