Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Calendrier javascript | | Coucou Voici du javascript pour réaliser un calendrier JavaScript - Code:
-
function setStyle(id,style,value) { id.style[style] = value; } function opacite(el,opacity) { setStyle(el,"filter:","alpha(opacity="+opacity+")"); setStyle(el,"-moz-opacity",opacity/100); setStyle(el,"-khtml-opacity",opacity/100); setStyle(el,"opacity",opacity/100); } function calendrier() { var date = new Date(); var jour = date.getDate(); var moi = date.getMonth(); var annee = date.getYear(); if(annee<=200) { annee += 1900; } mois = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'); jours_dans_moi = new Array(31,28,31,30,31,30,31,31,30,31,30,31); if(annee%4 == 0 && annee!=1900) { jours_dans_moi[1]=29; } total = jours_dans_moi[moi]; var date_aujourdui = jour+' '+mois[moi]+' '+annee; dep_j = date; dep_j.setDate(1); if(dep_j.getDate()==2) { dep_j=setDate(0); } dep_j = dep_j.getDay(); document.write('<table class="cal_calendrier" onload="opacite(document.getElementById(\'cal_body\'),20);"><tbody id="cal_body"><tr><th colspan="7">'+date_aujourdui+'</th></tr>'); document.write('<tr class="cal_j_semaines"><th>Dim</th><th>Lun</th><th>Mar</th><th>Mer</th><th>Jeu</th><th>Ven</th><th>Sam</th></tr><tr>'); sem = 0; for(i=1;i<=dep_j;i++) { document.write('<td class="cal_jours_av_ap">'+(jours_dans_moi[moi-1]-dep_j+i)+'</td>'); sem++; } for(i=1;i<=total;i++) { if(sem==0) { document.write('<tr>'); } if(jour==i) { document.write('<td class="cal_aujourdhui">'+i+'</td>'); } else { document.write('<td>'+i+'</td>'); } sem++; if(sem==7) { document.write('</tr>'); sem=0; } } for(i=1;sem!=0;i++) { document.write('<td class="cal_jours_av_ap">'+i+'</td>'); sem++; if(sem==7) { document.write('</tr>'); sem=0; } } document.write('</tbody></table>'); opacite(document.getElementById('cal_body'),70); return true; }
CSS - Code:
-
.cal_calendrier { border:1px solid black; padding:1px; background-color:#4594ff; width:250px; margin:auto; height:200px; background-image:url('VOTRE IMAGE DE FOND); } .cal_calendrier th { border:1px solid black; background-color:#ffffff; } .cal_calendrier td { border:1px solid black; background-color:#ffffff; text-align:center; } .cal_aujourdhui { color:#ff0000; } .cal_jours_av_ap { color:#5a779e; } Créer une page HTML - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Calendrier javascript</title> <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calendrier.css" /> <script type="text/javascript" src="calendrier.js"></script> </head> <body> <script type="text/javascript"> calendrier(); </script> </body> </html> |
| |