begin process at 2008 05 17 11:59:10
1 173 987 membres
110 nouveaux aujourd'hui
13 974 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

AFFICHE UN CALENDRIER SOUS UNE ZONE DE SAISIE


Information sur la source

Description

Ce script affiche un calendrier en dessous d'une zone de saisie,
avec en + :
-contrôle de date
-les jours feriés & jours de pause
-modifié pour tourner sous firefox

script ultra léger et super efficace !

Source

  • <html>
  • <head>
  • <style>
  • input {border:1px blue solid;width:80px;}
  • body {font-family:Tahoma;font-size:12px}
  • td {font-family:Tahoma;font-size:12px}
  • </style>
  • <script language="javascript">
  • moisX=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
  • JourM=["Di","Lu","Ma","Me","Je","Ve","Sa"];
  • var fermable_microcal=true;
  • var select_old= null;
  • var startWeek=0;//debut de la semaine 0=dim,1=lun,...
  • var jourPause={0:true,6:true}; //jour de pause de la semaine
  • var jourFeriee={"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"};
  • //structure la date
  • function strucDate(dateX)
  • {return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};}
  • var dateS= strucDate(new Date());//date Selectionné
  • var dnow= strucDate(new Date());//date actuelle
  • //retourne le ième jour du 1er du mois
  • function premJourMois(mois,annee)
  • {return (new Date(annee,mois-1,1).getDay());}
  • //retourne le jour max du mois
  • function JmaxMois(mois,annee)
  • {return (new Date(annee,mois,0).getDate());}
  • /* Test une date si elle est correct...spécial killer*/
  • function testTypeDate(dateEntree)
  • {
  • tst=false;
  • try
  • {rc=dateEntree.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;
  • }
  • //selection de la zone avec la souris
  • function choix(koi,code)
  • {
  • if (code)
  • { select_old= koi.style.background;
  • koi.style.background ='#c0c0FF';
  • }
  • else
  • {
  • koi.style.background =select_old;
  • }
  • }
  • function testTravail(oldX,xx,jj,mm,aa)
  • {
  • styleX="font-family:Tahoma;font-size:10px;text-align:center;";
  • styleX+=(oldX)?"":"color:#e0e0e0;";
  • styleX+="cursor:hand;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";
  • if (jourPause[xx]||jourFeriee[jj+"-"+mm]!=null) styleX+="background:#f0f0f0;";
  • if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee) styleX+="border:2px red solid;";
  • return styleX;
  • }
  • //test si année bissextile
  • function bissextile(annee) {
  • return (annee%4==0 && annee %100!=0 || annee%400==0);
  • }
  • //Retourne le nombre de jour depuis le 1er janvier (num de semaine)
  • function nbJAnnee(dateX){
  • var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
  • j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
  • nb=nb_mois[m]+j-1 ;
  • if (bissextile(a) && m>2) nb++;
  • return nb;
  • }
  • //affiche le calendrier
  • function view_microcal(actif,ki,source,mxS,axS)
  • {
  • if (actif)
  • {
  • //decalage du mois su on clique sur -/+
  • if (mxS!=-1)
  • {
  • clearTimeout(cc);
  • ki.focus();
  • fermable_microcal=true;
  • dateS.mois=mxS;
  • dateS.annee=axS;
  • if (dateS.mois<1) {dateS.annee--;dateS.mois+=12;}
  • if (dateS.mois>12) {dateS.annee++;dateS.mois-=12;}
  • }
  • //init
  • Dstart=(premJourMois(dateS.mois,dateS.annee)+7-startWeek)%7;
  • jmaxi=JmaxMois(dateS.mois,dateS.annee);
  • jmaxiAvant=JmaxMois((dateS.mois-1),dateS.annee);
  • //si on veux ajouter le numero de la semaine ...
  • //idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateS.mois+'-01-'+dateS.annee)))/7,10)+1;
  • ymaxi=parseInt((jmaxi+Dstart+1)/7,10);
  • //generation du tableau
  • //--entête
  • htm="<table><tr style='font-size:10px;font-family:Tahoma;text-align:center;'>";
  • htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois-1)+","+dateS.annee+");\">-</td>";
  • htm+="<td colspan='5'> <b> "+moisX[dateS.mois]+"</b>&nbsp;"+dateS.annee+"</td>";
  • htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois+1)+","+dateS.annee+")\">+</td></tr>";
  • //--corps
  • htm+="<tr>";
  • //affichage des jours DLMMJVS
  • for (x=0;x<7;x++)
  • htm+="<td style='font-size:10px;font-family:Tahoma;'><b>"+JourM[(x+startWeek)%7]+"</b></td>";
  • htm+="</tr>"
  • //------------------------
  • for (y=0;y<=ymaxi;y++)
  • {
  • htm+="<tr>";
  • for (x=0;x<7;x++)
  • {
  • idxP=y*7+x-Dstart+1; //numero du jour
  • aa=dateS.annee;
  • xx=(x+startWeek)%7;
  • //jour du mois précedent
  • if (idxP<=0)
  • {
  • jj=idxP+jmaxiAvant;mm=dateS.mois-1;
  • if (mm==0)
  • {mm=12;aa--;}
  • htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";
  • }
  • else if (idxP>jmaxi) //jour du mois suivant
  • {
  • jj=idxP-jmaxi;mm=dateS.mois+1;
  • if (mm==13)
  • {mm=1;aa++;}
  • htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
  • else //jour du mois en cours
  • {
  • jj=idxP;mm=dateS.mois;
  • htm+="<td style='"+testTravail(true,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
  • }
  • htm+="</tr>"
  • }//-------------------------
  • htm+="</table>"
  • //affiche le tableau
  • source.innerHTML=htm;
  • source.style.visibility="";
  • } else
  • {
  • //ferme le calendrier
  • if (fermable_microcal)
  • cc=setTimeout(source.id+".style.visibility='hidden'",500);
  • }
  • }
  • </script>
  • </head>
  • <body style="margin:0px">
  • <center>
  • <br><br><b>micro-calendrier <i>par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br><br>
  • Saisissez une date au format JJ/MM/AAAA
  • <table cellpadding="0" cellspacing="0">
  • <tr><td ><input type="text" maxlength="10" id="dateDebut" onfocus="view_microcal(true,dateDebut,microcal,-1,0);" onblur="view_microcal(false,dateDebut,microcal,-1,0);" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
  • <tr><td><div id="microcal" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div></td></tr>
  • </table>
  • <center>
  • </body>
  • </html>
<html>
<head>

<style>
input   {border:1px blue solid;width:80px;}
body   {font-family:Tahoma;font-size:12px}
td      {font-family:Tahoma;font-size:12px}
</style>

<script language="javascript">
moisX=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
JourM=["Di","Lu","Ma","Me","Je","Ve","Sa"];

var fermable_microcal=true;
var select_old= null;

var startWeek=0;//debut de la semaine 0=dim,1=lun,...
var jourPause={0:true,6:true}; //jour de pause de la semaine
var jourFeriee={"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"};

//structure la date 
function strucDate(dateX) 
{return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};}


