Tech Stuff

Easy Events-Made-EasyTricks

I use the E-Dynamics Events Made Easy plugin for several WordPress sites, and it is in fact pretty easy to set up and then display basic-basic lists of events.

But customizing the look and feel of them can be a little tricky. There’s a mix of shortcodes, template tags, placeholders and custom attributes that’s a little too obfuscated. But here are a few tricks I’ve picked up. All screen caps shown are using the Twenty Thirteen theme.

Definition Lists

The default display method for events is a simple unordered list. Depending on your theme, that can be OK or nasty. The template code (found in Events::Settings::Events) looks like this:

<li>#j #M #Y - #H:#i<br /> #_LINKEDNAME<br />#_TOWN </li>

The #_XXXXXX is easy enough to figure out — it’s one of the built-in fields you set when you build an event. The #j #m #Y – #H:#i bit is using the standard PHP date format codes — #j returns the day of the month without leading zeroes, #m returns the three-letter month, #Y returns the four-digit year, #H returns the military-time hours, and #i minutes. You are free to insert commas, colons, hyphens, line breaks or whatever in between.

Here’s that code it delivers out-of-the-box:

<ul class='eme_events_list'>
<li>5 Sep 2013 - 16:00<br />
<a href='http://blogs.shu.edu/tomstest/events/1/orality-in-james-joyce-conference/' title='Orality in James Joyce Conference'>Orality in James Joyce Conference</a><br />
Galway
</li>
<li>26 Sep 2013 - 20:00<br />
<a href='http://blogs.shu.edu/tomstest/events/2/traditional-music-session/' title='Traditional music session'>Traditional music session</a><br />
Galway
</li>
<li>29 Aug 2014 - 22:00<br />
<a href='http://blogs.shu.edu/tomstest/events/3/6-nations-italy-vs-ireland/' title='6 Nations, Italy VS Ireland'>6 Nations, Italy VS Ireland</a><br />
Galway
</li>
</ul>

And here’s what it looks like:

Right off the bat there are a couple things that I want to change. Number one being the spacing between the events themselves in the unordered list, and secondly the formatting of the times. The first thing I’ve been doing is changing them to definition lists instead of unordered lists. Just go into the Events::Settings::Events tab, change the field “Default event list format header” from blank to <dl>, and change the “Default event list format footer” from blank to </dl>.

Then change the “Default event list format” to:

&lt;dt&gt; #_LINKEDNAME&lt;/dt&gt;&lt;dd&gt;#j #M #Y - #H:#i&lt;br /&gt;#_TOWN &lt;/dd&gt;

Save your work, and now you have:

Nicer already. The event name pops and has preference, and the information is better organized.

Next let’s change the date format. We can use the PHP cheat sheet linked above to replace this:
<code
#j #M #Y
with this:

#l, #F #j, #Y

And the militaristic:

#H:#i

With this:

#g:#i#a

Which returns the spelled-out day of the week, comma, the spelled-out month, day, comma, four-digit year, 12-hour time with am or pm. With a few more refinements:

&lt;dt&gt; #_LINKEDNAME&lt;/dt&gt;&lt;dd&gt;#l, #F #j, #Y at #g:#i#a&lt;br /&gt;#_TOWN &lt;/dd&gt;

This yields:

Location Refinements

When you create an event, you assign it to a location, and that includes not just the town (Galway) but the name of the venue and the address. I like to include all of this, and you can do it by adding other placeholders to the mix. You can get all the location info by changing #_TOWN to:

#_LOCATIONNAME&lt;br /&gt;
#_ADDRESS&lt;br /&gt;#_TOWN

Yielding this informative display:

A lot of these options are spelled out on the page; there’s further documentation on the author’s web site, listed above.

So far, you can copy-and-paste any of this code into either the Events::Settings::Events panel, or into one of the provided widgets. Just be sure to change the open/close tags to <dl> and </dl>

Logical Progression

You’ll notice we have start times and dates for these events, but no end times or dates. The ‘end’ is handled by the simple use of the @ sign between the # and the date/time variable name.

#@g:#@i#@a

Let’s drop in a new block that offers this.

