Drupal Tutorials

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

You should have read parts one and two.
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 (yoursite.com/admin/content/types/event/add_field) 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 (yoursite.com/admin/content/types/event/add_field).

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 Order 6 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 yoursite.com/admin/content/types/event/fields 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 Type 1 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 yoursite.com/admin/content/templates 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:
<div class="event-content clear-block clear">
  <div class="event-image"><?php print $node->field_event_image[0]['view'] ?></div>
  <div class="event-dates"><?php print $node->field_start_date[0]['view'] ?> - <?php print $node->field_end_date[0]['view'] ?></div>
  <div class="event-location">Location: <?php print $node->field_location[0]['view'] ?></div>
  <div class="event-body"><?php print $node->content['body']['#value']; ?></div>
</div>
5 Now we have our template we need to make an imagecache preset to apply to our event image. Go to yoursite.com/admin/build/imagecache/add 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 (yoursite.com/admin/content/types/event/display) 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:
<?php
$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);
?>

<br /><br />
and in the "empty text" textarea add:
<?php
$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);

?>

<br /><br />
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 "Yoursite.com 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 (http://drupal.org/project/signup) 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: http://drupal.org/project/signup.
So that concludes this 3 part events tutorial, I hope you are some the wiser and have enjoyed it!
Thanks for reading!!

Commenting on this Tutorial is closed.

Categories:

Comments (35)

Chronnus's picture

Very cool, I’m doing a site with an events area and will definitely use this as reference.

Finally, the last part, I’m more understand with this topic. This one has very nice explanation.

karate gi sizing

droople's picture

Oh sweet.

It was worth the wait. It’s the views coding part that I had no clue about.

I will mention you on my site’s credits, and link back to this.

Don’t know if you are aware, but the notifications are not working.

Once again thank you.

Thank you for lessons. Find some useful.

But i have problem with theming.

Example in Step 4. Sometimes my picture goes beyond event teaser in IE6, and content structure crushes. In my css i put .clear {clear:both}. What styling could prevent this behaviour?

In your code, step 4, you have div with “clear-block clear” classes. Could you publish css for this div or tell how to fix this?

DrupalSN's picture

Hi,

The “clear” should work, but if it’s not you could do it like this:

<div class="event-content clear-block clear">
  <div class="event-image"><?php print $node->field_event_image<a href="#fn86338475853d5d9ec0325f">0</a>['view'] ?></div>
  <div class="event-dates"><?php print $node->field_start_date<a href="#fn86338475853d5d9ec0325f">0</a>['view'] ?><?php print $node->field_end_date<a href="#fn86338475853d5d9ec0325f">0</a>['view'] ?></div>
  <div class="event-location">Location: <?php print $node->field_location<a href="#fn86338475853d5d9ec0325f">0</a>['view'] ?></div>
  <div class="event-body"><?php print $node->content['body']['#value']; ?></div>
  <dv style="clear:left;"></div>
</div>

It’s a bit quick and the purests won’t like it but it should work. NOTE: It’s always better to put your clears in your css.

Thanks
Tom

Prodigy's picture

Just a suggestion …

I recently had to do something similar and here is what I did instead of putting the links for different time frames in the header.

1.) Using views, set the first view to be a default menu tab.

2.) Clone the view and only change the filter for time. sample_date_field is now + 86400. Also make sure you uncheck the default menu tab, and just make it appear as a tab.

3.) Repeat step 2 only changing the date filter, now + 604800 (week).

The most important part to getting this too work is making sure the views share the same url.

View 1(default) url= listing
View 2 url= listing/day
View 3 url= listings/week

As always … more than 1 way to do everything in Drupal.

So this question could probably be moved to part 1, but it goes along with making signup/etc. look a bit nicer. I installed the signup module and have it configured so that it is working.

I have been trying to figure out how to customize the input fields users are presented with when they try to sign up and as of yet have epic failed. There is a file in the signup folders that recommends copying an entire function to the template.php file. This sounds a bit dangerous and to be honest I can’t find my template.php file.

If anyone could help I would really appreciate it.

Oh, and with the lack of support information on the modules these tutorials are an amazing lifesaver. Thank you so much.

DrupalSN's picture

Hi,

