CodeS-SourceS
Rechercher un code, un tuto, une réponse

Calendrier en javascript

Septembre 2017


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

Publié par zertyx.
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.
Enigma, cryptage des message en javascript
Affichage aleatoire d'une image et rafraichissement automatique javascript et jquery