begin process at 2012 02 14 03:45:38
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Date & Heure

 > MICRO-CALENDAR

MICRO-CALENDAR


 Information sur la source

Note :
7,5 / 10 - par 2 personnes
7,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Date & Heure Classé sous :calendrier, calendar, agenda, date Niveau :Initié Date de création :04/07/2008 Date de mise à jour :07/06/2009 20:06:17 Vu / téléchargé :14 854 / 871

Auteur : amrounix

Ecrire un message privé
Site perso
Commentaire sur cette source (26)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
affiche un calendrier sous une zone de saisie
version 4.2 de mon calendrier








****listes des paramètres du calendrier :

mois : tableau contenant la liste des libellées des mois
type : new Array()
valeur par défaut :
new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre")

jour : tableau contenant la liste des libellées des jours (version courte)
type : new Array()
valeur par défaut : new Array("Di","Lu","Ma","Me","Je","Ve","Sa")

jLib : tableau contenant la liste des libellées des jours (version longue)
type : new Array()
valeur par défaut : new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi")

titre : titre du calendrier affiché en entête, si valeur = "" alors n'affiche pas le titre
type : String
valeur par défaut : "micro-calendar"

aujourdhui : libellé affiché en bas correspondant au raccourci de la date du jour,
type : String
valeur par défaut : "aujourd'hui"

debutSemaine : index correspondant au 1er jour de la semaine, 0=dim,1=lun,2=mar,3=mer,4=jeu,5=ven,6=sam
type : int
valeur par défaut : 1

jPause : tableau avec les index des jours correspondant aux jours des week-end, la clef et l'index du jour la valeur = true
type: Map
valeur par défaut : {6:true,0:true}  correspond à (samedi & dimanche)