var dateS= strucDate(new Date());//date Selectionné
var dnow= strucDate(new Date());//date actuelle


//retourne le ième jour du 1er du mois
function premJourMois(mois,annee) 
{return (new Date(annee,mois-1,1).getDay());}
//retourne le jour max du mois
function JmaxMois(mois,annee) 
{return (new Date(annee,mois,0).getDate());}


/* Test une date si elle est correct...spécial killer*/
function testTypeDate(dateEntree)
{
tst=false;
try
{rc=dateEntree.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;
}

//selection de la zone avec la souris
function choix(koi,code)
{
if (code) 
{  select_old= koi.style.background;
   koi.style.background ='#c0c0FF';
}
else 
{
koi.style.background =select_old;
}
}


function testTravail(oldX,xx,jj,mm,aa)
{
styleX="font-family:Tahoma;font-size:10px;text-align:center;";
styleX+=(oldX)?"":"color:#e0e0e0;";
styleX+="cursor:hand;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";
if (jourPause[xx]||jourFeriee[jj+"-"+mm]!=null) styleX+="background:#f0f0f0;";
if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee) styleX+="border:2px red solid;";
return styleX;
}

//test si année bissextile
function bissextile(annee) {
return (annee%4==0 && annee %100!=0 || annee%400==0);
}

//Retourne le nombre de jour depuis le 1er janvier (num de semaine)
function nbJAnnee(dateX){
var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
nb=nb_mois[m]+j-1 ;
if (bissextile(a) && m>2) nb++;
return nb;
}

//affiche le calendrier
function view_microcal(actif,ki,source,mxS,axS)
{
if (actif)
{
//decalage du mois su on clique sur -/+
if (mxS!=-1) 
{
clearTimeout(cc);
ki.focus();
fermable_microcal=true;
dateS.mois=mxS;
dateS.annee=axS;
if (dateS.mois<1) {dateS.annee--;dateS.mois+=12;}
if (dateS.mois>12) {dateS.annee++;dateS.mois-=12;}
}
//init
Dstart=(premJourMois(dateS.mois,dateS.annee)+7-startWeek)%7;
jmaxi=JmaxMois(dateS.mois,dateS.annee);
jmaxiAvant=JmaxMois((dateS.mois-1),dateS.annee);
//si on veux ajouter le numero de la semaine ...
//idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateS.mois+'-01-'+dateS.annee)))/7,10)+1;

ymaxi=parseInt((jmaxi+Dstart+1)/7,10);

//generation du tableau
//--entête
htm="<table><tr style='font-size:10px;font-family:Tahoma;text-align:center;'>";
htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois-1)+","+dateS.annee+");\">-</td>";
htm+="<td colspan='5'> <b> "+moisX[dateS.mois]+"</b>&nbsp;"+dateS.annee+"</td>";
htm+="<td  style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois+1)+","+dateS.annee+")\">+</td></tr>";
//--corps
htm+="<tr>";
//affichage des jours DLMMJVS
for (x=0;x<7;x++) 
htm+="<td  style='font-size:10px;font-family:Tahoma;'><b>"+JourM[(x+startWeek)%7]+"</b></td>";
htm+="</tr>"


