The Timeline.JS spreadsheet is formatted specifically so that the Knight lab tool can take your information and turn it into an interactive timeline.  It's important that you don't delete any columns or headings.  Don't worry though, they've got you covered!  If you're trying to change something that shouldn't be changed, you'll get this notice from Google Sheets.  If you see this warning, stop what you're doing and leave that setting alone.

If you are working in a group, you may find yourself editing the page at the same time as your group member.  In the picture below, you can see where the 2 people on these sheet are active by the blue and green outlines of the cells.  Try to be mindful of the work your group mates are doing so that you don't delete their work.  If there are many people working on the same spreadsheet at the same time, there can be some lag between an edit and an update.

Finally, while you can make the spreadsheet as long as you want it to, it's always a good idea to delete any empty rows when you're done with your project to keep things tidy.

• Dates can be written in any order:   Timeline.JS will automatically show them in chronological order.  We recommend putting your dates in chronological order so that you can better keep track of where your events are and what you've added.
• Dates should be written using numbers for the months and days.  
• Times should be written using a 24 hour system.
• The only required date is a year, except for your title card - which doesn't require any date and will always be placed at the front of the project.

Examples of dates that work:

Timeline.JS also allows you to use a Display Date - this field replaces the automated date.  You can use this if you have a lot of date information but just want the day, if you want to write out the date (e.g. February 1, 1923), or if you want to add text to the date.  In the example below, I used the "Display Date" to add a subtitle to the date so the Headline field could focus on a different aspect.

For the most part, you can just put headlines and text into the spreadsheet boxes. One tricky thing about working with Google Sheets is that you may want to copy over text from another program that includes multiple paragraphs.  If you click on a cell and paste your text, you will notice that your text now occupies multiple cells.

To avoid this, click on the input box at the top of the sheet, and past your paragraphs there.  That will make sure all your text is in the same cell.  It won't, however, break up your text into multiple paragraphs for your timeline.  For that, you'll need to read below about some basic html markup.

If you want to edit the style of your text, such as adding bold, italics, links in the body of your text, or paragraph breaks, you'll need to do that using html.  Below are a few tips for some basic html style guides.  For a comprehensive list of options to try, check out  W3 school's guide to HTML.  Timeline.JS will keep most html markup, but you should always test your spreadsheet just to be sure.

Here are some common html tags that you might want to use.  Note that there is a tag <example> and an end tag </example> for each option.  You'll need to make sure you have both for the html to work properly. 

<strong>This text is bold.</strong>

<em>This text is italic.</em>

<u>This text is underlined</u>

<a href="www.ucsc.edu">This text links to ucsc.edu</a>

<p>In order to have multiple paragraphs, you need to wrap each line in a paragraph tag.</p>
<p>In this example, these two sentences would have a paragraph break between them, so you can have multiple paragraphs.</p>

<br><br><p>You can add extra space between paragraphs by using the br tag.  It does not need an end tag, as it exists as it's own entity.</p>

Here is what that looks like in the google sheet, and then how that is presented in Timeline.JS:

Timeline.JS supports various media, and we recommend checking out their full list of media supported!  For most sites that host creative commons media, you can just link directly to the page that the media is on.  In some cases, however, you'll need to find the url for the specific media.  

For images, you can do this by right clicking on the image and choosing "Copy Image address".  You should only do this if you're working on a small class project, and some sites might not let you copy the image address this way.  If you're creating a site you expect to get a lot of views, you should find a place to upload the image yourself online, such as to your google drive account, and get the link from there.

It is a best practice to provide media credit and, where possible, to link your media credit to the place you found the image, even if the image is CC0 and doesn't require attribution.  These fields can accept HTML just like the text fields above can.

Most timeline entries will leave this option empty. 

There should only be 1 card that has the "title" type.  This is the title of your timeline and will appear at the beginning of your timeline.  It does not need a date.  It should have a headline, but the rest of the fields can be left blank if you prefer.  

Most timelines don't use eras, but they can be useful if you have distinct time periods you want to display.

Era items change the way the date portion of the timeline looks.  They should have a beginning and end date, and should not overlap.  You can add a headline to label them, but they don't use the text and media fields. Events set as an era item will not show a slide on the final timeline but is only used to change the way the date portion of the timeline looks.  Below is an example that has 2 eras of time - the 20th century and the 21st century. 

Most timelines don't use groups, but they can be useful if you have distinct types of items you want to display together.

The group tab can be added to any entry.  The field is open, so you can define what the title of the group is.  It will split the timeline up by group and put like items together.  Here is an example that uses 2 group types - newspaper article and movie release.  Note that the newspaper articles are all on the lighter portion of the timeline, and the movie releases on the darker portion.

You don't have to add any information to this column. If you leave it blank, the background of the event will be white. If you want to change that to a different color or add an image, you'll need to add that information to the background column.

To use colors, you'll need to use a color picker and find the hex code.  Google has a color picker under their search tool, or you can use one of many online tools to find a color you like.  If you are using the hex code, make sure to add the # symbol before the letters.  To use an image background, you'll use the same process as adding media described above.