Overview

Why Use It?

Create the Custom Events Calendar

Display the Calendar

Display a List of Events

Troubleshooting Tips

Custom Events Calendar Style Definitions

MIT Events Calendar

Custom Events Calendar

Overview

Would you like to display your events on your own web pages without the hassle and cost of building your own events calendar? Using a Custom Events Calendar, you can now post events in the MIT Events Calendar and have them display on your own web page consistent with your web site's "look and feel" -- the events calendar display integrates seamlessly with your site.

The Custom Events Calendar gives you two web pages which you can integrate into your web site:

• A traditional calendar grid showing events for one month.
  
  
• A detailed view of a single event.

Each page includes a monthly navigation bar used for switching the events display from one month to another. If you have an event covering a range of dates, or if your events per month are few, see Display a List of Events below.

You can choose to display your events just on your own custom calendar, or on both yours and the MIT Events Calendar. If other groups' events are important to include in your Custom Calendar, you can display them as well.

Why Use It?

Save Time and Money
By using the existing Events Calendar technology and calendar templates, you can create your own department or group calendar in an afternoon, without having to pay an outside firm to do it.

Make it Yours and Change it Anytime
You can easily customize the calendar templates to use the colors and fonts of your Web site and change it any time your site changes. You can add your logo or any other custom elements you want to display on the page.

Eliminate Duplicate Work
When you post events to the MIT Events calendar, they automatically appear on your Custom Events calendar as well. Conversely, you can specify events to show only on your Custom Calendar.

Check out these calendar examples:

• Aeronautics and Astronautics Custom Events Calendar
  
  
• Department of Materials Science and Engineering
  
  
• Information Services and Technology (IS&T)

[Back to top]

Create the Custom Events Calendar

You'll need experience with building web pages and modifying style sheets to carry out this procedure. If you need help, refer to the Web Publishing Reference Guide for links to help with Web publishing.

1. Decide Which Groups' Events You Want to Display:
   Every event in the MIT Events Calendar is sponsored by an MIT group (e.g. a department, a student association, etc.). With your custom calendar of events, you can display events for one or more of these groups in a monthly calendar grid. You will need to find the Group Id number(s) for the group(s) you are interested in.
   
   
   • Go to the Events Calendar Sponsor List [certificates required].
     
     
   • Look for the name of your group (and any others you want) and write down your Group ID number.
     
     
   If you don't find your group's name, then your group is not yet set up to post events. You'll first need to request a group [certificates required].
   
   
2. Download the Template Files:
   You need to obtain copies of the following templates which you will use to create your custom calendar. To download these files, <option>-click (Mac OS 9), <control>-click (Mac OS X), or right-click (Windows) on the following links:
   
   
   • customcal.zip: the zip file containing all four calendar templates.
     
     
   • mit_monthly_calendar.html: used for displaying a calendar of events for a given month.
     
     
   • mit_single_event.html: used for displaying details about a specific event. This template is invoked when a user clicks on a link to an event in the monthly calendar.
     
     
   • events_calendar.css: a style sheet for controlling the colors and fonts displayed in your monthly calendar. You can either use the default styles set in this template, or modify it to use the fonts and colors of your choice.
     
     
   • mit_events_list.html: used for display a list of events for a range of dates you specify.
     (Go to Display a list of events for setup instructions.)
     
     
   You'll need to decide where you are going to store the templates; the files must be accessible via a Web server. If you already have a directory set up to store the files that display your MIT Web site, you may want to store the templates in the same directory.
   
   Note: When moving mit_monthly_calendar and mit_single_event you need to retain the original file names. The file type should be .html unless you are using a web site building application such as PHP or Cold Fusion which makes use of a different file type. In this case, change the file type from .html to the one specified by your program. When moving events_calendar.css, do not change the file name or file type. You will need to find out the URL of the location (directory) you have chosen for your files.
   
   
3. Design Your Page Layout:
   The bare-bones templates can be filled out with any HTML elements and text you choose. Decide on the layout of your calendar web pages (the monthly view and single event view) then use your favorite editing program to modify them, keeping the following in mind:
   
   
   • When editing the monthly calendar view template (mit_monthly_calendar.html) you will notice some tags that are not standard HTML tags. The tags will pull in the calendar components when you display your calendar web pages. They are:
     
     <events_calendar view="monthly_navbar"> (Monthly Navigation Bar)
     <events_calendar view="monthly"> (Monthly Calendar Grid)
     <events_calendar view="single_event"> (Single Event Details)
     
     The placement of these tags in your template files will determine where the calendar components will appear on your web pages.
     
     
   • The template files also contain "sample" HTML code which lies between tags starting with:
     
     <events_calendar_sample> and ending with </events_calendar_sample>
     
     This sample code is provided only so you can preview what the pages might look like when displayed on the web - the sample code is removed when the pages are actually displayed. So it's best just to leave the sample code alone.
     
     
