Journal
Free Weekly Calendar
17 February 2006 › 25 comments
Demo: Calendar 1 / Calendar 2 | Download : weekly.zip
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 implimentation. 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.
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!
Discussion + Dissension
Comments closed after 2 weeks.
#1 Echilon
I love CSS mouseovers :D
Nice work.
#2 Echilon
I meant to ask. Is this generated dynamically, eg from a database? If it it, you must have a hell of a complictaed bit of logic. You’re listing every day, every hour. That would make a total of 168 SQL queries?
#3 Nathan Smith
Echilon: Nope, no server involved. That’s a bit beyond what I had time to do, and I’m more of a front-end guy myself. It simply takes the server’s current day, and writes that to the CSS, providing a highlighted column. Time doesn’t factor in, aside from going on to the next day. It’s dynamic, but simple.
#4 Matthew Smith
Nathan,
This turned out great.
i’m glad Jonathan was able to help you figure out the colgroup. I wouldn’ have known that at all. Far to inexperienced. You may consider posting this over at the textpattern forums as someone may pickup the possibility of developing a plugin to fill in the dates/event with TXP?
If you’re not up to it (time wise), but wouldn’t mind posting it there, I’d be up for it?
Just a thought.
I’m looking forward to seeing what some code wizard can do for this on the CMS side of things, but you have a really sweet, clean system here on the html/CSS side of things! Well done.
#5 Nathan Smith
Matthew: That’s cool if you post it on the TXP Forum bro. I’ve got too many other things going on to pursue CMS development for this. I’m perfectly fine with someone doing that though, just not me. Thanks for the compliments.
#6 Owen Waring
Nicely done.
I got a huge kick out of the early morning schedule (2am – dream of flying, 3am – wrong number ;)
#7 Jonathan Snook
Echilon: Just to clarify, if you were to do this from a backend, this would only be one SQL call that would return all records for the week. Then, you’d simply loop through the recordset for each hour. (Although, you could probably set up something where you’re not looping through ALL the records EACH hour…)
#8 Jonathan
So… am I to understand that the only time you get a decent night’s sleep is when you’re dreaming of flying? I also love the pillow flip, because as we all know, a fresher pillow is a better pillow!
Seriously though, I like what you’ve done here – good show of what the colgroup tag can be used for.
#9 Nick Presta
This is sort of similar to something I did. I used PHP’s date() functions and CSS to create a real time calendar. (http://nickpresta.ath.cx/scripts/calendar.php).
I’ve been too lazy to implement a way to move forward/backward in time, but it works.
#10 cody lindley
Nice work!
#11 Wesley Walser
I so want to try to make this pull from a database.
I also want to write a blog entry on not getting distracted by tempting side projects like this.
#12 Joshua
I would never heard of “colgroup” if it wasn’t because of this article. Thanks Jonathan and Nathan.
#13 Joe
Just a note on the SQL/PHP type thing…
Obviously, every event would have a datetime attribute. My one sql statement would order by that datetime, then as i loop through the hours inside the days, you pop every item out of the array that has that day/time. One SQL statement, only goes through the events array once, way faster than multiple selects…
Sweet calendar by the way, it’d be really neat if you had the columns(days) highlight as well. I can imagine a pretty neat scriptaculous edit-in-place implentation of this calendar…
#14 Larry
Man, it’s been years since I’ve done some SQL calls and array loops… I wanna use this on a website, but I’m so out of practice. Anyone have some code to populate this from a DB?
#15 Julian Schrader
I read about colgroup before – but this is awesome! Thanks for the hint – the calendar is sweet. I’m developing my own project management tool, a calendar will of course be included. I’ll have a closer look at this one!
Cheers,
Julian
#16 Nathan Smith
I’m glad you guys liked my example. While some of the mundane details of my own life are sprinkled in there, much of it was just made up for filler. I figured that it sure beats reading line upon line of “Lorum Ipsum.”
Joe: I did a few experiments, but I don’t think it’s possible to do a
col:hoverbackground-color change with just CSS. However, after some searching, I found this example from Centricle.com. It’s done with JavaScript, but the column color only works in Firefox, not IE or Opera. Not sure about Safari.As far as linking this to a database, as Larry suggested, I’d love to see that be done. I’m a perfectionist, and don’t really have time since I’m finishing up grad school, but a far-off goal of mine is to learn enough to make a really nice, free calendar CMS for anyone to use. It’s been my experience when doing church websites that a blog CMS can be used to handle most all their content, but there really aren’t any good, self-hosted calendar packages.
#17 Tim Huegdon
Echilon: You wouldn’t need to do a query for each cell – that would be a little silly. You could grab all records for the week, ordered by date and time and load them into an array. You could then traverse the array and build up a second 2 dimensional array (1st dimension days, 2nd dimension time).
Then all you need to do for each cell is reference the array by which cell you’re in – for example (in PHP), Monday 9:00am would be $week_array(1, 18).
Having just written several different calendar utilities for the intranet at work, I can guarantee this works!
:-)
Sorry if I’m hijacking your comments Nathan!
#18 Nathan Smith
Tim: No worries – You’re not hijacking the comments. Feel free the interject / contradict, or in any other ways add to the discussion! I’ve more or less accepted my lot as a front-end designer, which is why I’m throwing out there what I’ve got, so that others can take it and run with it if they so desire.
#19 david b
wow somebody cussed you out for not using meta refresh in the last articles comments, thats just rude, i must have missed that.
again this is very nicely thought out and achieved Nathan.
#20 Nathan Smith
David: Yeah, though I won’t repeat what he said here. I think he saw a clock, thought “so what,” and didn’t really see what I was getting at as far as rotating CSS, not just live updating JPG’s or text. Thanks, by the way.
#21 Dennis Bullock
This is good stuff Nathan. I can wait to dig into it and see how it works. Thanks as always.
#22 Renato Targa
There are two things we should consider: first, one important difference between COL and COLGROUP tags, as specified at W3C:
“The COL element allows authors to group together attribute specifications for table columns. The COL does not group columns together structurally—that is the role of the COLGROUP element.
COL elements are empty and serve only as a support for attributes. They may appear inside or outside an explicit column group (i.e., COLGROUP element).
The width attribute for COL refers to the width of each column in the element’s span.”
I would create seven colgroups to set the ID attributes instead of one col for each day.
And another W3C specification: COL and COLGROUP only supports four CSS visual effects: border, background, width and visibility.
“Table cells may belong to two contexts: rows and columns. However, in the source document cells are descendants of rows, never of columns. Nevertheless, some aspects of cells can be influenced by setting properties on columns.”
#23 Nathan Smith
Renato: While it’s certainly appreciated, I’m not sure what prompted you to write some of this. I don’t remember saying that either
colorcolgroupwere the same thing. I do realize that the thecolgroupis simply a wrapper / container for the columns. Anyway, I did find the quote about the four visual effects for thecolto be very helpful. Thank you for that information. :)#24 Mike Montgomery
FYI, saw an interesting calendar on CSSPlay
#25 Alex
Having been inspired by the work of this thread i decided to extend on its idea. Iv had the need to create a weekly view schedule like above (not date dependant, just a week in, week out schedule) from database information, and until now had struggled, but with the aid of this calendar and the use of the PHP xAjax class iv managed to create the beggining of a dynamic weekly schedule. This is just a very quick dirty model, and have noway finished it yet, just wanted to share the ideas
Download my hack of this from www.northwalesorganics.co.uk/dynamic_week.zip
Hope this helps someone!