The month is March of some year.



March
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Event

Hurrah! Spring begins!

21
22
23
24
25
26
27
28
29
30
31

Below is the style and HTML code to build the calendar shown above. Values assigned to margins, dimensions, borders, colors, are arbitrary.

<style>

#container1 {margin:100px 10px 30px 170px; display:block; width: auto; height: auto; border: none; background: transparent; padding:10px;} .

boxlet {float: left; padding-top: 28px; border: 1px solid #000000; background-color: #FFFFFF; width: 11%; height: 8%; min-height: 48px; text-align: center;}

.boxletspec {float: left; padding-top: 28px; border: 1px solid #000000; background-color: #FFFF00; width: 11%; height: 8%; min-height: 48px; text-align: center;}

.boxlet1 {float: left; padding-top: 8px; border: 1px solid #000000; background-color: #FFFFFF; width: 11%; height: 5%; text-align: center; font-weight: bold;}

.boxlet2 {width:78%; height: 7%; min-height: 1.em; text-align: center; background-color: blue; color: yellow; font-size: 20pt;}

.boxlet3 {clear: both; width: 3%; background-color: transparent;}

</style>

</div>

<div class= "boxlet2">March</div>

<div class= "boxlet1">Sun</div><div class= "boxlet1">Mon</div><div class= "boxlet1">Tue</div><div class= "boxlet1">Wed</div> <div class= "boxlet1">Thu</div><div class= "boxlet1">Fri</div><div class= "boxlet1">Sat</div> <div class= "boxlet3"></div>

<div class= "boxlet"></div><div><div class= "boxlet"> 1</div><div class= "boxlet"> 2</div> <div class= "boxlet"> 3</div><div class= "boxlet"> 4</div><div class= "boxlet"> 5</div> <div class= "boxlet"> 6</div><div class= "boxlet3"></div>

<div class= "boxlet"> 7</div><div class= "boxlet"> 8</div><div class= "boxlet"> 9</div> <div class= "boxlet"> 10</div><div class= "boxlet"> 11</div> <div class= "boxlet"> 12</div><div class= "boxlet"> 13</div><div class= "boxlet3"></div>

<div class= "boxlet"> 14<br> <div class= "boxlet"> 15</div><div class= "boxlet"> 16</div> <div class= "boxlet"> 17</div><div class= "boxlet"> 18</div><div class= "boxlet"> 19</div> <div class= "boxletspec"><span class= "special"> 20<br><details><summary>Event</summary><p>Hurrah! Spring begins!</details></div><div class= "boxlet3"></div>

<div class= "boxlet"> 21</div><div class= "boxlet"> 22</div> <div class= "boxlet"> 23</div><div class= "boxlet"> 24</div><div class= "boxlet"> 25</div> <div class= "boxlet"> 26</div><div class= "boxlet"> 27</div><div class= "boxlet3"></div>

<div class= "boxlet"> 28</div><div class= "boxlet"> 29</div><div class= "boxlet"> 30</div> <div class= "boxlet"> 31</div><br>

</div>

</body>