//------------------------
for (y=0;y<=ymaxi;y++)
{
htm+="<tr>";
for (x=0;x<7;x++)
{
idxP=y*7+x-Dstart+1;   //numero du jour
aa=dateS.annee;
xx=(x+startWeek)%7;
//jour du mois précedent
if (idxP<=0)
{
jj=idxP+jmaxiAvant;mm=dateS.mois-1;
if (mm==0)
{mm=12;aa--;}
htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";
}
else if (idxP>jmaxi) //jour du mois suivant
{
jj=idxP-jmaxi;mm=dateS.mois+1;
if (mm==13)
{mm=1;aa++;}

htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
else //jour du mois en cours
{
jj=idxP;mm=dateS.mois;
htm+="<td style='"+testTravail(true,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
}
htm+="</tr>"
}//-------------------------
htm+="</table>"
//affiche le tableau
source.innerHTML=htm;
source.style.visibility="";
} else
{
//ferme le calendrier
if (fermable_microcal) 
   cc=setTimeout(source.id+".style.visibility='hidden'",500);
}
}

</script>

</head>
<body style="margin:0px">
<center>
<br><br><b>micro-calendrier <i>par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br><br>
Saisissez une date au format JJ/MM/AAAA
<table cellpadding="0" cellspacing="0">
<tr><td ><input type="text" maxlength="10" id="dateDebut" onfocus="view_microcal(true,dateDebut,microcal,-1,0);" onblur="view_microcal(false,dateDebut,microcal,-1,0);" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
<tr><td><div id="microcal" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div></td></tr>
</table>
<center>
</body>
</html>
  • signaler à un administrateur
    Commentaire de nicomilville le 26/04/2008 11:12:40 10/10

    Salut,

    Tout d'abord je te félicite, on dirai que le plaisir de programmer en javascript t'es revenu !!!

    Ensuite, je n'ai rien a redire !!!

    Finalement 9/10

  • signaler à un administrateur
    Commentaire de nicomilville le 26/04/2008 11:14:18

    Ba je me suis trompé, c'est pas grave, a la place de 9/10 tu as 10/10 !!

  • signaler à un administrateur
    Commentaire de amrounix le 26/04/2008 11:17:18

    merci c sympa !

  • signaler à un administrateur
    Commentaire de nicomilville le 26/04/2008 11:20:33

    de rien, tu les mérite !!!
    Maintenant, je pense qu'il faut que tu t'atende a avoir des avis différents du miens et tu devrai aussi t'attendre a avoir des personne qui critique ton code, ça arrive a tout le monde, même au top des codes !!!

  • signaler à un administrateur
    Commentaire de amrounix le 26/04/2008 11:28:11

    toute réflexion bonne ou mauvaise est la bienvenue c'est ce qui nous permet d'avancer !

  • signaler à un administrateur
    Commentaire de kina4 le 26/04/2008 23:01:33

    haha
    c'est bon comme Script

  • signaler à un administrateur
    Commentaire de kina4 le 26/04/2008 23:02:33

    pour ce la je te donne 10/10

  • signaler à un administrateur
    Commentaire de amrounix le 27/04/2008 12:55:44

    merci c'est sympa !
    si vous avez des idées d'améliorations, je suis open !

  • signaler à un administrateur
    Commentaire de nicomilville le 27/04/2008 12:57:41

    Il n'y a pas les étoiles donc la note n'est pas passée !!!

  • signaler à un administrateur
    Commentaire de JLN le 28/04/2008 06:34:53 10/10

    Pas mal du tout ce script, simple et concie comme on les aime.
    Une amélioration (juste pour faire avancer) : Les jours fériés.
    Sinon j'ai mis 10 aussi y a pas de raison !!!

    Bonne prog,
    @+ JLN

  • signaler à un administrateur
    Commentaire de amrounix le 28/04/2008 09:14:59

    merci , ajouter les jours fériées ? ils sont déjà mis en place et la variable c'est :
    var jourFeriee = ={"1-1":"jour an","1-5":"fête du travail" ....
    il manque juste le lundi de pâques & la pencôte à calculer !

  • signaler à un administrateur
    Commentaire de JLN le 28/04/2008 10:58:09

    Exact, je m'en suis apercu après avoir posté, mais l'ajout des fériés flottants serait le nec plus ultra et on pourrait noter 12/10 ;-)
    @+ JLN

  • signaler à un administrateur
    Commentaire de cefar le 28/04/2008 12:38:48

    Bonjour,
    Source bien utile.
    Tourne bien sous IE et safari
    Par contre j'ai un problème sous Firefox : la console d'erreur Javascript m'indique "dateDebut is not defined".
    dateDebut étant l'id de l'input.
    Rencontrez-vous le même problème ? Si oui, Avez-vous trouvez une solution ?
    Merci d'avance

    CEFAR

  • signaler à un administrateur
    Commentaire de amrounix le 28/04/2008 13:56:13

    tu as une ancienne version de firefox
    -j'ai replacé les id par des document.getElementById(...)
    -j'ai fixé la largeur des colonnes

    essaye ca :


    <html>
    <head>
    <style>
    input   {border:1px blue solid;width:80px;}
    body   {font-family:Tahoma;font-size:12px}
    td      {font-family:Tahoma;font-size:12px}
    </style>
    <script language="javascript">
    moisX=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
    JourM=["Di","Lu","Ma","Me","Je","Ve","Sa"];
    var fermable_microcal=true;
    var select_old= null;
    var startWeek=0;//debut de la semaine 0=dim,1=lun,...
    var jourPause={0:true,6:true}; //jour de pause de la semaine
    var jourFeriee={"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"};
    //structure la date
    function strucDate(dateX)
    {return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};}
    var dateS= strucDate(new Date());//date Selectionné
    var dnow= strucDate(new Date());//date actuelle
    //retourne le ième jour du 1er du mois
    function premJourMois(mois,annee)
    {return (new Date(annee,mois-1,1).getDay());}
    //retourne le jour max du mois
    function JmaxMois(mois,annee)
    {return (new Date(annee,mois,0).getDate());}
    /* Test une date si elle est correct...spécial killer*/
    function testTypeDate(dateEntree)
    {
    tst=false;
    try
    {rc=dateEntree.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;
    }
    //selection de la zone avec la souris
    function choix(koi,code)
    {
    if (code)
    {  select_old= koi.style.background;
       koi.style.background ='#c0c0FF';
    }
    else
    {
    koi.style.background =select_old;
    }
    }
    function testTravail(oldX,xx,jj,mm,aa)
    {
    styleX="font-family:Tahoma;font-size:10px;text-align:center;";
    styleX+=(oldX)?"":"color:#e0e0e0;";
    styleX+="cursor:hand;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";
    if (jourPause[xx]||jourFeriee[jj+"-"+mm]!=null) styleX+="background:#f0f0f0;";
    if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee) styleX+="border:2px red solid;";
    return styleX;
    }
    //test si année bissextile
    function bissextile(annee) {
    return (annee%4==0 && annee %100!=0 || annee%400==0);
    }
    //Retourne le nombre de jour depuis le 1er janvier (num de semaine)
    function nbJAnnee(dateX){
    var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
    j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
    nb=nb_mois[m]+j-1 ;
    if (bissextile(a) && m>2) nb++;
    return nb;
    }
    //affiche le calendrier
    function view_microcal(actif,ki,source,mxS,axS)
    {
    if (actif)
    {
    //decalage du mois su on clique sur -/+
    if (mxS!=-1)
    {
    clearTimeout(cc);
    document.getElementById(ki).focus();
    fermable_microcal=true;
    dateS.mois=mxS;
    dateS.annee=axS;
    if (dateS.mois<1) {dateS.annee--;dateS.mois+=12;}
    if (dateS.mois>12) {dateS.annee++;dateS.mois-=12;}
    }
    //init
    Dstart=(premJourMois(dateS.mois,dateS.annee)+7-startWeek)%7;
    jmaxi=JmaxMois(dateS.mois,dateS.annee);
    jmaxiAvant=JmaxMois((dateS.mois-1),dateS.annee);
    //si on veux ajouter le numero de la semaine ...
    //idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateS.mois+'-01-'+dateS.annee)))/7,10)+1;
    ymaxi=parseInt((jmaxi+Dstart+1)/7,10);
    //generation du tableau
    //--entête
    htm="<table><tr style='font-size:10px;font-family:Tahoma;text-align:center;'>";
    htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,'"+ki+"','"+source+"',"+(dateS.mois-1)+","+dateS.annee+");\">-</td>";
    htm+="<td colspan='5'> <b> "+moisX[dateS.mois]+"</b>&nbsp;"+dateS.annee+"</td>";
    htm+="<td  style='cursor:hand;' onclick=\"view_microcal(true,'"+ki+"','"+source+"',"+(dateS.mois+1)+","+dateS.annee+")\">+</td></tr>";
    //--corps
    htm+="<tr>";
    //affichage des jours DLMMJVS
    for (x=0;x<7;x++)
    htm+="<td  style='font-size:10px;font-family:Tahoma;width:17px'><b>"+JourM[(x+startWeek)%7]+"</b></td>";
    htm+="</tr>"
    //------------------------
    for (y=0;y<=ymaxi;y++)
    {
    htm+="<tr>";
    for (x=0;x<7;x++)
    {
    idxP=y*7+x-Dstart+1;   //numero du jour
    aa=dateS.annee;
    xx=(x+startWeek)%7;
    //jour du mois précedent
    if (idxP<=0)
    {
    jj=idxP+jmaxiAvant;mm=dateS.mois-1;
    if (mm==0)
    {mm=12;aa--;}
    htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\"document.getElementById('"+ki+"').value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';document.getElementById('"+ki+"').style.color='black';\">"+jj+"</td>";
    }
    else if (idxP>jmaxi) //jour du mois suivant
    {
    jj=idxP-jmaxi;mm=dateS.mois+1;
    if (mm==13)
    {mm=1;aa++;}
    htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\"document.getElementById('"+ki+"').value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';document.getElementById('"+ki+"').style.color='black';\">"+jj+"</td>";}
    else //jour du mois en cours
    {
    jj=idxP;mm=dateS.mois;
    htm+="<td style='"+testTravail(true,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\"document.getElementById('"+ki+"').value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';document.getElementById('"+ki+"').style.color='black';\">"+jj+"</td>";}
    }
    htm+="</tr>"
    }//-------------------------
    htm+="</table>"
    //affiche le tableau
    document.getElementById(source).innerHTML=htm;
    document.getElementById(source).style.visibility="";
    } else
    {
    //ferme le calendrier
    if (fermable_microcal)
       cc=setTimeout("document.getElementById('"+source+"').style.visibility='hidden'",500);
    }
    }
    </script>
    </head>
    <body style="margin:0px">
    <center>
    <br><br><b>micro-calendrier <i>par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br><br>
    Saisissez une date au format JJ/MM/AAAA
    <table cellpadding="0" cellspacing="0">
    <tr><td ><input type="text" maxlength="10" id="dateDebut" onfocus="view_microcal(true,'dateDebut','microcal',-1,0);" onblur="view_microcal(false,'dateDebut','microcal',-1,0);" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
    <tr><td><div id="microcal" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div></td></tr>
    </table>
    <center>
    </body>
    </html>

  • signaler à un administrateur
    Commentaire de metis15 le 28/04/2008 16:39:44 10/10

    Bah alors là, un truc qui marche du premier coup... Chapeau, et 10/10.

    Par contre, sous IE6, l'alerte de blocage de fenêtre, on peut pas le virer pour ce type de code ?

  • signaler à un administrateur
    Commentaire de cefar le 28/04/2008 18:25:14

    Merci, ça marche
    Cordialement
    CEFAR

  • signaler à un administrateur
    Commentaire de christ_28 le 28/04/2008 21:51:01 8/10

    Super !
    propre, net, concis !
    Par contre je ne te note "que" 8/10 pour garder une petite marge de progression :
    Tu peux gagner 1 point de plus en rajoutant le n° de la semaine (cela n'est pas aussi facile que ça en a l'air, mais c'est pas si dur que ça !).
    Le 2ème point en rajoutant 2 boutons ("<<" et ">>" pour naviguer par année au sein du calendrier.

  • signaler à un administrateur
    Commentaire de nicomilville le 28/04/2008 23:38:00

    @christ_28 : je crois qu'une fois tu a attribué une note, tu ne peus plus la changer !!

    a++

  • signaler à un administrateur
    Commentaire de amrounix le 29/04/2008 09:08:12

    Bonjour à tous, petit message pour CHRIST_28
    je ne sais pas si tu as vue à la ligne 108, je l'ai mis en commentaire
    cela permet d'avoir le numero de la semaine ! (idxweek étant la 1ere semaine de la 1ere ligne affiché) suffit de le rajouter à la génération du tableau
    et concernant les '<<' & '>>' il faut dupliquer les ligne 115 et 117 et
    -remplacer "dateS.annee" par "(dateS.annee + 1)" et "(dateS.annee - 1)" dans la 2nd ligne
    -remplacer "(dateS.mois + 1)" et "(dateS.mois - 1)" par "dateS.mois"

  • signaler à un administrateur
    Commentaire de Mamoune2005 le 29/04/2008 21:23:29 6/10

    Code pas très propre à mon avis :
    - accents manquants pourquoi ?
    - un tableau pour mettre le calendrier sous la zone, c'est de la mise en forme à la n'importe quoi
    - certaines variables ne sont pas déclarée explicitement

    donc je ne mets qu'un 6/10

  • signaler à un administrateur
    Commentaire de pm1511 le 07/05/2008 20:28:54

    Bonjour,Bien le script mais j'ai plusieurs zones de saisie sur la même page comment dois-je faire pour que cela fonctionne ?

  • signaler à un administrateur
    Commentaire de amrounix le 07/05/2008 23:54:58

    attend ma prochaine version, j'ai apporté bcp d'amélioration

  • signaler à un administrateur
    Commentaire de pm1511 le 08/05/2008 18:24:55 9/10

    J'attend avec impatience alors ! ;-)

  • signaler à un administrateur
    Commentaire de pipo le 08/05/2008 23:43:46 7/10

    bonjour et félicitation pour ce calendrier.
    Je me suis tout de meme permis de le modifier afin de coller au mieux aux besoins :
    - gestion multilingues des libellés
    - affichage du jour sélectionné en "vert"
    - ajout du lien "aujourd'hui" afin de sélectionné le jour en cours
    - réouverture du calendrier sur la date sélectionnée
    - affichage du texte en info bulle des jours "chomés"
    - gestion des styles par css

    sinon, bien sympas ton code.

    a+

    manu




    <html>
    <head>

    <style>
    input   {border:1px blue solid;width:80px;}
    body   {font-family:Tahoma;font-size:12px}
    td      {font-family:Tahoma;font-size:12px}




    .daynormal, .daynormalBG
    {
    width:20px;
    height:20px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    }



    .daynormalnomonth, .daynormalnomonthGB
    {
    width:20px;
    height:20px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    }



    .dayselected
    {
    color:#000;
    width:18px;
    height:18px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    border:2px green solid;
    }

    .daytoday, .daytodayBG
    {
    color:#e0e0e0;
    width:18px;
    height:18px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    border:2px red solid;
    }


    .daynormalBG, .daynormalnomonthBG, .daytodayBG
    {
    color:red;
    cursor:help;
    }



    .dayslist
    {
    color:#e0e0e0;
    width:20px;
    height:20px;
    font-size:10px;
    font-family:Tahoma;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    }

    .today
    {
    font-size:10px;
    font-family:Tahoma;
    text-align:center;
    }
    .todayTD
    {
    font-size:10px;
    font-family:Tahoma;
    text-align:center;
    }


    </style>

    <script language="javascript">



    var langue= "FR";
    //

    var moisXGB=["","January","February","March","April","May","June","July","August","September","October","November","December"];
    var JourMGB=["Su","Mo","Tu","We","Th","Fr","Sa"];
    var startWeekGB=0;
    var jourPauseGB={0:true,6:true}; //jour de pause de la semaine
    var jourFerieeGB={"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"};
    var todayGB = "today";
    //
    var moisXFR=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
    var JourMFR=["Di","Lu","Ma","Me","Je","Ve","Sa"];
    var startWeekFR=1;
    var jourPauseFR={0:true,6:true}; //jour de pause de la semaine
    var jourFerieeFR={"1-1":"jour an","7-5":"jour an","1-5":"fête du travail","14-7":"fête nationale","15-8":"ascencion","1-11":"armistice","11-11":"toussain","25-12":"noel"};
    var todayFR = "aujourd'hui";

    //
    var moisX = eval("moisX" + langue );
    var JourM = eval("JourM" + langue );
    var startWeek=eval("startWeek" + langue ); ;//debut de la semaine 0=dim,1=lun,...
    var jourPause=eval("jourPause" + langue ); ; //jour de pause de la semaine
    var jourFeriee=eval("jourFeriee" + langue ); ;
    var today=eval("today" + langue ); ;

    //
    var fermable_microcal=true;
    var select_old= null;



    //structure la date
    function strucDate(dateX)
    {
    return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};
    }


    var dateS= strucDate(new Date());//date Selectionné
    var dateA= strucDate(new Date());//date Affichée
    var dnow= strucDate(new Date());//date actuelle
    var seetoday= true;//affiche today


    //retourne le ième jour du 1er du mois
    function premJourMois(mois,annee)
    {
    return (new Date(annee,mois-1,1).getDay());
    }
    //retourne le jour max du mois
    function JmaxMois(mois,annee)
    {
    return (new Date(annee,mois,0).getDate());
    }


    /* Test une date si elle est correct...spécial killer*/
    function testTypeDate(dateEntree)
    {
    tst=false;
    try
    {
    rc=dateEntree.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;
    }

    //selection de la zone avec la souris
    function choix(koi,code)
    {
    if (code)
    {  
    select_old= koi.style.background;
    koi.style.background ='#c0c0FF';
    }
    else
    {
    koi.style.background =select_old;
    }
    }


    function testTravail(oldX,xx,jj,mm,aa)
    {

    //todo styleX=(oldX)?"":"color:#e0e0e0;";
    //styleX+="cursor:pointer;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";

    var cssparent = "";
    if (jourPause[xx] != null)
    cssparent="";
    else if (jourFeriee[jj+"-"+mm] != null)
    cssparent="BG";
    else
    cssparent="";
    //styleX+="background:#f0f0f0;";
    //cssparent="";
    if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee)
    {
    //styleX+="border:2px red solid;";
    styleX="daytoday"+cssparent;
    }
    else if (jj==dateS.jour && mm==dateS.mois && aa==dateS.annee)
    {
    styleX="dayselected"+cssparent;
    }

    else
    {
    styleX = (oldX)?("daynormal"+cssparent):("daynormalnomonth"+cssparent);

    }
    return styleX;
    }

    //test si année bissextile
    function bissextile(annee) {
    return (annee%4==0 && annee %100!=0 || annee%400==0);
    }

    //Retourne le nombre de jour depuis le 1er janvier (num de semaine)
    function nbJAnnee(dateX){
    var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
    j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
    nb=nb_mois[m]+j-1 ;
    if (bissextile(a) && m>2) nb++;
    return nb;
    }

    //affiche le calendrier
    function view_microcal(init,actif,ki,source,mxS,axS)
    {
    if(init)
    {
    dateA=strucDate(new Date(dateS.annee,dateS.mois-1,dateS.jour));

    }

    if (actif)
    {
    //decalage du mois su on clique sur -/+
    if (mxS!=-1)
    {
    clearTimeout(cc);
    //document.getElementById(ki).focus();
    fermable_microcal=true;
    dateA.mois=mxS;
    dateA.annee=axS;
    if (dateA.mois<1) {dateA.annee--;dateA.mois+=12;}
    if (dateA.mois>12) {dateA.annee++;dateA.mois-=12;}
    }
    //init
    Dstart=(premJourMois(dateA.mois,dateA.annee)+7-startWeek)%7;
    jmaxi=JmaxMois(dateA.mois,dateA.annee);
    jmaxiAvant=JmaxMois((dateA.mois-1),dateA.annee);
    //si on veux ajouter le numero de la semaine ...
    //idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateA.mois+'-01-'+dateA.annee)))/7,10)+1;

    ymaxi=parseInt((jmaxi+Dstart+1)/7,10);

    //generation du tableau
    //--entête
    htm="<table style='width:150px'><tr style='font-size:10px;font-family:Tahoma;text-align:center;'>";
    htm+="<td style='cursor:pointer;' onclick=\"view_microcal(false,true,'"+ki+"','"+source+"',"+(dateA.mois-1)+","+dateA.annee+");\"><<</td>";
    htm+="<td colspan='5'> <b> "+moisX[dateA.mois]+"</b>&nbsp;"+dateA.annee+"</td>";
    htm+="<td  style='cursor:pointer;' onclick=\"view_microcal(false,true,'"+ki+"','"+source+"',"+(dateA.mois+1)+","+dateA.annee+")\">>></td></tr>";
    //--corps
    htm+="<tr>";
    //affichage des jours DLMMJVS
    for (x=0;x<7;x++)
    htm+="<td  class=\"dayslist\"><b>"+JourM[(x+startWeek)%7]+"</b></td>";

    htm+="</tr>"

    // alert(jmaxi);
    //------------------------
    for (var y=0;y<=ymaxi;y++)
    {
    htm+="<tr>";
    for (var x=0;x<7;x++)
    {
    idxP=y*7+x-Dstart+1;   //numero du jour
    aa=dateA.annee;
    xx=(x+startWeek)%7;

    var musttest=false;

    //jour du mois précedent
    if (idxP<=0)
    {
    jj=idxP+jmaxiAvant;
    mm=dateA.mois-1;
    if (mm==0)
    {
    mm=12;
    aa--;
    }
    musttest=false;
    }
    else if (idxP>jmaxi) //jour du mois suivant
    {
    jj=idxP-jmaxi;mm=dateA.mois+1;
    if (mm==13)
    {
    mm=1;
    aa++;
    }
    musttest=false;

    }
    else //jour du mois en cours
    {
    jj=idxP;
    mm=dateA.mois;
    musttest=true;

    }
    var alt = "";
    if (jourFeriee[jj+"-"+mm] != null)
    {
    alt = jourFeriee[jj+"-"+mm];
    }
    htm+="<td class=\""+testTravail(musttest,xx,jj,mm,aa)+"\" onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\"dateS=strucDate(new Date("+aa+","+(mm-1)+","+jj+"));document.getElementById('"+ki+"').value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';document.getElementById('"+ki+"').style.color='black';document.getElementById('"+source+"').style.visibility='hidden';\"><span  alt = \""+alt+"\"title=\""+alt+"\">"+jj+"</span></td>";
    }
    htm+="</tr>"
    }//-------------------------
    if(seetoday)
    {
    htm+="<tr>";
    htm+="<td colspan='7' class=\"todayTD\"><a href=\"javascript:dateS=strucDate(new Date("+dnow.annee+","+(dnow.mois-1)+","+dnow.jour+"));document.getElementById('"+ki+"').value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';document.getElementById('"+ki+"').style.color='black';void(0);\" class=\"today\">"+today+"</a></td>";
    htm+="</tr>"
    }
    htm+="</table>"
    //affiche le tableau
    document.getElementById(source).innerHTML=htm;
    document.getElementById(source).style.visibility="";
    }
    else
    {
    //ferme le calendrier
    if (fermable_microcal)
       cc=setTimeout("document.getElementById('"+source+"').style.visibility='hidden';",500);
    }
    }

    </script>

    </head>
    <body style="margin:0px">
    <center>
    <br><br><b>micro-calendrier <i>par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br>modified by EL / (Emmanuel LELEU)<br><br>
    Saisissez une date au format JJ/MM/AAAA
    <table cellpadding="0" cellspacing="0">
    <tr><td ><input type="text" maxlength="10" id="dateDebut" value="" onfocus="view_microcal(true,true,this.id,'microcal',-1,0);" onblur="view_microcal(false,false,this.id,'microcal',-1,0);" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
    <tr><td><div id="microcal" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div>ssss</td></tr>
    </table>
    <center>
    </body>
    </html>

  • signaler à un administrateur
    Commentaire de JLN le 09/05/2008 08:04:59

    Pas mal du tout Pipo, dommage que le 7 mai soit le jour de l'an, mais sinon ca marche il suffira juste de debugger et tout est nickel, joli travail, et ca se rapproche de ce que j'attendai alors...

    Bonne prog,
    @+ JLN

  • signaler à un administrateur
    Commentaire de pipo le 09/05/2008 09:08:23

    voici la version 1.1 avec :
    - mise globale des styles en css
    - gestion multithread (multi calendar dans une page)
    - correction de la gestion du focus sous ie7
    - correction jours du mois suivants (mauvais css)

    reste a tout mettre au propre, et créer la dll pour l'ajouter a .Net et ainsi remplacer le CalendarExtender d'ajaxtoolkit de merde. Le code de celui ci est court, efficace et personnalisable. Tu as bien bossé AmRouNiX !
    Continu !


    <html>
    <head>

    <style>
    input   {border:1px blue solid;width:80px;}
    body   {font-family:Tahoma;font-size:12px}
    td      {font-family:Tahoma;font-size:12px}

    .calendar
    {
    width:150px;
    }

    .monthandyear
    {
    font-size:10px;
    font-family:Tahoma;
    text-align:center;
    }

    .swapmonth
    {
    cursor:pointer;
    }

    .daynormal, .daynormalBG
    {
    width:20px;
    height:20px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    }



    .daynormalnomonth, .daynormalnomonthGB
    {
    width:20px;
    height:20px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    }



    .dayselected, .dayselectedBG,.dayselectedRP
    {
    color:#000;
    width:18px;
    height:18px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    border:2px green solid;
    }

    .daytoday, .daytodayBG
    {
    color:#000;
    width:18px;
    height:18px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    border:2px red solid;
    }


    .daynormalBG, .daynormalnomonthBG, .daytodayBG
    {
    color:red;
    cursor:help;
    }


    .daynormalRP,.daynormalnomonthRP,.daynormalnomonth
    {
    color:#909090;
    width:20px;
    height:20px;
    font-family:Tahoma;
    font-size:10px;
    text-align:center;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    }



    .dayslist
    {

    width:20px;
    height:20px;
    font-size:10px;
    font-family:Tahoma;
    cursor:pointer;
    border-right:1px #e0e0e0 solid;
    border-bottom:1px #e0e0e0 solid;
    }

    .today
    {
    color:#000;
    font-size:10px;
    font-family:Tahoma;
    text-align:center;
    }
    .todayTD
    {
    font-size:10px;
    font-family:Tahoma;
    text-align:center;
    }


    </style>

    <script language="javascript">
    //
    //TODO :
    // - revoir la nomenclature des variables
    // - revoir la nomenclature des méthodes
    // - gestion des dates en anglais si langue anglaise choisi

    var langue= "FR";
    //

    var moisXGB=["","January","February","March","April","May","June","July","August","September","October","November","December"];
    var JourMGB=["Su","Mo","Tu","We","Th","Fr","Sa"];
    var startWeekGB=0;
    var jourPauseGB={0:true,6:true}; //jour de pause de la semaine
    var jourFerieeGB={"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"};
    var todayGB = "today";
    //
    var moisXFR=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
    var JourMFR=["Di","Lu","Ma","Me","Je","Ve","Sa"];
    var startWeekFR=1;
    var jourPauseFR={0:true,6:true}; //jour de pause de la semaine
    var jourFerieeFR={"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"};
    var todayFR = "aujourd'hui";

    //
    var moisX = eval("moisX" + langue );
    var JourM = eval("JourM" + langue );
    var startWeek=eval("startWeek" + langue ); ;//debut de la semaine 0=dim,1=lun,...
    var jourPause=eval("jourPause" + langue ); ; //jour de pause de la semaine
    var jourFeriee=eval("jourFeriee" + langue ); ;
    var today=eval("today" + langue ); ;

    //
    var fermable_microcal=true;
    //var select_old= null;

    //structure la date
    function strucDate(dateX)
    {
    return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};
    }


    //var dateS= strucDate(new Date());//date Selectionné
    //var dateA= strucDate(new Date());//date Affichée
    var dnow= strucDate(new Date());//date actuelle
    var seetoday= true;//affiche today


    //retourne le ième jour du 1er du mois
    function premJourMois(mois,annee)
    {
    return (new Date(annee,mois-1,1).getDay());
    }
    //retourne le jour max du mois
    function JmaxMois(mois,annee)
    {
    return (new Date(annee,mois,0).getDate());
    }


    /* Test une date si elle est correct...spécial killer*/
    function testTypeDate(dateEntree)
    {
    tst=false;
    try
    {
    rc=dateEntree.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;
    }

    //selection de la zone avec la souris
    function choix(koi,code)
    {
    if (code)
    {  
    koi.select_old = koi.style.background;
    koi.style.background = '#c0c0FF';
    }
    else
    {
    koi.style.background = koi.select_old;
    }
    }


    //test si année bissextile
    function bissextile(annee) {
    return (annee%4==0 && annee %100!=0 || annee%400==0);
    }

    //Retourne le nombre de jour depuis le 1er janvier (num de semaine)
    function nbJAnnee(dateX){
    var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
    j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
    nb=nb_mois[m]+j-1 ;
    if (bissextile(a) && m>2) nb++;
    return nb;
    }




    function testTravail(dateS,oldX,xx,jj,mm,aa)
    {
    var cssparent = "";
    if (jourPause[xx] != null)
    cssparent="RP";
    else if (jourFeriee[jj+"-"+mm] != null)
    cssparent="BG";
    else
    cssparent="";

    if (jj==dateS.jour && mm==dateS.mois && aa==dateS.annee)
    {
    styleX="dayselected"+cssparent;
    }
    else if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee)
    {
    styleX="daytoday"+cssparent;
    }
    else
    {
    styleX = (oldX)?("daynormal"+cssparent):("daynormalnomonth"+cssparent);
    }
    return styleX;
    }

    //affiche le calendrier
    function view_microcal(dateS,init,actif,ki,sourceid,mxS,axS)
    {

    if(typeof(document.getElementById(ki).process)!="undefined")
    {
    if(document.getElementById(ki).process==true && init)
    return;
    }
    document.getElementById(ki).process=true;


    if(typeof(document.getElementById(ki).dateS)=="undefined")
    {
    dateS = document.getElementById(ki).dateS;
    document.getElementById(ki).dateS =  strucDate(new Date());
    }
    dateS = document.getElementById(ki).dateS;

    if(init)
    {
    dateA=strucDate(new Date(dateS.annee,dateS.mois-1,dateS.jour));
    }


    if (actif )
    {
    //decalage du mois su on clique sur -/+
    if (mxS!=-1)
    {
    clearTimeout(cc);
    //if(init!=false)
    //alert(actif);
    //if(init)
    document.getElementById(ki).focus();
    fermable_microcal=true;
    dateA.mois=mxS;
    dateA.annee=axS;
    if (dateA.mois<1) {dateA.annee--;dateA.mois+=12;}
    if (dateA.mois>12) {dateA.annee++;dateA.mois-=12;}
    }
    //init
    Dstart=(premJourMois(dateA.mois,dateA.annee)+7-startWeek)%7;
    jmaxi=JmaxMois(dateA.mois,dateA.annee);
    jmaxiAvant=JmaxMois((dateA.mois-1),dateA.annee);
    //si on veux ajouter le numero de la semaine ...
    //idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateA.mois+'-01-'+dateA.annee)))/7,10)+1;

    ymaxi=parseInt((jmaxi+Dstart+1)/7,10);

    //generation du tableau
    //--entête
    htm="<table class=\"calendar\"><tr>";
    htm+="<td class=\"swapmonth\" onclick=\"view_microcal(null,false,true,'"+ki+"','"+sourceid+"',"+(dateA.mois-1)+","+dateA.annee+");\"><<</td>";
    htm+="<td colspan='5' class=\"monthandyear\"> <b> "+moisX[dateA.mois]+"</b>&nbsp;"+dateA.annee+"</td>";
    htm+="<td class=\"swapmonth\" onclick=\"view_microcal(null,false,true,'"+ki+"','"+sourceid+"',"+(dateA.mois+1)+","+dateA.annee+")\">>></td></tr>";
    //--corps
    htm+="<tr>";
    //affichage des jours DLMMJVS
    for (x=0;x<7;x++)
    htm+="<td  class=\"dayslist\"><b>"+JourM[(x+startWeek)%7]+"</b></td>";

    htm+="</tr>"

    // alert(jmaxi);
    //------------------------
    for (var y=0;y<=ymaxi;y++)
    {
    htm+="<tr>";
    for (var x=0;x<7;x++)
    {
    idxP=y*7+x-Dstart+1;   //numero du jour
    aa=dateA.annee;
    xx=(x+startWeek)%7;

    var musttest=false;

    //jour du mois précedent
    if (idxP<=0)
    {
    jj=idxP+jmaxiAvant;
    mm=dateA.mois-1;
    if (mm==0)
    {
    mm=12;
    aa--;
    }
    musttest=false;
    }
    else if (idxP>jmaxi) //jour du mois suivant
    {
    jj=idxP-jmaxi;
    mm=dateA.mois+1;
    if (mm==13)
    {
    mm=1;
    aa++;
    }
    musttest=false;

    }
    else //jour du mois en cours
    {
    jj=idxP;
    mm=dateA.mois;
    musttest=true;

    }
    var alt = "";
    if (jourFeriee[jj+"-"+mm] != null)
    {
    alt = jourFeriee[jj+"-"+mm];
    }
    htm+="<td class=\""+testTravail(dateS,musttest,xx,jj,mm,aa)+"\" onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\"document.getElementById('"+ki+"').dateS=strucDate(new Date("+aa+","+(mm-1)+","+jj+"));document.getElementById('"+ki+"').value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';document.getElementById('"+ki+"').style.color='black';document.getElementById('"+sourceid+"').style.visibility='hidden';\"><span  alt = \""+alt+"\"title=\""+alt+"\">"+jj+"</span></td>";//testTravail(dateS,musttest,xx,jj,mm,aa)+"/"+
    }
    htm+="</tr>"
    }//-------------------------
    if(seetoday)
    {
    htm+="<tr>";
    htm+="<td colspan='7' class=\"todayTD\"><a href=\"javascript:document.getElementById('"+ki+"').dateS=strucDate(new Date("+dnow.annee+","+(dnow.mois-1)+","+dnow.jour+"));document.getElementById('"+ki+"').value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';document.getElementById('"+ki+"').style.color='black';void(0);\" class=\"today\">"+today+"</a></td>";
    htm+="</tr>"
    }
    htm+="</table>"
    //affiche le tableau
    document.getElementById(sourceid).innerHTML=htm;
    document.getElementById(sourceid).style.visibility="";
    }
    else
    {
    //ferme le calendrier
    if (fermable_microcal)
      CalendarHide(ki,sourceid);
    }
    }

    function CalendarHide(ki,sourceid)
    {
    cc = setTimeout("document.getElementById('"+ki+"').process=false;document.getElementById('"+sourceid+"').style.visibility='hidden';",500);
    }
    var cc=false;
    </script>
    </head>
    <body style="margin:0px">
    <center>
    <br><br><b>micro-calendrier <i>par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br>modified by EL / (Emmanuel LELEU) / v1.1 <br><br>
    Saisissez une date au format JJ/MM/AAAA
    <table cellpadding="0" cellspacing="0">
    <tr><td>DateDebut</td><td><input type="text" maxlength="10" id="dateDebut" value="" onfocus="view_microcal(strucDate(new Date()),true,true,this.id,'microcal',-1,0);" onblur="CalendarHide(this.id,'microcal');" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
    <tr><td></td><td><div id="microcal" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div></td></tr>
    <tr><td>DateFin</td><td><input type="text" maxlength="10" id="dateDebut2" value="" onfocus="view_microcal(strucDate(new Date()),true,true,this.id,'microcal2',-1,0);" onblur="CalendarHide(this.id,'microcal2');" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
    <tr><td></td><td><div id="microcal2" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div></td></tr>
    </table>
    <center>
    </body>
    </html>

  • signaler à un administrateur
    Commentaire de amrounix le 09/05/2008 09:29:21

    mdr, sympa ces modif, mais ma prochaine version est mieux ! (et oui c possible) il est encore dans le four, mais j'ai fait un calendrier hyper super mega utra parametrable !
    chaque champ est parametrable, on peut la visualiser ou pas

    amélioration :
    -affichage du titre
    -barre de navigation d'annee
    -barre de navigation de mois
    -affichage du mois ou menu déroulant du mois
    -affichage de l'année (ou menu déroulant année de début et fin param)
    -affichage de la semaine
    -personalisation des styles
    -affichage de plusieur calendrier dans la mm page
    -tjrs compatible FF

    @+ bande d'impatient ! lol

    un petit apercu du code :


    <html>
    <head>
    <style>
    input   {border:1px blue solid;width:80px;}
    body   {font-family:Tahoma;font-size:12px}
    td      {font-family:Tahoma;font-size:12px}

    .tabloCal td {font-size:10px;font-family:Tahoma;text-align:center;margin : 0px;}
    .tabloCal_entete {font-size:10px;font-family:Tahoma;width:90px;margin : 0px;width:100%}
    #divCal {position:absolute;border:1px red dashed;background:#ffffff;}
    </style>

    <script language="javascript">
    //variable globale

    var pDefaut =
    {
    "mois" : new Array("Janvier","F&eacute;vrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","D&eacute;cembre"),
    "jour" : new Array("Di","Lu","Ma","Me","Je","Ve","Sa"),
    "titre" : "<b>SLC Calendar</b>",
    "debutSemaine" : 0, //debut de la semaine 0=dim,1=lun,...
    "jourPause" : {0:true,6:true},//jour de pause de la semaine
    "jourFeriee": {"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"} ,
    "visuSemaine": true,"visuJour": true,"visuMois": true,"visuAnnee": true, "selectMois" : true, "selectAnnee" : true, "stopAnnee" : new Array(-5,5),
    "visuAvant" : true, "visuDate" : true,"visuApres" : true,
    "naviguerMois" : true, "naviguerMoisMoins" : "-","naviguerMoisPlus" : "+", //barre de naviagation par mois
    "naviguerAnnee" : true, "naviguerAnneeMoins" : "<","naviguerAnneePlus" : ">", //barre de naviagation par annee
    "format" : "%j/%m/%a" //format de sortie : %j = jour, %m = mois, %a =année
    }

    var donneeCal = {};

    /*

    //structure la date
    function strucDate(dateX)
    {return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth(),"annee":dateX.getFullYear()};}

    //retourne le ième jour du 1er du mois
    function premJourMois(mois,annee)
    {return (new Date(annee,mois-1,1).getDay());}

    //selection de la zone avec la souris
    function choix(koi,code)
    {
    if (code)
    {  select_old= koi.style.background;
       koi.style.background ='#c0c0FF';
    }
    else
    {
    koi.style.background =select_old;
    }
    }

    function testTravail(oldX,xx,jj,mm,aa)
    {
    styleX="";
    styleX+=(oldX)?"":"color:#e0e0e0;";
    styleX+="cursor:hand;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";
    if (jourPause[xx]||jourFeriee[jj+"-"+mm]!=null) styleX+="background:#f0f0f0;";
    if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee) styleX+="border:2px red solid;";
    return styleX;
    }
    */

    //Retourne le nombre de jour du 1er du mois en cours depuis le 1er janvier (num de semaine)
    function nbJAnnee(dateS){
    //test si année bissextile
    function bissextile(annee) {
    return (annee%4==0 && annee %100!=0 || annee%400==0);
    }
    var nb_mois=[0,31,59,90,120,151,181,212,243,273,304,334];
    nb=nb_mois[dateS.getMonth()] ;  //+dateS.jour-1
    if (bisse