Free weekly calendar

— Topic: css

Demo: calendar 1 / calendar 2 | download

Background

Hot on the heels of last week's article about creating time-sensitive CSS via PHP's date() format, I've whipped up another implementation. Some people didn't seem to comprehend what I was doing with the previous example, and one guy even cussed me out in the comments for using meta refresh instead of Ajax. Allow me to reiterate this shows only how to use PHP and CSS.

That being said, I have put together a weekly schedule, at the suggestion of guys from the Web Empowered Church. It is an international collaborative project, to help local churches get online that might not otherwise have an opportunity. Like many non-profit organizations, WEC is always looking for volunteers to lend their time and talents. Last year, I made a couple of monthly calendar templates, after which a weekly planner was requested.

Heed the Col

CALENDAR 1

One of the things I was determined to do this time around was to encorporate a columnar way to indicate the current day of the week. Like the last article, by using a simple snippet of PHP, I was able to achieve the desired effect…

<?php $day_name = date("D"); echo ("$day_name\n"); ?>

This outputs a three letter name of the current day of the week, according to the server clock: Sun, Mon, Tue, etc. That part was simple enough, but I was puzzled about how to style entire columns. TR is a fairly well known piece of HTML, but I wasn't aware of a columnar equivalent. Enter Jonathan Snook, who reminded me of a little-used but quite handy table trait, the colgroup…

<colgroup>
	<col id="Sun" />
	<col id="Mon" />
	<col id="Tue" />
	<col id="Wed" />
	<col id="Thu" />
	<col id="Fri" />
	<col id="Sat" />
</colgroup>

That allowed me to label each column of the calendar, and by using a little embedded PHP in CSS, I was able to assign a background color based on the current day. By using a transparent PNG image background for odd numbered table rows, this creates a nice little intersection / overlay, except not in IE6(Worst Browser).

Coddling Microsoft

CALENDAR 2

The alternative was to make each day's name a class, and have them spread throughout each TD in the table, adding 4kb to the file size because of 350 extra class declarations. Then, using TR as a decendant selector, I was able to fake the transparent overlay by specifically defining the color, guaged by taking a screenshot. Good browsers also have a nice row hover highlight.

It should be noted that while this can be emulated in IE with a JavaScript mouseover, I didn't consider the extra eye candy worth the additional code just for one browser, since there are already plenty of tutorials on that topic.

So, there you have it, a nifty little weekly day planner calendar with some cool row and column highlighting. Feel free to reuse the code for whatever you want. If you do, I'd appreciate a link back to my site, a quick email, or comment on this article; showing off how you've used it. Happy scheduling!

Me, elsewhere