TimeLineJS - Creating and Editing a TimeLine

Creating and Editing a Timeline

TimelineJS is an open-source tool that enables anyone to build visually rich, interactive Timelines.

If you experience issues with TimeLineJS, you may refer to the additional documentation or contact the ITS help desk at 909-621-8061 or servicedesk@pomona.edu. Additional video tutorials are available via Pomona College ITS at https://app.vidgrid.com/content/niPVwxoJ6aU7.

Creating a Timeline

Go to https://timeline.knightlab.com/
Click Make a Timeline
Select Click the Spreadsheet Template to the side of “Create your spreadsheet”
Click Make a copy
Login to your Gmail account

Editing Dates (A-I)

In terms of dates, users need to at least fill out the “Year” section, entering the year the event in the Timeline occurred. To enter BCE dates, use a negative year, such as -500 (500 BCE).
Under the “Month” section, users have the option to enter additional information regarding the month the aforementioned event in the Timeline occurred.
Under the “Day” section, users can input the day the aforementioned event occurred.
Under the “Time” section, users can input the time the aforementioned event occurred, down to the second.
Users have the option to add end dates. If users choose to do so, they must at least input the year the event ended. This would be under “End Year.” If your event doesn’t have an “end date” leave sections E-H empty.
Under “End Month” users can input the month the event listed ended.
Under “End Day” users can input the day the listed event ended.
Under “End Time” users can input the time the listed event ended, down to the second.
The “Display Date” column gives users some more flexibility in how dates are shown on a slide; users can specify a “display date” which will override any decisions TimelineJS makes about how to show the date. Users can also input words instead, like “unknown.”

Editing Text Content (J-K)

The “Headline” column will be displayed on the slide corresponding to the event in question. It’s recommended to at least include a headline for navigation ease.
Under the “Text” column, users would input body text describing the event.

Editing Media Content (L-O)

Under the “Media” column, users can add media from a variety of sources, including Twitter, Instagram, Flickr, GoogleMaps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframe, major video sites, and much more. All media will need to be inputted as a URL.
Using the “Media Credit” column, users can credit the media’s original source.
Under the “Media Caption” column, users can include a short caption describing the media used.
Using the “Media Thumbnail” column, users can choose to replace the small icon representing the type of media used that appears on the media marker with a thumbnail of the media instead. The media thumbnail will also need to be inserted as a URL.

Editing Other Settings (P-R)

The column “Type” is an optional setting that can be used to detail whether TimeLine will use the selected row as a title slide. Users should only have one row with “title” selected as the type. The other type of option is “era,” which means TimeLine will use the defined row to label a span of time in the Timeline navigation. Eras should have start and end dates, as well as a headline.
Under “Group,” users can organize their slides by groups or tags. Users can put any value needed into the Group column and events with the same group will be put in the same row or adjacent rows. Different groups will be organized according to the chronological order in which they were added to the spreadsheet.
Using the “Background” column, users can set the background of a slide to a specific color or image. To select a color, users must input a selected color code from the following website: https://www.w3schools.com/cssref/css_colors.asp. To use an image as a background, simply input a URL.