SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 104 visiteurs en ce moment

Accueil > Dates, calendriers et agendas > Plugin Agenda > SPIP 3.2, Agenda et FullCalendar

SPIP 3.2, Agenda et FullCalendar

6 juin 2018 – par Maïeul – 39 commentaires

4 votes

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

Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda.

La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2.

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

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.2.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 :

  • plusieurs scripts javascript, dans leurs versions compressées :
    • moment-with-locales, nécessaire au fonctionnement de fullcalendar [1] ;
    • fullcalendar, qui gère l’affichage proprement dit du calendrier
    • locale-all, qui contient les traductions des informations de calendriers pour fullcalendar ;
  • les styles CSS associés à fullcalendar.

Pour ce faire, nous utilisons la balise #CHEMIN :

  1. <link rel='stylesheet' type='text/css' href='#CHEMIN{lib/fullcalendar/fullcalendar.min.css}' />
  2. <script type='text/javascript' src='#CHEMIN{lib/moment/moment-with-locales.min.js}'></script>
  3. <script type='text/javascript' src='#CHEMIN{lib/fullcalendar/fullcalendar.min.js}'></script>
  4. <script type='text/javascript' src='#CHEMIN{lib/fullcalendar/locale-all.js}'></script>
  5. <div id="agenda">
  6. </div>

Télécharger

Appel à l’agenda

