Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic HTML/CSS for a calendar using a table layout.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
<style>
body {
line-height: 1;
margin: 50px;
}
div {
background: rgba(0, 0, 0, .1);
border-radius: 5px;
box-sizing: border-box;
padding: 15px;
width: 220px;
}
header {
overflow: clear;
position: relative;
}
h2 {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 18px;
font-weight: 700;
margin: 0 0 10px;
text-align: center;
}
button {
position: absolute;
top: -4px;
}
button:first-child {
left: 0;
}
button:last-child {
right: 0;
}
table {
background: #fff;
border-collapse: collapse;
color: #222;
font-family: 'PT Sans', sans-serif;
font-size: 13px;
width: 100%;
}
td {
border: 1px solid #ccc;
color: #444;
line-height: 22px;
text-align: center;
}
tr:first-child td {
color: #222;
font-weight: 700;
}
.selected {
background: #f0951d;
border: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
}
</style>
</head>
<body>
<div>
<header>
<button>«</button>
<h2>July 2013</h2>
<button>»</button>
</header>
<table>
<tr>
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>Th</td>
<td>F</td>
<td>S</td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td class="selected">17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
@keenanpayne

This comment has been minimized.

Copy link

commented Sep 18, 2014

Love the look of this, it'll help me get started on my own calendar. Thanks for the share!

@Muskos

This comment has been minimized.

Copy link

commented Sep 14, 2015

thx for share

@cnolimit

This comment has been minimized.

Copy link

commented Oct 1, 2015

Very helpful thanks alot!

@AMaduro

This comment has been minimized.

Copy link

commented Nov 11, 2015

Great!..Thanks,

@jessicasalmon

This comment has been minimized.

Copy link

commented Jun 8, 2016

Thanks for the share!

@Alquimerico

This comment has been minimized.

Copy link

commented Nov 22, 2017

Thanks, I used the code to make this one https://gist.github.com/Alquimerico/5472e36fb953fbc93e131399e28a1def
:D

@zoltansx

This comment has been minimized.

Copy link

commented Jan 4, 2018

Great, thanks for sharing.

@AlexeyJersey

This comment has been minimized.

Copy link

commented May 14, 2018

thnxz!

@ltaddeo

This comment has been minimized.

Copy link

commented Aug 15, 2018

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.