Month: December 2016

HTML Calendar Template

~ macengr ~ Leave a comment

I maintain my church’s website here.  It is actually hosted by a higher level of the church (we call in a conference in the United Methodist Church) and they control the WordPress version updates, and things like that.  They also host any CSS files that are part of the themes we are able to use.

So what that means for me is: no custom themes, no customizing the CSS, no adding JavaScript files, and so on.  My add-ons are also somewhat limited.

So, I go back to old-school web development.  I use (horror!) inline CSS, and can put JavaScript stuff in the <body> of the document.

One thing we really wanted was to reproduce the calendar we send out in our dead-tree edition newsletter (we call it the Tidings).  There were lots of CSS options and other assorted stuff, but all required that I be able to upload files…which I couldn’t do, since that is controlled at the upper level.

So I created my own HTML template.  It takes me 10 – 15 minutes a month to update it.  I used a table format, and I use span and the CSS color property when I need color.  I make every other line have a gray background using the same inline CSS principle.  Here’s the template in case it’s useful to anyone out there, and you can see it in action here:

<table style="width:120%; table-layout: fixed" border="1" id="calendar">
<caption style="font-size: 3em; background-color: #eaeaea; text-align:center">MONTH NAME AND YEAR</caption>
<tr style="height:30px">
<tr style="height: 30px; background-color: #eaeaea">
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr style="height:100px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px; background-color: #eaeaea">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px; background-color: #eaeaea">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height:100px; background-color: #eaeaea">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>