Nous allons maintenant ajouter les fonctions javascript qui permettent 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 :

  1. <script type="text/javascript">/*<![CDATA[*/
  2.         jQuery(function($) {
  3.                 $('#agenda').fullCalendar({
  4.                         locale : '[(#LANG|strtolower)]',
  5.                         editable: false,
  6.                         navLinks: true,
  7.                         eventLimit: true,
  8.                         events: "[(#URL_PAGE{agenda.json})]",
  9.                         header: {
  10.                                 left: [(#LANG_DIR|=={ltr}|?{"'prevYear,prev,next,nextYear,today'","'listMonth,month,agendaWeek,agendaDay'"})],
  11.                                 center: 'title',  
  12.                                 right: [(#LANG_DIR|=={ltr}|?{"'agendaDay,agendaWeek,month,listMonth'","'today nextYear,next,prev,prevYear'"})]
  13.                         },  
  14.                         fixedWeekCount: false,
  15.                        allDayHtml:'<:organiseur:cal_jour_entier|textebrut:>',
  16.                         loading: function(bool) {
  17.                                if (bool) $('#calendrier-loading').show();
  18.                                 else $('#calendrier-loading').hide();
  19.                         },
  20.                 })
  21.         });
  22. /*]]>*/</script>

Télécharger

  • l. 2 jQuery(function($) signifie que le navigateur va exécuter la fonction dans les accolades qui suivent.
  • l. 3 $('#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. 4-21) :
    • l. 4 : on passe le nom de la langue courante comme paramètre de langue à fullcalendar, ceci permet notamment d’avoir les bons noms de jours et de mois, et de déterminer automatiquement le premier jour de la semaine [2].
    • l. 5 : on ne peut pas éditer les évènements depuis l’agenda.
    • l. 6 : rend cliquable les numéros de jours / les noms de jours pour basculer sur une vue par jour.
    • l. 7 : limite le nombre d’évènements affichés par jour à la hauteur de la cellule. Les évènements supplémentaires seront affichables via un clique supplémentaire.
    • l. 8 : on récuperera la liste des évènements via un squelette agenda.json.html, nous détaillerons ce squelette dans la partie suivante
    • l. 9-13 : qu’affiche-t-on dans l’entête de l’agenda ? :
      • l. 10 : à 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. 11 : au centre, on affiche le titre de l’agenda, correspondant à la période affichée (par ex. "Août 2012").
      • l. 12 : à droite, on affiche la bascule vers l’agenda en mode mois, semaine ou jour.
      • À noter l. 10 et l. 12 le test sur la direction de la langue, qui permet d’inverser les boutons de gauche et de droite si l’on est dans écriture de droite à gauche.
    • l. 14 : afficher 4, 5 ou 6 semaines par mois en fonction du mois, et non pas systématiquement 6.
    • l. 15 : changer la chaîne de langue pour "toute la journée", chaîne de langue définie par SPIP.
    • l. 16-19 : pendant le temps du chargement, afficher l’élément HTML dont l’id est calendrier-loading. Nous reviendrons dessus plus bas.

D’autres options sont bien sûr possibles : on se reportera à la documentation de FullCalendar, malheureusement en anglais uniquement.

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ées 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 à l’ISO-8601 de la date de début.
  • end, correspondant à ISO-8601 de la date de fin [3].

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 :

  1. #HTTP_HEADER{Content-Type: application/json; charset=#CHARSET}
  2. #SET{start,#ENV{start}|strtotime}
  3. #SET{end,#ENV{end}|strtotime}
  4. [<BOUCLE_evenements(EVENEMENTS){', '}{par date_debut}  
  5. {agendafull date_debut,date_fin, periode,
  6.         #VAL{Y}|date{#GET{start}}, #VAL{m}|date{#GET{start}},     #VAL{d}|date{#GET{start}},
  7.         #VAL{Y}|date{#GET{end}}, #VAL{m}|date{#GET{end}}, #VAL{d}|date{#GET{end}}}
  8.         >
  9.                                         [(#ARRAY{
  10.                                         id,#ID_EVENEMENT,
  11.                                        title,[(#TITRE|html2unicode|unicode2charset)],
  12.                                        allDay,[(#HORAIRE|=={non}|?{#EVAL{true},#EVAL{false}})],
  13.                                         start,#DATE_DEBUT,
  14.                                         end,#DATE_FIN,
  15.                                         url,#URL_ARTICLE,
  16.                                        description,[(#DESCRIPTIF|html2unicode|unicode2charset)]
  17.                                         }|json_encode)]
  18. </BOUCLE_evenements>]

Télécharger

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-3 : nous convertissons les dates de début et de fin de l’ISO-8601 au timestamp, et nous stockons dans les variables start et end, homonymes aux variables d’environnement reçues.
  • l. 4 et l .18, les crochets servent à indiquer que nous retournons plusieurs objets JSON, chacun correspondant à un évènements.
  • l. 4 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. 5-7 pour sélectionner les évènements, nous utilisons le critère agendafull. Les options de ce critère nous indiquent :
    • date_debut : que le champ date_debut servira pour repérer… la date de début de sélection.
    • date_fin : que le champ date_fin servira pour repérer… la date de fin de sélection.
    • periode que la période sélectionnée sera déterminée par les options suivantes :
    • #VAL{Y}|date{#GET{start}}, #VAL{m}|date{#GET{start}},     #VAL{d}|date{#GET{start}} que le début de la période correspond à la date stockée dans #SET{start}. La syntaxe un peu absconse que vous voyiez ici permet d’extraire, respectivement, l’année, le mois et la jour depuis un timestamp.
    • #VAL{Y}|date{#GET{end}}, #VAL{m}|date{#GET{end}}, #VAL{d}|date{#ENV{end}} que la fin de la période correspond à la date stocké dans #SET{end}.
    • Le critère agendafull « permet de sélectionner tous les évènements à cheval sur la période considérée », comme l’explique la documentation du plugin Agenda.
  • l. 9-17 : 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éepour 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 :

  1. <?php
  2.  
  3. include_spip('inc/json');
  4. ?>

Télécharger

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

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 :

  1. <B_agenda>
  2. <div id="calendrier-loading">
  3. <p class="pagination">#PAGINATION</p>
  4. <BOUCLE_agenda(DATA){source json, #PRODUIRE{fond=agenda.json, start=0,end=2147483647,_=#REM|time}|url_absolue}{pagination 15}>
  5.     <dl>
  6.         [<dt><:agenda:evenement_titre:></dt>
  7.         <dd><a href="#VALEUR{url}">(#VALEUR{title})</a></dd>]
  8.        
  9.         [<dt><:agenda:evenement_date:></dt>
  10.         <dd>(#VALEUR{start}|Agenda_affdate_debut_fin{#VALEUR{end},#VALEUR{allDay}|=={true}|?{non,oui}})</dd>]
  11.        
  12.         [<dt><:agenda:evenement_descriptif:></dt>
  13.         <dd>(#VALEUR{description})</dd>]
  14.     </dl>
  15. </BOUCLE_agenda>
  16. <p class="pagination">#PAGINATION</p>
  17. </div>
  18. </B_agenda>

Télécharger

  • 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 [5]. 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 passons au chemin du fichier produit le filtre |url_absolue pour obtenir l’url du fichier [6]. Nous paginons de 15 en 15.
  • l. 5-14 : nous affichons les données pour chaque évènement, via #VALEUR{donnée}. Ces données sont tirées du JSON.
  • l. 16 et suivante : partie optionelle arrière de la boucle.

On obtient alors un agenda, certes 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

[1Permet la gestion de dates.

[2Avec les précédentes versions de fullcalendar, il fallait passer manuellement toutes ces informations.

[3Les précédentes versions de fullcalendar utilisait le timestamp.

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

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

[6Cela permet d’éviter certains problèmes de droit de lecture dans certaines configuration... la chose n’est pas claire pour nous.

Dernière modification de cette page le 6 juin 2018

Retour en haut de la page

Vos commentaires

  • Le 29 septembre à 07:14, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

    Bonjour

    Impossible de faire marcher l’affichage du calendrier.

    J’ai dupliqué la page article.html du dossier squelette-dist que j’ai renommé agenda.html, j’ai supprimé la boucle principale .
    Pour le consulter mon agenda, je déduis qu’il faut aller sur monsite.com/spip.php ?page=agenda

    Puis ajouté dans le head :

    1. <link rel='stylesheet' type='text/css' href='#CHEMIN{lib/fullcalendar/fullcalendar.css}' />
    2. <script type='text/javascript' src='#CHEMIN{lib/fullcalendar/fullcalendar.min.js}'></script>
    3. <script type='text/javascript' src='#CHEMIN{lib/fullcalendar/locale-all.js}'></script>
    4.                         <script type="text/javascript">/*<![CDATA[*/
    5. jQuery(document).ready(function() {
    6.  
    7.        
    8.         jQuery('#agenda').fullCalendar({
    9.                         editable: false,
    10.                         events: "[(#URL_PAGE{agenda.json})]",
    11.                         header: {
    12.                                 left: 'prevYear,prev,next,nextYear today',
    13.                                 center: 'title',
    14.                                 right: 'month,agendaWeek,agendaDay'
    15.                         },
    16.                         firstDay: 1,
    17.                         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:>'],
    18.                         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:>'],
    19.                         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:>'],
    20.                         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:>'],
    21.                         buttonText: {
    22.                                         today: '<:date_aujourdhui|attribut_html:>',
    23.                                         month: '<:organiseur:cal_par_mois|attribut_html:>',
    24.                                         day: '<:organiseur:cal_par_jour|attribut_html:>',
    25.                                         week: '<:organiseur:cal_par_semaine|attribut_html:>'
    26.                         },
    27.                         weekMode : 'liquid',
    28.                         loading: function(bool) {
    29.                                 if (bool) $('#calendrier-loading').show();
    30.                                 else $('#calendrier-loading').hide();
    31.                         },
    32.                         timeFormat: {
    33.                                
    34.                                 agenda: "H'h'mm{ - H'h'mm}",
    35.                                
    36.                                 '': "H'h'(mm)"
    37.                         },
    38.                         axisFormat: "H'h'(mm)",
    39.                         allDayText:'<:organiseur:cal_jour_entier|attribut_html:>',
    40.                         columnFormat: {
    41.                                 month: 'ddd',    
    42.                                 week: 'ddd d/M',
    43.                                 day: 'dddd d/M'  
    44.                         },
    45.                         titleFormat: {
    46.                                 month: 'MMMM yyyy',                            
    47.                                 week: "d [ MMM] [ yyyy]{ '&#8212;' d MMM yyyy}",
    48.                                 day: 'dddd d MMM yyyy'                  
    49.                         },
    50.                         dayClick: function(date, allDay, jsEvent, view) {
    51.                                 if(view.name=='month'){
    52.                                         $('.fc-button-agendaWeek').click();
    53.                                         $('#calendrier').fullCalendar( 'gotoDate', date );
    54.                                 }
    55.                                 else
    56.                                         if(view.name=='agendaWeek'){
    57.                                                 $('.fc-button-agendaDay').click();
    58.                                                 $('#calendrier').fullCalendar( 'gotoDate', date );
    59.                                         }
    60.                         },
    61.                         isRTL : [(#LANG_DIR|=={rtl}|?{true,false})]
    62.         })
    63.  
    64. });
    65. /*]]>*/</script>

    Télécharger

    puis dans mon body

    1. <div id="agenda"></div>

    J’ai mis les 2 fichiers suivants dans mon dossier squelettes :
    agenda.json.html
    agenda.json_fonctions.php
    que j’ai remplit selon les indications

    Et l’agenda n’apparait pas sur ma page
    monsite.com/spip.php ?page=agenda

    Si je met le code pour non javascript, j’ai bien la liste des mes événements qui apparait, et si j’installe le plugin fullcalendar_facile le calendrier s’affiche avec mes événements, mais j’ai besoin des fonctions du plugin couleur_objet

    Ça serait possible d’avoir un lien vers un jeu de fichiers
    agenda.html
    agenda.json.html
    agenda.json_fonctions.php
    qui marchent ?

    Les miens sont téléchargeables ici :
    https://www.chrisgaillard.com/agenda.zip

    Merci de votre aide

    • Le 29 septembre à 10:59, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      -  A priori le code m’a l’air correct. Il faudrait que je puisse voir en prod pour regarder le debugeur js et comprendre le problème
      -  full_calendar facile gère les couleurs d’objet
      -  c’est un example qui marche, donc tu peux regarder son code.

    • Le 29 septembre à 11:32, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

      Merci pour votre réponse :

      Page agenda.html vide
      https://bit.ly/2QmEMLx

      Page avec le plug Agenda Fullcalendar Facile
      https://bit.ly/2N3U05X
      Celui-ci est vide, bien que l’article 14 contienne un agenda avec des événements.

      Home page avec le mini-calendar
      https://bit.ly/2N85bKQ
      Il n’y a que le mini-calendrier qui affiche les événements associés à plusieurs articles.

    • Le 29 septembre à 11:58, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      bon, deja tu n’appelle pas la librairie jquery moment.

      Je recopie le code qu’il faut mettre (pour du 3.2)

      <link rel='stylesheet' type='text/css' href='#CHEMIN{lib/fullcalendar/fullcalendar.min.css}' />
      <script type='text/javascript' src='#CHEMIN{lib/moment/moment-with-locales.min.js}'></script>
      <script type='text/javascript' src='#CHEMIN{lib/fullcalendar/fullcalendar.min.js}'></script>
      <script type='text/javascript' src='#CHEMIN{lib/fullcalendar/locale-all.js}'></script>

      c’est pour ca je pense que fullcalendaer ne peut pas se lancer.

    • Le 29 septembre à 12:20, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

      Merci, j’ai mis le code, ça va un peu mieux, mais c’est pas encore tout à fait ça.
      https://new-intranet.osug.fr/spip.php?page=agenda&var_mode=calcul

      Vous dites que « full_calendar facile » gère les couleurs d’objet mais chez moi full_calendar facile n’affiche déjà pas les événements, c’est pour ça que je me tournais vers la version « difficile ».
      Mais si c’est plus simple de de me dire pourquoi mes événements ne s’affichent pas je suis preneur. Je tente une copie de l’ensemble, chez un autre hébergeur au cas ou.

    • Le 29 septembre à 12:25, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      Disons que si fullcalendar facile ne marche pas, ca veut dire qu’il y a un bizn au niveau du javascript, donc la version « difficile » ne peut pas plus marcher....

      est-ce qur vous avez d’autres plugins activé qui pourraient rentrer en conflit ?

    • Le 29 septembre à 12:36, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

      Les plugs actifs :

      Le Couteau Suisse 1.10.9
      SkelEditor 2.7.11
      Couleur d’Objet 0.4.2

      Agenda 3.19.6
      Agenda Fullcalendar Facile 2.3.1
      Mini Calendrier 2.4.1

      Ph 7.0.30

    • Le 29 septembre à 12:41, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      bon deja on va essayer de résoudre le problème avec full calendar facile.

      Mais le lien que tu donne fournit une page 404.

    • Le 29 septembre à 12:52, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

    • Le 29 septembre à 13:10, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      maintenant si...

      pour le reste l’agenda s’affiche, à quelle date as tu un evenement ?

    • Le 29 septembre à 13:11, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

      aujourd’hui demain, tous les lundis du mois d’octobre

    • Le 29 septembre à 14:31, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      c’est bizarre, le json n’a rien. Il me faudrait un accès admin pour comprendre le problème.

    • Le 29 septembre à 15:08, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

      OK log pass envoyé par message twitter

    • Le 29 septembre à 15:24, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

      Je copie tout chez OVH ça fait pareil
      http://www.gaillard.in/osugtest/spip.php?page=agenda
      http://www.gaillard.in/osugtest/spip.php?article13

      Pareil tu as un compte admin, et je peux même te passer un FTP sur cet hébergement si besoin.

    • Le 29 septembre à 16:08, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      je comprend pas, cela marche nickel en local chez moi avec ta base.

      Un accès ftp serait apprécié (voir même ssh)...

    • Le 29 septembre à 16:28, par chris En réponse à : SPIP 3.2, Agenda et FullCalendar

      J’ai envoyé le ftp par twitter.

      Ça veut dire que c’est agenda.json.html qui n’est pas bon ?

    • Le 29 septembre à 16:59, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      Hum, il faut lire l’article.

      Dans le fichier agenda.json.html

      les premières lignes ne sont pas les mêmes selon qu’on est en SPIP 3.2 ou en SPIP 3.1... et tu avais un code pour la 3.1...

      Je pense que c’est la même chose pour le code que tu dois mettre dans le squelette... c’est d’ailleur pour cela qu’il y a un article pour 3.2 et un pour 3.1....

      en l’occurence effectovement le code que tu as à l’aire plus proche de 3.1

    Répondre à ce message

  • Le 20 août à 20:11, par Norbert73 En réponse à : SPIP 3.2, Agenda et FullCalendar

    Bonjour,
    La solution qui consiste à afficher un calendrier sous forme de liste dans un div dont l’id est « calendrier-loading » lorsque le Javascript est désactivé, fonctionne.
    Est-ce que ça signifie que la boucle dans le squelette « agenda.json.html », utilisée par la boucle DATA de SPIP 3, fonctionne ?
    Pourquoi les événements ne s’affichent pas lorsque le Javascript est activé ???

    Le code du « agenda.json.html »

    #HTTP_HEADERContent-Type : application/json ; charset=#CHARSET
    #SETstart,#ENVstart|strtotime
    #SETend,#ENVend|strtotime
    [
    [(#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)]
    ]

    Répondre à ce message

  • Le 5 août à 20:35, par Norbert73 En réponse à : SPIP 3.2, Agenda et FullCalendar

    Bonjour,

    Dans quel répertoire le fichier « agenda.json_fonctions.php » doit-il être disposé ?

    • Le 5 août à 20:39, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      Comme tous squelette, dans votre dossiers « squelettes »

    • Le 5 août à 20:49, par Norbert73 En réponse à : SPIP 3.2, Agenda et FullCalendar

      C’est bien le cas. Mais comme rien ne s’affiche j’avais un petit doute...
      Il y a 3 erreurs jsquery...

    • Le 5 août à 20:52, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      jquery est normalement chargé par SPIP dans l’entete (head) du html.

      Si vous avez modifié vos squelettes sur ce point, c’est possible qu’il ne soit pas chargé.

    • Le 9 août à 22:37, par Norbert73 En réponse à : SPIP 3.2, Agenda et FullCalendar

      Les fichiers agenda.html et agenda.json.html ont été vérifié mais il y a encore un défaut jquery.
      La fonction est pourtant bien appelée dans l’entête du fichier agenda.html. Voir ci-dessous.


      <script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>






      <script type='text/javascript' src='#CHEMIN{lib/moment/moment-with-locales.min.js}'></script> <script type='text/javascript' src='#CHEMIN{lib/fullcalendar/fullcalendar.min.js}'></script> <script type='text/javascript' src='#CHEMIN{lib/fullcalendar/locale-all.js}'></script>

      url : http://www.ffmc73.org/spip.php?page=agenda

    • Le 13 août à 19:41, par Norbert73 En réponse à : SPIP 3.2, Agenda et FullCalendar

      Bonjour,

      Est-ce qu’il y aurait une piste pour expliquer un agenda qui ne ’affiche pas ??? Je sèche.

      Cordialement.

    • Le 16 août à 11:48, par Jaseur Boreal En réponse à : SPIP 3.2, Agenda et FullCalendar

      Bonjour,

      Est-ce que des événements et les articles liés à ces « événements » existent dans le site et sont « publiés » ?

    • Le 17 août à 16:23, par Norbert73 En réponse à : SPIP 3.2, Agenda et FullCalendar

      Bonjour,
      Oui, il y a plusieurs événements enregistrés.
      L’appel des 3 scripts javascript dédiés à fullcalendar a été déplacé des balises « head » à juste au-dessus de la div « id=agenda » et la boucle « B_agenda » a été ajoutée sous la div « id=agenda »... Et l’agenda s’affiche... Mais reste vide :-(
      Que manque t’il ???

    • Le 17 août à 17:42, par Norbert73 En réponse à : SPIP 3.2, Agenda et FullCalendar

      En complément.
      Il y a 4e bouton « Mon planning » qui s’affiche à droite des boutons « Jour/Semaine/Mois ».
      Comment ceci est-il paramétré ?

    • Le 17 août à 18:06, par Norbert73 En réponse à : SPIP 3.2, Agenda et FullCalendar

      4e bouton « Mon planning » qui s’affiche à droite des boutons « Jour/Semaine/Mois ».
      Eurêka !
      Dans le paramétrage du "header right" il fallait supprimer "listMonth" qui était après "month" "’agendaDay,agendaWeek,month"
      Le 2e paramètre, ’today nextYear,next,prev,prevYear’ est-il correct ?

    Répondre à ce message

  • Le 13 juillet à 07:39, par Steph En réponse à : SPIP 3.2, Agenda et FullCalendar

    Bonjour,

    J’ai un souci avec des événements sur plusieurs jours.
    Si sur un mois, j’ai plusieurs événements qui durent tous le mois, alors sur les jours avec un nombre d’événement important, un texte « +x éléments » apparaît, et en cliquant dessus, un « popover » apparaît avec la liste des événements de la journée, sauf que les événéments du mois sont répétés 4 ou 5 fois.

    Comment corriger ce souci ?

    • Le 13 juillet à 11:19, par Maïeul En réponse à : SPIP 3.2, Agenda et FullCalendar

      il doit s’agit d’un bug de fullcalendar... je n’ai aucune idée de la manière de le corriger.
      Il faudrait demander de l’aide sur les forums de fullcalendar....

    • Le 15 juillet à 14:36, par Jaseur Boreal En réponse à : SPIP 3.2, Agenda et FullCalendar

      Bonjour,

      Avez-vous un lien pour constater ?

      Avec les « Événement sur plusieurs jours » je n’ai pas de soucis, ni dans l’affichage d’un agenda, ni dans l’affichage d’une liste des événements dans une noisette.
      exemple : https://www.lettonie-francija.fr/spip.php?page=agenda&lang=fr

      Cordialement

    • Le 16 juillet à 06:38, par Steph En réponse à : SPIP 3.2, Agenda et FullCalendar

      Bonjour,

      Je constate exactement le même problème sur votre agenda au mois de juin.
      https://www.lettonie-francija.fr/spip.php?page=agenda&lang=fr
      Si vous cliquez sur « +2 en plus » du 15 juin, vous pourrez visualiser le souci évoqué.

    • Le 16 juillet à 06:58, par Jaseur Boreal En réponse à : SPIP 3.2, Agenda et FullCalendar

      Bonjour,

      Y aurait-il une différence d’affichage de l’ AGENDA selon le navigateur utilisé ?

      Sur firefox écran bureau, au 15 juin l’image qui s’affiche est celle-ci, sans « +2 » .... ?

    • Le 16 juillet à 07:42, par Steph En réponse à : SPIP 3.2, Agenda et FullCalendar

      Il faut réduire la hauteur du navigateur pour que cela s’affiche de la sorte.

    • Le 16 juillet à 08:13, par Jaseur Boreal En réponse à : SPIP 3.2, Agenda et FullCalendar

      Exact, l’adaptabilité d’affichage de l’Agenda créé ce soucis d’une liste pop-up avec de multiples événements répétés, lorsque les événements existent sur plusieurs jours ...

      Sous squelette ESCAL-V4, on a bien cherché, mais en affichant « AGENDA PLEINE PAGE » , la solution n’est pas encore apparue.

      Par contre en affichant l’AGENDA dans une noisette latérale en accueil, nous avons trouvé comment afficher autrement les « événements sur plusieurs jours », pour éviter les répétitions identiques. En juillet je n’ai pas d’exemple concret à afficher ... il faudrait aller regarder d’autres website sous Escal V4 avec la noisette « Evènements à venir »

      Exemple : http://www.eglisealareunion.org/

    • Le 16 juillet à 11:13, par Steph En réponse à : SPIP 3.2, Agenda et FullCalendar

      Merci pour le retour.
      Je cherche quand même une solution au problème d’agenda pleine page.

    Répondre à ce message

  • Le 2 juillet à 21:52, par philooo En réponse à : SPIP 3.2, Agenda et FullCalendar

    c’est interessant. je pense que tout site qui se respecte devrait avoir besoin de ce type de fonctionalite. de nos jours tout est google, mais une version spip c’est tres pratique quand meme.

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • MediaBox

    10 mai 2010 – 539 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • DocumentationFormsTables

    9 décembre 2006 – commentaires

    Article publié : ces notes et d’autres sont désormais publiées sur SPIP-Contrib ici Forms & tables - carnet de notes, donc il faut mieux y aller pour tout complément Différence entre un formulaire et une table un formulaire est dédié a la saisie (...)

  • GIS 4

    11 août 2012 – 1495 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Editer votre base « en ligne » avec Adminer

    4 décembre 2012 – 10 commentaires

    Vous serez peut-être un jour amené à chercher un outil qui permette d’éditer en direct le contenu de cette base de données. Cet article vous propose de le faire avec Adminer qui permet d’éditer des bases MySQL et SQLite ! Son utilisation est assez (...)

  • cisf : plugin « saisie facile » pour SPIP 3

    27 mai 2015 – 128 commentaires

    Cette nouvelle version est compatible avec SPIP 3.0, SPIP 3.1 (tout en restant compatible avec SPIP 2.1). Ce plugin « saisie facile » permet de créer ou de modifier facilement un article directement depuis le site public. Ce plugin : Diminue le (...)