I don’t know the sign up module(s) that well so i’d recommend following the instructions you found about the template.php file. It’s perfectly ok to add code to the template.php file :)

You’ll find the template.php file in your themes’ (the theme have set as default in the themes admin area) root folder, the same place as you’ll find the page.tpl.php file.

Hope that helps
Tom

Thanks for the reply. I also had another question as this last step doesn’t seem to be working with Views2. It looks like they made some radical change to the “View Type” option.

You now have to select a “Style” of which none are teaser. At any rate, after 6 hours trying to make it work I think I will abandon hope on making my event list pretty unless anyone has some suggestions.

DrupalSN's picture

Hi,

In views 2 you should select “Style: Unformatted” and then “Row style: Node” and in the row style section where you select “field” or “node”, select the “node” radiobutton and then click the “settings” link below the radiobuttons and check the “Display only teaser” checkbox.

Tom

Wow that looks good…thank you so much!

Sorry last question which will betray my experience level. In step 7 you say now we add some css.

To where would we add it?

Great Tutorial on Events.

Question:
Do you happen to know how to schedule enabling comments when your End Date is reached? That would be a handy function. No one should be commenting before or while the event is going on.. comments will most likely improve the quality of future Events if the organizer can have some feedback.

I searched in actions and workflow to see if I could target this but apparently there isn’t such an action.
Is there any module that allows you to do so?

Any ideas on this would be most welcome.
Cheers !

So far so good … instead of the sign up module … I wanted to use the ubercart node checkout feature which essentially allows purchase of any node by mapping it to a ubercart product. In this case, each class (a specific date event like above), I want to allow users to purchase.

Is anyone familiar with that?

NiMax's picture

This is a great tutorial. I need to create listings for our TV and Radio stations on a new site and this is a great start to doing that. As always there are many ways to do things but this has given me a great insight into manipulating views, dates and templates.

DrupalSN's picture

Hi,

Thanks for all the comments, keep um coming!
I have to say i just created an events system using Drupal 6 and the date API module is now much much better at handling multiday events, so things are even easier!!!

Cheers
Tom

4 Ace Technologies's picture

Hi Admin,
I need your help change content type of event module because i have done so much work on event module and now i want to change event content type to event_calender and i cant use other modules.Or if i am able to make a new content type and please tell me how can i relate this content type to my event module when i create any new event using this new content type these events should show in the event module calender block how is it posible ?
Any help will be appriciated ?
Thanks Admin to such a nice tutorial it will help me in the future.

4 Ace Technologies's picture

Hi Admin,
Can u please help on event module ? problem i have told you what i have to do ?

Thanks,

DrupalSN's picture

Hi,

I’ll try and help but this tutorial doesn’t use the events module so i’m confused as to why you need it?

Thanks
Tom

4 Ace Technologies's picture

Thanks to reply me,
Actually that my client requirement and also i have customize event module and theme now i cant change the event module thats why i must have to use this and relate with other content type.

I cant download from the link please help me get an alternate one. Thanks 4d scan

4 Ace Technologies's picture

please have a look on my code. I try to relate event_calender to event module and i use this code in function event_calendar_data()

<?php
$result_content
= db_query('SELECT * FROM {content_field_event_date} ');
   
    while(
$row_content = db_fetch_array($result_content)){
       
$result_event = db_query("SELECT * FROM {event} WHERE nid='".$row_content['nid']."' ");
       
//drupal_set_message("SELECT * FROM {event} WHERE nid='".$row_content['nid']."' ");
           
if(db_affected_rows()){
            }else{
               
$start_date = $row_content['field_event_date_value'];
               
$end_date = $row_content['field_event_date_value2'];
                   
$start = explode('T',$start_date);
                   
$end = explode('T',$end_date);
                   
$new_start = explode('',$start<a href="#fn86338475853d5d9ec0325f">0</a>);
                   
$new_end = explode('',$end<a href="#fn86338475853d5d9ec0325f">0</a>);
                   
                   
$start_year = $new_start<a href="#fn86338475853d5d9ec0325f">0</a>;
                   
$start_month = $new_start<a href="#fn24873075153d5d9ec44e21">1</a>;
                   
$start_day = $new_start<a href="#fn185744722153d5d9ec44ef6">2</a>;
                   
                   
$end_year = $new_end<a href="#fn86338475853d5d9ec0325f">0</a>;
                   
$end_month = $new_end<a href="#fn24873075153d5d9ec44e21">1</a>;
                   
$end_day = $new_end<a href="#fn185744722153d5d9ec44ef6">2</a>;
                   
                   
$first_event = _event_mktime(0, 0, 0, $start_month, 1, $start_year);
                   
$last_event = _event_mktime(23, 59, 59, $end_month + 1, 0, $end_year);
                   
                   
drupal_set_message('f:'.$first_event);
                   
drupal_set_message('l:'.$last_event);
                   
                   
db_query("INSERT INTO {event} (nid, event_start, event_end, timezone) VALUES (%d, %d, %d,'%s')", $row_content['nid'], $first_event, $last_event, $node->timezone);
                   
db_query("UPDATE {node} SET type = 'event' WHERE nid='".$row_content['nid']."' ");
                   
drupal_set_message("UPDATE {node} SET type = 'event' WHERE nid='".$row_content['nid']."' ");
            }
    }
