begin process at 2008 08 28 21:40:06
1 233 393 membres
485 nouveaux aujourd'hui
14 291 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 !

CALENDAR (BIENTOT ULTIMATE)


Information sur la source

Catégorie :Date & Heure Classé sous : calendrier, calendar, agenda, DOM, date Niveau : Expert Date de création : 04/07/2008 Date de mise à jour : 08/07/2008 14:15:42 Vu / téléchargé: 4 095 / 137

Note :
Aucune note

Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

Description

affiche un calendrier sous une zone de saisie
version 2.2 de mon calendrier
-script paramétrable, en version bêta
-modifié en DOM
-recherche dans la page les balise <input type2="date" ...> pour lui attribuer un calendrier (fonctionne aussi avec type="date" sauf sous IE)
-corrigé pour tourner sous IE


Source

  • function parametre()
  • {
  • this.mois = new Array("Janv","Févr","Mars","Avril","Mai","Juin","Juilt","Aout","Sept","Oct","Nov","Déc");
  • this.moisLib = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre");
  • this.jour = new Array("Di","Lu","Ma","Me","Je","Ve","Sa");
  • this.jourLib = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
  • this.titre = "SLC Calendar";
  • this.today = "aujourd'hui" ;
  • this.debutSemaine = 1;
  • this.jourPause = {0:true,6:true};
  • this.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"};
  • this.conges = {};
  • this.classCode = { 257 : "SLCnow", 512 : "SLCnoMonth", 2056 : "SLCferiee", 4112 : "SLCconges", 1542 : "SLCweekend"};
  • this.visuTitre = false;
  • this.visuSemaine = true;
  • this.visuJour = true;
  • this.visuMois = true;
  • this.visuAnnee = true;
  • this.selectMois = false;
  • this.selectAnnee = false;
  • this.stopAnnee = new Array(-5,5);
  • this.visuAvant = true;
  • this.visuApres = true;
  • this.naviguerMois = true;
  • this.naviguerMoisMoins = "-";
  • this.naviguerMoisPlus = "+";
  • this.naviguerAnnee = true;
  • this.naviguerAnneeMoins = "<";
  • this.naviguerAnneePlus = ">";
  • this.format = "%j/%m/%a";
  • }
  • //Recherche des input type= 'date' par fonction recursive
  • function subChild(noeud, list) {
  • var nbr = noeud.childNodes.length;
  • for (var idx_noeud = 0; idx_noeud < nbr; idx_noeud++) {
  • var element = noeud.childNodes[idx_noeud];
  • var nom = element.nodeName.toLowerCase();
  • if (nom == 'input')
  • {
  • found = false;
  • idx = "";
  • for(var idx_attr=0;idx_attr<element.attributes.length;idx_attr++){
  • node = element.attributes[idx_attr];
  • if(node.nodeName != undefined)
  • {
  • if ((node.nodeName.toLowerCase() == 'type2' || node.nodeName.toLowerCase() == 'type') && (node.nodeValue.toLowerCase() == 'date') )
  • {
  • found = true;
  • }
  • if (node.nodeName.toLowerCase() == 'id' )
  • {
  • idx=node.nodeValue;
  • }
  • }
  • }
  • if (found)
  • {
  • if ( idx == "")
  • {
  • idx = 'slc_cal_'+ idx_noeud;
  • element.setAttribute('id', idx );
  • //alert('pas d attribue pr une date');
  • }
  • list.push(idx);
  • }
  • }
  • subChild(element,list);
  • }
  • }
  • function SLCcal(srcNom,param)
  • {
  • this.param = (param != null) ? param : new parametre();
  • if (srcNom == null ||typeof(srcNom) == 'object')
  • {
  • var listDate = new Array();
  • for(i=0; i<document.documentElement.childNodes.length; i++){
  • if ( document.documentElement.childNodes.item(i).tagName == 'BODY'){
  • subChild(document.documentElement.childNodes.item(i),listDate);
  • }
  • }
  • if (typeof(srcNom) == 'object')
  • {
  • this.param = srcNom;
  • }
  • for (i=0;i<listDate.length;i++)
  • {
  • new SLCcal(listDate[i],this.param);
  • }
  • }
  • else
  • {
  • this.nom = srcNom;
  • this.srcNomCal = srcNom+'_cal';
  • this.calendrier; //conteneur du calendrier
  • this.dateSelect = new Date();
  • this.dnow = new Date();
  • this.creerCalendrier();
  • this.calendrier.onselectstart = function() {return false;}; //desactive la selection
  • this.cible = document.getElementById(srcNom);
  • if( this.cible.type == 'text') //type INPUT
  • {
  • this.calendrier.owner = this;
  • this.calendrier.style.position = 'absolute';
  • this.calendrier.style.display = 'none';
  • this.cible.calendrier = this; //hey, hey, ... c bon ca !
  • this.calendrier.style.top = this.cible.offsetTop + this.cible.offsetHeight + 'px';
  • this.calendrier.style.left = this.cible.offsetLeft + 'px'; //this.deltaG = 0;
  • document.body.appendChild(this.calendrier);
  • //var titreNoeud = document.createTextNode('helloooo');
  • //document.body.appendChild(titreNoeud);
  • //alert(this.calendrier.innerHTML);
  • this.cible.onfocus = function() {document.getElementById(this.calendrier.srcNomCal).style.display = 'block' ; }
  • this.cible.onblur = function() {setTimeout("document.getElementById('"+this.calendrier.srcNomCal+"').style.display='none'",1000);}
  • }
  • }
  • };
  • SLCcal.prototype.creerCalendrier = function ()
  • {
  • div = document.createElement('table');
  • calNoeud = document.createElement('tbody');
  • div.setAttribute('id',this.srcNomCal);
  • div.setAttribute('class','SLCtable');
  • div.setAttribute('className','SLCtable');
  • //ajout la ligne du titre
  • if (this.param.visuTitre)
  • {
  • calNoeud.appendChild(this.addTrNoeud(this.ajoutTexte(this.param.titre,'SLCentete')));
  • }
  • //ajout la barre de navigation
  • calNoeud.appendChild(this.addTrNoeud(this.ajoutNavigation('SLCentete')));
  • //ajout le calendrier
  • calNoeud.appendChild(this.addTrNoeud(this.ajoutCalendrier()));
  • //ajout le pied du calendirer
  • calNoeud.appendChild(this.addTrNoeud(this.ajoutLiens(0,this.param.today,'SLCentete')));
  • //var titreNoeud = document.createTextNode('helloooo');
  • //div.appendChild(titreNoeud);
  • div.appendChild(calNoeud);
  • div.owner = this;
  • this.calendrier = div;
  • };
  • SLCcal.prototype.addTrNoeud = function (noeud)
  • {
  • tr = document.createElement('tr');
  • tr.appendChild(noeud);
  • return tr;
  • };
  • SLCcal.prototype.ajoutTexte = function (txt,className)
  • {
  • tdr = document.createElement('td');
  • var titreNoeud = document.createTextNode(txt);
  • tdr.appendChild(titreNoeud);
  • tdr.setAttribute('class',className);
  • tdr.setAttribute('className',className);
  • return tdr;
  • };
  • SLCcal.prototype.ajoutLiens = function (onclick,titre,className)
  • {
  • navTd = document.createElement('td');
  • navTd.setAttribute('class',className);
  • navTd.setAttribute('className',className);
  • var na = document.createElement('a');
  • na.owner = this;
  • na.setAttribute('href', '#');
  • na.onclick = function () {alert('not implemented ! ---code link : '+onclick);} ;
  • //todo effectuer un switch en fonction du code ou envoyer la fonction en parametre
  • var txt = document.createTextNode(titre);
  • na.appendChild(txt);
  • navTd.appendChild(na);
  • return navTd;
  • };
  • SLCcal.prototype.ajoutNavigation = function (className)
  • {
  • td = document.createElement('td');
  • tableNav = document.createElement('table');
  • tableNav.setAttribute('class',className);
  • tableNav.setAttribute('className',className);
  • tableNaviguer = document.createElement('tbody');
  • navTr = document.createElement('tr');
  • if (this.param.naviguerAnnee)
  • {navTr.appendChild(this.ajoutLiens( 1 , this.param.naviguerAnneeMoins, className));}
  • if (this.param.naviguerMois)
  • {navTr.appendChild(this.ajoutLiens( 2 , this.param.naviguerMoisMoins, className));}
  • if (!this.param.selectMois)
  • {navTr.appendChild(this.ajoutTexte(this.param.moisLib[this.dateSelect.getMonth()]));}
  • if (!this.param.selectAnnee)
  • {navTr.appendChild(this.ajoutTexte(this.dateSelect.getFullYear()));}
  • if (this.param.naviguerMois)
  • {navTr.appendChild(this.ajoutLiens( 3 , this.param.naviguerMoisPlus, className));}
  • if (this.param.naviguerAnnee)
  • {navTr.appendChild(this.ajoutLiens( 4 , this.param.naviguerAnneePlus, className));}
  • tableNaviguer.appendChild(navTr);
  • tableNav.appendChild(tableNaviguer);
  • td.appendChild(tableNav);
  • return td;
  • };
  • SLCcal.prototype.ajoutCalendrier = function ()
  • {
  • td = document.createElement('td');
  • tableCal = document.createElement('table');
  • tableSemaine = document.createElement('tbody');
  • trSemaine = document.createElement('tr');
  • jstart = this.param.visuSemaine ? -1 : 0;
  • for(j=jstart;j<7;j++)
  • {
  • tdJour = document.createElement('td');
  • var valeurJour = document.createTextNode((j<0) ? "" : this.param.jour[(j+this.param.debutSemaine)%7]);
  • tdJour.appendChild(valeurJour);
  • trSemaine.appendChild(tdJour);
  • }
  • tableSemaine.appendChild(trSemaine);
  • var pJm=this.param.debutSemaine-this.dateSelect.premJourMois()+1; //init le 1er jour du calendrier (en haut à gauche)
  • if (pJm>1) pJm-=7; //ajustement de la date de départ
  • var dateS = new Date(this.dateSelect.getFullYear(),this.dateSelect.getMonth(),pJm);
  • var idxSemaine = parseInt((this.dateSelect.nbJAnnee()+1) / 7,10)+1; //numero de la semaine du 1er du mois
  • idx = 0;
  • for(sem=0;sem<5;sem++)
  • {
  • trSemaine = document.createElement('tr');
  • for(j=jstart;j<7;j++)
  • {
  • tdJour = document.createElement('td');
  • className = "SLCjdefaut"; //valeur par défaut ou mettre codeClass = 0 à la fin de la liste
  • lib="";
  • if (j<0)
  • {
  • var valeurJour = document.createTextNode(idxSemaine+sem);
  • tdJour.appendChild(valeurJour);
  • className= "SLCsemaine";
  • }else
  • {
  • codeClass = 0;
  • if (dateS.testDate(this.dnow)) {codeClass+=1; }
  • if (dateS.getMonth() == this.dateSelect.getMonth()) {codeClass+=2;}
  • if (this.param.jourPause[dateS.getDay()]== true) {codeClass+=4;}
  • codeTest = testInTable(dateS.getDate(),dateS.getMonth(),null,this.param.jourFeriee);
  • if (codeTest!= null) { codeClass+=8; lib+= codeTest; }
  • codeTest = testInTable(dateS.getDate(),dateS.getMonth(),dateS.getFullYear(),this.param.conges);
  • if (codeTest!= null) { codeClass+=16; lib+= codeTest; }
  • if (compareDate(dateS,this.dnow)) {codeClass+=32;}
  • var valeurJour = document.createTextNode(dateS.getDate());
  • for (code in this.param.classCode )
  • {
  • bitMasque = (code & 0xFF00 ) / 0x100;
  • bitTest = (code & 0xFF );
  • if ( (codeClass & bitMasque) == bitTest )
  • {
  • className = this.param.classCode[code];
  • break;
  • }
  • }
  • tdJour.appendChild(valeurJour);
  • //tdJour.setAttribute('valueDate',dateS.getDate()+'/'+dateS.getMonth()+'/'+dateS.getFullYear());
  • tdJour.slcDate = dateS;
  • tdJour.param = this.param;
  • tdJour.cible = this.nom;
  • tdJour.onclick = function () {
  • //alert('---'+this.slcDate.getDate());
  • var datePos = this.slcDate;
  • var param = this.param;
  • var jour = datePos.getDay();
  • var dateAffiche = param.format.replace("%j",addZero(datePos.getDate())).replace("%k",datePos.getDate()).replace("%d",param.jourLib[jour]);
  • dateAffiche = dateAffiche.replace("%m",addZero(datePos.getMonth()+1)).replace("%n",datePos.getMonth()+1).replace("%p",param.moisLib[datePos.getMonth()]);
  • dateAffiche = dateAffiche.replace("%r",param.moisLib[datePos.getMonth()]).replace("%a",datePos.getFullYear()).replace("%y",datePos.getYear());
  • document.getElementById(this.cible).value = dateAffiche;
  • };
  • dateS = new Date(dateS.getFullYear(),dateS.getMonth(),dateS.getDate()+1);
  • }
  • tdJour.setAttribute('class',className);
  • tdJour.setAttribute('className',className);
  • tdJour.setAttribute('title',lib);
  • trSemaine.appendChild(tdJour);
  • }
  • tableSemaine.appendChild(trSemaine);
  • }
  • tableCal.appendChild(tableSemaine);
  • td.appendChild(tableCal);
  • return td;
  • };
  • SLCcal.prototype.ajoutPied = function ()
  • {
  • td = document.createElement('td');
  • var na = document.createElement('a');
  • na.owner = this;
  • na.setAttribute('href', '#');
  • na.onclick = function() { this.owner.aujourdhui();};
  • var txt = document.createTextNode(this.param.today);
  • na.appendChild(txt);
  • td.appendChild(na);
  • return td;
  • };
  • SLCcal.prototype.aujourdhui = function ()
  • {alert('test aujourdhui');};
  • function addZero(num) //ajout un zéro devant pr l'affichage des dates misent en formes
  • {return (num<10?"0":"")+num;};
  • //Retourne le nombre de jour du 1er du mois en cours depuis le 1er janvier (num de semaine)
  • Date.prototype.nbJAnnee = function(){
  • //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[this.getMonth()] ; //+dateS.jour-1
  • if (bissextile(this.getFullYear()) && this.getMonth()>2) nb++;
  • return nb;
  • };
  • //retourne le ième jour du 1er du mois
  • Date.prototype.premJourMois = function ()
  • {return (new Date(this.getFullYear(),this.getMonth(),1).getDay());}
  • //return true si dateA==dateB (on ne test pas l'année si l'une des 2 années = 1900
  • Date.prototype.testDate = function(dateB)
  • {
  • noYear = (this.getFullYear() == 1900 || this.getFullYear() == 1900) ;
  • return (this.getDate() == dateB.getDate() && this.getMonth() == dateB.getMonth() && ((this.getFullYear() == dateB.getFullYear()) || noYear));
  • }
  • //TO BE CONTINUE....
  • //return true si dateA>=dateB
  • function compareDate(dateA,dateB)
  • {
  • return (dateA.getFullYear() > dateB.getFullYear() ||
  • (dateA.getMonth() > dateB.getMonth() && dateA.getFullYear() == dateB.getFullYear()) ||
  • (dateA.getDate() >= dateB.getDate() && dateA.getMonth() == dateB.getMonth() && dateA.getFullYear() == dateB.getFullYear()));
  • }
  • function str2Date(strDate)
  • {
  • tableDate = strDate.split("-");
  • return new Date(tableDate.length>2?parseInt(tableDate[2],10):1900, parseInt(tableDate[1],10)-1 , parseInt(tableDate[0],10) );
  • }
  • function testInTable(jj,mm,aa,table)
  • {
  • result = ""; found = false;
  • dateTest = new Date((aa==null)?1900:aa,mm,jj);
  • for (champ in table)
  • {
  • if (champ.indexOf(",")>0) //type plage de date ou date fixe
  • {
  • dateMin = str2Date(champ.split(",")[0]); dateMaxi = str2Date(champ.split(",")[1]);
  • if (compareDate(dateMaxi,dateTest)&&compareDate(dateTest,dateMin))
  • {
  • found = true;
  • result+=table[champ]+"\n";
  • }
  • }
  • else
  • {
  • dateChamp = str2Date(champ);
  • if (dateTest.testDate(dateChamp))
  • {
  • found = true;
  • result+=table[champ]+"\n";
  • }
  • }
  • }
  • return found ? result : null;
  • }
  • function debug(element)
  • {
  • try
  • {
  • htm="";
  • while (i in element)
  • {htm+=i+':'+element[i]+'<br>\n';}
  • alert('debug:'+htm);
  • docuement.getElementById("debug").innerHTML = htm;
  • } catch (e) {}
  • }
