← All elements
<div class="cal"><h4>June</h4><div class="g"><b>M</b><b>T</b><b>W</b><b>T</b><b>F</b><b>S</b><b>S</b><span></span><span></span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span class="t">13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span></div></div>About this table
A month calendar laid out with CSS grid, seven equal columns, a highlighted day and hover states on each date.
How it works
The days are cells in a CSS grid with seven equal columns, so rows wrap automatically after every seventh item. Two empty spans at the start push the first day into the right weekday column. One cell has a class that highlights today, and hover colours each date.
Ways to customise it
- Change the number of empty spans to start the month on another day.
- Edit the highlight colour on the .t rule.
- Add more dates by repeating the span element.
Good to know
A calendar made this way is visual, so for a real date picker use a proper table or the native date input. The grid layout works in every current browser.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.