21 - Implementing the Event Calendar Details Template
In this chapter I’ll cover the implementation of the Event Details template. This is the template that will load when a site visitor clicks an event title on the default calendar view, and will display the rest of the information about the event. New ExpressionEngine functionality covered in this chapter is the display of related entries. In our case this will mean displaying the name of the ministry group that is sponsoring the event, and linking ministry name to the ministry detail page.
Where I’m Headed:
With the Calendar Index in place, I now need to have those event title links go somewhere, and a place to display all the remaining content for the event. You can get a preview of where I’m headed by viewing the finished result of the calendar details template.
This template will serve the following purposes:
- It will display the complete event information.
- It will allow site visitors to comment on the event - questions beforehand or reviews afterwards.
- The comments could also be used as an informal event RSVP - just by asking people to post a quick comment if they intend on coming.
- It will serve as a link target for other places on the site that will display events (the home page and on ministry detail pages).
- It will link to the sponsoring ministry for the event.
The Steps
I already have the basic weblog, template group and content entered—so this chapter should be pretty quick and easy. Here are the overall steps:
- Create a events/details template
- Copy ministries/details as a starting point
- Tweak the title and location indicators
- Change content area code
- Update events/index to add links
Create events/details
Create a new template in your Events template group. I’ve named mine “details”—you can choose a different template name, just remember to use your name in all the links pointing at the template. The ministries/details template is a good starting point for events/details, so either choose to copy it while creating the new template or copy/paste the code in once you’ve created a blank template.
Tweak the Title and Location Indicators
Go through the top part of the template code and change any references from “ministries” to “events”. You’ll find them in the static page title text, the weblog parameter for the dynamic part of the page title, the body_id tag, and the my_location variable in the main navigation embed.
Change the Content Area Code
As usual I’ll provide the complete template code in a text file at the bottom of this post. Here’s the content area code it will contain - take a scan through it then I’ll cover the highlights after:
<!--BEGIN CONTENT SECTION-->
<div class="interiorBox">
<h2>Event Details</h2>
<div class="content_page_right">
{!--This is the main weblog:entries tag that will
return the text content for this event. --}
{exp:weblog:entries weblog="events" disable="trackbacks|member_data|pagination"
limit="1" show_future_entries="yes"}
<div class="post">
<h3>{title}</h3>
{event_details}
</div>
{/exp:weblog:entries}
{embed="embeds/comments_form" the_weblog="events"}
</div>
<div class="content_page_left">
{!--Using a second weblog:entries tag mostly to keep
the template code more understandable. --}
{exp:weblog:entries weblog="events" disable="trackbacks|member_data|pagination"
limit="1" show_future_entries="yes"}
<div class="event_details">
<h3>When:</h3>
<p>
{entry_date format="%F %d, %Y"} {entry_date format="%g:%i%A"} <br />
for {event_duration} hours
</p>
</div>
<div class="event_details">
<h3>Where:</h3>
<p>{event_location}</p>
</div>
{if event_cost}
<div class="event_details">
<h3>Cost:</h3>
<p>${event_cost}.00 </p>
</div>
{/if}
<div class="event_details">
<h3>Contact:</h3>
<p>{event_contact_name}<br/>
{event_contact_email}<br/>
{event_contact_phone}</p>
</div>
{if event_sponsoring_ministry !="0"}
<div class="event_details">
<h3>Sponsoring Ministry</h3>
{related_entries id="event_sponsoring_ministry"}
<p><a href="{url_title_path=ministries/details}">{title}</a></p>
{/related_entries}
</div>
{/if}
{/exp:weblog:entries}
</div>
Show Future Entries
Note the use of the “show_future_entries” in all weblog:entries tags. If you don’t specify this the page will come up blank when you try to bring up the details for an event that hasn’t happened yet. Note that the same change needs to happen in the weblog:entries tag that builds the page title.
Commenting
Adding the ability to comment on an event is easily done by adding :
{embed="embeds/comments_form" the_weblog="events"}
This is when the time invested in setting up comments as embedded templates really pays off.
Handling Fields That May Be Empty
This code has two areas that look for fields having content before displaying them. The first one is for an event cost. Not all events will have a cost, and I don’t want the template to show a blank “Cost” area if there hasn’t been one entered. So the following code first checks for a value in the event_cost field and only displays the whole div if there is a cost:
{if event_cost}
<div class="event_details">
<h3>Cost:</h3>
<p>${event_cost}.00 </p>
</div>
{/if}
Note that I’ve used a shorthand approach to the if statement. I could also use:
{if event_cost!=""}
Which is also saying “if event_cost is not equal to empty”. You can reference the documentation on conditionals for other comparison operators.
The other area that checks for an empty field is for the event sponsoring ministry:
{if event_sponsoring_ministry !="0"}
So why is this one different? Because event_sponsoring_ministry is a related entries field. It just works differently and rather than checking for an empty field you have to check for the 0 value instead.
Related Entries
OK - now I’m to the new and cool stuff in this series. The assumption I made when creating this calendar is that many of the events would be put on by specific ministries in the church. If that is indeed the case then I wanted to be able to link an event to a ministry and vice-versa. Rather than force a content administrator to manually create those links I’m using ExpressionEngine’s relationship ability to programmatically link them. By setting up a relationship field in the events fieldset, specifying the Ministries weblog as its source, and choosing a ministry for each event as it gets entered, now I can use the related_entries tag to pull that value out and display it:
<div class="event_details">
<h3>Sponsoring Ministry</h3>
{related_entries id="event_sponsoring_ministry"}
<p><a href="{url_title_path=ministries/details}">{title}</a></p>
{/related_entries}
</div>
Note that this code is within a parent weblog:entries tag, and I’ve had to specify an id which is the name of the field holding the relationship. Within the related_entries tag I could pull any of the content from the related post in the Ministries weblog—but for my needs just wanted a linked title.
Explaining Relationships
There is also the reverse_related_entries tag - so how do you know when to use which?
I always tend to visualize relationships as a pipe. At each end of the pipe is a post - in this case the post holding the Event content is at one end of the pipe. The post holding the Ministry event is at the other end of the pipe. The outside of the pipe has an arrow painted on it. The arrow points from the post where the relationship was created, and points to the post that was chosen in the drop-down field.
Now when I’m coding if I’m dealing with one of those two posts and want to look at the other one, I just look at the arrow on the pipe. If I’m looking through the pipe in the same direction as the arrow, my code needs the related_entries tag. If I’m looking against the arrow, I need reverse_related_entries.
The other way to think about it is parents and children. The post where the relationship is established is the parent post, and the post chosen in the relationship drop-down is the child. If you are working with a parent and need content from a child, then you use related_entries. If you are working with a child post and want information from the parent, it’s reverse_related_entries.
In the next chapter I’ll show the use of reverse_related_entries by editing ministries/detail to list each event the ministry has coming up.
Update events/index to Add Links
With the content of events/detail now in place, the only remaining thing is to edit events/index to point links at the new template.
This code
<div class="event_link">
<a href="#" title="{embed="embeds/event_rollover_title" my_entry_id="{entry_id}"}">{title}</a>
</div>
Just needs to change to:
<div class="event_link">
<a href="{url_title_path=events/details}" title="{embed="embeds/event_rollover_title" my_entry_id="{entry_id}"}">{title}</a>
</div>
That’s it for now. Until next time - cheers!
Category Navigation
Previous Comments
by .(JavaScript must be enabled to view this email address)
Date: Sunday, July 27th, 2008
Comment: #3
Mike, I had my “calendar highlights” feature working just fine with Google calendar and now you’ve gone and blown me away with this related ministries feature. Wow. What a great set of features you have implemented here, with so many concrete solutions that solves real problems for church staffs. What a great service to the Church you are providing through your work here! I thank you on behalf of my parish for your insights.
by .(JavaScript must be enabled to view this email address)
Date: Monday, December 15th, 2008
Comment: #4
Hey Mike,
What about for a multi day event?
by Mike Boyink (Author)
Date: Monday, December 15th, 2008
Comment: #5
Hey Kevin -
The only recourse there is the RepEEt plugin from Mr. Wilson. Otherwise you’re just left to entering the event multiple times.
by .(JavaScript must be enabled to view this email address)
Date: Monday, December 15th, 2008
Comment: #6
Thanks Mike,
I should have just read the overview for this series.
http://www.train-ee.com/courseware/free-tutorials/comments/19-events-calendar-overview/
by .(JavaScript must be enabled to view this email address)
Date: Monday, March 23rd, 2009
Comment: #7
I need to set up an EE site with calendar so I’m going to check your tut. one question upfront: is it fairly easy to display a weekly calendar as well?
thanks
by Mike Boyink (Author)
Date: Monday, March 23rd, 2009
Comment: #8
Yes, but in list form. That’s not covered here but is straightforward using parameters on the weblog entries tag.
by .(JavaScript must be enabled to view this email address)
Date: Monday, March 23rd, 2009
Comment: #9
only in list form??
I assume it’s just a matter of CSS to put that into a table as well.
thanks.
by .(JavaScript must be enabled to view this email address)
Date: Wednesday, April 15th, 2009
Comment: #10
Well. ... after a bit of work I have completed a nice event calendar. My clients will populate the calendar with real data, but I’ve got some working material in there now.
I am using the Repeet plugin, and I followed your tutorial closely. I combined some of your ideas (the rollover) with the plugin.
I have {day_number) showing in the cells for next month and just 1’s in the cells for the previous month. Any clue?
The site is not live yet
by Mike Boyink (Author)
Date: Wednesday, April 15th, 2009
Comment: #11
Nope..haven’t seen that one before. I’d make a quick copy of the template and start pulling stuff out - like repEEt—to see what’s causing it.
by .(JavaScript must be enabled to view this email address)
Date: Thursday, April 16th, 2009
Comment: #12
thanks Mike, that’s what I was gonna do ... it was fine before repeEEt lol.
by .(JavaScript must be enabled to view this email address)
Date: Thursday, April 16th, 2009
Comment: #13
Hmm. Ok this is really weird. If I just use the regular calendar, no problems, but of course no repeating events. If I just use the repEEt plugin, no problems either.
The problem occurs when I add the code
{if blank}
<td class=‘calendarBlank’>{day_number}</td>
{/if}
If I leave out the tag {day_number} no problem, but when I add that back in, the problem shows up again.
That’s just an FYI. For now, I’m just leaving out that bit.
by Jim
Date: Thursday, April 23rd, 2009
Comment: #14
Hi Mike,
Thanks for your previous help.
I have implemented your index and details page. Everything works, except I have an odd problem.
EE surrounds my custom fields with a pair on the details page. This occurs for text input and drop down fields.
I did not implement your relationship field as I have created separate template groups for each major ministry.
So, I wanted to have fixed text driven from a required drop-down list for each ministry area. This text matches exactly the template group URL segment and is used in the link to sponsoring ministry.
Here’s the website still in progress: http://02d86f4.netsolhost.com/index.php/events
How do I get rid of the pair?
Thanks,
Jim
by Mike Boyink (Author)
Date: Thursday, April 23rd, 2009
Comment: #15
When you created the field you choose it’s default formatting. It’s set to “XHTML” and you want it set to “none”. Go back and change it- and make sure to click the “update current data” message that appears at the bottom of the screen.
by Jim
Date: Thursday, April 23rd, 2009
Comment: #16
Hi Mike,
You can probably tell two things from my last post. 1) I’m new to EE, and 2) I didn’t follow your instructions well.
I realized I set the formatting to “XHTML” even though you specified “None”. I changed it on the fields, and voila, magic happened! :-) Problem solved!
Thanks,
Jim
by Mike Boyink (Author)
Date: Thursday, April 23rd, 2009
Comment: #17
No sweat - glad you got it sorted!
Date: Monday, June 15th, 2009
Comment: #18
Forgive me if the light hasn’t gone off in my head yet (or the caffeine hasn’t kicked in), but I’ve got a slimmed down version of this working very well, except I’m a bit at a loss on how to implement repEEt with this. I’ve installed the plug-in, added a custom field for repeating options (a drop-down menu with ‘weekly’ ‘monthly’ and ‘daily’), but I’m not getting it to repeat as desired. Can you shed some light on how you use repEEt with this calendar idea?
Thanks for the wonderful site and thorough tutorials!
by Mike Boyink (Author)
Date: Tuesday, June 16th, 2009
Comment: #19
Hey Daniel - thanks for the comments.
Your best place for repEEt support will be the EE forums or via it’s creator. It wasn’t reliable or easy enough to use for me to want to cover it here on Train-ee.
by .(JavaScript must be enabled to view this email address)
Date: Monday, November 9th, 2009
Comment: #20
Mike,
This example works only if you have one event per day. What about multiple events? That limit=1 in the main tag destroys the idea and leaving off limit = 1 shows all the events.
by Nathan
Date: Friday, March 26th, 2010
Comment: #22
Hi,
I have been playing around with the calendar feature.
I was wondering is there a way to pull the 5 most rencent events to the current date.
The thing with an events calendar is that alot of events can be posted months ahead, but i don’t want the 5 most recent entries to show, i only want the 5 rencent events to the current date.
Is there some way of doing this in EE?
Thanks
Nathan
by Mike Boyink (Author)
Date: Friday, March 26th, 2010
Comment: #23
Hey Nathan -
Since your question isn’t directly related to the tutorial at hand I’d suggest a post in the EE forums.
by AJP
Date: Saturday, July 26th, 2008
Comment: #1
Are you planning on showing “related events” on the ministries pages? Such as the sponsoring ministry?