function parametre()
{
this.mois = new Array("Janv","Févr","Mars","Avril","Mai","Juin","Juilt","Aout","Sept","Oct","Nov","Déc");
this.moisLib = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre");
this.jour = new Array("Di","Lu","Ma","Me","Je","Ve","Sa");
this.jourLib = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");

this.titre = "SLC Calendar";
this.today = "aujourd'hui" ;

this.debutSemaine = 1; 
this.jourPause = {0:true,6:true};
this.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"};
this.conges = {};
this.classCode = { 257 : "SLCnow",  512 : "SLCnoMonth", 2056 : "SLCferiee", 4112 : "SLCconges", 1542 : "SLCweekend"};


this.visuTitre = false; 
this.visuSemaine = true; 
this.visuJour = true;
this.visuMois = true;
this.visuAnnee = true;

this.selectMois = false;
this.selectAnnee = false;
this.stopAnnee = new Array(-5,5);

this.visuAvant = true;
this.visuApres = true;

this.naviguerMois = true;
this.naviguerMoisMoins = "-";
this.naviguerMoisPlus = "+";

this.naviguerAnnee = true;
this.naviguerAnneeMoins = "<";
this.naviguerAnneePlus = ">";

this.format = "%j/%m/%a";
}
  
//Recherche des input type= 'date' par fonction recursive
function subChild(noeud, list) {
var nbr = noeud.childNodes.length;
for (var idx_noeud = 0; idx_noeud < nbr; idx_noeud++) {
  var element = noeud.childNodes[idx_noeud];
  var nom = element.nodeName.toLowerCase();
  if (nom == 'input')
	{
	found = false;
	idx = "";
	for(var idx_attr=0;idx_attr<element.attributes.length;idx_attr++){
	node = element.attributes[idx_attr];
	if(node.nodeName != undefined)
	{
	if ((node.nodeName.toLowerCase() == 'type2' || node.nodeName.toLowerCase() == 'type') &&  (node.nodeValue.toLowerCase() == 'date') )
		{
		found = true;
		}
	if (node.nodeName.toLowerCase() == 'id' )
		{
		idx=node.nodeValue;
		}
	}
	} 
	if (found)
		{
		if ( idx == "")
			 {
			 idx = 'slc_cal_'+ idx_noeud;
			 element.setAttribute('id', idx );
			 //alert('pas d attribue pr une date');
			 }
			 list.push(idx);
		}
	}
   subChild(element,list);
  }
}


