Marco Biedermann  tarafından Css3 ve JavaScript kullanılarak hazırlanmış bir takvim örneği. Geçen gün paylaştığımız  saat örneğinin aynısı  gibi  bir görünüme sahip. Hem takvim hemde saat aynı görünüme sahip olduğu için sitenizde yan yana yerleştirseniz  dahi ortaya çirkin bir görüntü çıkmaz. Saat  örneği  bilgisayarınızın aatini kullandığı gibi takvim örneğide  bilgisayarınızın tarihini kullanıyor. Herhangi bir  dil  problemi yok. İstediğiniz  dile çevirmeniz oldukça  basit. Tek yapmanız gereken JavaScript kodlardaki gün isimlerini değiştirmek.

Hem  saat hemde  takvim örneğinin bulunduğu çerçeve tarayıcıya duyarlı olarak hazırlanmış. Tarayıcınızın boyutu ne olursa olsun takvim en ortada  duruyor.  Herhangi bir çerçeveye  hiç zahmet çekmeden yerleştirebilirsiniz. Çerçevenin boyutuna göre takvim örneğimizde merkezdeki yerini bulacaktır.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */

body {
	background: #282e3a;
  color: #f9f9f9;
	font: 100%/1.5em "Droid Sans", sans-serif;
	margin: 0;
}

p { margin: 0; }

/* ---------- GENERAL-CLASSES ---------- */

.container {
	height: 248px;
	left: 50%;
	margin: -124px 0 0 -100px;
	position: absolute;
	top: 50%;
	width: 200px;
}

/* ---------- APP-CALENDAR ---------- */

.app { text-align: center; }

.app-calendar {
	height: 200px;
	margin-bottom: 24px;
	width: 200px;
}

.app-title {
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 5px #15181f;
}

#weekday {
	background: #d9383c;
	border-radius: 35px 35px 0 0;
	color: #f9f9f9;
	font-size: 24px;
	line-height: 56px;
	position: relative;
	text-transform:uppercase;
}

#weekday:before,
#weekday:after {
	background: #f9f9f9;
	border-radius: 50%;
	content: "";
	height: 8px;
	margin-top: -4px;
	position: absolute;
	top: 50%;
	width: 8px;
	z-index: 1;
}

#weekday:before { left: 24px; }
#weekday:after { right: 24px; }

#day {
	background: #f9f9f9;
	border-radius: 0 0 35px 35px;
	-webkit-box-shadow: 0 8px 0 #15181f;
	box-shadow: 0 8px 0 #15181f;
	color: #15181f;
	font-size: 120px;
	font-weight: bold;
	height: 144px;
	line-height: 144px;
}

• Body etiketleri arasına eklemeniz gereken bölümler.

Html : 

	<div class="container">

		<div class="app">

			<div class="app-calendar">

				<div id="weekday">pazartesi</div>

				<div id="day">13</div>

			</div> <!-- end app-calendar -->

			<p class="app-title">Calendar</p>

		</div> <!-- end app -->

	</div> <!-- end container -->

 JavaScript : 

<script type="text/javascript">
(function() {

	var date = new Date(),
	weekday = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];

	document.getElementById('weekday').innerHTML = weekday[date.getDay()];
	document.getElementById('day').innerHTML = date.getDate();

}) ();
</script>