HTML/CSS

I coded a calendar style based on Pretty Little Calendar by the fantastic Orman Clark.

The style is based in the WordPress calendar widget markup, so you can just copy the css below and paste it in your theme style and you’re done.

Its not an exact copy because, as I said, the markup is based in WordPress calendar widget, which makes it easy to use.

The markup is also included in the post in case you want to include it somewhere outside WordPress

Demo

The style:

#wp-calendar {
    color: #666;
    font-size: 12px;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

#wp-calendar a {    color: #467b89 }

#wp-calendar caption {
    background: #383838;
    color: #e0e0e0;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
    -webkit-box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
    border: 1px solid #373737;
    z-index: -99;
}

#wp-calendar thead th {
    font-size: 8px;
    padding: 5px 0;
    color: #666;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border-bottom: 1px solid #bbbbbb;
    background: #f7f7f7;
    background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#f1f1f1));
    background: -moz-linear-gradient(top,  #f7f7f7,  #f1f1f1);
}

#wp-calendar tbody td {
    color: #666;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    padding: 8px;
    text-align: center;
    font-weight: bold;
    border: 1px solid;
    border-color: #fff #bbbbbb #bbbbbb #fff;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#dedede));
    background: -moz-linear-gradient(top,  #ededed,  #dedede);
}

#wp-calendar tbody td.pad {
    background: #f5f5f5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ececec));
    background: -moz-linear-gradient(top,  #f5f5f5,  #ececec);
}

#wp-calendar tfoot {
    color: #e0e0e0;
    font-size: 12px;
    text-align: center;
}

#wp-calendar tfoot tr {
    background: #f5f5f5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ececec));
    background: -moz-linear-gradient(top,  #f5f5f5,  #ececec);
}

#wp-calendar tfoot td {    padding: 10px 10px }

#wp-calendar tfoot a {
    color: #666;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#wp-calendar tfoot td#prev {    text-align: left }

#wp-calendar tfoot td#next {    text-align: right }

#wp-calendar #today {
    color: #fff;
    border: 1px solid #467b89;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    background: #6eafbf;
    background: -moz-radial-gradient(50% 50% 0deg,ellipse cover, #6eafbf, #569EB1);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 20, from(#6eafbf), to(#569EB1));
}

The markup:

<table id="wp-calendar">
<caption>March 2011</caption>

<thead>
<tr>
<th scope="col" title="Monday">M</th>
<th scope="col" title="Tuesday">T</th>
<th scope="col" title="Wednesday">W</th>
<th scope="col" title="Thursday">T</th>
<th scope="col" title="Friday">F</th>
<th scope="col" title="Saturday">S</th>
<th scope="col" title="Sunday">S</th>
</tr>
</thead>
<pre> <tfoot>
<tr>
<td colspan="3" id="prev"><a href="#" title="">&laquo; Feb</a></td>
<td>&nbsp;</td>
<td colspan="3" id="next"><a href="#" title="">Apr &raquo;</a></td>
</tr>
</tfoot></pre>
<tbody>

<tr>
<td colspan="3">&nbsp;</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>9</td><td>10</td><td>11</td>
</tr>

<tr>

<td>12</td><td>13</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>22</td><td id="today">23</td><td>24</td><td>25</td>
</tr>

<tr>
<td><a href="#" title="">26</a></td><td>27</td><td>28</td><td>29</td><td>30</td><td colspan="2">&nbsp;</td>
</tr>

</tbody>

</table>

If you want WordPress to display Mon instead of M you need to paste this in the place you want the calendar within your theme

<?php get_calendar(false); ?>

Demo