function SLCcal(srcNom,param)
{
this.param = (param != null) ? param : new parametre();
if (srcNom == null ||typeof(srcNom) == 'object')
{
	var listDate = new Array();
	for(i=0; i<document.documentElement.childNodes.length; i++){
    if ( document.documentElement.childNodes.item(i).tagName == 'BODY'){
      subChild(document.documentElement.childNodes.item(i),listDate);
	}
	}
	if (typeof(srcNom) == 'object')
	{
		this.param = srcNom;
	}
	for (i=0;i<listDate.length;i++)
	{
		new SLCcal(listDate[i],this.param);
	}
}
else
{
	this.nom = srcNom;
	this.srcNomCal = srcNom+'_cal';
	this.calendrier; //conteneur du calendrier

	this.dateSelect = new Date();
	this.dnow = new Date();
	this.creerCalendrier(); 

	this.calendrier.onselectstart = function() {return false;}; //desactive la selection
	this.cible = document.getElementById(srcNom);
	if( this.cible.type == 'text')  //type INPUT
	{
		this.calendrier.owner = this;
		this.calendrier.style.position = 'absolute';
		this.calendrier.style.display = 'none';

		this.cible.calendrier = this; //hey, hey, ... c bon ca !

		this.calendrier.style.top = this.cible.offsetTop + this.cible.offsetHeight + 'px';
		this.calendrier.style.left = this.cible.offsetLeft + 'px'; //this.deltaG = 0; 		
		document.body.appendChild(this.calendrier);
		//var titreNoeud = document.createTextNode('helloooo');
		//document.body.appendChild(titreNoeud);
		//alert(this.calendrier.innerHTML);	
		this.cible.onfocus = function() {document.getElementById(this.calendrier.srcNomCal).style.display = 'block' ; }
		this.cible.onblur = function() {setTimeout("document.getElementById('"+this.calendrier.srcNomCal+"').style.display='none'",1000);}
	}
}
};