4. Change the Look and Feel of the Calendar Components:
   The three calendar components are:
   
   
   • Monthly Navigation Bar
     
     
   • Monthly Calendar Grid
     
     
   • Single Event Details
   
   
   You can modify the way in which these components display by editing the style sheet (events_calendar.css). In this way you can alter the background colors, text colors, and text font and size.
   
   Note: This may take some trial and error until you reach the desired effect.
   
   Details of what the styles are and what they control can be found Custom Events Calendar Style Definitions.



5. Upload the templates

[Back to top]

Display the Calendar

To display your custom monthly calendar, enter a URL like this in your browser:

where:

• NNN is the group id number of the group whose events you are displaying (e.g., for Aeronautics and Astronautics this would be 467).
  
  
• myurl is the full URL of the directory in which you placed your calendar template files. (e.g. if you put them in an Athena locker called "redwood", in a subdirectory called "www", your URL would be http://web.mit.edu/redwood/www/

So in the example we have been using, your URL would look like this:

This is also the URL you should use for linking to your custom calendar from other web pages.

Note: If you used a web site building application such as PHP or Cold Fusion and changed the file type for mit_monthly_calendar and mit_single_event, the full URL would be:

where ext is the extension you're using, e.g., if you are using PHP, the extension would be php.

Displaying More Than One Groups' Events
You can display events for more than one group on your calendar. To do this, find out what each group's Group ID number is and put each of the numbers, separated by commas, in the URL you use to display your custom calendar.

For example, if you wanted to display events for Aeronautics and Astronautics (Group ID 467) and IS&T (Group ID 490) your URL would look like this:

[Back to top]

Display a List of Events

In addition to displaying events by the calendar month and displaying a single event, you can also display a list of events for a range of dates specified by you. This type of display is useful for a collection of related events that occur over a number of days such as a conference. Organizations who have only a few events per month may find this type of display to be easier for their users to read rather than viewing a monthly calendar. Before starting, make sure you've decided which groups to display.To display a list of events,

1. <option>-click (Mac OS 9), <control>-click (Mac OS X), or right-click (Windows) on the following link to download the template: mit_event_list.html. If you haven't already, download events_calendar.css, the style sheet that specifies the colors and fonts for the Events Calendar templates.
   
   
2. The mit_event_list.html template can be filled out with any HTML elements and text you choose. Decide on the layout then use your favorite editing program to modify it, keeping the following in mind:
   
   
   • When editing the list view template (mit_monthly_calendar.html) you'll notice some tags that are not standard HTML tags. The tags will pull in the calendar components when you display your calendar web pages. They are:
     
     <events_calendar view="list"> (list of events and the specified date range)
     
     
     The placement of this tag in your template files will determine where the calendar components will appear on your web pages.
     
     
   • The file also contains "sample" HTML code which lies between tags starting with <events_calendar_sample> and ending with </events_calendar_sample>. This sample code is provided only so you can preview what the page might look like when displayed on the web - the sample code is removed when the pages are actually displayed. So it's best just to leave the sample code alone.
     
     
3. If you want to customize the look of the list, e.g., change the colors or fonts or edit the events_calendar.css style sheet entries that control the list view template. For details on these styles, go to Custom Events Calendar Style Definitions: List view.
   
   
4. To display your list of events, enter a URL like this in your browser:
   
   http://events.mit.edu/scripts/list_ext.pl?groupid=NNN&location=myurl&
   from=yyyymmdd&to=yyyymmdd where:
   
   
   
   
   • NNN is the group id number of the group whose events you are displaying (e.g., for Aeronautics and Astronautics this would be 467).
     
     
   • myurl is the full URL of the directory in which you placed your calendar template files. (e.g. if you put them in an Athena locker called "redwood", in a subdirectory called "www", your URL would be http://web.mit.edu/redwood/www/
     
     
   • mmmmyydd is the year, month and day for the start date and end date for the list. Bear in mind the following:
     
     
   • If you leave out &from=yyyymmdd it will default to today's date and include events up to the specifed to date.
     
     
   • If you leave out &to=yyyymmdd, events for just the from date will display.
     
     
   • If you leave out both, it will default to today's day.

If you decide to use the list as your method of displaying events for your group for the current month, each month you'll need to revise the URL to specify the first and last day of each month.

[Back to top]

Troubleshooting Tips

If "the requested URL was not found on this server" or "URL for your calendar page must be specified" displays when you try to access your calendar, you may have entered the wrong URL. The correct URL is:

replacing NNN with your Group ID number and replacing myurl with the full URL where you're storing mit_monthly_calendar.html. You must enter it exactly as specified, with no extra spaces or missing characters.

[Back to top]