jFeriee: tableau avec la liste des jours fériées, la clef correspond à "jj-mm" (jour-mois) et la valeur le libellé du jour férié
type : Map
valeur par défaut :
{"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 : libellé affiché pour la navigation du mois précédent
type : String
valeur par défaut : "-"

moisPlus : libellé affiché pour la navigation du mois suivant
type : String
valeur par défaut : "+"

anneeMoins : libellé affiché pour la navigation de l'année précédent
type : String
valeur par défaut : "<"

anneePlus : libellé affiché pour la navigation de l'année suivant
type : String
valeur par défaut : ">"


format: format de la date de sortie les caractère %j,%m,%a,... seront remplacer par leurs valeurs en fonction des correspondance
%j : retourne le jour avec zero devant si <10
%k : retourne le jour
%d : retourne le libellé du jour : Lundi, Mardi, Mercredi,Jeudi,Vendredi, Samedi, Dimanche
%m : retourne le mois avec zero devant si <10
%n : retourne le mois
%p : retourne le libellé du mois : Janvier, Fervrier, Mars, Avril, Mai, Juin, Juillet, Aout, Septembre, Octobre, Novembre, Decembre
%a : retourne l'année sur 4 positions
%y : retourne l'année sur 2 positions
type : String
valeur par défaut : "%j/%m/%a" correspondant à jour/mois/année

date : utiliser en interne, remplacer par la date sélectionnée (utiliser avec les calendriers liés)
type : Date
valeur par défaut : null

ddeb : identifiant du calendrier de la date de début (correspond à l'id de l'input)
type : String
valeur par défaut : ""

dfin : identifiant du calendrier de la date de fin(correspond à l'id de l'input)
type : String
valeur par défaut : ""


dateMin : date minimum du calendrier, ex: si dateMin = new Date(2009,0,1) alors on ne pourra pas sélectionner de date avant le 1er Janvier 2009
type : Date
valeur par défaut : null

dateMax : date maximum du calendrier, ex: si dateMax = new Date(2009,11,31) alors on ne pourra pas sélectionner de date apres le 31 décembre 2009
type : Date
valeur par défaut : null

****listes des styles :
en fonction des jours, les styles sont emboités de la façon suivant :

<div class='divCal'>
<table>
<tr>
<td colspan='8' class='zoneTitre' >
[titre]
</td>
</tr>
<tr>
<td colspan='8'>
<table>
<tr>
<td class='zoneNav'> [<] </td>
<td class='zoneNav'> [-] </td>
<td class='zoneMois'> [mois] </td>
<td class='zoneNav'> [+] </td>
<td class='zoneNav'> [>] </td>
</tr>
</table>
</td>
</tr>
...
<tr>
<td class='nSemaine'>
[Sem]
</td>
...
<td>
<a class='tdx' href='#' onclick='...'>
  <div class='enWeekEnd' > <-- présent si jour = week-end
<div class='enFeriee' title='...'> <-- présent si jour = fériée
   <div class='enMois' > <-- présent si mois = mois en cours
  <div class='aujourdhui'> <-- présent si jour = aujourd'hui
   [Jour] <-- jour du mois
  </div>
   </div>
</div>
  </div>
</a>
</td>
...
</tr>
<tr>
<td colspan='6'><a class='tdxNow' href='#' onclick='...'>[aujourdhui]</a></td>
<td colspan='2' class='zoneAnnee'>[annee]</td>
</tr>
</table>
</di v>





Source

  • /****************
  • * script MICRO-CAL (V4.2) par Amroune Selim (amrounix@gmail.com)
  • *toutes copies, diffusions,modifications ou améliorations sont autorisées
  • ****************/
  • var pDefaut = { /*variable globale*/
  • "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-calendar",
  • "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*/
  • "date" : null, "ddeb" : "", "dfin" : "",
  • "dateMin" : null, "dateMax" : null
  • }
  • var tempo = new Array(); /*gestion de la fermeture des calendriers quand on perd le focus*/
  • var nomove={"TR":0,"CENTER":0,"B":0,"P":0,"U":0,"I":0,"DIV":0,"A":0,"FONT":0,"LI":0,"PRE":0,"SPAN":0,"SUB":0,"SUP":0,"FORM":0};
  • //var nomove={"TD":0,"TABLE":0};
  • function _(x) /*simplification des appels*/
  • {return document.getElementById(x);}
  • 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 dateMin(dateA,dateB)
  • {
  • return (dateB==null||(dateA!=null&&(dateA.getFullYear()<dateB.getFullYear()
  • ||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()<dateB.getMonth())
  • ||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()==dateB.getMonth()&&dateA.getDate()<dateB.getDate())
  • ))) ? dateA:dateB
  • }
  • function dateMax(dateA,dateB)
  • {
  • return (dateB==null||(dateA!=null&&(dateA.getFullYear()>dateB.getFullYear()
  • ||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()>dateB.getMonth())
  • ||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()==dateB.getMonth()&&dateA.getDate()>dateB.getDate())
  • ))) ? dateA:dateB
  • }
  • function dateBefore(dateA,dateB) /*compare 2 date et retourne true si dateA<=dateB*/
  • {
  • return dateA!=null&&dateB!=null&&(dateA.getFullYear()<dateB.getFullYear()||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()<dateB.getMonth())||
  • (dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()==dateB.getMonth()&&dateA.getDate()<dateB.getDate()));
  • }
  • function htmNavChk(dateA,dateB,src,srcId,mm,yy,txt) /*methode pour afficher les infos de navigation*/
  • {
  • return (dateBefore(dateA,dateB)) ?
  • "<td onclick=\"\">&nbsp;</td>"
  • : ("<td class='zoneNav' onclick=\"return gCal('"+src+"','"+srcId+"',"+mm+","+yy+")\">"+txt+"</td>");
  • }
  • function gCal(src,srcId,mm,yy) /*génère le calendrier*/
  • {
  • if (tempo!=null&&tempo[srcId]!=null)
  • {
  • clearTimeout(tempo[srcId]);
  • _(src).focus();
  • }
  • if (mm<0) {mm+=12;yy--;} /*changment de mois/année*/
  • else if (mm>11) {mm-=12;yy++;}
  • dnow=new Date(); /*date du jour*/
  • param=_(srcId).parametre; /*parametre par defaut*/
  • ddeb = null; dfin = null;
  • if (param["ddeb"]!="" && _(param["ddeb"]+"_cal")!=null && _(param["ddeb"]+"_cal").parametre.date != null)
  • ddeb = _(param["ddeb"]+"_cal").parametre.date;
  • if (param["dfin"]!="" && _(param["dfin"]+"_cal")!=null && _(param["dfin"]+"_cal").parametre.date != null)
  • dfin = _(param["dfin"]+"_cal").parametre.date;
  • htm="<table cellpadding=0 cellspacing=0 >";
  • /*titre*/
  • if (param["titre"]!= null )
  • {htm+="<tr><td colspan='8' class='zoneTitre' >"+param["titre"]+"</td></tr>";}
  • /*zone de navigation*/
  • htm+="<tr><td colspan='8'><table width='100%' cellpadding=0 cellspacing=0 ><tr>";
  • htm+=htmNavChk(new Date(yy-1,mm,1),dateMax(ddeb,param["dateMin"]),src,srcId,mm,yy-1,param["anneeMoins"]);
  • htm+=htmNavChk(new Date(yy,mm,0),dateMax(ddeb,param["dateMin"]),src,srcId,mm-1,yy,param["moisMoins"]);
  • htm+="<td class='zoneMois'>"+param["mois"][mm]+"</td>";
  • htm+=htmNavChk(dateMin(dfin,param["dateMax"]),new Date(yy,mm+1,1),src,srcId,mm+1,yy,param["moisPlus"]);
  • htm+=htmNavChk(dateMin(dfin,param["dateMax"]),new Date(yy+1,mm,1),src,srcId,mm,yy+1,param["anneePlus"]);
  • htm+="</tr></table></td></tr>";
  • /*jours de la semaine*/
  • 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++) /*affiche les jours de la semaine*/
  • {htm+="<td>"+param["jour"][(j+pJs)%7]+"</td>";}
  • htm+="</tr>";
  • avantFinMois=true;idx=0;
  • idxSem=parseInt(nbJ(new Date(yy,mm,1))/7+1,10); /*index de la semaine*/
  • while(avantFinMois) /*boucle jusqu'a la fin du mois */
  • {
  • htm+=(idx%7==0)?"<tr><td class='nSemaine' >"+idxSem+"</td>":""; /*affiche le numero de semaine*/
  • if (dateBefore(dateX,dateMax(ddeb,param["dateMin"]))||dateBefore(dateMin(dfin,param["dateMax"]),dateX))
  • htm+="<td style='text-decoration:line-through;'><a class='tdx' href='#'>"+subDiv(param,idx,dateX,mm,aa,0)+"</b></td>";
  • else
  • 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>"; idxSem++;}
  • dateX= new Date(dateX.getFullYear(),dateX.getMonth(),dateX.getDate()+1);
  • if (idx>7&&idx%7==0&&dateX.getMonth()!=mm)
  • {avantFinMois=false;}
  • }
  • htm+="<tr><td colspan='6'>&nbsp;&nbsp;";
  • if (!dateBefore(dnow,dateMax(ddeb,param["dateMin"]))&&!dateBefore(dateMin(dfin,param["dateMax"]),dnow))
  • htm+="<a class='tdxNow' href='#' onclick=\"javascript:choix("+dnow.getFullYear()+","+dnow.getMonth()+","+dnow.getDate()+",'"+srcId+"','"+src+"')\" >"+param["aujourdhui"]+"</a>";
  • else htm+="&nbsp;"
  • /*annee*/
  • htm+="</td><td colspan='2' class='zoneAnnee'>"+yy+"</td></tr></table>";
  • //alert(htm);
  • _(srcId).innerHTML=htm;
  • return false;
  • }
  • function addZero(val) /*ajoute un zero devant*/
  • { return ((val<10)?"0":"")+val;}
  • function choix(aa,mm,jj,srcId,src)
  • {
  • var datePos=new Date(aa,mm,jj);
  • var jour = datePos.getDay();
  • param=_(srcId).parametre;
  • param.date = datePos;
  • 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());
  • _(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 getMinx(tab,mini)
  • {
  • var rc=mini,code="";
  • for (k in tab)
  • {
  • if (tab[k]>mini && rc<tab[k]) {rc=tab[k]; code = k; }
  • }
  • return code;
  • }
  • function decodeDate(val,format,defaut)
  • {
  • var dnow = defaut,jj= dnow.getDate(),mm = dnow.getMonth(), aa= dnow.getFullYear();
  • var parx = {"%j":"([0123][0-9])","%k":"([0123]?[0-9])","%d":"("+(param["jLib"].join("|"))+")","%m":"([01][0-9])","%n":"([01]?[0-9])",
  • "%p":"("+(param["mois"].join("|"))+")","%a":"([12][0-9]{3})","%y":"([0-9]{2})"};
  • var ff= format,df = format;
  • for (e in parx)
  • {
  • ff = ff.replace(e,parx[e]);
  • df = df.replace(e,"("+e+")");
  • }
  • tablo = (new RegExp(ff)).exec(val);
  • clef = (new RegExp(df)).exec(format);
  • if (tablo!=null&&clef!=null)
  • {
  • for (i = 0; i< tablo.length;i++)
  • {
  • switch(clef[i])
  • {
  • case "%j": case "%k" : jj=parseInt(tablo[i],10); break;
  • case "%m": case "%n" : mm=parseInt(tablo[i],10)-1; break;
  • case "%p" : mm=0; while(mm<param["mois"].length&&param["mois"][mm]!=tablo[i]){mm++;}; break;
  • case "%a": aa = parseInt(tablo[i],10); break;
  • }
  • }
  • }
  • return new Date(aa,mm,jj);
  • }
  • function visuCal(src,paramX)
  • {
  • if (src.id=="") /*si il n'y pas d'ID on en créé un*/
  • {
  • cpt=0;
  • while(_("microcal"+cpt) != null)
  • {cpt++;}
  • src.id="microcal"+cpt;
  • }
  • pos_= posxy(src,0,src.offsetHeight );
  • srcId = src.id+"_cal"; /*id du div du calendrier*/
  • dnow= new Date();
  • if (_(srcId)==null) /*si il existe pas on le créé*/
  • {
  • 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 = decodeDate(src.value,param.format,new Date());
  • div = document.createElement('div');
  • div.setAttribute('id',srcId);
  • div.style.position = 'absolute';
  • div.style.top = pos_.y + 'px';
  • div.style.left = pos_.x + 'px'; /*this.deltaG = 0; */
  • div.className = 'divCal';
  • div.parametre = param;
  • document.body.appendChild(div);
  • gCal(src.id,srcId,dnow.getMonth(),dnow.getFullYear(),param);
  • } else
  • { div = _(src.id+"_cal");
  • div.style.display='inline';/*affiche le calendrier*/
  • div.style.top = pos_.y + 'px';
  • div.style.left = pos_.x + 'px'; /*this.deltaG = 0; */
  • }
  • }
  • function masqueCal(src)
  • {tempo[src.id+"_cal"]=window.setTimeout("_('"+src.id+"_cal').style.display='none'",500);}
  • /*retourne la position en {x,y} d'un element */
  • function posxy(rst,x,y)
  • {
  • if ( rst.style!=null && rst.style.position == 'absolute' ) { return {"x":x + rst.offsetLeft,"y":y + rst.offsetTop} }
  • else if (rst.parentNode == null ) { return {"x":x,"y":y} }
  • else { return (nomove[rst.tagName]==0) ? posxy(rst.parentNode,x,y) : posxy(rst.parentNode,x+rst.offsetLeft,y+rst.offsetTop) ; }
  • }
/****************
* script MICRO-CAL (V4.2) par Amroune Selim (amrounix@gmail.com)
*toutes copies, diffusions,modifications ou améliorations sont autorisées
****************/

var pDefaut = { /*variable globale*/
"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-calendar",
"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*/ 
"date" : null, "ddeb" : "", "dfin" : "",
"dateMin" : null, "dateMax" : null
}

var tempo = new Array(); /*gestion de la fermeture des calendriers quand on perd le focus*/
var nomove={"TR":0,"CENTER":0,"B":0,"P":0,"U":0,"I":0,"DIV":0,"A":0,"FONT":0,"LI":0,"PRE":0,"SPAN":0,"SUB":0,"SUP":0,"FORM":0};
//var nomove={"TD":0,"TABLE":0};

function _(x) /*simplification des appels*/
	{return document.getElementById(x);}

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 dateMin(dateA,dateB)
{
return (dateB==null||(dateA!=null&&(dateA.getFullYear()<dateB.getFullYear()
					  ||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()<dateB.getMonth())
					  ||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()==dateB.getMonth()&&dateA.getDate()<dateB.getDate())
					  ))) ? dateA:dateB
}

