Low Events: Simple is golden brought to you by META Q
Interior Ad 2 brought to you by The META Q

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">
<thead>
  <tr>      
   <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>
  </tr>
  <tr>
   {weekdays}
   <td class="cal-day-heading">{weekday_1}</td>
   {/weekdays}
   </tr>
</thead>
<tbody>
  {weeks}
  <tr{if is_given_week} class="given-week"{/if}>
   {days}
   <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">
     {/if}
      <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>
       </div>
      </a>
     {if {count} == {total_results}}
     </div>
     {/if}
    
     {/exp:low_events:entries}
   
   {if:else}
    <span class="num">{day_number}</span>
   {/if}
   </td>
  {/days}
  </tr>
{/weeks}
</tbody>
</table>
{/exp:low_events:calendar}         

{!-- 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's avatar

Mike Wenger

Front-end designer and developer at Q Digital Studio

Mike Wenger is a front-end designer and developer at Q Digital Studio. Mike’s both a left brain and a right brain kind of guy, and as such, enjoys a nice mix of design and development work. He loves being able to flex his creative muscles and work on his analytical skills. When he wants to flex his physical muscles, Mike likes to spend time in the great outdoors – hiking, biking, backpacking and kayaking.

Posted

4.16.2013

Categories

Code > ExpressionEngine > Reviews

Tags

low events, reviews

2 comments >

What others are saying

David Fenske

Hey Mike,

I’ve been trying to come up with a good way to implement an event calendar on a church website I’m redesigning. Solspace Calendar seems pretty pricy and maybe beyond what I need; Low Events might be just the ticket- I’ve been wrestling with the native Calendar tag and getting frustrated. Any chance you might be willing to share the code you used to produce the nifty calendar shown in the little screenshot at the bottom of this post?

Thanks! David

Mike Wenger

Hi David, I’ve edited the entry to include the template code and CSS used.

Happy calendar coding!


Speak your mind