Pour le problème de la position du calendrier, ce n'est pas à cause du CSS car nul part il n'est question de positionner les cordonnées du div qui porte le calendrier. C'est dans le programme JS du calendrier que le positionnement des coordonnées se fait et il est erroné car il se base sur la position left et top de la zone date qui n'est malheureusement pas définie dans l'HTML vu que c'est une zone à position automatique selon la séquence du contenu et non absolue (fixe). La solution est de définir la position du calendrier par rapport aux coordonnées X/Y de la souris/curseur ou de lui fixer une position bien définie sur la page.
Voici le programme : calendrier.js modifié:
/*--cette partie du script est pour élaborer le calendrier --*/
/*variable globale*/
var pDefaut = {"mois" : new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre"),
"jour" : new Array("Di","Lu","Ma","Me","Je","Ve","Sa"),"jLib" : new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"),
"titre" : "micro-cal","aujourdhui" : "aujourd'hui",
"debutSemaine" : 1, /*debut de la semaine 0=dim,1=lun,...*/
"jPause" : {6:true,0:true},/*jour de pause de la semaine (samedi & dimanche)*/
"jFeriee": {"1-1":"jour an","1-5":"fête du travail","8-5":"armistice","14-7":"fête nationale","15-8":"ascencion","1-11":"armistice","11-11":"toussain","25-12":"noel"} ,
"moisMoins" : "-","moisPlus" : "+", /*naviagation par mois*/ "anneeMoins" : "<","anneePlus" : ">", /*naviagation par annee*/
"format" : "%j/%m/%a" /*format de sortie : %j = jour, %m = mois, %a =année*/ }
var tempo = new Array(); /*gestion de la fermeture des calendriers quand on perd le focus*/
function nbJ(dateX) /*Retourne le nombre de jour depuis le 1er janvier (pr le num de semaine)*/
{
var j_mois=[0,31,59,90,120,151,181,212,243,273,304,334];
mm=dateX.getMonth();aa=dateX.getFullYear();nb=j_mois[mm]+dateX.getDate()-1 ;
if ((aa%4==0 && aa %100!=0 || aa%400==0) && mm>1) nb++; /*test bissextile*/
return nb;
}
function gCal(src,srcId,mm,yy) /*génère le calendrier*/
{
if (tempo!=null&&tempo[srcId]!=null)
{
clearTimeout(tempo[srcId]);
document.getElementById(src).focus();
}
if (mm<0) {mm+=12;yy--;}
else if (mm>11) {mm-=12;yy++;}
dnow=new Date();
param=document.getElementById(srcId).parametre;
htm="<table cellpadding=0 cellspacing=0 >";
/*titre*/
if (param["titre"]!= null )
{htm+="<tr><td colspan='8' class='zoneTitre' >"+param["titre"]+"</td></tr>";}
/*entete*/
htm+="<tr><td colspan='8'><table width='100%' cellpadding=0 cellspacing=0 ><tr>";
htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+mm+","+(yy-1)+")\">"+param["anneeMoins"]+"</td>";
htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+(mm-1)+","+yy+")\">"+param["moisMoins"]+"</td>";
htm+="<td class='zoneMois'>"+param["mois"][mm]+"</td>";
htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+(mm+1)+","+yy+")\" >"+param["moisPlus"]+"</td>";
htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+mm+","+(yy+1)+")\">"+param["anneePlus"]+"</td>";
htm+="</tr></table></td></tr>";
/*jour*/
htm+="<tr><td></td>";
pJs = param["debutSemaine"];
pJm = new Date(yy,mm,1).getDay(); /*jour du 1ere du mois*/
pjT = 1-pJm+pJs;
pjT-=(pjT>1)?7:0;
dateX = new Date(yy,mm,pjT);
for (j=0;j<7;j++)
{htm+="<td>"+param["jour"][(j+pJs)%7]+"</td>";}
htm+="</tr>";
avantFinMois=true;idx=0;idxM=parseInt(nbJ(new Date(yy,mm,1))/7+1,10);
while(avantFinMois)
{
htm+=(idx%7==0)?"<tr><td class='nSemaine' >"+idxM+"</td>":"";
htm+="<td><a class='tdx' href='#' onclick=\"javascript:choix("+dateX.getFullYear()+","+dateX.getMonth()+","+dateX.getDate()+",'"+srcId+"','"+src+"')\" >"+subDiv(param,idx,dateX,mm,aa,0)+"</a></td>";
idx++;
if (idx%7==0)
{htm+="</tr>"; idxM++;}
dateX= new Date(dateX.getFullYear(),dateX.getMonth(),dateX.getDate()+1);
if (idx>7&&idx%7==0&&dateX.getMonth()!=mm)
{avantFinMois=false;}
}
/*annee*/htm+="<tr><td colspan='6'><a class='tdxNow' href='#' onclick=\"javascript:choix("+dnow.getFullYear()+","+dnow.getMonth()+","+dnow.getDate()+",'"+srcId+"','"+src+"')\" >"+param["aujourdhui"]+"</a></td><td colspan='2' class='zoneAnnee'>"+yy+"</td></tr>";
htm+="</table>";
document.getElementById(srcId).innerHTML=htm;
}
function addZero(val) { return ((val<10)?"0":"")+val;}
function choix(aa,mm,jj,srcId,src)
{
var datePos=new Date(aa,mm,jj);var jour = datePos.getDay();
param=document.getElementById(srcId).parametre;
var dateAffiche = param["format"].replace("%j",addZero(datePos.getDate())).replace("%k",datePos.getDate()).replace("%d",param["jLib"][jour]);
dateAffiche = dateAffiche.replace("%m",addZero(datePos.getMonth()+1)).replace("%n",datePos.getMonth()+1).replace("%p",param["mois"][datePos.getMonth()]);
dateAffiche = dateAffiche.replace("%a",datePos.getFullYear()).replace("%y",datePos.getYear());
document.getElementById(src).value = dateAffiche;
}
function subDiv(param,idx,dateX,mm,aa,code)
{
pJs = param["debutSemaine"];
dnow=new Date();
switch(code)
{
case 0 : return (param["jPause"][(idx+pJs)%7]==true) ? "<div class='enWeekEnd' >"+subDiv(param,idx,dateX,mm,aa,1)+"</div>" : subDiv(param,idx,dateX,mm,aa,1) ; break;
case 1 : return (param["jFeriee"][dateX.getDate()+"-"+(dateX.getMonth()+1)]!=null) ? ("<div class=\"enFeriee\" title=\""+param["jFeriee"][dateX.getDate()+"-"+(dateX.getMonth()+1)]+"\" >"+subDiv(param,idx,dateX,mm,aa,2)+"</div>") : subDiv(param,idx,dateX,mm,aa,2) ; break;
case 2 : return (dateX.getMonth()==mm) ? "<div class='enMois' >"+subDiv(param,idx,dateX,mm,aa,3)+"</div>" : subDiv(param,idx,dateX,mm,aa,3) ; break;
case 3 : return (dateX.getMonth()==dnow.getMonth()&&dateX.getFullYear()==dnow.getFullYear()&&dateX.getDate()==dnow.getDate()) ? "<div class='aujourdhui' >"+subDiv(param,idx,dateX,mm,aa,4)+"</div>" : subDiv(param,idx,dateX,mm,aa,4) ; break;
case 4 : return dateX.getDate() ; break;
}
}
function visuCal(src,paramX)
{
srcId = src.id+"_cal";
if (document.getElementById(srcId)==null)
{
param={}
for (e in pDefaut)
{trouve=false;
if (paramX!=null)
for (i in paramX) { if (e==i) {param[e]=paramX[e];trouve=true;} }
if (!trouve) param[e]=pDefaut[e];
}
dnow= new Date();
div = document.createElement('div');
div.setAttribute('id',srcId);
div.style.position = 'absolute';
// CODE ANNULE : position du calendrier par rapport à la zone date
//div.style.top = src.offsetTop + src.offsetHeight + 'px';
//div.style.left = src.offsetLeft + 'px'; /*this.deltaG = 0; */
// MODIFICATION : position du calendrier par rapport à XY de la souris //
div.style.top = Mouse_Y + 10 + 'px'; /*Position de la souris*/
div.style.left = Mouse_X + 'px'; /*Position de la souris*/
div.className = 'divCal';
div.parametre = param;
document.body.appendChild(div);
gCal(src.id,srcId,dnow.getMonth(),dnow.getFullYear(),param);
} else
{
document.getElementById(src.id+"_cal").style.display='inline';
}
}
function masqueCal(src)
{
tempo[src.id+"_cal"]=window.setTimeout("document.getElementById('"+src.id+"_cal').style.display='none'",500);
}
/******fin de la partie du script qui peut être copiée dans un fichier.js ******/
function testTypeDate(src)
{
tst=false;
try
{rc=src.split("/");nd=new Date(rc[2],(rc[1]-1),rc[0]);
tst=(rc[2]>1800&&rc[2]<2200&&rc[2]==nd.getFullYear()&&rc[1]==(nd.getMonth()+1)&&rc[0]==nd.getDate());
} catch(e) {}
return tst?'black':'red';
}
/* création d'un paramétrage spécifique pour le changement de langue ou de propriété */
paramGB={"mois" : new Array("January","February","March","April","May","June","July","August","September","October","November","December"),
"jour" : new Array("Su","Mo","Tu","We","Th","Fr","Sa"), "jLib" : new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"),
"jFeriee" : {"26-5":"memorial Day","29-5":"JFK Birthday","14-6":"Flag Day","15-6":"Father's Day","1-9":"Labor Day","11-9":"Patriot Day","13-10":"Columbus Day","31-10":"Halloween", "2-11" : "Daylight Saving Time Ends" , "4-11" : "Election Day", "11-11" : "Veteran's Day" , "27-11" : "Thanksgiving" , "24-12" : "Christmas Eve" , "25-12" : "Christmas"},
"debutSemaine" : 0, "format": "%a-%m-%j" , "titre" : "start","aujourdhui" : "now"}
paramLib={"titre": "Date","format" : "%d, %k %p %a"}
// cette partie est pour détecter les coordonnées de la souris
var Mouse_X; // Variable globale Position X de la Mouse
var Mouse_Y; // Variable globale Position Y de la Mouse
//-----------------------------------------------------------------------------
// l'argument e n'est passé à la fonction que par les navigateur n'ayant pas
// implémenté event comme objet, IE posséde son propre objet bien connu event
//-----------------------------------------------------------------------------
function WhereMouse( e ){
var DocRef; // Variable pour IE uniquement
// L'événement est passée à la fonction
// donc tous sauf IE…
if( e){ // Dans ce cas on obtient directement la position dans la page
Mouse_X = e.pageX;
Mouse_Y = e.pageY;
}
else{ // Dans ce cas on obtient la position relative à la fenêtre d'affichage
Mouse_X = event.clientX;
Mouse_Y = event.clientY;
//-- Il faut traiter le CAS des DOCTYPE sous IE
if( document.documentElement && document.documentElement.clientWidth) // Donc DOCTYPE
DocRef = document.documentElement; // Dans ce cas c'est documentElement qui est réfèrence
else
DocRef = document.body; // Dans ce cas c'est body qui est réfèrence
//-- On rajoute la position liée aux ScrollBars
Mouse_X += DocRef.scrollLeft;
Mouse_Y += DocRef.scrollTop;
}
}
//== INITIALISATION ================
document.onmousemove = WhereMouse;
Modifications:
1. on a ajouté en bas une procédure de détection des positions XY de la Souris
2. on a modifié les instructions de positionnement des coordonnées Left et Top du DIV portant le calendrier