1. Accueil
  2. Tutoriels
  3. Javascript

Calendrier en javascript

Dernière mise à jour le par @karamel .


un calendrier

<!DOCTYPE html>
 <html>
 <head>
 <title>calendrier</title>

<style type="text/css">

body {
background-color:#9d5f66;
}

#contcalendar{

width:230px;
margin:auto;
margin-top:100px;
background-color:#904044;
-webkit-box-shadow: 10px 10px 10px #212121;
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=120,strength=5);
box-shadow: 10px 10px 10px #212121;
border:1px ridge #aaa;
border-radius:10px;
}

#contcalendar table{

margin:auto;
text-align:center;
font-size:12px;
font-weight:bold;
line-height:20px;
text-shadow: 10px 10px 10px #232711;
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=120,strength=7);                 
 
}
</style>
<script>

function calendar() {

        var monthNames= ['Jan','Fev','Mar','Avr','Mai','Jui','Juil','Aou','Sep','Oct','Nov','Dec'];
        var jours= ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'];
        var monthDays= [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var today= new Date();
        var thisDay= today.getDate();
        var year= today.getYear();
        year <= 200 ? year += 1900 : null;

        if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)){
                monthDays[1] = 29;
        }
        var nDays= monthDays[today.getMonth()];
        var firstDay= today;
        firstDay.setDate(0);

        firstDay.getDate() == 2 ? firstDay.setDate(0) : null;
        
        var startDay = firstDay.getDay();
        
        var tb= document.createElement('table');
        
        var tbr= tb.insertRow(-1);

        var tbh= document.createElement("th");
        tbh.setAttribute('colspan','7');
        var tbhtxt= document.createTextNode(monthNames[today.getMonth()+1]+'.'+year);
        tbh.appendChild(tbhtxt);

        tbr.appendChild(tbh);

        var tbr=tb.insertRow(-1);

        for(var i=0 ;i<jours.length ; i++){

                tbr.insertCell(-1).appendChild(document.createTextNode(jours[i]));
        }

        var tbr= document.createElement("tr");

        var column= 0;

        for (var i= 0; i < startDay; i++) {
                tbr.insertCell(0);
                column++;
        }

        for (var i = 1; i <= nDays; i++) {
        
                var tdd= tbr.insertCell(-1);

                i == thisDay ? tdd.style.color="#FF0000" : null;

                tdd.appendChild(document.createTextNode(i));

                column++;
                if (column == 7) {
                        tb.appendChild(tbr);
                        var tbr=document.createElement("tr");
                        column = 0;
                }

                i == nDays ? tb.appendChild(tbr) : null;

        }
        document.getElementById('contcalendar').appendChild(tb);
}

typeof window.addEventListener == 'undefined' ? window.attachEvent("onload",calendar) : addEventListener('load',calendar,false);
</script>
</head>

<body>
<div id='contcalendar'></div>
</body>
</html>
A voir également
Ce document intitulé « Calendrier en javascript » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
12 Commentaires