Customizing the date display in event.module

Posted by emmajane on September 28, 2008 - 3:07pm in

I've been working on the campaign Web site to elect Dick Hibma (for the Canadian federal election). Elections are "always" a bit of a crunch. We aren't allowed to spend money on campaign material before the writ is dropped and there are a lot of rules around fundraising, and how money can be spent. As a result campaign teams try to work as efficiently as possible, wherever possible. In the case of the local Green Party this meant recycling the provincial campaign site from the 2007 election (which has since been recycled into the Deputy Leader's site which was originally recycled from a Garland theme) into a federal campaign site. On each iteration of the basic theme I tweak a few more things. One of the things I tweaked this time was the display of calendar events.

The site uses Drupal's event.module (yes, it's a D5 site). On the front page of the site we use the module-provided block, "Upcoming events list" which links to each event's page (you can click through to the full calendar at the bottom of each event, but that's more of an easter egg for campaign staff who want the overview of all events). Here's how I adjusted the theme for the campaign site.

0. Use the right tools

It took me a while to figure out why the dates weren't being formated as I expected. I'd been playing with PHP's function date(). The problem was that the event times were all wrong. As soon as I realized I was getting the server's time, not Drupal's time I started digging deeper. That's when I found Drupal's function format_date(). It uses Drupal's time instead of the server's time. Excellent! You can also use this function to hook into the "short", "medium" and "long" formats that you set in Drupal's Date and Time settings page. Cool! I chose to go with "custom" because in this instance I wanted to break the time away from the date only in this instance (I didn't want to turn off the time displays site-wide). 

1. Upcoming event block

upcoming events block

In the theme's template.php file you will need to add the following theme override.


function THEMENAME_event_upcoming_item($node) {

$output .= '<span class="event-timeleft">'. format_date($node->event_start, 'custom', 'l, M. j', $node->start_offset) .'</span>';
$output .= l($node->title, "node/$node->nid", array('title' => $node->title));
return $output;

}

In your theme's stylesheet add the following:


span.event-timeleft {
text-align: left;
}

.more-link, .ical-link {
text-align: left;
}

 

2. Event "node" (aka the full page view of a single event)

event node (full page)

In the theme's template.php file you will need to add the following theme override.

function THEMENAME_event_nodeapi($node) {

$output = '<div class="event-nodeapi"><div class="'. $node->type. '-start">';
$output .= '<label>'. t('Date: ') .'</label>'. format_date($node->event_start, 'custom', 'l F j, Y', $node->start_offset) .'</div></div>'."\n";
$output .= '<div class="event-nodeapi"><div class="'. $node->type. '-start"><label>'. t('Start: ') .'</label>'. $node->start_time_format .'</div></div>'."\n";
if ($node->event_start != $node->event_end):
$output .= '<div class="event-nodeapi"><div class="'. $node->type. '-end"><label>'. t('End: ') .'</label>'. $node->end_time_format.'</div></div>'."\n";
endif;
return $output;

}

In the global settings for all themes, turn off the option to print the date information for events (this is confusing at best because it shows the date the event was added ABOVE the date of the event). Navigate to Administer >  Themes > Configure. Under "Display post information on" turn off the display information for "Event" nodes.

Regardless of your politics, hopefully this tidbit on event theming will be useful to you!

Comments

Leave your feedback at the bottom. Comments may be held in moderation.

Post new comment
The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <span> <img> <blockquote> <b> <i>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.