&lt;dt&gt; #_LINKEDNAME&lt;/dt&gt;&lt;dd&gt;#l, #F #j, #Y through #@l, #@F #@j, #@Y &lt;br /&gt;From #g:#i#a to #@g:#@i#@a&lt;br /&gt;#_LOCATIONNAME&lt;br /&gt;
#_ADDRESS&lt;br /&gt;#_TOWN &lt;/dd&gt;

It looks like this:

You can also embed a <br /> anywhere in there if you like.

Illogical Progression

The next thing I wanted to do was harder; I wanted an all-day event. Or more specifically, an event than spanned multiple days. But you have to have a start time and an end time. How the heck is that supposed to work? In our case, it was a gallery exhibition than ran for a month. But the gallery itself was only open certain hours. In fact, all of the example events that come with the plugin as models to use are multi-day event, a fact completely skipped over in the supplied code.

Fortunately, the plug-in offers conditional variables. Unfortunately, they’re really tricky to use. Here’s what I worked out, and I don’t entirely understand all of it. This first thing to do is create a custom attribute. These are found at the bottom of every event post panel. (click to enlarge)
no-attributes

But when you go to the Settings page “to define/use some,” there is no place to define them. You can turn them on or off, but you can’t create a set of them. The author writes:

From the Settings Page: for custom attributes, you use #_ATT{key}{alternative text}, the second braces are optional and will appear if the attribute is not defined or left blank for that event. This key will appear as an option when adding attributes to your event.

This is in fact less complicated than it sounds. Just define your own attributes in any of the available text fields, eg. in the field “Respondent email format” use the placeholder “#_ATT{MY_OWN_ATTRIBUTE}”. After this, when editing an event, “MY_OWN_ATTRIBUTE” will show up as a possible attribute for which you can set a value.

It is in fact less complicated than it sounds, because it works very differently from other similar things in WordPress, custom fields etc. You don’t create them from within a post, or from a custom attribute control panel; you just start to use them and they magically appear in your event control panel.

So by magically invoking a new attribute called “allday,” I can start to use it in the if/or format language (I guess this is looking like a combination of smarty tags and PHP):

#_ATT{allday}{#g:#i#a - #@g:#@i#@a}

This translates as, if the attribute ‘allday’ has a value — #_ATT{allday} — display it. Otherwise, display #g:#i#a – #@g:#@i#@a — which is the start time and end time we used above.

As you can see here, we’ve set the “allday” attribute to return something non-misleading.
final-attributes

And so when saved we see this:

The third event — the one for which we defined the “allday” attribute — shows the text we entered indicating that there aren’t any sessions Sunday nights. The others show the formatted time span.

But Wait

There’s something stupid here still. The first two events appear to run from one day through the same day. You could handle single-day events by just omitting the closing date from the template; but then you couldn’t show end dates. And vice versa. So here’s where the plugin’s conditional logic comes into play. I’ve done a single example that only displays the end date if it’s different from the start date.

[events_if tag="#ESCj #ESCM #ESCY" notvalue="#ESC@j #ESC@M #ESC@Y"] &lt;br /&gt;to #@F #@j [/events_if]

