CSS Calendars II

Jess G. — Tue, 02 Dec 2008 08:28:53 +0000

The last tutorial on CSS Calendar Icons was pretty straightforward but lacked directions for integration with other blogging platforms. Here, I’m going to use WordPress as an example and I’ll work with my calendar book-style css icon.

 // begin calendar icon code
	$year = get_the_time('Y');
	list($y1,$y2,$y3,$y4) = str_split($year, 1);
?>
	 the_time('F jS, Y') ?>">
		
		$y1?> $y2?> $y3?>$y4?> 
		
			 the_time('M')?>
			 the_time('j')?>
		
	
 // end calendar icon code ?>

Here, we’re using the WordPress function get_the_time(), which works like the_time()—which means that it uses the same PHP Date and Time formatting characters as the_time(). Unlike the_time(), get_the_time() passes the result to a variable instead of echoing it, which is what we need here. We use get_the_date(‘Y’) to grab just the year-part of the date, then we use str_split() and list() to parse the individual numbers of the year into separate variables.
CSS Code:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}
/* Book-Style */
.book {
	width: 57px;
	font-size: 12px;
	font-weight: normal;
}
.book .cssCalInner {
	width: 36px;
	margin-left: 10px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
.book .spine {
	background: url(images/calendar_book.png) no-repeat scroll left center;
	display: block;
	float: left;
	width: 14px;
	height: 38px;
	position: relative;
	z-index: 1;
}
.book .year {
	font-size: 75%;
	background: purple;
	color: white;
	height: 38px;
	width: 15px;
	float: left;
	margin-left: -10px;
	position: relative;
	z-index: 0;
}
.book .year span {
	display: block;
	float: right;
	width: 10px;
	height: 8px;
}
.book .month {
	background: none;
	color: black;
}
.book .date {
	font-weight: bold;
	font-size: 120%;
}

Seems pretty straightforward, right?

Using WordPress? Go to the next page for a WordPress add-on to use in your own WordPress themes.

CSS Calendars

Jess G. — Sat, 29 Nov 2008 07:28:25 +0000

About sometime last fall, I came across a tutorial on how to create those little CSS calendar icons that are practically everywhere now. The method I found uses a background image and while that’s fine, I guess I prefer something that doesn’t require an image to bring off the design. This last layout that I’ve been working on for Dumpster-fairy.com makes use of those CSS icons, and to give credit where credit is due, I was very much influenced by the icons used at Last.fm for the events calender list. I came up with my own workable solution and I’ll walk you through my methods in this post.

Since I was going to be using a calendar icon in different places on my website, I obviously would want the icon to appear slightly different in each place; for instance, I use a larger calendar icon as part of the header for my blog posts, and a smaller event-like calendar for the side-bar. So, I start off specifying a series of default styles:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}

HTML Code:

<span class="cssCalendar" title="Friday November 28th, 2008">
    <span class="day">Fri</span>
    <span class="cssCalInner">
    	<span class="date">28</span>
        <span class="month">Nov</span>
        <span class="year">2008</span>
    </span>
</span>

This is what you should have:

I’ve tested the base styles in Firefox 3, IE 7, Safari and Opera 9.5 and it appears pretty much the same across the board. But it’s a little boring, don’t you think? So we move on to adding some additional styles:

/* Medium Size */
.medium {
	width: 52px;
	font-size: 18px;
}
.medium .cssCalInner {
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.medium .day {
	font-size: 100%;
	font-weight: bold;
	color: white;
	background: red;
}
.medium .date {
	font-size: 120%;
	font-weight: bold;
}
.medium .month {
	font-size: 75%;
	font-weight: normal;
}
.medium .year {
	font-size: 50%;
	font-weight: normal;
}

So this is what we do now. Our HTML fragment above? Change the first line to this:

<span class="cssCalendar medium" title="Friday November 28th, 2008">

Didn’t know you could have more than one class for an html tag? Well, now you do. Your calendar—browser depending, of course—should look like this:

We could leave this tutorial here or, we can go on. You can check out the Last.fm-style calendar icons on the next page.

Jes.Gs v2.0 » css

CSS Calendars II

CSS Calendars