Bonjour,
Dans ce script, je vous apprendrait à faire un calendrier JavaScript avec un effet de transparence et le tout valide (X)html strict 1.1 et css 2.
Pour ceux qui sont curieux:
Voir le résultat final
Bon pour commencer, le fonctionnement va être simple, on récupère la le jour, le moi et l'année en forme de chiffre.
Le calendrier va être fait en tableau, son titre sera la date actuelle.
Nous allons aussi faire un tableau array en JavaScript qui contient le nombre de jours dans chaque moi. Pour le moi de Février, nous allons tout simplement lui donner la valeur de 29 si nous sommes dans une année bissextile.
Nous allons récupérer le jour de la semaine du premier jour du moi
et allons faire une boucle selon le nombre de jours du moi actuel. Pour complexer un petit peu les choses nous allons aussi afficher les derniers et premiers jours des mois qui précèdes ou qui suives. Et à chaque fois que l?on arrive au samedi, on saute de ligne car on commence une nouvelle semaine.
Pour ceux qui ne savaient pas, le dimanche est le premier jour de la semaine.
Les cellules du tableau seront mises en transparence grâce à une fonction JavaScript et le tableau aura une image de fond de votre choix.
Bon assez parler, le code :
calendrier.js:
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;
}
calendrier.css:
.cal_calendrier
{
border:1px solid black;
padding:1px;
background-color:#4594ff;
width:250px;
margin:auto;
height:200px;
background-image:url('http://www.supportduweb.com/ftp/ybouane/scripts_astuces/javascript/calendrier/fond-250-200.gif');
}
.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;
}
Â
<!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>
Essayer
Merci à tous pour votre lecture.
Scripts et Tutoriels similaires
Le 29/07/2013 à 04:59:04
Faire un input file stylé en Css (X)html et Javascript
Système d'onglets en Javascript, (X)html et CSS dans la même page
Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs
Background scrollable avec overflow:auto; sous firefox (X)html/CSS
Propriété position et z-index en css tutoriel (X)html/CSS