Scalar 2 User's Guide

Timeline Layout

The Timeline layout uses Timeline.js to display any content contained or tagged by the current page in chronological order at its top. Content must include dcterms:temporal or dcterms:date in the format month, day, year, hour, minute, second. Each item on the timeline displays its thumbnail, title, description, and link for its content when clicked. The rest of the page follows the Basic layout, with text and media interspersed.

Bellow you'll find step-by-step instructions for using the Timeline layout.

Step one: Add metadata to content in your Scalar book. Navigate to the edit page for the content you’d like to add to your timeline, select “Metadata,” in the page editor, and click “Add additional metadata.” Then, within the metadata dialogue box, tick the box next to either “Temporal” or “Date” under “dcterms” and click “Add fields” at the bottom-right of the dialogue box. You should now have a new field under Metadata in the page editor – “dcterms:temporal” or “dcterms:date”; enter either a particular date (and time) or a range into that field using a supported date/time format (see below).

Step two: Add descriptions and thumbnails to content in your Scalar book (optional). The Timeline layout will also display an item’s description and associated thumbnail. To add a description to an item, simply enter your text into the description field in the page editor. To add a thumbnail click on “Styling” and choose “Thumbnail” from the dropdown menu. Then select an image from your media library or enter a url for the image’s location on the Web; click “save.”

Step three: Gather your content. Once you’ve added temporal metadata to the items you’d like displayed in your timeline, create a new page (or alternatively, use an existing page) and either tag those items to that page or add them to the page as a path.

Step four: Select the Timeline layout. Finally, set the current page to the Timeline layout via the drop-down menu under “Layout.”

Supported metadata formats.


The preferred format is ISO 8601, which can be represented as "YYYY-MM-DD" (1988-07-21) OR "YYYY/MM/DD" (1988/07/21). But one can also include the time on a particular date. In fact, ISO 8601 just requires the date be represented as most-specific to least-specific: year, month, day, hours, minutes, seconds, and if you like, timezone - i.e. YYYY-MM-DDTHH:mm:ss.sssZ. So, a date could be represented as: 1988-07-21T14:59:23.123-06:00, which would be July 21, 1988 at 2:59:23.123PM in Mountain time [-6 hours from UTC].

Other formats that are supported include:

MM/DD/YY (07/21/88)
MM/DD/YY hh:mma (07/21/88 2:59 AM)
MM/DD/YY HH:mm (07/21/88 14:59)
MM/DD/YYYY (07/21/1988)
MM/DD/YYYY hh:mma (07/21/1988 2:59 AM)
MM/DD/YYYY HH:mm (07/21/1988 14:59)
MM-DD-YY (07-21-88)
MM-DD-YY hh:mma (07-21-88 2:59 AM)
MM-DD-YY HH:mm (07-21-88 14:59)
MM-DD-YYYY (07-21-1988)
MM-DD-YYYY hh:mma (07-21-1988 2:59 AM)
MM-DD-YYYY HH:mm (07-21-1988 14:59)
Month DD YYYY (July 21 1988 - also, with commas: "July, 21 1988", "July 21, 1988" and "July, 21, 1988" ) YYYY
Month DD (1988 July 21 - same comma rules as above apply)

Finally, one can also include a date range. The preferred format is still ISO 8601, but hyphens with each date should be replaced by slashes so that a hyphen can be used between the two dates: "YYYY/MM/DD-YYYY/MM/DD" (1988/07/21-2016/10/15). Thus the following formats are supported for date ranges.

MM/DD/YY-MM/DD/YY
MM/DD/YY hh:mma-MM/DD/YY hh:mma
MM/DD/YY HH:mm-MM/DD/YY HH:mm
MM/DD/YYYY-MM/DD/YYYY
MM/DD/YYYY hh:mma-MM/DD/YYYY hh:mma
MM/DD/YYYY HH:mm-MM/DD/YYYY HH:mm
Month DD YYYY-Month DD YYYY YYYY
Month DD-YYYY Month DD

This page has paths:

This page references:

  1. Timeline Layout Header
  2. Timeline Page Layout