Agendax : simple calendrier ajax

Publié le : 11 août 2007 – Dernière modification le 21 décembre 2021 – par Sebastien Denooz – 82 commentaires

1
2
3
4
5
9 votes
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 ».

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

Agendax 0.1-2

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

33 discussions

  • marjorie

    ce plugin fonctionne sur spip 2.0 !

    Répondre à ce message

  • 3
    laulo_973

    bonjour à tous,

    super plugin, cependant comment faire pour mettre en évidence la date d’aujourd’hui,
    merci d’avance pour vos réponses

    • 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.

    • 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.

    • 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

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

    Répondre à ce message

  • 1
    touti

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

    #HTTP_HEADER{Content-Type: text/html}
<div class="calendrier">
	<div class="chemin_script">[(#CHEMIN{'charger_agendax.js'})]</div>
	<div class="nom_mois">[(#ENV{date}|nom_mois)]&nbsp;[(#ENV{date}|annee)]</div>
	<div class="nom_moisplus">[(#ENV{date}|Agenda_moisdecal{1,'Y-m'}|nom_mois)]</div>
	<div class="nom_moismoins">[(#ENV{date}|Agenda_moisdecal{-1,'Y-m'}|nom_mois)]</div>
	<div class="jours_debut">
	<?php
		$nom_debut = '[(#DATE|affdate{'l'})]';
		switch ($nom_debut) {
			case 'Monday' : $jour_debut = 0;
			break;
			case 'Tuesday' : $jour_debut = 1;
			break;
			case 'Wednesday' : $jour_debut = 2;
			break;
			case 'Thursday' : $jour_debut = 3;
			break;
			case 'Friday' : $jour_debut = 4;
			break;
			case 'Saturday' : $jour_debut = 5;
			break;
			case 'Sunday' : $jour_debut = 6;
			break;
		}
		echo $jour_debut;
	?>
	</div>
	<div class="nombre_jours">[(#DATE|affdate{'t'})]</div>
	<BOUCLE_LesZevenements(EVENEMENTS){agendafull date_debut,date_fin, mois, (#ENV{date}|annee), (#ENV{date}|mois)} {statut=publie}>
	<div id="contenu[(#DATE_DEBUT|affdate{'j'})]">
		[<div id="jour[(#DATE_DEBUT|affdate{'j'})]">(#DATE_DEBUT|affdate{'d'})</div>]
		[<div id="info[(#DATE_DEBUT|affdate{'j'})]">#LIEU (#TITRE)</div>]
		<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>
	</div>
	</BOUCLE_LesZevenements>
</div>
    • touti

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

    Répondre à ce message

  • 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

  • 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

    Répondre à ce message

  • grayve

    Tres bon plug in mais qui serait plus adapté a mon usage si je pouvais renvoyer chaque dates à l’article qui le concerne et non repasser par cette page générée avec le résumé de l’article.

    Est il possible de m’aider a comprendre ce que je dois modifier a cet éffet et comment le faire ? Car sur mon site c’est pas tres top classe cette page temporaire... http://be.retarded.free.fr/spip/

    Merci d’avance

    Répondre à ce message

  • Stéphane Santon

    Bonjour,

    Très bien ce plugin par http_request.

    (Je me demande pourquoi certains demandent encore de recharger la page complète pour changer de mois dans un calendrier mini).

    Cependant, dès qu’on modifie les css, par exemple

    DIV.boite_dans_mois{
	border: 1px solid #ccc;
}

    ça foire beaucoup la mise en page, le dernier jour passe à la ligne suivante, tout est décalé.

    Pourquoi avoir choisi des div.float alors que c’est typiquement un tableau ?

    Répondre à ce message

  • 1
    danou9

    Bonjour,

    dans la page de démo, je ne vois pas d’agenda
    il n’y a que des Lorem ipsum ...

    • Kaelya

      Bonjour,

      Moi non plus je n’ai rien trouvé sur la page de démo, serait-il possible de corriger ça ?

      Merci beaucoup.

    Répondre à ce message

  • Antoine

    Bravo pour ce plugin simple et pratique. Mais est-il possible de le compléter pour que le calendrier affiche aussi la date du jour (c’est bien aussi d’avoir la date du jour). ;-)
    Merci

    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