function dateMax(dateA,dateB)
{
return (dateB==null||(dateA!=null&&(dateA.getFullYear()>dateB.getFullYear()
					  ||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()>dateB.getMonth())
					  ||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()==dateB.getMonth()&&dateA.getDate()>dateB.getDate())
					  ))) ? dateA:dateB
}

function dateBefore(dateA,dateB) /*compare 2 date et retourne true si dateA<=dateB*/
{
return dateA!=null&&dateB!=null&&(dateA.getFullYear()<dateB.getFullYear()||(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()<dateB.getMonth())||
(dateA.getFullYear()==dateB.getFullYear()&&dateA.getMonth()==dateB.getMonth()&&dateA.getDate()<dateB.getDate()));
}

function htmNavChk(dateA,dateB,src,srcId,mm,yy,txt) /*methode pour afficher les infos de navigation*/
{
return (dateBefore(dateA,dateB)) ? 
		"<td onclick=\"\">&nbsp;</td>"
		: ("<td class='zoneNav' onclick=\"return gCal('"+src+"','"+srcId+"',"+mm+","+yy+")\">"+txt+"</td>");
}

function gCal(src,srcId,mm,yy) /*génère le calendrier*/
{
if (tempo!=null&&tempo[srcId]!=null)
{
	clearTimeout(tempo[srcId]);
	_(src).focus();
}

if (mm<0) {mm+=12;yy--;} /*changment de mois/année*/
	else if (mm>11) {mm-=12;yy++;}
	
dnow=new Date(); /*date du jour*/
param=_(srcId).parametre; /*parametre par defaut*/
ddeb = null; dfin = null;

if (param["ddeb"]!="" && _(param["ddeb"]+"_cal")!=null && _(param["ddeb"]+"_cal").parametre.date != null)
	ddeb = _(param["ddeb"]+"_cal").parametre.date;
if (param["dfin"]!="" && _(param["dfin"]+"_cal")!=null && _(param["dfin"]+"_cal").parametre.date != null)
	dfin = _(param["dfin"]+"_cal").parametre.date;

htm="<table cellpadding=0 cellspacing=0 >";
/*titre*/
if (param["titre"]!= null )
{htm+="<tr><td colspan='8' class='zoneTitre' >"+param["titre"]+"</td></tr>";}
/*zone de navigation*/
htm+="<tr><td colspan='8'><table width='100%' cellpadding=0 cellspacing=0 ><tr>";
htm+=htmNavChk(new Date(yy-1,mm,1),dateMax(ddeb,param["dateMin"]),src,srcId,mm,yy-1,param["anneeMoins"]);
htm+=htmNavChk(new Date(yy,mm,0),dateMax(ddeb,param["dateMin"]),src,srcId,mm-1,yy,param["moisMoins"]);
htm+="<td class='zoneMois'>"+param["mois"][mm]+"</td>";
htm+=htmNavChk(dateMin(dfin,param["dateMax"]),new Date(yy,mm+1,1),src,srcId,mm+1,yy,param["moisPlus"]);
htm+=htmNavChk(dateMin(dfin,param["dateMax"]),new Date(yy+1,mm,1),src,srcId,mm,yy+1,param["anneePlus"]);
htm+="</tr></table></td></tr>";
/*jours de la semaine*/
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++) /*affiche les jours de la semaine*/
	{htm+="<td>"+param["jour"][(j+pJs)%7]+"</td>";}
