Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

There are a number of places within a glow Timetable widget where a template can be specified, which allows you to considerably customise the way the widget displays its data.

  • Item content
  • Track Header content
  • Track footer content
  • Scale segments
  • Scrollbar marks

All of these have the same specification as to how they work. The template can be specified in four different ways.

  • A string, intended to act as the "template" in a glow.lang.interpolate call.
  • A Nodelist, which will be used directly
  • A function which returns a string
  • A function which returns a Nodelist

In all cases the results of the template is placed in a DIV with no attributes and returned as a Nodelist of one item.

Nodelist templates

These are the simplest, since a Nodelist template is wrapped in the DIV and returned with no attempt to update it with the specific data.

String Templates

A string template is passed to glow.lang.interpolate, with the above data object as the data argument.

eg, for an Item, if the template is;

<h4>{title}</h4><p>{data.description}</p>

and the Item has a title of "Bambi" and an optional data a object whose description property is "Very scary film.", the DIVs innerHTML will be;

<h4>Bambi</h4><p>Very scary film.</p>

The placeholders you can use depend on the item you're making the template for.

If you're creating an item template, your available placeholders are the properties of glow.widgets.Timetable.Item. Eg {data} (and its properties), {start} & {end}.

If you're creating a track header / footer template, your available placeholders are the properties of glow.widgets.Timetable.Track. Eg {data} (and its properties), {size} & {title}.

Function Templates

A function template should be defined to expect a single argument and to return either a string or a Nodelist. The return value will them be treated as above, except that a string result will *not* be passed through glow.lang.interpolate (although you can obviously sue this in your function). The argument is the specific data object.

eg for a scale, if the scale is segmented into 15 minutes sections starting at midnight, and the template is;


function(seg) {
    function format(time) {
        var h = time.getHours(),
            m = time.getMinutes(),
            hh = ((h 

The first scale segment's content will be "00:00 - 00:15".

If you're creating an item template, the appropriate instance of glow.widgets.Timetable.Item will be passed as the first parameter of the function.

If you're creating a track header / footer template, the appropriate instance of glow.widgets.Timetable.Track will be passed as the first parameter of the function.

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.