Nicely Formatted Calendar Dates:
Required: Event Module
Haven being thoroughly impressed by the calendar output designed by Lullabot at www.fearlessliving.org, I set about creating this myself.
When I had worked it out, I asked jjeff for permission to use this. He went one better, he send me the entire code used on lullabot.com here.
Here follows his code.
Thanks Jeff!
Stick this into template.php:
-----------------------------------------------
<?php
/**
* theme_event_nodeapi()
*/
function phptemplate_event_nodeapi($node) {
$zones = event_zonelist();
$zone = $zones[$node->timezone];
$show_times = !(format_date($node->event_start, 'custom', 'H:i',$node->start_offset) == "00:00");
$show_times = $show_times && !(format_date($node->event_end,'custom', 'H:i', $node->end_offset) == "23:59");
$same_day = (format_date($node->event_start, 'custom', 'mdY',$node->start_offset) == format_date($node->event_end, 'custom','mdY', $node->end_offset));
$output .= '<div class="event-box">';
// start date
$output .=
'<div class="event-nodeapi">
<span class="event-calbox">
<span class="event-month">'.format_date($node->event_start,'custom', 'M', $node->start_offset).'</span>
<span class="event-hide"> </span>
<span class="event-date">'.format_date($node->event_start,'custom', 'j', $node->start_offset).'</span>
<span class="event-hide">, </span>
<span class="event-year">'.format_date($node->event_start,'custom', 'Y', $node->start_offset).'</span>
</span>';
if ($show_times){
$output .= '<span class="event-hide"> - </span><span class="event-time">'.format_date($node->event_start, 'custom', 'g:i a', $node->start_offset).'</span>';
}
$output .= '</div>';
// check that end date is not the same day
if (!$same_day) { // remove this line and the end brace (marked below) to always show end time
$output .= '<div class="event-to">to</div>';
$output .=
'<div class="event-nodeapi">
<span class="event-calbox">
<span class="event-month">'.format_date($node->event_end,'custom', 'M', $node->end_offset).'</span>
<span class="event-hide"> </span>
<span class="event-date">'.format_date($node->event_end,'custom', 'j', $node->end_offset).'</span><span class="event-hide">,</span>
<span class="event-year">'.format_date($node->event_end,'custom', 'Y', $node->end_offset).'</span>
</span>';
if ($show_times){
$output .= '<span class="event-hide"> - </span><span class="event-time">'.format_date($node->event_end,'custom', 'g:i a',$node->end_offset).'</span>';
}
$output .= '</div>';
} // remove this line and the beginning if statement (marked above) to always show end time
if ($show_times){
$output .= '<div class="event-zone">'. $zones[$node->timezone] .'</div>';
}
$output .= '<div class="clear"> </div>
</div>';
return $output;
}
?>and this into style.css:
--------------------------------------------------
/* Event Date Display (desk calendar page) */
.event-box {
width: 160px;
}
.event-nodeapi {
width: 5em;
margin: .4em .3em .2em 0;
text-align: center;
float: left;
}
.event-nodeapi span {
display: block;
text-align: center;
}
.event-nodeapi .event-hide{
display: none;
}
.event-calbox {
border: 1px solid #999;
}
.event-month {
color: #FFF;
background-color: #666;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
line-height: 1.2em;
}
.event-date {
color: #000;
background-color: #FFF;
font-weight: bold;
font-size: 3em;
line-height: .9em;
padding: .05em 0 0;
text-transform: inherit;
}
.event-year {
color: #666;
font-size: .9em;
line-height: 1.1em;
background-color: #FFF;
}
.event-time {
color: #333;
font-size: .9em;
}
div.event-to {
margin-right: .3em;
text-align: center;
float: left;
color: #999;
font-weight: bold;
font-size: 1.5em;
padding-top: 1.5em;
width: 1.5em;
}
br.event-clear {
clear: both;
}
.event-nodeapi-tz label{
font-weight: bold;
}
great example, a step further
This example helped me out alot, it was the perfect intro to theming for the project I was working on. After taking a look at the site referenced above, I decided that I also wanted to use jjeff's box on the right hand side for event specific information (event start and end time, location, address, google map, etc). I had tried to use the sidecontent module to put this information in, but it wasn't exactly what I was looking for, so I added code from jjef's site to get what I wanted. Below is the extended function and css that I used to get the result.
fucntion from my template.php file in my custom theme:
function phptemplate_event_nodeapi($node) {
$zones = event_zonelist();
$zone = $zones[$node->timezone];
$show_times = !(format_date($node->event_start, 'custom',
'H:i',$node->start_offset) == "00:00");
$show_times = $show_times && !(format_date($node->event_end,'custom',
'H:i', $node->end_offset) == "23:59");
$same_day = (format_date($node->event_start, 'custom',
'mdY',$node->start_offset) == format_date($node->event_end,
'custom','mdY', $node->end_offset));
$output .= '<div class="workshop-right">';
//this is where we put the desktop calender start and end dates
$output .= '<div class="centerizer clear-block">
<div class="event-box clear-block">';
// start date
$output .=
'<div class="event-nodeapi">
<span class="event-calbox">
<span class="event-month">'.format_date($node->event_start,'custom',
'M', $node->start_offset).'</span>
<span class="event-hide"> </span>
<span class="event-date">'.format_date($node->event_start,'custom', 'j',
$node->start_offset).'</span>
<span class="event-hide">, </span>
<span class="event-year">'.format_date($node->event_start,'custom', 'Y',
$node->start_offset).'</span>
</span>';
if ($show_times){
$output .= '<span class="event-hide"> - </span><span
class="event-time">'.format_date($node->event_start, 'custom', 'g:i
a', $node->start_offset).'</span>';
}
$output .= '</div>';
// check that end date is not the same day
if (!$same_day) { // remove this line and the end brace (marked below) to always show end time
$output .= '<div class="event-to">to</div>';
$output .=
'<div class="event-nodeapi">
<span class="event-calbox">
<span class="event-month">'.format_date($node->event_end,'custom',
'M', $node->end_offset).'</span>
<span class="event-hide"> </span>
<span class="event-date">'.format_date($node->event_end,'custom',
'j', $node->end_offset).'</span><span
class="event-hide">,</span>
<span class="event-year">'.format_date($node->event_end,'custom',
'Y', $node->end_offset).'</span>
</span>';
if ($show_times){
$output .= '<span class="event-hide"> - </span><span class="event-time">'.
format_date($node->event_end,'custom', 'g:i a',$node->end_offset).
'</span>';
}
$output .= '</div>';
} // remove this line and the beginning if statement (marked above) to always show end time
//we don't care about time zones right now
/*
if ($show_times){
$output .= '<div class="event-zone">'. $zones[$node->timezone]
.'</div>';
}
*/
$output .= '<div class="clear"> </div>
</div>
</div>';
//this is where we put the venue
$output .= '<h4>Venue</h4>
<div class="location vcard">
<div class="adr">
<div class="fn">' .
$node->field_location[0][value] .
'</div>
<div class="street-address">';
if (!empty($node->field_locationgooglemap[0][value])) {
$output .= l($node->field_locationaddress[0][value],
$node->field_locationgooglemap[0][value]);
} else {
$output .= t($node->field_locationaddress[0][value]);
}
$output .= '</div>';
//this closes off the "location vcard" and "adr" classes
$output .= '</div></div>';
//then we list screenings which are optional
if (!empty($node->field_screeningtime)) {
$output .= '<h4>Screenings</h4>';
foreach ($node->field_screeningtime as $screeningtime) {
$output .= '<div class="screeningtime">' .
$screeningtime['view'] .
'</div>';
}//foreach
}//if we have screeningtimes
//$output .= "<pre>" . print_r($node, 1) . "</pre>";
//this closes off the "workshop-right" class
$output .= '</div>';
return $output;
}
this is the css that I am using to take care of the presentation from the style.css file in my custom theme:
.event-box {
width: 160px;
}
.event-nodeapi {
width: 5em;
margin: .4em .3em .2em 0;
text-align: center;
float: left;
}
.event-nodeapi span {
display: block;
text-align: center;
}
.event-nodeapi .event-hide{
display: none;
}
.event-calbox {
border: 1px solid #999;
}
.event-month {
color: #FFF;
background-color: #666;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
line-height: 1.2em;
}
.event-date {
color: #000;
background-color: #FFF;
font-weight: bold;
font-size: 3em;
line-height: .9em;
padding: .05em 0 0;
text-transform: inherit;
}
.event-year {
color: #666;
font-size: .9em;
line-height: 1.1em;
background-color: #FFF;
}
.event-time {
color: #333;
font-size: .9em;
}
div.event-to {
margin-right: .3em;
text-align: center;
float: left;
color: #999;
font-weight: bold;
font-size: 1.5em;
padding-top: 1.5em;
width: 1.5em;
}
br.event-clear {
clear: both;
}
.event-nodeapi-tz label{
font-weight: bold;
}
.workshop-right{
width:180px;
float:right;
border:2px solid #7baad5;
padding:5px;
margin:0 0 5px 10px;
}
.centerizer{
text-align:center;
}
.workshop-right h4{
margin:1em 0 .5em 0;
border-bottom:1px solid #999;
}
.location dd,dl.location{
margin:0;
}
hackbloc.org : exploit code not people