htm+="</tr>";
avantFinMois=true;idx=0;
idxSem=parseInt(nbJ(new Date(yy,mm,1))/7+1,10); /*index de la semaine*/

while(avantFinMois) /*boucle jusqu'a la fin du mois */
{
	htm+=(idx%7==0)?"<tr><td class='nSemaine' >"+idxSem+"</td>":""; /*affiche le numero de semaine*/
	if (dateBefore(dateX,dateMax(ddeb,param["dateMin"]))||dateBefore(dateMin(dfin,param["dateMax"]),dateX))
		htm+="<td style='text-decoration:line-through;'><a class='tdx' href='#'>"+subDiv(param,idx,dateX,mm,aa,0)+"</b></td>";
	else
		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>"; idxSem++;}
	dateX= new Date(dateX.getFullYear(),dateX.getMonth(),dateX.getDate()+1);
	if (idx>7&&idx%7==0&&dateX.getMonth()!=mm)
	{avantFinMois=false;}
}
htm+="<tr><td colspan='6'>&nbsp;&nbsp;";
if (!dateBefore(dnow,dateMax(ddeb,param["dateMin"]))&&!dateBefore(dateMin(dfin,param["dateMax"]),dnow))
	htm+="<a class='tdxNow' href='#' onclick=\"javascript:choix("+dnow.getFullYear()+","+dnow.getMonth()+","+dnow.getDate()+",'"+srcId+"','"+src+"')\" >"+param["aujourdhui"]+"</a>";
	else htm+="&nbsp;"