Walking through bit by bit, ‘‘ ends the block. if the tag (tags, actually, ESCaped (I presume, though it’s not documented) representing the start day month year (j M Y) does not equal the end day month year, then we show the chunk “to Monday, Feburary 14, 2093.” If it does equal the end date, that means it’s a one-day event of course so we don’t need to show the time span.

Update

The developer (Franky, below) pointed out an update to the plugin which allows for all-day events. I’ve posted a revised bit of instructions for how to do the conditional coding here.

Bug Alert

When you start to add attributes, the plugin will spontaneously destroy your start and end dates. Look above and see how they changed, without me touching anything. Best check your work.

But now we have our complete code block:

#_LINKEDNAME#l, #F #j, #Y
[events_if tag="#ESCj #ESCM #ESCY" notvalue="#ESC@j #ESC@M #ESC@Y"] through #@F #@j [/events_if]

#_ATT{allday}{#g:#i#a - #@g:#@i#@a}
#_LOCATIONNAME
#_ADDRESS
#_TOWN
#_EDITEVENTLINK

And we’ve added one little bit along the way — #_EDITEVENTLINK. This shows up only if you are logged in with rights to manage events. For your viewing audience at home, they see nothing. Here’s the view:

You can also use the helpful #_NOTES attribute, if your event has a short description. On the Broadway Bach web site, I use it in the widget to hold the rehearsal schedule so that click-throughs aren’t necessary. These are usually 4-5 lines long.

We can copy-and-paste this into an “events list” widget:

And your home page looks like this:

One Last Refinement

If you’ve properly categorized your events, you can style them like this. Just turn:

&lt;dt&gt;

into

&lt;dt class="#_EVENTCATEGORIES"&gt;

The names of the event category (or categories) flow right in. I set up three categories — scholarly, sports, and music — and assigned each event to one. Then a few simple style rules:

dt.sports { background-color: #eeffee }
dt.scholarly { background-color: #ffeeee }
dt.music { background-color: #eeeeff }

And now your calendar clues readers in:

You can build off of these examples to configure widgets and events any way you like. You can also assign templates to individual events from within that event, to show maps or other details that aren’t relevant to other events.

It’s not quite as “easy” as advertised, but it’s pretty cool once you roll up your sleeves and start trying things.

Another Bit of Counterintuivity

I remember an episode of Car Talk where they were discussing some automotive procedure, and one of them said, “the instructions seem pretty easy, it’s only two pages.” The other replied, “yeah, but if the instructions are like, ‘first remove the radiator,’ then you’ve got a problem.”

Sort of like that.

On installation, Events Made Easy makes a new page for you called “events.” It will show you the ten next events. You could, if you wanted to, start to edit that page. Put in text, customize the shortcode as described in the documentation. Things like this:

[events_list limit=0 scope=all]

But that would be a mistake. Because it just won’t work. No matter what you do, your “events” page will never, ever show you anything except the next ten events. If you want an Events page with a custom list or calendar grid, you’ve got to do something different.

You’ve got to start a new page, call it “calendar” or “calendar of events” or “events2” or something, paste your text and shortcodes in there, and blammo — it works. Use that one in your menu. You might want to disable the one it sets up, make its status “pending review” or “draft,” just so you remember. Don’t delete or remove the page — it’s necessary to generate the individual event pages. Leave it blank as it was created and forget it. Better yet, add some copy to it:

This is not a live page, and is only used by the system to generate individual event pages. Don’t bother trying to edit it and don’t even think about deleting it. The real page is “calendar of events.”

The text won’t display, but if you go into it a year from now wondering what it is at least you’ve left a reminder!

So unless you want really, really easy (and if you do, how did you get way down here?) ignore that one

Tom

Tom McGee has been building web sites since 1995, and blogging here since 2006. Currently a senior developer at Seton Hall University, he’s also a freelance web programmer and musician. Contact him if you have the need for a blog, web site, redesign or custom programming!

20 thoughts on “Easy Events-Made-EasyTricks”

  1. Great article.. I will go through and try to digest it all 😉 I am new to events made easy… I am trying to fond a way for the calendar to be displayed in one size with the css I have set-up and another location the same calendar but in a much larger version… same events on both… I have set up the widget that shows a small calendar with just dates that get color coded if there is an event that day and you can click the date to go to that days events… But the problem is that since I modified the css, when I add the shortcode to a page it displays in the same way… Hope I am explaining this right.

    Any ideas? Is this something I could use the ‘templates’ for?

    Any advise is appreciated,
    Steve

  2. Maybe make the rules more specific. For the rules that apply to the widget, put “div.sidebar ” in front of those rules. And for the calendar in the main part of the page prefix them with “div#main “.

  3. Thank you for the quick reply… I kind of understand what you are suggesting… I will give it a shot 😉
    Thanks Again,
    Steve

  4. Hey Tom,
    So my short comings with css are causing me to not be able to get this… the url is http://simihighmusic.com/ You will see a small calendar on the left sidebar at the bottom… I want that to stay as is… but I want to have a large calendar on a new page so that it will take up the entire open area… a sample is here (without the proper css obviously) http://simihighmusic.com/test/

    Can you advise me a little further so I can figure this out… the eventual goal will be to have various calendars each showing a single event category… each on their own pages…

    Thanks you in advance for any assistance you can offer,
    Steve

  5. I think the main thing that’s killing it is this rule:

    table.eme-calendar-table {
        width: 184px !important;
    }

    If you can remove the !important that cleans up a lot, at least in Firefox. If you can’t do that, then try adding:

    table.fullcalendar {
        width: 700px !important;
    }

    700px is arbitrary, use what you think best.

    To show single event categories, make a post or page for each and use the shortcode:

    [events_list category=3 scope=all limit=0]

    Look up the category in the Events::Categories list, not Posts::Categories. Scope defaults to future, but there are other options. Limit 0 means show everything.

  6. Hi Tom,

    Your trick to show all events by first generating a new page tot place the shortcode was more than helpful. Thanks a lot!! I’m sure that I will make use of your tips once again.

    Felix

  7. Hi Tom,

    Excellent article! A huge thanks for your tips & tricks. The directions on how to set up custom attributes and what they can be used for really helped me solve some issues!

    ~Barb

  8. Hi Tom,

    I’m the author of EME and I would like to thank you for the nice how-to you’ve written.
    A small change could be made though: all-day events are now possible 🙂
    And I’m always open for suggestions, documentation enhancements and feature request …

    Franky

  9. Hi,

    Thank you for your tips, it worked very well for my list of events. Do you have any ideas/tricks on how I can have my events calendar display properly on SmartPhones – iPhone and/or Android? Here is the page..http://cubscoutpack61.org/events/

    On a Smart phone it displays the calendar and then a clickable-indented dot, that then takes you to the event but it doesn’t display the event title.

    Any ideas are much appreciated!

    Thanks,
    Kate

  10. I don’t think you’ll ever get a good grid view on a mobile — it’s just too small to read. I would try to show an agenda view instead. You can do that by creating a new page with this in it:

    [events_list limit=0]

    However, you might not want that view for your desktop users. Instead you could install something like the WPTouch plugin. It shows an optimized view of your whole site to mobile users and there’s one important thing you can do: You can display different menus on different devices. You could keep your original menu, but create an alternate menu where “Events” points to the agenda-view calendar page. Then, set WPTouch to use that menu instead. Desktop users will only have the link to the grid view, and mobile users will only have the link to the agenda view.

    Here’s an example: http://blogs.shu.edu/generictest/

    On a desktop, you’ll see a menu item “Events,” which shows the grid view. On a mobile you’ll see an entirely different menu, with “Agenda” linking to a list view.

  11. Hi There,

    Wow, definitely impressed by how much effort you put into this post. Thank you!

    I have been searching the web for an answer on how to have the “external link” open in a new window. I tried going into the plugin CSS, the PHP and through the documentation but can’t seem to find anything. I’m not strong at PHP, maybe that’s why. If anyone out there has any tips, I’d love the helping hand.

    Dani

  12. Studying the documentation pages, I found that there are a few placeholders that can be swapped to do this. I had used this one in the demo:

    #_LINKEDNAME

    But you can also do this:

    &lt;a href="#_EVENTPAGEURL" target="_blank">#_EVENTNAME&lt;/a>

    To separate out the link URL and the event name, then use the “target” attribute to pop open the new window. This would work for all the event links, which may not be what you want. If you want to open a new window only for external events, there is a set of conditional tags you could use. Something like (and I haven’t tested this):

    &lt;a href="#_EVENTPAGEURL"[eme_if tag='#_EVENTPAGEURL' notcontains='your.domain.name'] target="_blank"[/eme_if]>#_EVENTNAME&lt;/a>

    Should only render “target=_blank” if the link is to a page not on your site.

  13. Great Article! I know itis a bit old but itReally helped me set up the events 🙂
    I have a couple of questions which i’m sure I will feel silly once I get the answer lol
    Where about do I place this code? I placed it where I normally would but its not working. Obviously I chanced the class tho 🙂
    dt.sports { background-color: #eeffee }
    dt.scholarly { background-color: #ffeeee }
    dt.music { background-color: #eeeeff }

    Also I was wondering if you know of a way of displaying certain events to a page? On my site we want visitors to be able to select what sort of even they want to see and then they will get a list of those events. I have been looking around but can’t see if this is possible.

  14. Ok worked out the colorr part lol. Don’t I feel silly!
    But yes if anyone knows a way to display a certain category to a page that would be fantastic

  15. I’m looking to display the events in alphabetical order, even if you play with placeholders, it still shows in date order. Do you know if this is possible?

Leave a Reply

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