I am currently developing a simple interactive calendar, and I need some guidance on how to make it more dynamic. Initially, I want only the months to display, but upon hovering over a month, I would like all the individual days to appear. Eventually, users should be able to click on each day to view its content.
If you'd like to take a look at what I have done so far, please visit: http://jsfiddle.net/r8orrebk/
Here is a snippet of the HTML structure:
<div id = "calendar">
<div class="month">
January
<table class="days">
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
...
</table>
</div>
...
<p>and here is a snippet from the CSS file:</p>
<pre><code>.days {
display: none;
border: 1px solid;
}
.month {
width: 24%;
height: 150px;
float: left;
border: 1px solid;
margin: -1px 0 0 -1px;
}
.month:hover > .days {
display: block;
}
I'm looking for suggestions on the best way to achieve this functionality. Since I'm new to HTML and CSS, I'm not sure if using a table is the right approach. Should I consider incorporating javascript/jquery instead of solely relying on CSS hover effects?
Additionally, I'm wondering if there's a more efficient way to populate the days within each month rather than manually creating a div or td for each day as I've done thus far.
Any advice or recommendations would be greatly appreciated. Thank you.