/*annee*/
htm+="</td><td colspan='2' class='zoneAnnee'>"+yy+"</td></tr></table>";
//alert(htm);
_(srcId).innerHTML=htm;
return false;
}

function addZero(val)  /*ajoute un zero devant*/
	{ return ((val<10)?"0":"")+val;}

function choix(aa,mm,jj,srcId,src)
{
var datePos=new Date(aa,mm,jj);
var jour = datePos.getDay();
param=_(srcId).parametre;
param.date = datePos;
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());
_(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 getMinx(tab,mini)
{
var rc=mini,code="";
for (k in tab)
{
 if (tab[k]>mini && rc<tab[k]) {rc=tab[k]; code = k; }
}
return code;
}

function decodeDate(val,format,defaut)
{
var dnow = defaut,jj= dnow.getDate(),mm = dnow.getMonth(), aa= dnow.getFullYear();
var parx = {"%j":"([0123][0-9])","%k":"([0123]?[0-9])","%d":"("+(param["jLib"].join("|"))+")","%m":"([01][0-9])","%n":"([01]?[0-9])",
			"%p":"("+(param["mois"].join("|"))+")","%a":"([12][0-9]{3})","%y":"([0-9]{2})"};
var ff= format,df = format;
for (e in parx)
{
	ff = ff.replace(e,parx[e]);
	df = df.replace(e,"("+e+")");
}
tablo = (new RegExp(ff)).exec(val);
clef = (new RegExp(df)).exec(format);
if (tablo!=null&&clef!=null)
{
	for (i = 0; i< tablo.length;i++)
	{
		switch(clef[i])
		{
			case "%j": case "%k" : jj=parseInt(tablo[i],10); break;
			case "%m": case "%n" : mm=parseInt(tablo[i],10)-1; break;
			case "%p" : mm=0; while(mm<param["mois"].length&&param["mois"][mm]!=tablo[i]){mm++;};  break;
			case "%a": aa = parseInt(tablo[i],10); break;
		}
	}
}
return new Date(aa,mm,jj);
}

function visuCal(src,paramX)
{
if (src.id=="") /*si il n'y pas d'ID on en créé un*/
	{
	cpt=0;
	while(_("microcal"+cpt) != null) 
		{cpt++;}
	src.id="microcal"+cpt;
	}
pos_= posxy(src,0,src.offsetHeight );
srcId = src.id+"_cal"; /*id du div du calendrier*/
dnow= new Date();
if (_(srcId)==null) /*si il existe pas on le créé*/
{
	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 = decodeDate(src.value,param.format,new Date()); 
	div = document.createElement('div');
	div.setAttribute('id',srcId);
	div.style.position = 'absolute';
	div.style.top = pos_.y + 'px';
	div.style.left = pos_.x + 'px'; /*this.deltaG = 0; */
	div.className = 'divCal';
	div.parametre = param;
	document.body.appendChild(div);
	gCal(src.id,srcId,dnow.getMonth(),dnow.getFullYear(),param);
} else
{   div = _(src.id+"_cal");
	div.style.display='inline';/*affiche le calendrier*/
	div.style.top = pos_.y + 'px';
	div.style.left = pos_.x + 'px'; /*this.deltaG = 0; */
}

}

function masqueCal(src)
	{tempo[src.id+"_cal"]=window.setTimeout("_('"+src.id+"_cal').style.display='none'",500);}
	
/*retourne la position en {x,y} d'un element */
function posxy(rst,x,y)
{
if ( rst.style!=null && rst.style.position == 'absolute' )  { return {"x":x + rst.offsetLeft,"y":y + rst.offsetTop} } 
else if (rst.parentNode == null )  { return {"x":x,"y":y} } 
else  { return (nomove[rst.tagName]==0) ? posxy(rst.parentNode,x,y) : posxy(rst.parentNode,x+rst.offsetLeft,y+rst.offsetTop)   ;  }
}

 Conclusion

séparation des fichiers + ajout d'exemples

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

08 juillet 2008 09:13:51 :
liste des modifications 8/7/2008 : -passage en DOM -simplication de l'appel de la méthode
08 juillet 2008 09:17:01 :
-passage en DOM -simplification de l'appel de la méthode
08 juillet 2008 11:35:22 :
-ajout de la recherche <input type="date" ...>
08 juillet 2008 14:15:42 :
-correction pour tourner sous IE
29 octobre 2008 13:49:30 :
entièrement remodelé et plus simple que les versions précédentes
13 mai 2009 12:59:47 :
séparation des fichiers + ajout d'exemples
13 mai 2009 16:20:05 :
correction d'une petite erreur de frappe
13 mai 2009 16:22:19 :
...
03 juin 2009 22:01:46 :
-rectification du positionnement -prise en charge de l'arabe (utf-8)
03 juin 2009 22:13:07 :
-correction d'une erreur
07 juin 2009 20:06:11 :
version 4.2 : correction d'un bug sous IE, prise en charge d'une date par défaut
07 juin 2009 20:06:17 :
version 4.2 : correction d'un bug sous IE, prise en charge d'une date par défaut

 Sources du même auteur

Source avec Zip Source avec une capture TROUVER UN ITINÉRAIRE AVEC GOOGLE MAP
Source avec Zip Source avec une capture DEBLOCK ME - CASSE TÊTE
Source avec Zip Source avec une capture CRYPTOR - PROTEGEZ VOS CODES SOURCES !
Source avec Zip Source avec une capture CODE UTF-8
Source avec Zip Source avec une capture QUIZZ MASTER : 2000 QUESTIONS POUR TESTER VOTRE CULTURE

 Sources de la même categorie

Source avec Zip CALENDRIER ANNUEL UNIVERSEL AVEC SAINTS DU CALENDRIER ET FÊT... par 007Julien
OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand
SAINT DU JOUR par tefa24600
Source avec Zip Source avec une capture NIPCLOCK 1.2 par neep
COMPTE À REBOURS POUR ÉVÉNEMENTS À RÉPÉTITION par CSIBern

 Sources en rapport avec celle ci

Source avec une capture AFFICHE UN CALENDRIER SOUS UNE ZONE DE SAISIE par amrounix
Source avec Zip 2 VERSIONS DE CALENDRIER DATEUR par jperre
Source avec Zip CALENDRIER par mlle_bee
Source avec Zip Source avec une capture CALENDRIER JAVASCRIPT par Anthed
UN CALENDRIER AVEC DES INPUT TEXT QUI CONTROLE LES ANNÉES BI... par philippe

Commentaires et avis

Commentaire de amrounix le 04/07/2008 12:49:45

j'attends de finir mon code avant de tout mettre dans un fichier .js et écrire une doc qui va avec !
si vous avez des questions n'hésitez pas !

@+

Commentaire de bultez le 04/07/2008 13:33:31


je ne voudrais ni être rabat-joie ni éreinteur stérile,

mais "ULTIMATE" ? donc on ne fera jamais mieux ?
"Niveau initié" ? pour celui qui l'a écrit
ou pour ceux qui vont utiliser ?
"ultra paramétrable" ? où ?
je ne dis pas que ce que tu as fait est mauvais ! loin de là !
je ne me permettrai aucune note, ni aucune critique sur le code  !
mais à part afficher un calendrier, ce n'est que la 68957892ème
source de ce type, ça fait quoi de plus ? ou je n'ai pas tout vu ?

Commentaire de mickaelpfr le 04/07/2008 15:22:52

+1 avec bultez :

code de paramétrage , ultra paramétrable ? ou ultra bordélique ...
de plus tu dois créer autant de calendrier que de champs input donc très limité , pas de possibilité de le gérer de façon non intrusif ?

même le code est un peu trop bordélique selon moi ...

va faire un tour sur www.developpez.com section javascript puis dans les contributions , il y en a un très propre ...

Commentaire de XtremDuke le 04/07/2008 17:09:20

"htm+="<tr>";"

>> Faut essayer d'arrêter de construire tout avec l'innerHTML. Essai de construire ton document via le DOM.

"<script language="javascript">"

>> C'est fini ça. Dorénavant, on déclare par <script type="text/javascript">

"htm+="<tr><td style=\"width:100%\"><table border='0' cellspacing='0' cellpadding='0' style=\"width:100%\" class=\"SLCjournee\" >"; "

>> Un coup tu utilises les CSS, un coup non...

>> Déclare ton doctype

>> Tes méthodes commencent à dater...

"<br><br><br> "

>> Heureusement que tu n'a pas à faire un espacement d'une demie page...

Commentaire de ralecul le 05/07/2008 11:45:57

XtremDuke : "Faut essayer d'arrêter de construire tout avec l'innerHTML. Essai de construire ton document via le DOM."
>> Je viens de refaire le DOM Builder de Prototype et j'en ai profité pour faire un petit benchmark.
Et bien à mon grand regret innerHTML et presque 10x plus rapide que la méthode DOM classique.
Et ces proportions changent beaucoup entre les différents navigateurs (Safari étant le plus rapide en DOM à ma grande surprise)

En plus des différences de performance, la méthode DOM a le désavantage de ne pas être cross-browser sans l'ajout d'un DOM Builder (encore et toujours à cause de IE, sniff...). Donc sans DOM Builder la meilleure solution reste le innerHTML, avec un DOM Builder tout dépend si l'on ajoute énormément d'élément.

PS  : je posterais mon DOM Builder et le benchmark when it's done...

Commentaire de mickaelpfr le 05/07/2008 13:33:49

Je viens de refaire le DOM Builder de Prototype et j'en ai profité pour faire un petit benchmark.
Et bien à mon grand regret innerHTML et presque 10x plus rapide que la méthode DOM classique.

je suis intéressé pour voir ton code car niveau optimisation , je pense que tu fais fausse route , ( donc sans voir ton code je ne me prononcerais pas ... )

je suis partisan du dom , pour plein de raison :
- maintenance du code
- lisibilité
- COMPATIBILITE ( et si , malgré quelques adaptations ) il est beaucoup plus facile de passer par la construction d'éléments via le dom avec de minime différence ( comme tu le souligne avec un dom builder ) que de s'acharner a faire du innerHTML ... )

