Le but de ce Tutoriel est de vous permettre d'intégrer un mini calendrier sur votre site SPIP, de la même manière que je l'ai fait sur ce site.

Ayant moi même rencontré beaucoup de problèmes dans l'installation de ce plugin, et, une fois réussi, ayant reçu beaucoup de mails me demandant conseils pour réaliser cette intégration, j'ai décidé de rédiger un Tutoriel, comme j'aurais aimé en trouver il y a 6 mois.

Un grand merci à Hervé, rencontré sur SPIP Contrib, qui m'a permis d'avancer ;)

Préambule :

Tout d'abord, il vous faut vous rendre sur SPIP Contrib pour télécharger la version 0.13 du calendrier, ainsi que le plugin Widget Calendrier. Ces deux plugins sont disponibles ici.

Une fois téléchargées, dézippez vos deux archives, et placez les dans le répertoire plugins présent à la racine de votre site (s'il n'y est pas, créez le).

spip_calendrier1

Rendez-vous dans l'admin de votre site, puis dans Configuration > Plugins et activez les deux plugins.

spip_calendrier2

À partir de maintenant, je vais décrire la marche à suivre pour implanter votre calendrier dans votre squelettes et énumérer les erreurs que vous pourriez rencontrer.

1ère étape :

Comme indiqué dans SPIP Contrib, vous devez insérez le code suivant dans votre squelette :

#CALENDRIER_MINI{#ENV{date},'date',#SELF}

1er Cas : Ça fonctionne, vous pouvez passer à l'étape suivante.

2ème Cas : Si le calendrier s'affiche mais que vous ne pouvez pas naviguer entre les mois c'est en général parce-que vous avez placé votre code dans un squelette que vous appelez (grâce à INCLURE) dans votre squelette principal. Le calendrier doit être inséré directement dans le squelette principal.

2ème étape :