SLCcal.prototype.creerCalendrier = function () 
{
	div = document.createElement('table');
	calNoeud = document.createElement('tbody');
	
	div.setAttribute('id',this.srcNomCal);
	div.setAttribute('class','SLCtable');
	div.setAttribute('className','SLCtable');
	//ajout la ligne du titre
	if (this.param.visuTitre)
		{
		calNoeud.appendChild(this.addTrNoeud(this.ajoutTexte(this.param.titre,'SLCentete')));
		
		}
	//ajout la barre de navigation
	calNoeud.appendChild(this.addTrNoeud(this.ajoutNavigation('SLCentete')));
	//ajout le calendrier
	calNoeud.appendChild(this.addTrNoeud(this.ajoutCalendrier()));
	//ajout le pied du calendirer
	calNoeud.appendChild(this.addTrNoeud(this.ajoutLiens(0,this.param.today,'SLCentete')));
	//var titreNoeud = document.createTextNode('helloooo');
	//div.appendChild(titreNoeud);
	div.appendChild(calNoeud);
	div.owner = this;
	this.calendrier = div;	
};
SLCcal.prototype.addTrNoeud = function (noeud) 
{	
	tr = document.createElement('tr');		
	tr.appendChild(noeud);
	return tr;
};
SLCcal.prototype.ajoutTexte = function (txt,className) 
{	
	tdr = document.createElement('td');	
	var titreNoeud = document.createTextNode(txt);
	tdr.appendChild(titreNoeud);
	tdr.setAttribute('class',className);
	tdr.setAttribute('className',className);	
	return tdr;
};
SLCcal.prototype.ajoutLiens = function (onclick,titre,className) 
{
	navTd = document.createElement('td');
	navTd.setAttribute('class',className);
	navTd.setAttribute('className',className);	
	
	var na = document.createElement('a');
	na.owner = this;
	na.setAttribute('href', '#');
	na.onclick = function () {alert('not implemented ! ---code link : '+onclick);} ;
	//todo effectuer un switch en fonction du code ou envoyer la fonction en parametre
	var txt = document.createTextNode(titre);
	na.appendChild(txt);
	navTd.appendChild(na);
	return navTd;
};
SLCcal.prototype.ajoutNavigation = function (className) 
{
	td = document.createElement('td');
	tableNav = document.createElement('table');
	tableNav.setAttribute('class',className);
	tableNav.setAttribute('className',className);
	tableNaviguer = document.createElement('tbody');

	navTr = document.createElement('tr');
	if (this.param.naviguerAnnee)
		{navTr.appendChild(this.ajoutLiens( 1 , this.param.naviguerAnneeMoins, className));}
	
	if (this.param.naviguerMois)
		{navTr.appendChild(this.ajoutLiens( 2 , this.param.naviguerMoisMoins, className));}
		
	if (!this.param.selectMois)
		{navTr.appendChild(this.ajoutTexte(this.param.moisLib[this.dateSelect.getMonth()]));}

	if (!this.param.selectAnnee)
		{navTr.appendChild(this.ajoutTexte(this.dateSelect.getFullYear()));}
		
	if (this.param.naviguerMois)
		{navTr.appendChild(this.ajoutLiens( 3 , this.param.naviguerMoisPlus, className));}

	if (this.param.naviguerAnnee)
		{navTr.appendChild(this.ajoutLiens( 4 , this.param.naviguerAnneePlus, className));}
	
	tableNaviguer.appendChild(navTr);
	tableNav.appendChild(tableNaviguer);
	td.appendChild(tableNav);
	return td;
};
SLCcal.prototype.ajoutCalendrier = function () 
{
	td = document.createElement('td');	
	tableCal = document.createElement('table');
	tableSemaine = document.createElement('tbody');	
	trSemaine = document.createElement('tr');
	jstart = this.param.visuSemaine ? -1 : 0;
	for(j=jstart;j<7;j++)
	{
	tdJour = document.createElement('td');	
	var valeurJour = document.createTextNode((j<0) ? "" : this.param.jour[(j+this.param.debutSemaine)%7]);
	tdJour.appendChild(valeurJour);
	trSemaine.appendChild(tdJour);
	}	
	tableSemaine.appendChild(trSemaine);
	var pJm=this.param.debutSemaine-this.dateSelect.premJourMois()+1; //init le 1er jour du calendrier (en haut à gauche)
	if (pJm>1) pJm-=7; //ajustement de la date de départ
	var dateS = new Date(this.dateSelect.getFullYear(),this.dateSelect.getMonth(),pJm);
	var idxSemaine = parseInt((this.dateSelect.nbJAnnee()+1) / 7,10)+1; //numero de la semaine du 1er du mois 
	idx = 0;
	for(sem=0;sem<5;sem++)
	{
	trSemaine = document.createElement('tr');
	for(j=jstart;j<7;j++)
	{
	tdJour = document.createElement('td');	
	className = "SLCjdefaut"; //valeur par défaut ou mettre codeClass = 0 à la fin de la liste 
	lib="";
			
	if (j<0)
	{
		var valeurJour = document.createTextNode(idxSemaine+sem);
		tdJour.appendChild(valeurJour);
		className= "SLCsemaine";
	}else
	{
		codeClass = 0;
		if (dateS.testDate(this.dnow)) {codeClass+=1; }
		if (dateS.getMonth() == this.dateSelect.getMonth()) {codeClass+=2;}
		if (this.param.jourPause[dateS.getDay()]== true) {codeClass+=4;}
		codeTest = testInTable(dateS.getDate(),dateS.getMonth(),null,this.param.jourFeriee);
		if (codeTest!= null) {  codeClass+=8; lib+= codeTest; }
		codeTest = testInTable(dateS.getDate(),dateS.getMonth(),dateS.getFullYear(),this.param.conges);
		if (codeTest!= null) {  codeClass+=16; lib+= codeTest; }
		if (compareDate(dateS,this.dnow)) {codeClass+=32;}
		var valeurJour = document.createTextNode(dateS.getDate());				
		for (code in this.param.classCode )
		{
			bitMasque = (code &  0xFF00 ) / 0x100;
			bitTest = (code & 0xFF );  
			if ( (codeClass & bitMasque) == bitTest )
			{
				className = this.param.classCode[code];
				break;
			}
		}		
		tdJour.appendChild(valeurJour);
		//tdJour.setAttribute('valueDate',dateS.getDate()+'/'+dateS.getMonth()+'/'+dateS.getFullYear());
		tdJour.slcDate = dateS;
		tdJour.param = this.param;
		tdJour.cible = this.nom;
		
		tdJour.onclick = function () {
		
		//alert('---'+this.slcDate.getDate());

		var datePos = this.slcDate; 
		var param = this.param;
		var jour = datePos.getDay();

		var dateAffiche = param.format.replace("%j",addZero(datePos.getDate())).replace("%k",datePos.getDate()).replace("%d",param.jourLib[jour]);
		dateAffiche = dateAffiche.replace("%m",addZero(datePos.getMonth()+1)).replace("%n",datePos.getMonth()+1).replace("%p",param.moisLib[datePos.getMonth()]);
		dateAffiche = dateAffiche.replace("%r",param.moisLib[datePos.getMonth()]).replace("%a",datePos.getFullYear()).replace("%y",datePos.getYear());
		document.getElementById(this.cible).value = dateAffiche;
		};
		dateS = new Date(dateS.getFullYear(),dateS.getMonth(),dateS.getDate()+1);
	}
	
	tdJour.setAttribute('class',className);
	tdJour.setAttribute('className',className);
	tdJour.setAttribute('title',lib);

	trSemaine.appendChild(tdJour);

	}
	tableSemaine.appendChild(trSemaine);
	}	
	tableCal.appendChild(tableSemaine);
	td.appendChild(tableCal);
	return td;
};

