Creating calendar icons in Drupal

Recently I was looking for a way to add small calendar icons to the posts on my Drupal site. There are a number of solutions out there for drupal, but the ones I found all used icons, which was an approach I was trying to avoid.  Here is a good example for drupal using icons.

Finally, I found some examples for wordpress that were pure html+css without any images. I have taken that example and drupal-fied it. When done, you will have nice calendar icons that show the current date of the post, and a flexible way of including the icons anywhere you would like.

The end result:

Read on for the instructions.

How we get there

You will need the ability to edit your theme's stylesheet, and you will need to make a small change to one or more template files, like node.tpl.php.

First, lets add the css.  For my example, I am going to use some rounded rectangles with a gray header and a little dropshadow.  The css is quite simple, so feel free to play around to get the look you want.  Add something like the following to your themes stylesheet:

/* Post Calendar
-------------------------------------------------------------- */
.calendar {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    background: #ebebeb;
    border: 1px solid #555555;
    font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    float: left;
    margin-right: 10px;
    width: 41px;
    height: 47px;
    font-size: 12px;
}
.calendar > span {
    display: block;
}
.calendar > .month {
    -moz-border-top-left-radius: 3px;
    -moz-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #a9a9a9;
    border-bottom: 1px solid #555555;
    font-weight: bold;
    padding: 0 2px 0 2px;
    text-align: center;
    color: #ffffff;
    line-height: 1.5;
}
.calendar > .day {
    -moz-border-bottom-left-radius: 3px;
    -moz-border-botton-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #f6f6f6;
    padding: 2px 0 2px 0;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    line-height: 1.3;
}

Now that you have the styling, you need the HTML and php to display the date.  This is accomplished by putting some code in your theme template files.  In most cases, this will be node.tpl.php, but it could be anywhere you want it.  I chose node.tpl.php, as I want the date to appear in each node display.

In my case, I am using the Mix and Match theme, so my addition to node.tpl.php looks like this:

original:

    <?php if ($page == 0): ?>
    <h2 class="title"><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
    <?php endif; ?>

modified:

    <?php if ($page == 0): ?>
      <div class="calendar">
          <span class="month"><?php print Date("M", $node->created) ?></span>
          <span class="day"><?php  print Date("j", $node->created) ?></span>
      </div><!-- calendar -->
    <h2 class="title"><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
    <?php endif; ?>

As you can see, next to the node title I have put in a simple div and span to display the node creation date.  The CSS styles we added earlier will make sure it is styled correctly.

In this example, this code is only added if '$page==0'.  That's a drupal way of saying that we should only show this code when the node teasers are displayed and not on a full node page.  Your theme may be different.

That's it! Clear your cache and enjoy!