Low Events: Simple is golden

Mike Wenger / Posted 4.16.2013

Low Events: Simple is golden

Of the many things I love about ExpressionEngine, native events management is not one of them.

There really is no good way to do it with out-of-the-box EE. What I have done before, and what I’ve found to be the best way to do it natively, is to use the entry date and expiration date to control display of your events.

I love EE for its clarity and simplicity in helping clients edit their own content, so for me this method just doesn’t fit that and doesn’t work for me. There is also the Calendar Tag for displaying entries, but this comes with several downsides, most notably, no custom fields.

So if you need a location or other basic event field displayed in your calendar, you’re out of luck unless you alter the core. This is never really a good option.

Simplicity is golden.

I recently needed to sort out a way to handle events and ended up with Low Events.

There are a few calendar add-on options for EE that I researched, and I found that roughly 99% of the time, a client’s events needs are typically pretty simple: date, time, location and description.

On the rare occasion, a recurrence method might be needed as well. So when I found Low Events, I was elated at how it could do everything I needed – from the admin to the front-end – at a fraction of the cost of other options I found.

In the admin, and at its core, it’s a date fieldtype.

No hassle with the entry date that’s really the start date and the expiration date that’s really the end date, just a field that enables entering a start and an end and the option to make it all day – exactly what I need without clutter and confusion.

Now in the name of simplicity, Low did not develop a recurrence method, but as always, there is a way. I found this post that discusses how to do it.

It takes two channels - one for the event details and information, and one for the events that have the date and time (Low Events fieldtype) only. Make a relationship from the events channel entries with the date information to the event information entry, and you can add events at will without worrying about duplicating the content, just the date and time.

The upside? You have total control over every event. Say you have a single event from a long run of events that you need to change the time for – just edit that single event.

Now for the front-end.

Given the date information from the fieldtype, Low Events has a plethora of display methods and helpers to do exactly what you need to display your events.

There are the variable helpers which display your dates and times as you need, and there are calendar tags that allow for any entry data including custom fields, archive and list tags, and entry linking options.

I’ve used the events tag nested in the calendar tag to create a full calendar with all the information I needed to display from the events.

Anyone who needs events management in EE, I strongly recommend Low Events to take the headache out of the task.

As always, Low has created an add-on that keeps things simple and does exactly what you need, all packaged up for a fair price. Like I said, the simplicity is golden.

Below is a code sample of what was used to create the example above:

{!-- EE template code --}
{exp:low_events:calendar channel="events" show_future_entries="yes" date="{segment_3}" start_day="sunday"}
<table class="events_calendar full mts">
   <td class="month-links" colspan="1"><a href="{path="events/calendar/{prev_month_url}"}" title="{prev_month format='%F %Y'}">&lsaquo;</a></td>
   <td class="month-links cal-month puritan_400" colspan="5">{this_month format="%F %Y"}</td>
   <td class="month-links" colspan="1"><a href="{path="events/calendar/{next_month_url}"}" title="{next_month format='%F %Y'}">&rsaquo;</a></td>
   <td class="cal-day-heading">{weekday_1}</td>
  <tr{if is_given_week} class="given-week"{/if}>
   <td class="{if is_current}calendar-cell{if:else}calendar-blank{/if}{if is_given} given{/if}{if is_today} calendar-today{/if}{if events_on_day && is_current} has-events{/if}">
    {if events_on_day && is_current}
    <a class="num" href="{path="events/date/{day_url}"}">{day_number}</a>

     {exp:low_events:entries channel="events" date="{day_url}" show_future_entries="yes"}
     {if {count} == 1}
     <div class="events">
      <a class="event{if {total_results} > 1 && {count} != {total_results}} add-td-border{/if}" href="{page_uri}"><span class="indic">&bull;</span>
       <div class="event-details add-shadow-l">
        <h4 class="mbm">{title}</h4>
        <p class="puritan_700 l-blue fs16 mts">{events_date:start_time format="%g:%i %a"}{if '{events_date:end_time}' != '{events_date:start_time}'} - {events_date:end_time format="%g:%i %a"}{/if}</p>
        <span class="arrow"></span>
     {if {count} == {total_results}}
    <span class="num">{day_number}</span>

{!-- CSS --}
table.events_calendar {background: #e9e8df; width: 100%; border: 1px solid #d0cfc6;}
table.events_calendar td {text-align: center;}
.home_cal {width: 55%; margin-right: 5%;}
table.events_calendar a {text-decoration: none;}
table.events_calendar thead {background: #bcbbb2; color: #fff; text-shadow: 1px 1px 0 #9a9993;}
table.events_calendar td {border-top: 1px solid #d0cfc6; border-right: 1px solid #d0cfc6;}
table.events_calendar td.cal-month {background: #dad9d1; color: #61615c; text-shadow: 1px 1px 0 #efede3; text-transform: uppercase;}
table.events_calendar td.calendar-blank,
table.events_calendar td.calendar-blank a {color: #9d9d98; text-shadow: 1px 1px 0 #fff;}
table.events_calendar td.calendar-cell,
table.events_calendar td.calendar-cell a {color: #72716d;}
table.events_calendar td.calendar-today {background: #e0dfd7; text-shadow: 1px 1px 0 #fff;}
table.events_calendar td.has-events,
table.events_calendar td.has-events a {background: #326d85; color: #fff; text-shadow: none;}

table.events_calendar.small td {font-size: 12px; padding: 5px 0;}
table.events_calendar.small td.cal-month {font-size: 16px; border: none;}

table.events_calendar {background: #fff;}
table.events_calendar.full td {padding: 40px 0; width: 14%;}
table.events_calendar.full td.has-events {padding: 0;}
table.events_calendar.full thead td {padding: 20px 0;}
table.events_calendar.full td.month-links {background: #fff; text-shadow: none; font-size: 30px; padding: 30px 0; border: none;}
table.events_calendar.full td.calendar-blank {background: #f6f5ee;}

.event {display: inline-block; *display: inline; zoom: 1; position: relative; font-size: 21px; width: 10px; padding: 3px; z-index: 50; background: none !important;}
.event-details {display: none; position: absolute; bottom: 28px; left: 50%; width: 170px; padding: 2px 15px; margin-left: -100px; min-height: 100px; background: #fff; border: 1px solid #ccc; text-align: left; z-index: 100;}
.event:hover .event-details {display: block;}
.event-details .arrow {position: absolute; bottom: -9px; left: 50%; width: 17px; height: 9px; margin-left: -8px; background: url(../i/event-arrow.png) no-repeat 0 0;}
table.events_calendar.full tbody td:first-child .event-details {left: 0; margin-left: 0;}
table.events_calendar.full tbody td:first-child .event-details .arrow {left: -1px; margin-left: 0;}
table.events_calendar.full tbody td:last-child .event-details {left: auto; right: 0; margin-left: 0;}
table.events_calendar.full tbody td:last-child .event-details .arrow {left: auto; right: -2px; margin-left: 0;}


Do you use Low Events? How do you tackle events management on EE?

Mike Wenger

Mike Wenger

Front-end Developer and Designer

Mike Wenger is a front-end designer and developer at Q Digital Studio. Mike’s background is in Visual Communications, and his creative roots run deep. A transplant from Ohio, Mike enjoys all the great outdoors that Colorado has to offer. While out and about, Mike can be found kayaking, cycling, backpacking and hiking – and spending time with his wife, Nicole, and their two dogs.