SLCcal.prototype.ajoutPied = function () 
{
	td = document.createElement('td');	
	var na = document.createElement('a');
	na.owner = this;
	na.setAttribute('href', '#');
	na.onclick = function() { this.owner.aujourdhui();};
	var txt = document.createTextNode(this.param.today);
	na.appendChild(txt);
	td.appendChild(na);
	return td;
};
SLCcal.prototype.aujourdhui = function ()  
	{alert('test aujourdhui');};
function addZero(num)  //ajout un zéro devant pr l'affichage des dates misent en formes
	{return (num<10?"0":"")+num;};
//Retourne le nombre de jour du 1er du mois en cours depuis le 1er janvier (num de semaine)
Date.prototype.nbJAnnee = function(){
//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[this.getMonth()] ;  //+dateS.jour-1
if (bissextile(this.getFullYear()) && this.getMonth()>2) nb++;
return nb;
};
//retourne le ième jour du 1er du mois
Date.prototype.premJourMois = function () 
{return (new Date(this.getFullYear(),this.getMonth(),1).getDay());}
//return true si dateA==dateB (on ne test pas l'année si l'une des 2 années = 1900
Date.prototype.testDate = function(dateB)
{
noYear = (this.getFullYear() == 1900 || this.getFullYear() == 1900) ;
return (this.getDate() == dateB.getDate() && this.getMonth() == dateB.getMonth() && ((this.getFullYear() == dateB.getFullYear()) || noYear));
}

