// script calendrier : sf_small // a terme : fournir des fonctions de calendrier préfabriquées pour pouvoir fabriquer plus facilement des templates // à améliorer sur ce modèle : // * gérer le style selected_cellstyle -> cellule préselectionnée en cas de modif d'une date (et non pas : de création) // * créer des feuilles de style spécifiques (= "variantes") pour habiller un même code de base moisX=["","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"]; JourM=["Di","Lu","Ma","Me","Je","Ve","Sa"]; var jourPause={0:true,6:true} // jour de pause de la semaine (dimanche / lundi) var jourFeries= { "1-1":"jour de l'an", "24-3":"lundi de Pâques", // variable : 2008 "1-5":"fête du travail", "1-5":"ascension", // variable : 2008 "8-5":"armistice", "12-5":"lundi de pentecôte", // variable : 2008 (à voir) "14-7":"fête nationale", "15-8":"assomption", "1-11":"toussaint", "11-11":"armistice 1918", "25-12":"noël" } var dateS= strucDate(new Date()) //date selectionnée (=date actuelle par défaut) var dnow= strucDate(new Date()) //date actuelle var old_style, def_font='font-family:Arial,Helvetica,Sans-serif;font-size:10px', // police à utiliser cell_spacing=1, // espace entre chaque cellule cell_padding=1, // et padding interne def_cellstyle='text-align:center;cursor:pointer', // base commune à toutes les cellules today_cellstyle='border:2px red solid', // aujourd'hui nottoday_cellstyle='border:1px solid #f0f0f0', // autres jours out_cellstyle='background-color:#ffffff;color:#b0c0c0', // cellules hors mois courant in_cellstyle='background-color:#ffffff;color:#000000', // cellules dans le mois courant active_cellstyle='background-color:#c0c0FF;color:#ffffff', // cellules survolées selected_cellstyle='background-color:#00c0FF;color:#ffffff',// date préselectionnée, en cas de modif de dates we_cellstyle="background-color:#e0e0e0" // WE et jours fériés // les styles sont appliqués dans cet ordre : def_font + def_cellstyle + (today/nottoday) + (out/in) // au passage de la souris, on ajoute active_cellstyle au bout de tout ça //structure la date function strucDate(dateX) { return { "pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear() }} //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 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; } /* Test si une date est correcte... 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; } // surligne le jour survolé par la souris. on=true quand la souris entre sur la zone, false lorsqu'elle en sort function surligne(jour,on) { if (on) { // sauvegarde du style courant modif -> actif old_style=jour.style.cssText jour.style.cssText=old_style+';'+active_cellstyle } else jour.style.cssText=old_style // restitution du style repos } // retourne le style d'une cellule élémentaire, selon que M-1, M, M+1, travaillé ou pas, now ou pas etc.. function get_cellstyle(style,xx,jj,mm,aa) { styleX=def_font+';'+def_cellstyle+';'+style if (jourPause[xx]||jourFeries[jj+"-"+mm]!=null) styleX+=';'+we_cellstyle styleX+=';'+(jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee ? today_cellstyle : nottoday_cellstyle); return styleX; } //affiche le calendrier // mxS/axS = mois / annnée à afficher, si mxS=-1 -> date courante // source = id du calendrier à affecter (il peut y en avoir plusieurs sur la page) // elname=id de l'élément HTML dans lequel afficher les dates cliquées // txt true -> MAJ du innerHTML de l'élément elname-txt en plus // today1 true -> transformer le jour cliqué en 1er jour de la semaine correspondante // startWeek = 1er jour affiché (0=dimanche, 6=samedi) function sf_small(source,mxS,axS,elname,txt,today1,startWeek) { if(!elname) var elname='' if (mxS==-1) dateS=strucDate(new Date()) else { dateS.mois=parseInt(mxS,10); dateS.annee=parseInt(axS,10); 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; // n° dans la semaine (0-7) du 1er jour du mois M jmaxi=JmaxMois(dateS.mois,dateS.annee); // nb de jours du mois courant (1..n) ymaxi=parseInt((jmaxi+Dstart-1)/7); // nb de lignes à afficher -1 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; // -- génération du tableau -> variable 'html' // entête html= "" + "" + "" + "" // fermeture calendrier, avec fx éventuel + "" // affichage des jours DLMMJVS for(x=0;x<7;x++) html+="" // calendrier var cellstyle,mdeb for (y=0;y<=ymaxi;y++) { html+="" for (x=0;x<7;x++) { idxP=y*7+x-Dstart+1; // numero du jour (<0 pour Mois-1, 0..n pour M, >jmaxi pour M+1 aa=dateS.annee; xx=(x+startWeek)%7; if (idxP<=0) { // jour du mois précedent jj=idxP+jmaxiAvant;mm=dateS.mois-1; if (mm==0) { mm=12;aa-- } cellstyle=out_cellstyle } else if (idxP>jmaxi) { //jour du mois suivant jj=idxP-jmaxi;mm=dateS.mois+1 if (mm==13) { mm=1;aa++ } cellstyle=out_cellstyle } else { //jour du mois en cours jj=idxP;mm=dateS.mois cellstyle=in_cellstyle } if(today1) { // au clic, on passe le 1er jour de la semaine cliquée if(x==0) mdeb=Array(jj,mm,aa) date2pass=(mdeb[0]<10? "0":"")+mdeb[0]+"/"+(mdeb[1]<10? "0":"")+mdeb[1]+"/"+mdeb[2] } else date2pass=(jj<10? "0":"")+jj+"/"+(mm<10? "0":"")+mm+"/"+aa html+= "' } } html+='
«  " + ""+moisX[dateS.mois]+" "+dateS.annee + "  »x
"+JourM[(x+startWeek)%7]+"
"+jj+'
' document.getElementById(source).innerHTML=html // Affichage du calendrier sf_small_init(source) // et init du conteneur } // applique les paramètres par défaut au calendrier d'ID 'source' // source.style= style du
conteneur généré par sifacile function sf_small_init(source) { var x=document.getElementById(source) if(x) { x.style['border']='1px solid #b0b0b0' x.style['background']='#ffffff' } }