Responsive Calendar
Used to display the aggregate review count.
sdlawrence.com
This is the schema layout for an aggregate of reviews.
HTML
<table id="header-table">
<tbody>
<tr>
<th>Month 2017</th>
</tr>
</tbody>
</table>
<table id="day-names">
<tbody>
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
</tbody>
</table>
<table class="week">
<tr>
<td class="date today">30</td>
<td class="date today">1</td>
<td class="date today">2</td>
<td class="date today">3</td>
<td class="date today">4</td>
<td class="event holiday">5</td>
<td class="date today">6</td>
</tr>
<tr>
<td class="date today"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>Open Registration <a href="#r">Register</a></td>
<td> </td>
</tr>
</table>
<table class="week">
<tr>
<td class="date today">7</td>
<td class="event important">8</td>
<td class="date today">9</td>
<td class="date today">10</td>
<td class="date today">11</td>
<td class="date today">12</td>
<td class="date today">13</td>
</tr>
<tr>
<td> </td>
<td class="description">Notes</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table class="week">
<tr>
<td class="date today">14</td>
<td class="event important">15</td>
<td class="date today">16</td>
<td class="date today">17</td>
<td class="date today">18</td>
<td class="event holiday">19</td>
<td class="date today">20</td>
</tr>
<tr>
<td> </td>
<td class="description">Notes</td>
<td> </td>
<td> </td>
<td> </td>
<td class="description">Forms Deadline</td>
<td> </td>
</tr>
</table>
<table class="week">
<tr>
<td class="date today">21</td>
<td class="date today">22</td>
<td class="date today">23</td>
<td class="date today">24</td>
<td class="date today">25</td>
<td class="date today">26</td>
<td class="date today">27</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table class="week">
<tr>
<td class="date today">28</td>
<td class="date today">29</td>
<td class="date today">30</td>
<td class="date today">31</td>
<td class="date today">1</td>
<td class="date today">2</td>
<td class="date today">3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="date today"> </td>
<td class="date today"> </td>
<td class="date today"> </td>
</tr>
</table>CSS
/* CALENDAR
================================================== */
table {
width: 100%;
font-size: 14px;
border-left: 1px solid #d6d6d6;
margin-bottom:2px;
}
th {
border-bottom: 1px solid #000;
padding: 22px;
font-weight: 400;
font-size: 18px;
font-weight: 700;
text-align: center !important;
background-color: #000;
color: #fff;
white-space: nowrap;
}
td {
border-right: 1px solid #d6d6d6;
}
#header-table tr:first-child {
background-color: #000;
text-align: center;
color: #fff;
border-top: 1px solid #000;
}
#header-table tr:nth-child(2) {
background-color: #D31145;
color: white;
border: 1px solid #D31145;
}
#header-table td {
padding: 4px;
}
#day-names {
text-align: center;
border-bottom: 1px solid #d6d6d6;
}
#day-names td {
width: 14.2857%;
height: 22px;
}
table.week {
font-size: 75%;
}
table.week {
height: 80px;
border-bottom: 1px solid #d6d6d6;
}
table.week td {
width: 14.2857%;
padding: 2px 3px;
}
td.today {
font-weight: normal;
background-color: #F0F0F0;
}
td.today.date {
font-size: 110%;
}
table.week tr:first-child {
height: 25%;
}
table.week tr:nth-child(2) {
height: 75%;
}
.event.holiday {
background-color: #D1F2EB;
}
td.event.important {
background-color: #1BBC9B;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}Sample
Note that this calendar also uses the Popover function.
| Month 2017 |
|---|
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
| 30 | 1 | 2 | 3 | 4 | 5 | 6 |
| Open Registration Register |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| Notes |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| Notes | Forms Deadline |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | 1 | 2 | 3 |
See a Live Demo
Share this Post