//TO BE CONTINUE....

//return true si dateA>=dateB
function compareDate(dateA,dateB)
{
return (dateA.getFullYear() > dateB.getFullYear() ||
(dateA.getMonth() > dateB.getMonth() && dateA.getFullYear() == dateB.getFullYear()) ||
(dateA.getDate() >= dateB.getDate() && dateA.getMonth() == dateB.getMonth() && dateA.getFullYear() == dateB.getFullYear()));
}

function str2Date(strDate)
{
tableDate = strDate.split("-");
return new Date(tableDate.length>2?parseInt(tableDate[2],10):1900, parseInt(tableDate[1],10)-1 , parseInt(tableDate[0],10) );
}

function testInTable(jj,mm,aa,table)
{
result = ""; found = false;
dateTest = new Date((aa==null)?1900:aa,mm,jj);
for (champ in table)
{
	if (champ.indexOf(",")>0) //type plage de date ou date fixe
	{
	dateMin = str2Date(champ.split(",")[0]); dateMaxi = str2Date(champ.split(",")[1]);
	if (compareDate(dateMaxi,dateTest)&&compareDate(dateTest,dateMin))
		{
		found = true;
		result+=table[champ]+"\n";
		}
	}
	else
	{
	dateChamp = str2Date(champ);
	if (dateTest.testDate(dateChamp))
		{
		found = true;
		result+=table[champ]+"\n";	
		}
	}
}
return found ? result : null;
}