Pour tester votre calendrier, vous décidez de programmer un événement (pour programmer un événement, rendez-vous dans l'article concerné, et cliquez sur la flèche noire à gauche de AGENDA).

1er Cas : Votre événement s'affiche dans votre calendrier, et vous accédez à l'article en cliquant sur le jour concerné. Vous pouvez passer à l'étape suivante.

2ème Cas : Si votre événement ne s'affiche pas, cela vient de votre page Plugins > agenda_1_9_2 > formulaires > calendrier_mini.html. Créez un dossier formulaires dans votre dossier squelettes, et copier votre page calendrier_mini.html dans votre nouveau dossier formulaires.

Remplacez le code suivant :

<tbody>
<BOUCLE_calendrier(EVENEMENTS)
{id_article}{id_mot?}{agenda date_debut, mois, (#ENV{date}|annee), (#ENV{date}|mois)}>
[(#DATE_DEBUT|Agenda_memo_full{#DATE_FIN,[(#TITRE|addslashes)],#DESCRIPTIF,#LIEU,
[(#ENV{self}|parametre_url{#ENV{var_date},[(#DATE_DEBUT|affdate{'Y-m-d'})]})]})]
</BOUCLE_calendrier>
[(#ENV{date}|agenda_mini)]
</tbody>

Par celui-ci :

<tbody class="calendrier-td"><BOUCLE_calendrier(EVENEMENTS)
{id_mot?} {agenda date_debut, mois, (#ENV{date}|annee), (#ENV{date}|mois)}>
[(#DATE_DEBUT|Agenda_memo_full{#DATE_FIN,[(#TITRE|addslashes|supprimer_numero)],
#DESCRIPTIF,#LIEU,#URL_ARTICLE,[(#DATE_DEBUT|affdate{'Y-m-d'})]]})]
</BOUCLE_calendrier>
[(#ENV{date}|agenda_mini)]
</tbody>

3ème étape :

Enfin, on va remanier le style de l'agenda. En principe vous ne rencontrerez pas de problème pour le personnaliser, mais je préfère vous donner toutes les cartes.

Personnalisation des cellules :

#calendar td { }

Personnalisation des cellules du mois en cours :

#calendar td.libre{ }

Personnalisation des cellules n'appartenant pas au mois en cours :

#calendar td.horsperiode{ }

Personnalisation de la cellule du jour en cours :

#calendar td.today{ }

Personnalisation des cellules des jours occupés :

#calendar td.occupe { }

Si vous voulez changer le nom des classes, en rajouter, en enlever etc., ça se passe dans le fichier agenda_1_9_2 > balise > calendrier_mini.php lignes 96, 100 et 107.

Utilisation :

Il ne vous reste plus qu'à tester votre calendrier en y ajoutant plusieurs événements. Rendez-vous dans votre article, et dépliez la partie concernant l'agenda.

spip_calendrier3

Renseignez-y le titre, le lieu, la date, le descriptif, et validez. En principe, l'événement figure dès à présent dans le calendrier ;-)

Si vous rencontrez des problèmes en suivant ce tutoriel, n'hésitez pas à laisser un message. J'essaierai d'y répondre ;-)

Mise à jour du 8/02/2009 : Plusieurs événements le même jour

Comme vous l'avez surement remarqué, lorsque plusieurs événements sont programmés le même jour, le lien renvoi sur le premier événement saisi, rendant les autres inaccessibles. Suite à de nombreuses demandes, je vous propose une solution à ce problème, facile à mettre en place. Elle est majoritairement basée sur l'infobulle javascript de Damien Alexandre, que j'ai remaniée à ma sauce, en la combinant avec le script de l'agenda. Voici les étapes de mise en place :

1ère étape : Le fichier calendrier_mini.html : squelette et scripts

Rendez-vous tout d'abord dans le fichier plugins > agenda_1_9_2 > formulaires > calendrier_mini.html ou dans squelettes > formulaires > calendrier_mini.html (si vous avez au préalable dupliqué le squelette de votre calendrier dans ce dossier).

Juste après ce code :

<div id="calendar">

Insérez ceci :

<div id="curseur" class="infobulle"></div>

Ce code représente une infobulle qui contiendra les liens de différents événements de la journée. Peut-importe où vous l'insérez étant donné qu'on la mettra en position absolute. Mais mieux vaut la mettre ici pour ne pas la perdre.

Ensuite le script. Vous pouvez le mettre ou vous voulez, tant qu'il est présent dans la même page que votre mini calendrier. Pour mon test, je l'ai mis tout en haut de mon calendrier_mini.html, c'est à dire avant le :

<div id="calendar">

Voici l'intégralité du code à insérer :

<script language="javascript" type="text/javascript">
<!--
// Fonction qui nous retourne l'élement en fonction de son id
function GetId(id)
{
  return document.getElementById(id);
}
 
var i = false; // Si l'infobulle est invisible, i = false et invesement
var a = true; // Si le curseur a déja survolé le jour, a = false
 
// Fonction qui calcule la position de l'infobulle en fonction de celle du curseur
function move(e)
{
    if(i && a)
    {  // Si la bulle est visible et que c'est la première fois que le curseur survole le jour, on calcul en temps reel sa position idéale
      if (navigator.appName!="Microsoft Internet Explorer")
      { // Si on est pas sous IE
        GetId("curseur").style.left=e.pageX + 5+"px";
        GetId("curseur").style.top=e.pageY + 10+"px";
      }
      else
      { // Si on est sous IE
        if(document.documentElement.clientWidth>0)
        {
          GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
          GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
        }
        else
        {
          GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
          GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
        }
      }
    }
    a = false; // Le curseur vient de survoler le jour, on passe a à false
}
 
// Fonction qui affiche l'infobulle
function montre(text) 
{ 
  if(i==false)
  { // Si l'infobule est invisible, on l'affiche
    GetId("curseur").style.visibility="visible"; // Si il est caché (la verif n'est qu'une securité) on le rend visible.
    GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
    i=true;
    a = true;
  }
  else
  { // Si l'infobule est visible, on la cache
    cache();
  }
}
 
// Fonction qui cache l'infobulle
function cache()
{
  if(i==true)
  {
    GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
    i=false;
  }
}
 
</script>

Je pense que les commentaires de Damien mêlés aux miens sont suffisants pour comprendre le code. Mais n'hésitez pas si vous avez des questions ;)

2ème étape : Le fichier habillage.css : style

Comme précédemment, vous pouvez mettre ce code n'importe où, mais c'est plus propre de le mettre dans votre fichier css principal. Il vous suffit donc d'y insérer ce code :

.infobulle
{
  position : absolute;   
  visibility : hidden;
  border : 1px solid Black;
  padding : 10px;
  font-family : Verdana, Arial;
  font-size : 10px;
  background-color : #ffffcc;
}

Modifiez le style à votre guise, mais laissez bien la position en absolute, c'est nécessaire pour le calcul de la position de votre infobulle en fonction de votre curseur.

3ème étape : Le fichier calendrier_mini.php : remplissage de l'infobulle

Rendez-vous dans le fichier plugins > agenda_1_9_2 > balise> calendrier_mini.php et remplacez ce code :

$evts = $evenements[$amj];
$class="";
if ($evts)
{
  $evts = "<a href='".parametre_url($evts[0]['URL'],'date',"$annee_en_cours-$mois_en_cours-$jour")."' 
title='".$evts[0]['SUMMARY']."'>".intval($jour)."</a>";
	$class='occupe';
}
else
{
	$evts = intval($jour);
	$class='libre';
}

Par ce code :

$evts = $evenements[$amj];
$info = ""; // Initialisation du contenu
for($i=0 ; $i<sizeof($evts); $i++) // Pour tous les éléments du tableau d'événements,
{
  // On créé un lien vers l'événement et on l'affiche
    $info .= "<a href=\'".parametre_url($evts[$i]['URL'],'date',"$annee_en_cours-$mois_en_cours-$jour")."\' 
title=\'".$evts[$i]['SUMMARY']."\'>".$evts[$i]['SUMMARY']."</a><br />";
  }
$class="";
if ($evts)
{
	$evts = "<a onmouseover=\"montre('".$info."');move()\" href='".parametre_url($evts[0]['URL'],'date',
"$annee_en_cours-$mois_en_cours-$jour")."' title='".$evts[0]['SUMMARY']."'>".intval($jour)."</a>";
	$class='occupe';
}
else
{
	$evts = intval($jour);
	$class='libre';
}

La méthode est simple, on parcoure le tableau des événements, et pour chaque élément, on affiche dans l'infobulle le titre de l'événement, qui mène directement à l'article.

Au final, l'utilisation est très simple : un survol sur le jour et vos événements apparaissent dans l'infobulle (vous pouvez donc choisir l'événement qui vous intéresse). Un deuxième survol sur le jour, et votre infobulle disparait.

Et voilà ! Si vous ne vous êtes pas trompés, tout est opérationnel ! N'hésitez pas à venir exposer vos problèmes si vous en rencontrez ;)