SPIP - Contrib

SPIP - Contrib

[ar] [en] [es] [fr] [it]

252 visiteurs en ce moment

fontsizeup fontsizedown
Accueil du site > Contribs > Agendas et Dates > Calendriers > Agendax > Agendax : simple calendrier ajax
[71 commentaires]

Agendax : simple calendrier ajax

samedi 11 août 2007, par Sebastien Denooz

  • Digg
  • Del.icio.us
  • Facebook
  • Google
  • Technorati
0 vote

Un petit calendrier « à la dotclear », généré sur base des articles, brèves ou autre via une boucle unique. Il est généré et géré via de l’ajax avec jquery

Introduction

Agendax est un calendrier Ajax. Ajax est une technologie javascript qui permet de charger le contenu d’une partie de page web sans pour autant avoir à recharger la page entière. On charge ainsi uniquement les éléments dont on a besoin. D’où une gain de temps, entre autre.

Dans notre cas, ce sont les données du mois demandé qui se chargeront quand le visiteur clique sur « mois suivant », « mois précédant ».

On peut le voir ici : demo en ligne

Pré requis

Pour utiliser Agendax vous avez besoin de la balise #INSERT_HEAD dans le <head> des squelettes.

Installation

Téléchargez le plugin sur la zone et mettez le dossier « agendax » dans le dossier plugins de votre SPIP. Ensuite activez le plugin dans l’espace privée. Et enfin, insérez le code suivant à l’emplacement ou le calendrier doit se mettre :

<div id="agendax"></div>

Paramétrage

La configuration est à faire dans les 3 fichiers principaux : agendax.css, agendax.js.html et donnees_agendax.html :

- agendax.css : C’est lui qui rassemble les styles qui vont permettre d’affiner l’apparence du calendrier sur votre site.

- agendax.js.html : Au début de ce fichier se trouvent plusieurs variables :

  • style_rempli : le style css à utiliser quand le jour à un évènement,
  • style_pas_rempli : le style css à utiliser quand le jour n’a pas d’évènements,
  • fleche_suivant : l’image ou le caractère qui va être affiché pour aller au mois suivant,
  • fleche_precedent : l’image ou le caractère qui va être affiché pour aller au mois précédent,
  • sablier : balise image animée (ou pas) ou le caractère qui va remplacer le nom du mois pendant le chargement de l’ajax.

- donnees_agendax.html : C’est dans ce fichier que va être faite la boucle. Vous pouvez le modifier comme vous voulez, en ajouter d’autres, etc...

Téléchargement

Zip - 38.8 ko
Agendax 0.1-2
Retour en haut de la page

71 Messages de forum

Voir toute la discussion

