Untitled

dabblet.css

table {
	border-collapse: separate; 
	border: 1px solid #9DABCE;
	border-width: 0px 0px 1px 1px;
	margin: 10px auto;
	font-size: 20px;
	font-family: Helvetica;
}

td, th { 
	width: 79px; 
	height: 79px; 
	text-align: center; 
	vertical-align: middle; 
	background: url(http://www.stefanoverna.com/data/ical_like_calendar/img/cells.png) ; 
	color: #444; 
	position: relative;
}
th {
	height: 30px;
	font-weight: bold;
	font-size: 14px;
}
td:hover, th:hover {
	background-position: 0px -81px;
	color: #222;
}

td.date_has_event {
	background-position: 162px 0px;
	color: white;
}

td.date_has_event:hover {
	background-position: 162px -81px;
}
td.padding {
	background: url(http://www.stefanoverna.com/data/ical_like_calendar/img/calpad.jpg);
}

td.today {
	background-position: 81px 0px;
	color: white;
}
td.today:hover {
	background-position: 81px -81px;
}
.events {
	position: relative;
}
.events ul {
	text-align: left;
	position: absolute;
	display: none;
	z-index: 1000;
	padding: 15px;
	background: #E7ECF2 url(http://www.stefanoverna.com/data/ical_like_calendar/img/popup.png) no-repeat;
	color: white;
	border: 1px solid white;
	font-size: 15px;
	width: 200px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	-border-radius: 3px;
	list-style: none;
	color: #444444;
	-webkit-box-shadow: 0px 8px 8px #333;
}
.events li {
	padding-bottom: 5px;
}
.events li span {
	display: block;
	font-size: 12px;
	text-align: justify;
	color: #555;
}
.events li span.title {
	font-weight: bold;
	color: #222;
}

dabblet.html

<table cellspacing="0">     
	<thead>
       <tr>
         <th>Mon</th><th>Tue</th><th>Wed</th>
         <th>Thu</th><th>Fri</th><th>Sat</th>
        <th>Sun</th>
       </tr>
    </thead>
     <tbody>
            <tr>
         <td class="padding" colspan="3"></td>
         <td> 1</td>
       <td> 2</td>
         <td> 3</td>
         <td> 4</td>
       </tr>
       <tr>
         <td> 5</td>
         <td> 6</td>
         <td> 7</td>
         <td> 8</td>
         <td class="today"> 9</td>
         <td>10</td>
     <td>11</td>
       </tr>
     <tr>
         <td>12</td>
         <td class="date_has_event">
           13
           <div class="events">
           	<ul>
           		<li>
           			<span class="title">Event 1</span>
           			<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
           		</li>
           		<li>
           			<span class="title">Event 2</span>
           			<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
           		</li>
           	</ul>
           </div>
         </td>
         <td>14</td>
         <td>15</td>
         <td>16</td>
         <td>17</td>
         <td>18</td>
       </tr>
       <tr>
         <td>19</td>
         <td>20</td>
         <td>21</td>
         <td class="date_has_event">
           22
         </td>
         <td>23</td>
         <td>24</td>
         <td>25</td>
       </tr>
       <tr>
       <td>26</td>
         <td>27</td>
         <td>28</td>
         <td>29</td>
         <td>30</td>
         <td>31</td>
         <td class="padding"></td>
       </tr>
     </tbody>
     <tfoot>
       <th>Mon</th><th>Tue</th><th>Wed</th>
       <th>Thu</th><th>Fri</th><th>Sat</th>
       <th>Sun</th>
     </tfoot>
   </table>
   <script type="text/javascript" src="http://www.stefanoverna.com/data/ical_like_calendar/js/coda.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}