JavaScript'te Takvim

Bu bölümde bir takvim uygulayacağız. Basit olması için, takvimin yalnızca mevcut ay için görüntülenmesini sağlayacağız. Ancak, ay ve yılın değiştirilebileceği şekilde geliştirilebileceği göz önünde bulundurularak. İşte elde edeceğimiz şeyin bir örneği:

Problemi çözerken kullanabileceğiniz işte biçimlendirme:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>pzt</th>
					<th>sal</th>
					<th>çar</th>
					<th>per</th>
					<th>cum</th>
					<th>cmt</th>
					<th>paz</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
	</div>
</div>

#parent {
	text-align: center;
}
#calendar {
	display: inline-block;
}
#calendar td, #calendar th {
	padding: 5px 12px;
	border: 1px solid black;
	text-align: center;
}

Hemen gerekli tüm etiketlerin referanslarını değişkenlere alalım ve ayrıca mevcut ayı ve yılı kaydedelim:

let calendar = document.querySelector('#calendar');
let body = calendar.querySelector('.body');

let date  = new Date();
let year  = date.getFullYear();
let month = date.getMonth();

Size sunduğum kod taslaklarını kendinize kopyalayın.