Difficulty:Tricky in places
Version:Expression Engine 1.3.1: 20050812
Buy My Book!
Update July 2008: If you like these tutorials and would like to read more like these, except updated for ExpressionEngine 1.6 and with tons more information, tips, tricks and recommendations, check out my new book, Building Websites with ExpressionEngine 1.6. Available either directly from Packtpub.com or from your local online bookstore (such as Amazon), this book uses the same clear, step-by-step approach found in these tutorials and walks you from the basics of installing ExpressionEngine to everything you need to know to have an ExpressionEngine website you can be proud of. (No prior knowledge of ExpressionEngine assumed).
This tutorial assumes that you are already familiar with Expression Engine: you have got at least a basic site up and running, complete with templates and blogs. It also assumes that you understand that basics of and and have experimented with both.
This tutorial is going to go through the basics of creating an events calendar. The functionality will be there, but I warn you now that it will look very boring when we are done: the homework (or another tutorial) will be to adapt and change the look and feel so that it fits in with your website and your needs.
Background Information
Most organisations have events, and a very visual way of keeping people up-to-date with events at your organisation is to have an events calendar on your website. A charity might want to publish when their fund-raising activities are happening, linking to other pages with more information about who can get involved and how to sign up. A gym might want to publish their swimming pool calendar, so that visitors can easily find out whether Saturday afternoon is open swim time, the advanced water aerobics class, or the under 5s inflatable session. A school might want to let parents know when the term begins, when the parent-teacher conferences are and when field-trips are scheduled.
Having a calendar can not only let people easily find out what they need to know, but can often give visitors information they didn’t know they needed to know. You go online to find out about water aerobic classes, and see a Salsa dancing class you’re much more interested in, but you never knew was offered.
Anyway, I’m sure if you’re reading this tutorial you already have an idea in mind for an events calendar. Now let’s find out how to make it a reality.
Instructions
If you're at the stage of writing an events calendar, I'm going to assume that you already have a CSS stylesheet and a basic look-and-feel for your website.
- Step 1: The first step is to create a holding page for the calendar. This is just an HTML template with the basic elements that you have on every page of your website (e.g. a logo, a menu, a footer). We won't have any content just yet: just the basic outline. In the 'New Template' group, I've chosen to duplicate my 'History of Toast' page with a new name. See the new page here.
- Step 2: Next, I want to edit my new template and remove all the content that is unique to the page I duplicated. My CSS has a <div> called 'content' that is where all my main page content is stored. I have left in my website logo, footer and the menu. See my site with the content removed.
- Step 3: Next, we'll want to change the title of the page so that it reflects what the page is going to be, rather than what is used to be. I've renamed the title See my site with the new title.
...
...
...
- Step 4: Now we have a blank page, we will want to set up a weblog (dynamic data container) for our calendar. This is where we'll be able to post information about our events. But, before we even set up a weblog, I'm going to define some custom fields. Each field you define can be used differently. For example, if your calendar is for booking meeting rooms, you may want a field to identify the meeting room, a field to identify the group that has it booked, a field to identify how long it is booked for, a field to identify the subject of the meeting, and perhaps lastly a field for the meeting agenda. Not all of these fields have to be displayed on the calendar: you could just display the meeting room that is booked, and have it link to another page that displays all the other information. Click 'Admin' and then select 'Custom Weblog Fields' under 'Weblog Administration'.
- Step 5: Now select 'Create a New Weblog Field Group'.
- Step 6: Give it a name and hit submit. My name isn't very imaginative. Going with the meeting room example, a good name might be 'Meeting Room Fields' - this will help to distinguish it from the 'Meeting Room Weblog' and other meeting room related names.
- Step 7: Now we want to add fields to our field group. So, click 'Add/Edit Custom Fields' in the row that corresponds with your new field group.
- Step 8: Now 'Add a Custom Field'.
- Step 9: I'm not going to explain every option you see here, as the effects vary depending on your website and your preferences. This screenshot is for the event time. Since this is a small field, I have chosen a text input. You might choose a text area is for a larger piece of text (e.g. the meeting agenda), and a drop-down list might be better for the meeting room that is being booked (to stop one meeting room getting lots of names).
- Step 10: Repeat steps 8 and 9 for all the fields you wish to define. By the way, you won't want to define a field for the Event Day, as we will use the date of the weblog entry for this. I am writing a toasty event calendar, so I want to have a time, a location, and a more information field. The URL field is in case the event already has a website page I wish to link to.
- Step 11: Now we have the fields for our weblog defined, we want to create the weblog itself. Remember, a weblog is really just a dynamic data container, and the dynamic data that we are containing will be our events. Go back to the 'Admin' screen of your control panel, and select 'Weblog Management'.
- Step 12: Click to create a new weblog to create a new weblog. Amazing!
- Step 13: Give your weblog a name and hit submit. Again, I haven't chosen a very good name. Still with my meeting room theme, a good name might be 'Meeting Room Weblog' so you don't confuse it with other meeting room names.
- Step 14: Next we want to edit the groups for the weblog we just created. If you also want to take a glance through the preferences, it is recommended but not essential. For example, you could add a description to the weblog, or switch off comments and trackbacks (which aren't normal features of an events calendar).
- Step 15: This is the place where we associate the field group we created in steps 4-10 with our new weblog. Select your field group name from the drop-down list by 'Field Group' and select 'Update'. We are now done with the behind-the-scenes preparation.
- Step 16: Now we can go back to our template, and write the code to display the calendar. At first the calendar will display without any formatting or events, but they will come. This is quite a bit of code, adapted from the Expression Engine documentation; hover over each line for a more detailed explanation of what it means. See my site with the new calendar.
</div>
<div id="footer">
- Step 17: Our calendar is looking very boring. You'll have noticed that the code in step 15 makes extensive use of stylesheet elements that we have not defined. So now, we want to write a stylesheet to go along with our calendar. To do this, I'm going to take advantage of the cascading feature of Cascading Style Sheets. So, first we need a new template for our calendar CSS. In the templates tab, in the template group you have your calendar template in, select 'New Template'. Call it something meaningful, define it as a CSS Stylesheet, and hit Submit.
- Step 18: Now we have a (blank) stylesheet, I'm going to reference it from my main calendar template that I created in step 1. Edit the template, and at the top of the page, in the header section, write the following code. Remember that you can hover over my code to find more information about what it does. The first line and last line of my code is code that already exists in my template, to give you an indication of where to place the new code in the template. It won't look any different, but you can see my site at this step here.
<style type='text/css' media='screen'>@import "{stylesheet=toast_site/_css}";</style>
</head>
- Step 19: Now we want to write our stylesheet. This is where our calendar starts to look more interesting. Although you can copy the code below verbatim into your calendar_css stylesheet, I highly recommend that you read my comments for each line, and try and adjust the formatting to suit your own website style. Certainly don't be afraid to play with the colours. This code has been slightly adapted from the Expression Engine calendar documentation although the explanations and any mistakes are entirely my own. See my site with the new and improved calendar.
- Step 20: Now our calendar looks good, but is rather empty. That's because we haven't defined any events to appear on our calendar, and because we haven't written the code to display the events on our calendar. Since displaying events that don't exist doesn't make sense, we'll take the time now to create some events even though we can't display them. Click on 'Publish' and then select your calendar blog set up in step 13. My first entry shall be very basic: just a date, a time and a location.
- Step 21: Next, click on the 'Date' tab and select the date that you want your entry to appear on. I recommend not selecting something in the current month for your first few events. I'm going to choose some time in January 2006. If you do select the current month, later in the tutorial you may have to go to the next month and back again before your events show up. All will become clear. After selecting my date, I select 'Submit'.
- Step 22: Next, I'm going to create 2 more entries. The 2nd will be very similiar to the 1st, except that I am going to add a website address to the URL field (http://www.google.com). This is so that the event can be clicked on, and the user will be transported to the new website. If you are doing this, you must include the http:// or the browser will think the link is to a page on your site.
- Step 23: The 3rd entry is not going to have a URL, but rather some text in the 'More Information' field. I intend to display the information from this field (if there is any) on a separate page on my own website. This might be useful when, for example, a meeting room is booked and you wish to provide an agenda for the meeting without filling up valuable calendar space, and without linking to a completely different website. An example of what the 3rd entry looks like is below. All my entries will be in the same month.
- Step 24: Now I'm going to create a quick and simple template to display the extra information that may be associated with a calendar entry. So, for example, I don't want to display the "extra information" field on the calendar itself, so instead if an entry has data in the extra information field, the calendar entry will link to this other template that will display the information. So, in the template screen, in your calendar template group, click on 'New Template' on the left hand side. I've decided to call mine 'calendar_detail'. Again, rather than creating the template from scratch, I'm starting from another toast_site template that already has the header and footer I want to use. (See steps 2 and 3)
- Step 25: For my next trick, I'm going to remove all the code unique to the history of toast template that I just copied. So, go to the template screen, click on the template we just created to edit it, and delete all the code you don't want to display on the page. In my case, I have a 'content' tag, so I will delete everything between the 'div =content' tag and the closing div. See my site with the content removed.
- Step 26: Next, we'll want to change the title of the page so that it reflects what the page is going to be, rather than what is used to be. I've renamed the title See my site with the new title.
...
...
...
- Step 27: Now we can write the code to display the extra information. Remember to hover over each line for a more detailed explanation of what it means. See my site with the extra information. It doesn't look like much, so if you want to see your site with an entry, add the entry_url from step 23 onto the end of the url. Mine in step 23 is called third_event. It's not the prettiest of templates, but it is beyond the scope of this tutorial to make it prettier.
</div>
<div id="footer">
- Step 28: Now we want to be able to see the events on our calendar. This will require editing our calendar code. To do this, go to your templates screen, and select your calendar template. Right now, the code should look like it did after step 16. Add the following code. See my site with the events. My first event is a plain event, my 2nd event links to a search engine, and my 3rd event has more information when you click on it. Note how the address in the address bar includes the 2006 and the 01 so that the weblog knows which day to pull from. If you remove this information from the address bar, it will display the current month with no events as it does not know which year or month to display events for.
...
{if entries}
<td class='{switch}' align='center'>
<div class="calendardate">{day_number}</div>
</div>
</td>
{/if}
...
Note that my toast calendar is not a good example of this problem, since it has very few months with any entries, not matter what the URL looks like.
- Step 29: One major problem with the calendar is that, if you link to http://www.leoandmeg.com/welcome/toast_site/calendar/ the current month will display without any entries. If you then move forward a month, and move back, all your entries magically appear. Why is this? Because in the previous step, we set it up so that the weblog would look at the year and the month in the URL to know what entries to display. If no year and month appears in the URL, it doesn't know what entries to display, so your calendar is blank. It seems like a tough trade-off - either people won't see any entries when they first go to your calendar, or you have to hard-code exactly which month they go to. I have a third way, but it involves creating a new template. In the template group, select 'New Template' and create a new empty template as a webpage. I called mine 'currentyear'. Then, to the left of the template group, select 'Preferences' and set the 'currentyear' template to allow php. Then, at the bottom of the screen, select update.
Got something to add? Add your comment to the 4 already made
Written by Leonard on Sunday 11th December 2005
