Kuukauden ja vuoden näyttäminen kalenterissa JavaScriptillä
Edellisissä oppitunneissa teimme sen kalenterin, joka oli esimerkkinä ensimmäisessä oppitunnissa. Parannellaan sitä nyt.
Aluksi tehdään niin, että kalenterin yläpuolella näytetään nykyinen kuukausi ja vuosi. Tehdään tarvittavat muutokset HTML-koodiin:
<div id="parent">
<div id="calendar">
<div class="info">Tammi 2020</div>
<table>
<thead>
<tr>
<th>ma</th>
<th>ti</th>
<th>ke</th>
<th>to</th>
<th>pe</th>
<th>la</th>
<th>su</th>
</tr>
</thead>
<tbody class="body"></tbody>
</table>
</div>
</div>
Tehdään muutokset myös CSS-koodiin:
#parent {
text-align: center;
}
#calendar {
display: inline-block;
}
#calendar td, #calendar th {
padding: 10px;
border: 1px solid black;
text-align: center;
}
#calendar .info {
text-align: center;
}
Toteuta kuvattu nykyisen kuukauden ja päivän näyttäminen.