function debug(element)
{
try
{
htm="";
while (i in element)
	{htm+=i+':'+element[i]+'<br>\n';}
alert('debug:'+htm);
	docuement.getElementById("debug").innerHTML = htm;
} catch (e) {}
}
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

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
  • signaler à un administrateur
    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 !

    @+

  • signaler à un administrateur
    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 ?

  • signaler à un administrateur
    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 ...

  • signaler à un administrateur
    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...

  • signaler à un administrateur
    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...

  • signaler à un administrateur
    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 :)

  • signaler à un administrateur
    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.

  • signaler à un administrateur
    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 !

  • signaler à un administrateur
    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 ?

    @+

  • signaler à un administrateur
    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

  • signaler à un administrateur
    Commentaire de mickaelpfr le 08/07/2008 16:31:26

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

Ajouter un commentaire

Discussions en rapport avec ce code source

Pub



Appels d'offres

Recherche developpeur ...
Budget : 700€
SITE MARCHAND LOCATION...
Budget : 3 000€
SITE MARCHAND POUR HOTEL
Budget : 4 000€

CalendriCode

Août 2008
LMMJVSD
    123
45678910
11121314151617
18192021222324
25262728293031

Téléchargements

Logiciels à télécharger sur le même thème :

Boutique

Boutique de goodies CodeS-SourceS