allez cessons de s'acharner sur un énième calendrier , la volonté était la :)

Commentaire de ffert le 07/07/2008 10:11:51

Nota : Web 3.0 devrait intégrer ce genre de "composants" en natif.
sous la forme : <input type="date" ...>


Nota bene : perso j'utilise ce calendrier là qui est génial : http://www.javascriptfr.com/code.aspx?ID=34725

salutations.

Commentaire de XtremDuke le 07/07/2008 15:16:13

"innerHTML et presque 10x plus rapide que la méthode DOM classique."

>> C'est a prendre avec des pincettes. Sous IE, c'est effectivement le cas, et même très largement le cas... C'est connu, IE a du mal a manipuler son propre DOM (suffit de voir un bench sur un 'getElementsByTagName'...). Cependant, sous les autres navigateurs (du moins testé sous Safari et Gecko), les différences ne sont pas aussi vertigineuses que tu le dis. En créent un millier de tableau, j'obtiens un petit 78ms en DOM Core contre 48ms en innerHTML. Je précise que c'est pour UN MILLIER de tableaux !

Commentaire de amrounix le 08/07/2008 09:27:44

HeLLo !
Et bien merci pour ces commentaires, il faut savoir accepter la critique pour avancer ! c'est vrai que "ultimate calendar" ca fait un peu prétentieux, c'est juste que j'ai du réécrire au moins une dixaine de fois ce code, avec tout plein de variante...
je métrise pas trop le DOM, mais je suis un grand bidouilleur, là j'ai réécrit mon programme (une fois de plus) sous cette technologie (plus de innerHTML !) mais j'ai un problème sous IE, je n'arrive pas à afficher le calendrier et je ne vois pas où se trouve le problème ??? (peut être à cause du tbody dans le table...je me pencherai dessus ce soir)
Et concernant DOM vs INNERHTML, si il n'y a que 30ms d'écart pour un millier de tableau, ca n'impactera pas sur le fonctionnement du programme, bien que je sois un partisan du innerHTML, faut savoir avancer et basculer en DOM !
sinon toujours aussi bordélique mon code ?

