Dynamic calendar icons for Drupal Themes

I liked the idea of Sotak's calendar icons at http://sotak.co.uk/calendar-icons-blog, but the colours didn't fit in with my theme, and I wanted the text to be a little easier to read.

So I made my own, using just 1 background image (.png and psd attached) and a slightly modified template.php.

DEC 31 1999
JAN 22 2008
FEB 9 2025
MAR 22 2008
APR 22 2008
MAY 2 2025
JUN 31 2008
JUL 22 2008

With a bit of imagination, and a few tweaks to the function, and a few lines of CSS these icons can be very flexible. Different colour for articles over a year old? No problem. Colour coded by taxonomy? Sorted.

Here's how it's done:

For your template.php: (Drupal 6.x)

<?php
function phptemplate_preprocess_node(&$vars) { 
    if (
$vars['node']->type == 'story' ){  
        
// Calendar for story nodes only 
 
$node = $vars['node'];
 
$month = strtoupper(format_date($node->created,'custom','M'));
 
$day = format_date($node->created,'custom','j');
 
$year = format_date($node->created,'custom','Y');
 
$calendar .= '<div class="calendar ' .$month .' ' .$year  .'" >
    <span class="month">'
.$month.'</span><span class="day"> '
   
.$day.' </span><span class="year">'. $year.'</span></div>';
   
$vars['calendar'] = $calendar;
  }
}
?>

And the CSS bits to add to style.css / your stylesheet. You may have to tweak the line heights a little depending on your site fonts:

/*
* Calendar for story nodes
*/

div.calendar {
  background: url(calendar.png) no-repeat 0 0;
  margin: 4px 10px 0 0;
  padding: 0;
  width: 55px;
  height: 57px;
  line-height: 100%  
  float: left;}
 
div.calendar span {
  display: block;
  width: 48px;
  text-align: center;
  }
div.calendar span.month {
  font-size: 12px;
  color: white;

  }

div.calendar span.day {
  font-size: 24px;
  line-height: 20px;
  background: none;
}
div.calendar span.year {
  font-size: 12px;
  background: none
}

Simply print the $calendar variable wherever you want it in your node.tpl.php:

<?php print $calendar ?>

I've placed mine like this:

<div class="node-header"><?php if (!$page): ?>
  <?php print $calendar ?>
  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
  <?php endif; ?>
   </div>

So it will only show up for node teasers rather than the page view. Note also that the preprocess_node function above only includes story type nodes.

It's not perfect - I had to resort to sizing the font in px rather than ems to get it to look nice in all browsers, and it'll look crummy in some mobile browsers, but hey hum.

Images attached below. And that's something else I haven't themed. I'd better add it to the 'to do' list!

AttachmentSize
calendar.png502 bytes
calendar.psd28.28 KB

Random Image:

Brighton beach again
Making tracks
Canal boat at twilight
Barons Court Tube

Pete's tweets (@prbass)

  • I'm still tweeting, but website won't update. So long and thanks for the fishy terms of service Twitter... 4 years 40 weeks ago
  • Entrance to Victoria underground station currently closed, why don't @TFLtravelalerts ever announce this? 4 years 50 weeks ago
  • Back from hols. Diary for tomorrow says "Data Monday" hard work on UK Civil Society Almanac 2013 begins in earnest 4 years 51 weeks ago
  • @FionaPSDN I love that NHS infographic - now I understand, these are not "top down" reforms, they are "middle out" 5 years 1 week ago