Adding a Calendar to your ExpressionEngine website
This tutorial will show you how to add a calendar to your ExpressionEngine based website. And as an example we will be using our Tudobem template. The HTML/CSS and necessary ExpressionEngine code will all be included. So let’s get started…
Download the package
Here is all of the HTML/CSS and ExpressionEngine code that you will need for this tutorial. We have taken special care to make sure it will work in most situations. If you have any issues just comment below and we’ll get it sorted. Click here for the package.
Create the custom fields
The first step in this process is to create a custom field group along with the custom fields for the calendar. So go into the Admin Section->Weblog Administration->Custom Weblog Fields. You will want to create a new Field Group. Call it Events. And create a new custom field called Event Description with a short name of eventdescription.
Create the weblog
Well the custom fields do no good without a weblog (channel) right? So navigate to Admin Section->Weblog Administration->Weblog Management. Create a new weblog called Events (seeing a theme here?) with a short name of events. Once you are done creating the weblog click on the Edit Groups link and assign the Default Status group and the Events custom field group to the weblog you just created. The system may tell you that you need a category group in order to use the weblog. This is not true but if you want to assign your entries to a category you can. There are several instances where we have used categories to filter the calendar or to provide RSS feeds for the calendar for different categories. A good example of this would be a church website. You could assign each event to a different category and then use an RSS feed to spit out all of the events for the Children’s ministry. This is appreciated as people can subscribe to the calendar and have the events added automatically to their iCal or Google Calendar.
Create a new Template Group/Template
Click on the template tab. Create a new Template Group and name it Events. Within that Template Groups you will have an index template and you will need to create a new one called details.
now the fun begins…
Upload or copy/paste the CSS
So now you need to either copy and paste the contents of the calendar.css file that we provided into your master css file or you need to upload the file to your server and link to it later in the Template we will be using. If you are linking to it then the HTML would look something like this…
<link rel="stylesheet" type="text/css" href="{site_url}css/calendar.css" media="screen" >
Add the ExpressionEngine code
Now you will need to open the index.txt and details.txt files that we provided as part of the download package and paste the code into your events/index and events/details template.
Wrap the calendar with your site code
In most of the sites we build we embed the head information and the otehr common items like the header, footer and navigation. Go ahead and wrap your site code around the calendar.
For the Tudobem template you would open one of the other templates and copy and paste the following code above the Calendar and above the weblog call in the details page:
{embed="includes/.head"}
<link rel="stylesheet" type="text/css" href="{site_url}css/calendar.css" media="screen" >
</head>
<body>
{embed="includes/.header"}
{embed="includes/.navigation"}
<div class="container_12 content">
<div class="grid_12">
And you would copy and paste the following lines below the calendar in the index template and weblog tag in the details:
</div>
<div class="clear"></div>
</div>
{embed="includes/.footer"}
{embed="includes/.analytics"}
</body>
</html>
Make some entries
Go ahead and make a few entries and test it out. The title should appear on the Monthly view of the calendar as a link. Once you click on it you will be taken through to the details page where you will view the description.
Things to think about
For some of our clients we add additional custom fields for duration, location, contact, contact phone etc etc. All of these things can be pulled out on the details page for display. You can get really creative. I would also like to mention the Repeet 2.0 plugin by Solspace might add some functionality for you if you have events that repeat a lot. We used version 1.0 on a number of websites and are happy to see that they have breathed new life into a worthy plugin.
Add it to your navigation
Make sure to link to the calendar in some way. In the Tudobem template you would add a link in the includes/.navigation template that would look like the following…
<li><a href="{path=events}">Calendar</a></li>
Mike says:
This looks fantastic! An event calender is always one of those client requests that make me cringe, but this should make things much easier. Thanks!
01/07 at 02:58 PM
Marcus Neto says:
That is great to hear Mike. Hope it works out.
01/08 at 11:59 AM
Tell us what you think...
Related Articles
Website Optimization
This morning I was having a discussion with a fellow EE developer about website speed optimization. I was mentioning various methods for speeding up a website. One tool that I find useful is the Google Chrome Resources Graphing tool. With it you can
Public Service Announcement
Just a quick blog post as a public service announcement. Recently I have begun culling all of the bogus users from our member list as I hate being used for link bait. For those of you that have never experienced this it is quit a frustrating
Integrating SlideShowPro with ExpressionEngine
I have wanted to know how to do this for about 6 months now so I finally sat down and figured it out. I also have some handy tips that will help you format the look and feel of SSP. So click on the link to read how you can Integrate SlideShowPro
How to Install ExpressionEngine
I am making a couple of assumptions with this tutorial. First there are so many different hosts and they each have their own way of creating databases so we are assumming that you already have a database created and that you know the location,
Comments