³ÉÈËÂÛ̳

Overview

The timetable comes with two default themes, light and dark. These are intentionally plain, but can be easily restyled with simple CSS.

In this guide, we'll look at how to give a Timetable a custom style.

Preparing the timetable for a custom style

The timetable comes with two default themes, light and dark. These are intentionally plain, but can be easily restyled with simple CSS.

As with all Glow widgets, CSS classes starting with "glow" and a number, eg "glow140" must be avoided (as these change with every release). If you're wanting to restyle your timetable, give it an ID and / or class.

var myTimetable = new glow.widgets.Timetable(
  "#timetable",
  dataStart,
  dataEnd,
  viewStart,
  viewEnd,
  {
    id: "myTimetable"
    // other options...
  }
);

Items

Items are marked up as an <li> containing a <div>. The list item can be targeted using class "timetable-item", and the div "timetable-itemContent".

Borders should be applied to the <li>, whereas padding should be applied to the inner <div> (so it doesn't impact the item's visible size).

Borders between items will collapse if the "collapseItemBorders" constructor option is set to true.

Backgrounds can be applied to the items, but may cover any banding you have set up.

When adding items you can give them class names and / or ID, so they can be styled individually. Although all items within a track are assumed to have the same border widths as each other.

#myTimetable .timetable-item {
  border-width: 2px
  border-color: red;
}

#myTimetable .timetable-item .timetable-itemContent {
  padding: 15px 10px;
  font-size: 1.2em;
}

Tracks

Tracks are marked up as a <div> with class "timetable-track". They can be styled much the same as any HTML element.

Borders between tracks will collapse if the "collapseTrackBorders" constructor option is set to true.

When adding tracks you can give them class names and / or ID, so they can be styled individually.

Although tracks are absolutely positioned, you can give them a margin between other tracks which will collapse with the margin of other tracks. Obviously, to get margins, "collapseTrackBorders" must be false.

Backgrounds can be applied to tracks, but may cover any banding you have set up.

#myTimetable .timetable-track {
  margin-left: 5px;
}

Headers & Footers

Headers are marked up as a <div> with class "timetable-header-holder" containing a <div> with class "timetable-header-content".

Footers are marked up as a <div> with class "timetable-footer-holder" containing a <div> with class "timetable-footer-content".

Both inner and outer elements can be restyled, but padding should be applied to the inner element only, to avoid affecting the size of the outer element.

The height (or width for vertical timetables) of headers / footers

#myTimetable .timetable-header-holder {
  background: red;
}

#myTimetable .timetable-header-content {
  padding: 10px;
}

Scales

Scales are just a variety of track and are styled in the same way.

A scale is a <div> with class "timetable-scale". Scales on the top/left will have an additional class of "timetable-scalePrimary", scales on the bottom/right will have an additional class of "timetable-scaleSecondary".

Items on a scale are <div>s with class "timetable-scaleItem", containing an inner <div> with class "timeline-itemContent" and can be styled much like track items.

Borders should be applied to "timetable-scaleItem", whereas padding should be applied to the inner "timeline-itemContent"; (so it doesn't impact the item's visible size).

When adding tracks you can give them class names and / or ID, so they can be styled individually.

Backgrounds can be applied to scales, but may cover any banding you have set up.

#myTimetable .timetable-scale {
  background: #ccc;
}
#myTimetable .timetable-scaleItem {
  font-size: 1.2em;
}
#myTimetable .timetable-scaleItem .timetable-itemContent {
  padding-top: 5px;
}

Banding

If you've added banding to your timetable, these are marked up as <div>s with alternalting classes of "timetable-bandOdd" and "timetable-bandEven".

The only property you can sensibly set on a band is "background".

#myTimetable .timetable-bandOdd {
  background: #fff;
}
#myTimetable .timetable-bandEven {
  background: #ccc;
}

Scrollbars

Scrollbars are restyled instances of Slider, so the Slider restyling guide is useful for how to restyle the back and forward buttons.

Because vertical Sliders start at the bottom and scroll to the top, the back button is at the bottom and the forward button is at the top.

There are two container elements for scrollbars, one with class "timetable-scrollbar1" for the top / left scrollbar, and "timetable-scrollbar2" for the bottom / right scrollbar. These can be styled independently.

Scrollbar track

The scrollbar track is a <div> with class "timetable-scrollbarLabels". Each item on the track is in a <div> with class "timetable-scrollbarItem". The content within each item is in another <div> with class "timetable-itemContent".

Borders should be applied to "timetable-scrollbarItem", whereas padding should be applied to the inner "timeline-itemContent"; (so it doesn't impact the item's visible size).

#myTimetable .timetable-scrollbarLabels {
  background: #fff;
  color: #000;
}
#myTimetable .timetable-scrollbarItem .timetable-itemContent {
  padding-top: 2px;
}

Scrollbar track highlight

The highlighted area of the scrollbar is actually a clone of "timetable-scrollbarLabels" but carries an additional class of "timetable-scrollbarLabelsHighlight".

Use this to change the colours of the track / html. You can also change other styles, but layout changes may look odd.

#myTimetable .timetable-scrollbarLabelsHighlight {
  background: #000;
  color: #fff;
}
#myTimetable .timetable-scrollbarLabelsHighlight .timetable-scrollbarItem .timetable-itemContent {
  font-weight: bold;
}

Scrollbar handle

In the default themes, the scrollbar handle has been hidden by giving it zero opacity, but you could easily show it again and apply a background image to it.

Showing the handle:

#myTimetable .slider-handle {
  /* CSS3 way of setting opacity */
  opacity: 1;
  /* IE way of setting opacity */
  filter: alpha(opacity=100);
  /* Make the handle red */
  background: #f00;
}