@+

Commentaire de amrounix le 08/07/2008 11:31:49

merci a FFERT pour ton idée, je l'ai implémenté et ca marche !
if suffit d'ajouter au onload :
new SLCcal(); pour rechercher tout les type = "date" et attribué un calendrier (même les input sans id)
ou bien new SLCcal(param); avec param = new parametre(); pour appliqué un paramétrage spécifique au type = date

Commentaire de mickaelpfr le 08/07/2008 16:31:26

non mais lol même ton titre ...
malgré une source plus propre ...

Commentaire de kazma le 13/05/2009 11:24:54 administrateur CS 8/10

par rapport aux souces dans le meme genre je trouve celui ci n'est pas tres long

Commentaire de amrounix le 13/05/2009 12:05:38

salut Kazma,
j'ai toujours fait en sort d'avoir des codes les + courts possible et les + fonctionnels :) d'ailleurs ce calendrier est passé en version 4 il y'a un moment déjà ... je fais une mise à jour

Commentaire de mickaelpfr le 13/05/2009 13:25:02

juste pour le style : http://dmouronval.developpez.com/calendrier/

Commentaire de amrounix le 13/05/2009 14:08:01

impressionnant, y'a eu du boulot dessus !

Commentaire de mickaelpfr le 13/05/2009 14:27:54

un peu ouep lol et la j'attaque la v3 :)
jette un coup d'oeil a la source ... rien de méchant pourtant juste du code bien structuré ...

Commentaire de kazma le 13/05/2009 15:48:53 administrateur CS

rien qu'un petit peut

mais c'est vrais c'est pas mal vu les effets et le design et le code est bien structure et dans une philosophie d'écriture moderne ( il est long  lol )y'a aussi qq chose que je trouve pas mal c'est d'avoir fait le graphique avec une seule image je connaissait pas.

Commentaire de mickaelpfr le 13/05/2009 15:57:56

^^
ça permet d'alléger le poid total et au final redistribuer le script plus facilement...
une fois la mise en page css comprise c'est assez simple

ps : j'ai passé beaucoup beaucoup de temps dessus ;)

Commentaire de kazma le 13/05/2009 16:07:59 administrateur CS

c'est sur

Commentaire de amrounix le 13/05/2009 16:17:40

tu devais vraiment t'ennuyer, lol ! je vois que tu as même ajouté une iframe derrière pr passer au dessus des select...
mais je préfère quand même mes 200 lignes de code avec plein de innerHTML ! :)
bonne continuation, c'est quoi la prochaine étape ? ton calendrier fera le café ? lol

moi je suis passé à la version 4 parce que j'y ai ajouter des liaisons entre les calendrier, c'est à dire que quand j'ai 2 zones input ddeb & dfin par exemple, la zone ddeb ne peut pas aller + loin que dfin et inversement dfin ne peut pas aller en dessous de ddeb ...

Commentaire de mickaelpfr le 13/05/2009 16:53:08

Prochaine version :
- Gestion des heures en option
- gestion des évènements au moment tu click ( par exemple pour une gestion ajax ou autre ;) )
- meilleur ergonomie, selection d'une date : jour + moi + année en 3 click Maximum ( quelque soit le moi ou l'année ^^ )
- nouveau design plus facile a skinner

Commentaire de amrounix le 07/06/2009 20:15:38

HeLLo, j'ai mis en ligne la version 4.2 de mon calendrier, le calendrier sera positionné par défaut en fonction de la date dans la zone de saisie.
Il détecte tout type de date en fonction du format choisi ex :
"20 Décembre 1979" et que format vous avez mis "%j %p %a"
ou bien "1979-12-20" si vous avez mis "%a-%m-%j",...
Bref j'ai mis un truc hyper technique qui s'appelle : decodeDate() que personne ne verra jamais ... lol

Commentaire de jijibzh le 07/08/2009 12:02:43 7/10

Pas assez de commentaire à mon goût.
J'essai d'intégrer ton code dans un site web; Un problème vient de m'apparaitre et tu sauras peut-être le résoudre.
l'affichage des calendriers est calculé par rapport à la position qu'auraient les input dans la div parent et non dans leur div effective. Je ne sais pas si c'est clair. Le calendrier ne prend pas en compte que les input puissent être dans une div décalées.
sinon je me trompe et pourrait tu m'expliquer comment rectifier cela ?

