Chapter 7, Building Websites with ExpressionEngine

Chapter 7: Creating a Calendar

Chapter 7 walks you through creating a functional events calendar using built-in ExpressionEngine functionality.

Updates/Errata

There are no updates or errata at this time.

Template Downloads

calendar/index

{assign_variable:my_channel="toastcalendar"} {assign_variable:my_template_group="calendar"} {assign_variable:my_site_wide_templates="toast"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Toast for Sale: Calendar of Toast</title> <link rel='stylesheet' type='text/css' media='all' href='{path={my_template_group}/calendar_css}' /> <style type='text/css' media='screen'>@import "{path={my_template_group}/calendar_css}";</style> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="header"> <h1>Toast for Sale!</h1> <h2>Calendar of Toast</h2> </div> <div id="content"> {exp:channel:calendar switch="calendarToday|calendarCell" channel="{my_channel}" show_future_entries="yes"} <table class="calendarBG" border="0" cellpadding="6" cellspacing="1" summary="My Calendar" width="100%"> <tr class="calendarHeader"> <th><a href="{previous_path={my_template_group}/index}"><<</a></th> <th colspan="5">{date format="%F %Y"}</th> <th><a href="{next_path={my_template_group}/index}">>></a></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}'>{day_number} {exp:channel:entries channel="{my_channel}" year="{segment_2}" month="{segment_3}" day="{day_number}" limit="5" orderby="toastcalendar_time" show_future_entries="yes"} <div class="calendarEvent"> <a href="{title_permalink={my_template_group}/event}"> {toastcalendar_time}<br /> {title}<br /> <i>{toastcalendar_location}</i> </a> </div> {/exp:channel:entries} </td> {/if} {if not_entries} <td class='{switch}'>{day_number}</td> {/if} {if blank} <td class='calendarBlank'>{day_number}</td> {/if} {row_end}</tr>{/row_end} {/calendar_rows} </table> {/exp:channel:calendar} <h2>Upcoming Events</h2> {exp:channel:entries channel="{my_channel}" limit="5" require_entry="yes" show_future_entries="yes" sort="asc" dynamic="off" start_on="{current_time format='%Y-%m-%d %g:%i %A'}"} {if no_results} <h3>No Upcoming Events</h3> {/if} <h3>{title}<br /><i>{if toastcalendar_time}{toastcalendar_time} on {/if}{entry_date format="%F %j%S %Y"}</i></h3> <div class="contentinner"> {if toastcalendar_location} <b>{toastcalendar_location}</b><br /> {/if} {if toastcalendar_description} {toastcalendar_description}<br /><br /> {/if} {if toastcalendar_URL} {toastcalendar_URL}<br /> {/if} </div> {/exp:channel:entries} </div> <div id="menu"> {embed={my_site_wide_templates}/.menu} </div> </body> </html>

calendar/event

calendar/calendar_css

@import url({site_url}toast/toast_css); .calendarBG{ background-color: #000; } .calendarHeader{ font-weight: bold; color: #fff; text-align: center; background-color: #000; } .calendarHeader a{ color: #F0E68C; } .calendarHeader a:visited{ color: #F0E68C; } .calendarDayHeading{ font-weight: bold; font-size: 11px; color: #fff; background-color: #663300; text-align: center; vertical-align: middle; } .calendarCell{ font-weight: bold; font-size: 11px; text-decoration: none; text-align: left; vertical-align: top; color: #666; background-color: #fff; width: 60px; height: 60px; } .calendarToday{ font-weight: bold; font-size: 11px; text-decoration: none; text-align: left; vertical-align: top; color: #000; background-color: #ccc; width: 60px; height: 60px; } .calendarBlank{ font-weight: bold; font-size: 11px; text-decoration: none; text-align: left; vertical-align: top; color: #666; background-color: #9db7a7; width: 60px; height: 60px; } .calendarEvent a { font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif; font-size: 10px; text-decoration: none; color: #000; background-color: #fff; border-bottom: 1px solid #666; vertical-align: top; text-align: left; margin: 0px; padding-bottom: 5px; display: block; } .calendarEvent a:hover { background-color: #ccc; }

leonardmurphy.com

Building Websites with ExpressionEngine 1.6

Chapter 7: Creating a Calendar

Updates/Errata

Template Downloads

calendar/index

calendar/event

calendar/calendar_css

Relevant Links

Book Chapters

Menu

Buy My Book!