Calendrier en javascript
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
- Calendrier javascript
- Javascript calendrier - Meilleures réponses
- Calendrier js - Meilleures réponses
- Javascript : Calendrier javascript - CodeS SourceS - Guide
- Javascript : Calendrier avec les feriés - CodeS SourceS - Guide
- Javascript : Calendrier perpetuel v2 - CodeS SourceS - Guide
- Javascript : Calendrier qui tourne avec l'heure et suit la souris, - CodeS SourceS - Guide
- Javascript : Mini calendrier objet - CodeS SourceS - Guide