bien sinon, mais plus de commentaires serait génial (et un peu d'indentation) ;)

Commentaire de jijibzh le 07/08/2009 17:00:00

Solution trouvée !
Si cela arrive à d'autres que moi, voici une petite modification :
Remplacer : pos_= posxy(src,0,src.offsetHeight ); l.213
par
pos_ = new Array();
pos_ = getOffsets(_(src.id));

de même div.style.top = pos_.y + 'px'; l.229 et 238
par div.style.top = (pos_[1] + 18) + 'px';

et div.style.left = pos_.x + 'px'; l.230 et 239
par div.style.left = (pos_[0] + 18) + 'px';

puis supprimer entièrement la fonction :
function posxy

à remplacer par :
/* retourne la position en {x,y} d'un element sous forme de tableau */
function getOffsets(obj) {
    var offsetTop = obj.offsetTop;
    var offsetLeft = obj.offsetLeft;
    while ((obj = obj.offsetParent )!=null) {
        offsetTop += obj.offsetTop;
        offsetLeft += obj.offsetLeft;
    }
    return [offsetLeft, offsetTop];
}
---------------------------
Le calendrier s'affichera avec une meilleure précision dans votre page malgré des div différentes et/ou superposées. Normalement, ... en tout cas pour moi. Après je ne suis pas sûr de ma syntaxe, je ne connais rien au javascript. ça marche par tatonnement.
dites moi pour le résultat que vous aurez.

Une question sinon :
comment enlever la colonne des numéros de semaines ?

Commentaire de amrounix le 08/08/2009 00:35:48

HeLLo, alors si tu veux enlever le numéro de semaine remplace la ligne :
htm+=(idx%7==0)?"<tr><td class='nSemaine' >"+idxSem+"</td>":""; /*affiche le numero de semaine*/
par
htm+=(idx%7==0)?"<tr>":""; /*affiche le numero de semaine*/
et pour l'emplacement du calendrier, j'avais déjà trouvé une méthode pour corriger le repositionnement, il faut remplacer la méthode
function posxy(rst,x,y)
{...}
par
function posxy(rst,xx,yy) {
var cc = { x: xx, y: yy };
while (rst) {
cc.x += rst.offsetLeft;
cc.y += rst.offsetTop;
rst = rst.offsetParent;
}
return cc;
}

@+

Commentaire de jijibzh le 10/08/2009 09:32:47

Merci pour la réponse. J'ai pas essayé ta fonction posxy(), je ne connais rien au javascript donc je te fais confiance. La mienne est sûrement plus bordélique, j'ai adapté une fonction trouvée sur google à ton code. Mais elle semble équivalente.

Petite correction pour ta réponse au niveau de la semaine.
Si on écris cette ligne : htm+=(idx%7==0)?"<tr>":""; /*affiche le numero de semaine*/
Les n° jours se décalent vers la gauche mais pas les noms de jours (Lu, Ma, ...)
J'ai préféré écrire : htm+=(idx%7==0)?"<tr><td class='nSemaine' >"+""+"</td>":"";
ça permet de supprimer toute la colonne à priori, pourquoi ? je ne sais pas trop. Bidouillage !

Merci encore pour ce calendrier, je l'ai adapté relativement vite au site web, et il fonctionne à merveille, tellement simple à prendre en main et paramétrer à son gout.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Une question pour mon calendrier [ par syltouille ] Bonjour et bonne annee tout le monde.Mon premier souci de cette annee est:J'ai realise un calendrier en PHP avec des images pour chaque jour.- Je voud agenda calendrier [ par viperleparrain ] bon voial mon probleme sur mon site je veux integrer un calendrier de match pour indiquer&nbsp; kan on joue a kel heure un calendrier simple et foncti Calendrier- agenda modifiable [ par xaver ] Bonjourje suis &#224; la recherche d'un script pour obtenir un agenda-calendrier de m&#234;me design que l'agenda perp&#233;tuel&nbsp; mais avec l'opt Click sur une date du calendrier [ par fionalabelle ] Bonjour &#224; tous, <P class recherche calendrier [ par makinator7266 ] Bonjour à tous et toutes, je suis à la recherche d'un calendrier qui me permette d'afficher une fenêtre pop-up indiquant l'évenement correspondant à l Fermeture de popup et envoi d'informations [ par Rankin ] Salut &#224; tous. Je bosse actuellement sur la r&#233;alisation d'un site, qui contient une partie administration pour g&#233;rer des bases de donn& Gérer un agenda en Javascript en récupérant des dates SQL [ par Sp6men000 ] Bonjour,Je suis actuellement en phase de développement d'un site internet. Il utilise une base de donnée SQL qui posséde une table de la forme: table Recupérer la date depui un calendrier [ par lebasketeur ] bonjour tout le monde,Au cours de mon premier projet en php/mysql, j'ai rencontré quelque problème, si vous pouvez bien m'aider...Dans un formulaire d gestion calendrier [ par ikramta ] salut tout le monde.j'ai teléchargé un script qui permet d'afficher un calendrier et c'est vraiment ce que je veut ,mais une petite chause qui  me blo je cherche un insérer un calendrier/agenda dans mon site [ par claudine83 ] Bonjourje crée un site avec web to date et chercher un calendrier à inséreren htmlmerci


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,264 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales