20 - Implementing the Event Calendar Index Template

With the ExpressionEngine calendar functionality explained, let’s dive into the code.  In this chapter I’ll cover the implementation of the Event Calendar index template.  From a coding perspective I’ll show how to do the basic implementation, and then use an embedded template with embedded variable to get around the “no custom field” limitation of the weblog:calendar tag.  This chapter will also lay some groundwork for using EE’s relationships to tie events to ministries.

 
Download the EE Code for 20 - Implementing the Event Calendar Index Template

Overall Implementation Steps

  • Create events weblog
  • Create events custom field group
  • Add fields to the group
  • Enter content
  • Create events template group
  • Update embeds/main_nav
  • Update stylesheet/styles
  • Add code to events/index
  • Create embeds/event_rollover_title

Create an Events Weblog
Event calenders in ExpressionEngine are powered by a standard weblog - so I’ve created a new weblog and named it “Events”, with a short name of “events”. 

Create an Events Custom Field Group
Events have their own unique data structure, so a new field group is required. Create an “Events” custom field group.

Add the following fields to the group.  I’ve listed the field name, label, type, size and formatting options for the fields I’ve added:

  • event_duration, Event Duration, Text Input, 3, None
  • event_location, Event Locations, Drop-down List, manually populated, None
  • event_cost, Event Cost, text input, 4, none
  • event_contact_name, Event Contact Name, text input, 128, none
  • event_contact_phone, Event Contact Phone, text input 128, none
  • event_contact_email, Event Contact Email, text input, 128, none
  • event_details, Event Details, text area, 6 rows, XHTML

And One More
While planning this section initially I was going to tie together events and ministries using categories.  I’m going to do a bit of a direction change and use relationships instead.  Using categories only nets me being able to show related events on Ministry category pages—so if you view the Ministries for Singles I’d be able to pull the upcoming events for singles - but I see a couple of issues with that approach.  The design of the Ministries index template doesn’t allow for another content type to display and I don’t want to go down the path of a category-specific template.  Using categories also doesn’t easily allow me to pull ministry-specific events to a ministry detail page—and I think that’s a more helpful connection than the category level tie-in.

Relationships will let me create a direct connection between an event and a ministry.  I’ll be able to use that connection to link from a ministry detail page to an event, and from an event detail page to the sponsoring ministry.

So I’ve added one more field to my Events field group - a relationship field:

Name:
event_sponsoring_ministry

Label:
Event Sponsoring Ministry

Field Type:
Relationship

Weblog to Create Relationship With:
Ministries

Display Criteria:
I choose “Sort by Title” in “Ascending” order

In this chapter all we’ll do is setup the field and assign a related Ministry while entering content.  In the next chapter I’ll show how to pull related Ministry information to the Events detail view.

Connect the Field Group to the Weblog
Make sure to assign the new field group to the Events weblog via the “Edit Groups” link in Weblog Management.

Enter Content
Go ahead and post some new entries in the Events weblog. There are a couple of new things to note here:

Make sure to click the Date tab and assign choose an Entry Date that’s in the future.  The time of the post will be used as the event starting time so round it off to a nice “top of the hour” number.  The other new thing is to now use the relationship field - so for every post choose a sponsoring ministry in the drop-down.  I found that putting a number of events on one date helped me with formatting the calendar visually.  Keep in mind that you can edit your entries to assign new entry dates to move events around the calendar for formatting purposes.

Create an Events Template Group
With the content structures in place I’ll now work on pulling the content to the site.  Create a new template group named “events”.  Since the content is full-width like the Beliefs page, it made a good starting point - so I copied that code into the new events/index template.

Coding the Template
The first order of business is to change all references of “beliefs” to “events” - so the page title, the body id, and the variable in the main navigation embed.  Then in the main content div you can remove all the code there entirely.

I used the calendar code from the EE documentation as a starting point for my code - the “big” version which is the second example on that page.  I also used the provided calendar css as a starting point.

After some tweaks - here is the guts of my events/index template - take a scan through it and then I’ll highlight the changes I had to make from the example code I used as a starting point:

<!--BEGIN CONTENT SECTION-->
<
div class="interiorBox">

{exp:weblog:calendar switch="calendarToday|calendarCell" weblog="events" show_future_entries="yes" sort="asc"}

    
<table id="event_calendar" summary="Church Event Calendar" >
        <
tr class="calendarHeader">
            <
th><div class="calendarMonthLinks"><a href="{previous_path=events}"><<</a></div></th>
            <
th colspan="5">{date format="%F %Y"}</th>
            <
th><div class="calendarMonthLinks"><class="calendarMonthLinks" href="{next_path=events}">>></a></div></th>
        </
tr>
        <
tr>
            
{calendar_heading}
                
<td class="calendarDayHeading">{lang:weekday_abrev}</td>
            
{/calendar_heading}
        
</tr>

        
{calendar_rows }
            {row_start}
<tr>{/row_start}

                {if entries}
                    
<td class='{switch}' align='center'>
                        
{day_number}
                        {entries}
                            
<div class="event_link">
                                <
a href="#" title="{embed="embeds/event_rollover_title" my_entry_id="{entry_id}"}">{title}</a>
                            </
div>
                        
{/entries}
                    
</td>
                
{/if}

                {if not_entries}
                    
<td class='{switch}' align='center'>{day_number}</td>
                
{/if}

                {if blank}
                    
<td class='calendarBlank'>{day_number}</td>
                
{/if}

            {row_end}
</tr>{/row_end}
        {
/calendar_rows}
    
</table>
{/exp:weblog:calendar}
            
</div><!--END CONTENT SECTION--> 

Here are the changes I had to make from the sample code I copied from the EE docs:

  • Changed the weblog it references - to “events” in my case
  • Changed the next_path and previous_path values - and just referenced this index template
  • Added “show_future_entries=“yes” to the calendar tag - otherwise the calendar will only show events for today or ones that had passed

With those changes I had a working basic event calendar.

Getting Tricky with Embeds
I wanted to take it a step further though and see what it would require in order to be able to pull custom fields to the calendar view - so users could get more event information without having to click through to the detail page.

Remember that the weblog:calendar tag doesn’t support custom fields by default.  However - it does return entry_id.  Using that as a bridge I was able to pull custom field content to the index template by using an embedded template with an embedded variable.  I decided that directly displaying more content on the calendar would visually junk it up so decided to pull custom field content into the link title attribute .  The result? Mousing over an event link will pop up the little browser tooltip and display the event start time, duration and location.

So I created a new template in my embeds group called “event_rollover_title”.  It has the following code:

{exp:weblog:entries weblog="events" entry_id="{embed:my_entry_id}" show_future_entries="yes" dynamic="off"
disable="trackbacks|pagination|member_data|categories"}
    Starts
:&nbsp;{entry_date format="%g:%i%A"}&nbsp;&nbsp;
    
Duration:&nbsp;&nbsp;{event_duration}&nbsp;&nbsp;hrs.&nbsp;&nbsp;
    
Location:&nbsp;{event_location}
{
/exp:weblog:entries} 

and then added a calling template in events/index:

<a href="#" title="{embed="embeds/event_rollover_title" my_entry_id="{entry_id}"}">{title}</a

Here’s how it works:
The parent weblog:calendar tag returns entry_id, which gets passed to this embedded template.  This embedded template takes the entry_id and uses it as a parameter on a weblog:entries tag, which as you know returns all custom fields.  The fields within the weblog:entries pull out the post time (used here as an event start time), duration, and location.  This text is assembled and returned to the calling template as the link title text.

One note I need to make about this approach is that it, due to it’s nested approach, it could be resource intensive if you have a lot of calendar entries.  For the couple of church sites I’ve been involved with, I wouldn’t be worried, as there are rarely more than a couple of entries a day.  I’ll also - in a future chapter - cover some caching approaches that will also help mitigate any performance concerns.

Don’t Forget
Don’t forget to update embeds/main_nav to make the link to events/index live.

Next up - the events detail template.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of parsoncraig

by parsoncraig

Date: Saturday, August 2nd, 2008
Comment: #1

Mike,
To clarify:
You use entry_date here.  I think of that field as the date on which I want the entry to become visible on the site.  Perhaps I have that wrong.  You are using it here to be the actual event date, correct?  If so, is that because you cannot display custom fields if you use the built-in calendar functionality?

I did this section a few weeks ago and handled it differently.  I created a custom date field, and used the event_date to designate when I wanted people to see that event promotion begin. 

As I appreciate this, you are using “show future entries” and the entry date to achieve similar functionality.  And I have to do it your way if I want to use the calendar control that EE provides.  Is that correct?

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, August 2nd, 2008
Comment: #2

Hey Craig -

In my approach, yes entry date == event date.

I did this because the built-in calendaring function keys off entry date.  I don’t know of any way to feed the calendar tag a custom date field instead.

So yes, if you want the calendar view then use entry_date.

I’ve never run into needing events loaded in the system that I wanted to hide from visitors.  Usually as soon as something is scheduled the desire is to get it on the site - both to market the event and communicate to others that the building has been reserved.

Picture of Jesse Schutt

by Jesse Schutt

Date: Saturday, August 2nd, 2008
Comment: #3

Mike,

Is there any way to get events to span across several days on the calendar?  I have a site that needs such functionality.  It is a real pain to have to add an entry each day for week long events.

Jesse

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, August 3rd, 2008
Comment: #4

Hi Jesse -

The repEET plugin I linked to in the Calendar Overview chapter will do multiday events.

Picture of Efrain Barcena

by Efrain Barcena

Date: Friday, October 3rd, 2008
Comment: #5

Hey Mike,

Don’t you it will be more flexible for the church staff if we use a Text Input field instead of a Drop-down List for the Event Locations custom field?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, October 3rd, 2008
Comment: #6

Hey Efrain - it might be, depending on your church.  If the church had a specific set of locations for events I’d probably stick with the drop down to avoid spelling and grammatical differences. 

If your church is more fluid then by all means use a text field instead.  You could also add fields for address & Google map link in that case.

Picture of Danielle

by Danielle

Date: Thursday, October 9th, 2008
Comment: #7

Hey there… Back in this tutorial when you mentioned “I decided that directly displaying more content on the calendar would visually junk it up so decided to pull custom field content into the link title attribute,” this is exactly what I need to do w/ my calendar. Could you show me how to display my data right on the calendar rather than a roll over?

Thanks! Danielle

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, October 9th, 2008
Comment: #8

Hi Danielle -

You should be able to use the same embedded template approach, but just format the HTML in the embed such to return the content as links/titles/whatever, rather than putting it in the title text of the link.

Picture of Danielle

by Danielle

Date: Friday, October 10th, 2008
Comment: #9

Thx a million! I was able to get it going. Love this site btw. I an EE beginner so it helps a lot!

Danielle

Mike Boyink

by Mike Boyink (Author)

Date: Friday, October 10th, 2008
Comment: #10

Glad to hear it Danielle:  You’re exactly who Train-ee was created for..;)

Picture of Steven Grant

by Steven Grant

Date: Friday, January 16th, 2009
Comment: #11

Mike,
on the subject of the embed for the title, I’ve tried to do something similar using a wee bit of Jquery on http://www.greenviewevangelicalchurch.co.uk/index.php?/events/index/

however, it’s the same location and time that is pulled in for both of my events.

Not sure if I can post code here but I’ll try:

{exp:weblog:entries weblog=“events” entry_id=”{embed:my_entry_id}” show_future_entries=“yes” dynamic=“off” disable=“trackbacks|pagination|member_data|categories” }
Starts: {entry_date format=”%g:%i%A”}<br>
{if event_duration}Duration: {event_duration} <br>{/if}
Location: {event_location}

{/exp:weblog:entries}

any thoughts why it’s doing this?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 16th, 2009
Comment: #12

Hey Steven - I know little to nothing about jQuery. If you take that part out and either just fill the link title or return straight HTML will it work?

Picture of Steven Grant

by Steven Grant

Date: Friday, January 16th, 2009
Comment: #13

Thanks for prompt response Mike.

It works when I add the embed to the title, I thought I could simply pull the embed to elsewhere and it would work.

It would be great if I can get the jquery thing working because it’s quite cool but what you does the same thing.

I reckon it’s something to do with passing the entry id correctly on the index page and not the actual embed.

{title}
                   
                      {embed=“inc/.event_rollover_title”}

doesn’t work for sure I need to work out how to get the my entry id into the second bit

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 16th, 2009
Comment: #14

Oh - are you not passing in the entry_id?  Is this embed statement within the weblog:calendar loop?

If so you just need to change your embed statement to:

{embed="embeds/event_rollover_title" my_entry_id="{entry_id}"}

If you aren’t within the loop then you are out of luck - you need that entry id.

Picture of Steven Grant

by Steven Grant

Date: Friday, January 16th, 2009
Comment: #15

the call for the calendar is exactly like yours - not sure if that’s in the calendar loop?

In any case I tried your amendment but that didn’t work either.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 16th, 2009
Comment: #16

Yes - my embed is in between the weblog:calendar tags so the entry_id is available as a variable to pass to the embed.

If you have the embed within the loop and are passing the entry_id in (which it sounds like works when you do it for the title as I have it here) then I’m not sure whats going on.

Picture of Shawn

by Shawn

Date: Wednesday, February 18th, 2009
Comment: #17

In building a calendar with one of our projects, all has went swimmingly great. In thinking of expanding this a bit, might you have any direction on adding a signup element to the calendar, allowing someone to “register” for, say a time slot, thus removing that entry from the calendar?

We’ve had this question come up with our recent project and thought we’d ask.

Any insight would be wonderful.

Thanks,
Shawn

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, February 18th, 2009
Comment: #18

Hey Shawn -

EE really isn’t capable of that w/o looking down the custom module path.

Picture of Shawn

by Shawn

Date: Wednesday, February 18th, 2009
Comment: #19

Yeah, I guessed as much, but hey, it never hurts to ask.

Thanks for the direction and the great site! You’ve been a great resource for us.

–Shawn

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, February 18th, 2009
Comment: #20

Glad to hear it…

Picture of Jeff

by Jeff

Date: Friday, April 17th, 2009
Comment: #21

Thanks for all your work on this. I appreciate it. I am having issues akign the links to the event details though. I probably missed something.

Picture of Ryan

by Ryan

Date: Wednesday, May 27th, 2009
Comment: #22

Hey Mike,

This was a great tutorial. I implemented this with the mini calendar, and couldn’t get your embedded template trick to work (to show text (tooltip) on hover).

I finally noticed that the mini calendar does not wrap the link to the event (where you place your call to the embed) in the {entries}...{/entries} tag pair.

So if anyone else is using the mini calendar instead of the big calendar, be sure to wrap your call to the embed within this tag pair, or you’ll be scratching your head for a while.

Thanks again Mike.

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, May 27th, 2009
Comment: #23

Thanks Ryan!

Picture of Gaurav

by Gaurav

Date: Saturday, July 4th, 2009
Comment: #24

Hi Mike,

Happy Independence Day. I think that everything in this tutorial is great. However I would just like to suggest one thing for the calendar. Can you make it so that all the months of that year are visible on the top along with the current month? Right now we are in July 2009 and if for some reason we want to view say for example March 2009 or October 2009 then we have to click that many times. With the current setup is this functionality very hard to achieve?

Mike Boyink

by Mike Boyink (Author)

Date: Monday, July 6th, 2009
Comment: #25

Hi Gaurav -

I’m done developing this series—but you’re free to refine as you see fit.

I’d suggest perusing the EE docs & forum to see if there are any hints for you there.

Picture of Shanan

by Shanan

Date: Monday, May 17th, 2010
Comment: #26

Mike, thanks for this post! Like the rest of your site, it’s extremely helpful. Not sure I would have figured this out without your direction here. An elegant and smart way to get weblog/channel data into a calendar. A hat tip to you for making the hard stuff work easy.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, May 17th, 2010
Comment: #27

Thanks Shanan.

Picture of Mat Johnson

by Mat Johnson

Date: Thursday, October 7th, 2010
Comment: #28

Hi Mike - thanks for this tutorial, it’s helped me a lot while grappling with an events calendar.

Just a quick note regarding Steven’s “identical listings” problem…

I had the exact same issue, and it was because I had caching turned on for the included template.
If caching is off, everything seems fine. I’m not sure if this is the same issue but I thought I’d post just in case.

What this has meant is that I’m quite wary of using this technique (the site has a calendar on every page in the footer) because of the overhead. Has anyone got any thoughts or tips regarding this?

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>