Events listing system using Date, CCK and Views modules – Part 3

Events listing system using Date, CCK and Views modules – Part 3

This is the final part of the “Events listing system using Date, CCK and Views modules” series, if you missed the previous parts check them out:
Part 1 | Part 2

By now we have a simple events listing system, so in this part we’re going to look at some more advanced stuff and take this system further and improve it.

Make it look nicer
Right lets make our rather boring table list look abit nicer by adding an event photo and a location then switch it to a list view instead.

1 First things first, you should have imagecache and the imagefield modules installed.

2 Then go to the content type admin ( and add an imagefield to your event node type. Call it “Event Image”.
Don’t worry about the image resolution as we’ll create an imagecache preset to resize our image.
For neatness make the “Image path” “events” that way all our event images will be file in a folder together.
The rest of the fields can be left as they are but you may optionally want to provide a default image (at the bottom of the form) that will show if an event doesn’t have an image, i’m not going to bother for this example.

3 Save the new imagefield

4 Next we want to add an event location field so people know where the event is being held, so back to the content type admin (

5 Call the field “Event Location” and select “Text Field” under file type. If you can’t see the field type “Text Field” then you need enable the text.module under the CCK fieldset on your module admin page.

Field Order6 On the next screen you can leave everything as it is, you may optionally want to input some help text to all your fields to help users when they are creating events.

7 OPTIONAL – You may want to reorder the fields (using the weight drop down menus) at so the node form flows in a nicer order (see screengrab to the right).
Now we have all our fields set up as we want, lets change the output of our events view from a table to a teaser list.

View Type1 Edit the events view and select “teaser list” in the page fieldset under “view type”.
Now we are transfering all the theming to our node theming system and this combined with the contemplate module gives us more freedom and flexibility to adjust our events list.
This also means we can use the node template system to style our events page differenly to a list or table view for an events block if we wanted.

The contemplate module is allows you to edit the teaser and body output of nodes via it’s admin area, so if you don’t want to get your hands dirty with custom theming this module is a great alternative!

2 Download and install the contemplate module.

3 Go to and click the “create template” link to the right of the events table row.

4 The next screen is where you can adjust the output for both teaser and body view of your events. Contemplate fills out example code for you to build on and also lists all the $node variables available for you to use in your templates, all you need to do it check the “Affect teaser output” box to make it active.
Here’s the code i’m using:

field_event_image[0][‘view’] ?>

field_start_date[0][‘view’] ?> – field_end_date[0][‘view’] ?>

Location: field_location[0][‘view’] ?>

content[‘body’][‘#value’]; ?>

5 Now we have our template we need to make an imagecache preset to apply to our event image. Go to and create a new preset to suit your design, you’ll probably want to scale your image to say 130px wide and then crop it to something like 100px by 100px, so you’ll end up with a 100px by 100px square image.

6 Last thing to do is apply the imagecache preset to your event image, so go to the content type admin and then display fields ( and then under teaser for Event image select your new imagecache preset from the drop down menu (my preset is called event-image-thumbnail).
You may optionally want to change the output of other fields like the start and end dates.
Display fields
7 Add a bit of CSS and we’re done!
.event-dates {
font-weight: bold;
.event-location {
font-style: italic;
.event-body {
font-size: 0.9em;
.event-image {
float: left;
margin: 0 0.5em 0.5em 0;
.event-image img {
border: 1px solid #cccccc;
padding: 1px;
Our newly styled events list
Event list with style
Sorting by start date
Now we’re going to use views arguments to allow users to sort events by their start date (see grab below).
Event sorting
1 Edit our events view once again and scroll to the “page” fieldset and in the “header” textarea input:
$today = format_date(time(), ‘custom’, ‘Y-m-d’);
$tomorrow = format_date(time() + (1 * 24 * 60 * 60), ‘custom’, ‘Y-m-d’);
$month = format_date(time(), ‘custom’, ‘Y-m’);

$dates[] = l(t(‘Today’), ‘events/’. $today);
$dates[] = l(t(‘Tomorrow’), ‘events/’. $tomorrow);
$dates[] = l(t(‘This Week’), ‘events/’. $today .’–P7D’);
$dates[] = l(t(‘This Month’), ‘events/’. $month);
print t(‘Events starting’) .’: ‘. implode(‘ | ‘, $dates);

and in the “empty text” textarea add:
$today = format_date(time(), ‘custom’, ‘Y-m-d’);
$tomorrow = format_date(time() + (1 * 24 * 60 * 60), ‘custom’, ‘Y-m-d’);
$month = format_date(time(), ‘custom’, ‘Y-m’);

$dates[] = l(t(‘Today’), ‘events/’. $today);
$dates[] = l(t(‘Tomorrow’), ‘events/’. $tomorrow);
$dates[] = l(t(‘This Week’), ‘events/’. $today .’–P7D’);
$dates[] = l(t(‘This Month’), ‘events/’. $month);
print t(‘Events starting’) .’: ‘. implode(‘ | ‘, $dates);


No events to show
IMPORTANT! Make sure you select PHP code as the input filter.

2 Scroll down to the “arguments” fieldset and add an argument for “Datestamp: Start Date (field_start_date)”
Set default as “Use empty text” and the wildcard and wildcard sub to . Now in the “argument code” (in the “argument handling code” fieldset) add: if (arg(1) == ”) { $args[0] = ‘‘;
This code makes all our events show if no argument is provided.
Save your view and you should be done!!

Bare in mind that we are only using the start date as an argument as the date module doesn’t allow you to search a date range ie. start date to end date, this can be limiting be should work in most cases.
Add en events RSS feed
An RSS feed allows users to put your events into a feed reader and get updated when new events are added, this can be really useful and it’s simple to do.

1 Enable the views RSS module that comes as part of the view package.

2 Scroll down to the “arguments” fieldset and add an argument for “RSS: RSS Feed Selector”, select default as “display all values” and title as “ Events RSS feed”.
Now we need to edit our argument code to:
if (arg(1) == ”) {
$args[0] = ‘*’;
$args[1] = ”;
This code prevents the RSS feed view from showing by default.

That’s it, if you’re using Mozilla Firefox you should see a RSS feed icon in the right of the browser address bar on your events page.
RSS feed icon
Find out more about RSS feeds.
The sign up module
The signup module ( allows users to sign up (or register, as in register for a class) for nodes of any type. There are a collection of modules related to it that can do a whole load of useful things like allowing users to sign up for an event, offer paid sign ups for an event, restrict sign up to certain roles and more. Find out more at the project page:
So that concludes this 3 part events tutorial, I hope you are some the wiser and have enjoyed it!
Thanks for reading!!

Leave a Reply

Your email address will not be published. Required fields are marked *