?>

but it updates content type and when i edit this content it opens on event module.I am not understanding what i have to do with this ?
Any help ?

DrupalSN's picture

Hi,

Sorry I really don’t understand the problem or what you want to do :)? this tutorial doesn’t use the events module at all so I don’t understand why you have it install.

If you have a question about the events module or something not related to this tutorial please create a new question (http://drupalsn.com/question/add) and the community will try and answer it.

Thanks
Tom

How to get the Events for a particular groups.

I have groups(OG).Now I want the events for a particular group.

I am using drupal 6 and views 2

I want to migrate from using events module to using Date, CCK and Views modules – your tutorial has been really useful – however, like ashiwebi I also need a replacement for OG events.

Any chance of a tutorial on how to make events visible only to groups?
I suppose Events module could be retained just for OG events functionality –

Alpha Tandem ltd.'s picture

Hi there :-)

I’ve sorta followed up this tutorial on D6 & Views 2 even if it’s written for D5.

But now i’m stuck in the last part “Sorting by start date”
were you put php code (works ok) and then you provide arguments in views.

Now in views 2 things are obviously different and it simply doesn’t work the way it’s described:

“...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) == ‘’) {
$args0 = ‘*’;
} “

Please give me some help if you have a clue – thanks in advance!

Very nice and informative. Step by step configuration. It helps to use it better.

P90X

I have same problem like plamenut i’m stuck in the last part “Sorting by start date”
were you put php code (works ok) and then you provide arguments in views. give me some advise too.

Miele Vacuum Cleaners

Bassquarters's picture

Great tutorial, but I am setting up the view and I don’t see the start_date datestamp as an option to choose from the group dropdown when setting up the FILTER fields.

In the “Sort criteria” drop down list I do see it.

Someone can help me?

DrupalSN's picture

@Evolver
Sounds like you’re on Drupal 6 which is slightly different, although the principles in this tutorial should work for Drupal 6 too.

Look for something like “Content: Event Date” and then within the field settings you can select “Display from date only” in the format drop down menu.

Thanks
Tom

Bassquarters's picture

@Admin, yes I’m on Drupal 6. I discovered the “problem”. The “Content: Event Date” option is not in the dropdown menu but on a seperate screen.

Other Drupal 6 users who want to use this feature:

If you want to display only events that are in the future (or today) you have to do this in the ‘views’ screen;

Filters => Add => Date => Date: Date (node) => Click “ADD”

=> Now you will see a screen where you can select the type of date you want to filter, in this case: “Content: Event Date”. Click “update”

=> In this screen you set the operator:
Select “Is Greater or Equal to” and in the “Date default:” box type: now

The filter is now set and will only display events in the future.

Excellent it was nice to know about these things…. I am just a beginner it is excellent to know these things….

Brighton dentists

Events listing system is just toooo cool! I have tried this method, it works well!

It was nice going through it. keep it up the good work.
–thanks–

from picture framer glasgow florist

Hi – I’m working on Elastic City (http://elastic-city.com) and am wondering how I can turn the 24h time into am/pm time.

I’m using Ubercart to create these pieces of content and the jquery date.time picker as well

Example product:
http://www.elastic-city.com/walks/carroll-street-soundwalk/dates/04/28/2010