Display Events On A Departmental Web Page - Use JavaScript for Formatting

After following the instructions in the article Display Events on a Departmental Web Page - PHP Code, you will have a list of events. What if you want to transform that list to appear as a grid-view?  Use javascript!   A javascript solution has been developed to transform a list of events into a grid view.   The javascript currently will only transform a single month, and it isn't designed to be used on a week's worth of events, or multiple months.

There are three things you need to do to accomplish this: include some extra CSS,  include the javascript to your document, and tell IE how to behave.

1. Include the CSS.  Add a line of code to your mark up.  Between the and tags, ideally before any

While the calendar script was written primarily in plain old javascript, a small portion of the calendar script requires jQuery.  Specifically, the part that pops-up events to show their detail.  Users may override that section to alter the calenar's behavior or to avoid using jQuery. NB:  the location of calendar.js is yet undetermined

3. The last thing you need to do is for the benefit of IE8.  You need to ensure that IE8 is running in IE7-compatibility mode instead of IE8 "standards" mode.  Add the following meta element to the head of your document:

Customizing the Javascript

There are options that you may set in the prefs object to change how the calendar behaves on your web site.  This is useful if you want the days to be wider or narrower, or if you want to customize class names, or if you're events from a different source.  Here is an example of a prefs object that is set to use the defaults.  You may override any variable you'd like or none at all.

var prefs = {
 // classname to add the html wrapper
 wrapperClass: "jscalendar",
 // in case you want to override the value of today
 today: new Date(),

 // events is really an Array of objects. You can use it to  override
 // how events are passed to the Calendar class events: new  Object,
 // this is the class name to use for "hightlighted" events  // (e.g. this is applied to multi-week events when one week is hovered over)
highlightedClass: "highlighted",

// the width, in pixels, for one day. Change this depending on your page width.
dayWidth: 80,
// the vertical space between two events in pixels (approximate)
eventGapVertical: 5,
// the left and right margin on events in pixels (approximate)
eventMargin: 5,
// class name to be applied to today, so that you can more easliy style it with CSS
todayClassName: "hodie",

// what to do if a user clicks an event?
(function) eventClick: function() { zoomEventDetails() },
// what to do if a user hovers on a multi-week event? (function) highlightAction: highlightCousins,

// the URL to show for clicks on the day. whatever it is, the script appends YYYYMMDD to it.
// you can write your own script to display a date so a user never has to leave your site.
dayhref: 'http://events.brown.edu:8088/cal/main/setViewPeriod.do?b=de&viewType=dayView&date=',

// you can set the timezone for the calendar. Default is Brown's (Eastern) timezone.
// if you leave this blank, the user's timezone will be used instead.
// Which means that an event beginning at 12:00pm on campus at Brown
// will appear as 5 or 6 pm to users in London. timeZoneOffset: (isEST()) ? 300 : 240
// use Brown's local time };

You can customize not only the look with these options, but also the calendar's behavior.  You can change how an event's details are displayed, or how multiweek events are highlighted.  You could, for example, write your own function to replace zoomEventDetails(), or you could leave it blank to allow users to click through to main University calendar.

NB: The javascript is still under development.  If you'd like to extend or modify it, please contact the author.  (see the comments at the top of calendar.js).   It should be fairly trivial to modify the calendar's behaviors, or to change the source of event data from the HTML list to some other source. 

The Markup

Some users will want to add custom CSS declarations to their department stylesheets to customize the look and feel of their calendar.  In order to facilitate styling, below is a sample of the markup generated by the supplied template.  The provided template creates an unordered list (

Comments (0)

Brown Community members, log in to submit a comment.