Pages 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

  • Répondre à ce message

    30 septembre 17:15 , par Jacques

    Pour faire prendre en compte l’environnement langue, j’ai rajouté

    <?php  
    include_spip('inc/cookie');
    setcookie('spip_lang',#LANG);  
    ?>

    dans le menulang.

    Un avis ?

  • Répondre à ce message

    26 septembre 04:07 , par Jacques J.

    Bonsoir,

    Quelqu’un a-t-il déjà été confronté à des problèmes d’affichage des chaines dans agendax.

    Sur un site mutilingue avec passage de la langue dans le contexte
    - l’affichage sur Firefox 3 et Safari n’affiche apparemment que la langue choisie dans l’interface d’adminisration
    - sur IE 6/7 Chrome, Opera et Floc c’est la langue principale du site qui est retenue.
    - $forcer_lang = true ;

    Le changement de langue fonctionne bien sur le reste du site. Le site est organisé en une langue par rubrique. Passage de la langue dans le contexte.
    - Cookie spip_lang -> langue de l’interface d’admin
    - spip_lang_ecrire -> langue de l’interface d’admin

    Ma question : comment faire prendre en compte #ENVlang par agendax ?
    question subsidiaire : comment prendre la langue en compte dans l’affichage des articles du calendrier.

    Sinon le plugin fonctionne bien. Merci d’avance

  • Répondre à ce message

    7 septembre 19:37 , par Seb

    Bonjour, cette modif m’intéresse mais je n’y arrive pas. serait il possible de donnée le code complet modifié . Merci

  • Répondre à ce message

    4 juillet 20:01

    la démo fonctionne plus....autre demo ou l’on peut voir la bête en action ?

  • Répondre à ce message

    27 juin 17:00 , par echo

    Il est plus rapide et SPIpien d’utiliser plutôt [(#DATE|affdate{'w'})] que toutes ces lignes en php !

  • Répondre à ce message

    27 juin 16:52 , par echo

    Affichage des évènements de l’agenda SPIP boucle (EVENEMENTS), le lien se fait sur timeline, le plugin mais peut aussi rammener ailleurs !

    1. #HTTP_HEADER{Content-Type: text/html}
    2. <div class="calendrier">
    3.         <div class="chemin_script">[(#CHEMIN{'charger_agendax.js'})]</div>
    4.         <div class="nom_mois">[(#ENV{date}|nom_mois)]&nbsp;[(#ENV{date}|annee)]</div>
    5.         <div class="nom_moisplus">[(#ENV{date}|Agenda_moisdecal{1,'Y-m'}|nom_mois)]</div>
    6.         <div class="nom_moismoins">[(#ENV{date}|Agenda_moisdecal{-1,'Y-m'}|nom_mois)]</div>
    7.         <div class="jours_debut">
    8.         <?php
    9.                 $nom_debut = '[(#DATE|affdate{'l'})]';
    10.                 switch ($nom_debut) {
    11.                         case 'Monday' : $jour_debut = 0;
    12.                         break;
    13.                         case 'Tuesday' : $jour_debut = 1;
    14.                         break;
    15.                         case 'Wednesday' : $jour_debut = 2;
    16.                         break;
    17.                         case 'Thursday' : $jour_debut = 3;
    18.                         break;
    19.                         case 'Friday' : $jour_debut = 4;
    20.                         break;
    21.                         case 'Saturday' : $jour_debut = 5;
    22.                         break;
    23.                         case 'Sunday' : $jour_debut = 6;
    24.                         break;
    25.                 }
    26.                 echo $jour_debut;
    27.         ?>
    28.         </div>
    29.         <div class="nombre_jours">[(#DATE|affdate{'t'})]</div>
    30.         <BOUCLE_LesZevenements(EVENEMENTS){agendafull date_debut,date_fin, mois, (#ENV{date}|annee), (#ENV{date}|mois)} {statut=publie}>
    31.         <div id="contenu[(#DATE_DEBUT|affdate{'j'})]">
    32.                 [<div id="jour[(#DATE_DEBUT|affdate{'j'})]">(#DATE_DEBUT|affdate{'d'})</div>]
    33.                 [<div id="info[(#DATE_DEBUT|affdate{'j'})]">#LIEU (#TITRE)</div>]
    34.                 <div id="lien[(#DATE_DEBUT|affdate{'j'})]">[(#URL_PAGE{timeline}|parametre_url{date,[(#DATE_DEBUT|affdate{'Y-m-d'})]}|parametre_url{id_rubrique,#ID_RUBRIQUE})]</div>
    35.         </div>
    36.         </BOUCLE_LesZevenements>
    37. </div>
  • Répondre à ce message

    31 mai 19:43 , par Chris

    En fait je n’ai peut être pas été très clair. Voici le bout de code du fichier agendax.js.html

    jour_aujourdhui = date_du_jour.getDate() ;

    mois_aujourdhui = date_du_jour.getMonth()+1 ;

    /* On recherche les jours avec des évènements et on met à jour les cases correspondantes */

    for (k=1 ; k<=31 ; k++)

    if ($("#contenu"+k,event).length > 0) ........

    $("#jour"+k).remove("a") ;

    if((k==jour_aujourdhui) && mois==mois_aujourdhui)) $("#jour"+k).addClass(style_aujourdhui) ;

    Au début on voit l’initialisation des variables ; et en fin : le test.

    Au début du fichier j’ai bien sur une ligne (pour faire comme le code d’origine)

    style_aujourdhui = ’case_aujourdhui’ ;

    et dans le agendax.css j’ai ajouté : DIV.case_aujourdhui font-weight : bold ;

    C’est pas extraordinaire, mais cela fait apparaître la date du jour en gras.

  • Répondre à ce message

    31 mai 19:07 , par Chris

    J’ai eu le même souci. Voici la solution que j’ai trouvée :

    Modification du agendax.js.html où dans la boucle for (k=1 ; k<=31 ; k++) de parcourt pour savoir si un jour est rempli, j’ai ajouté un test sur le jour du mois et sur le mois. Ensuite de la même façon que style_rempli est appelé, on appelle soit un style existant dans le css ou un style propre definit dans ce fichier.

  • Répondre à ce message

    3 mai 13:35 , par Richard

    Bonjour,

    Génial ce pugin, et il s’interface très bien avec le plugin Magusine que j’utilise pour mon site (via l’utilisation d’un bloc libre) :-)

    Par contre une petite question d’un débutant tant en "site Spip" qu’en JavaScript : est-il possible de faire démarrer l’agenda non du 1er du mois courant mais du 1er du mois d’un article ?

    En clair : lorsque j’affiche un évènement se passant en juin, j’aimerais pouvoir afficher le calendrier du mois de juin - histoire de n’avoir pas à naviguer dans les mois pour afficher les autres évènements du mois.

    Autant j’ai réussi sans trop de mal à faire en sorte d’afficher directement les articles et à limiter les dates marquées dans le calendrier à celles d’une seule rubrique (grâce notamment aux divers commentaires laissés ici-même) autant là je sèche.

    Je soupçonne que cela se passe dans le fichier "agendax.js.html", mais je n’arrive pas à trouver par quoi remplacer les getFullYear() et getMonth() par l’année et le mois de l’article (un setFullYear et un setMonth sans doute, mais avec quoi en paramètre ?) :-(

  • Répondre à ce message

    21 février 16:46 , par ol

    Bonjour Merci pour votre travail, je commence avec spip 192c et c’est génial.Je suis en local encore quelques jours avant de trouver un herbergeur (pour une association...) Je cherche à intégrer un agenda et ses évenements qui pourrait s’ouvrir avec mes différentes rubriques du site public.(Ma présidente le souhaite ainsi). Est ce possible de le faire avec Agendax ?, et y a t’il une marche à suivre., je ne suis pas programmeur au fait !! J’ai besoin de votre aide pour continuer, merci par avance Ol

Pages 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

Répondre à cet article

Retour en haut de la page

Ça discute par ici

SPIP | Squelette | | Plan du site | Suivre la vie du site RSS 2.0