This test uses JSON data.

It demonstrates use of various event attributes color, textColor, tapeImage, and tapeRepeat. Details

Test numbers:

  1. Only start date
  2. Start and end dates. Combinations of isDuration
  3. Red tapes. Events without titles. Start and end dates. Combinations of isDuration
  4. Caption and tapeImage attributes. The striped tape. Hover over the label or tape to view the caption.
  5. Really long labels. They should not wrap
  6. Permutations of bad dates. Test that error messages are shown in all browsers including IE
  7. Event has classname attribute. CSS is used to modify the event's display. For event with classname of special_event, use css selectors:
    • .tape-special_event for the tape in a main band
    • .label-special_event for the label
    • .icon-special_event for the icon
    • .highlight-special_event for the highlight div
    • In addition to the above, the elements also have a class of just special_event. So the selector .special_event can be used generically for all of the above elements, depending on your goals.
    • The events in the overview band will have class .small-special_event for the tape or tick.
Additional features demonstrated:

Timeline version .

Stripe courtesy of Stripe Generator.