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>
Learning Things the Hard Way - Upgrading from 1.7 to 2
This is just a quick blog post to relay some info I just learned. I am in the process of upgrading Show-ee from 1.6.8 to 1.7 and then to 2.1.4b. As part of that site we used to use FieldFrame from Pixel & Tonic. Specifically we were using the CheckBox Group fields for the checkboxes that tell what add-ons a developer used. Well as part of the process I upgraded from 1.6.8 to 1.7 but neglected to upgrade all of the add-ons before moving to 2.1.4.
Creating Installable Templates for ExpressionEngine 2
This is the second installment in our Creating installable templates tutorials for ExpressionEngine. In this post we are going to talk about the actual package that needs to be delivered to the end user and all of the associated files. Plus we even have a bonus of some useful code for you.
Removing Index.php from the URLs of Expression Engine websites
For a long time now I have struggled with removing index.php from my EE websites. I have used a mix bag of the include/exclude method and add-ons that deal with making the include/exclude method easier.
Creating your own installable templates for ExpressionEngine 2
A year ago I was perusing the user guide and wiki over on ExpressionEngine’s website for any information regarding creating your own installable templates. At that time there were none. At I just did a quick search for some of the files involved like theme_preference.php and default_content.php and the information available is still minimal.
Related Articles