Monday, March 19, 2012

jQuery timeline plugin configuration

There are several configuration parameters that you can use for jQuery timeline plugin.

For apply the plugin you should write the next code:

$(document).ready(function () {

Where the settings is a set of key/value pairs that configure the plugin. All settings instead of timelineDataUrl are optional.

The string containing the URL to which the ajax request will be sent. The plugin expects to receive a json object (with the data about events) as a response from this URL.

Default: 'dd.MM.yyyy HH:mm'
The format string that determines how the plugin will show the dates for the events.

Default: 'en'
The language that will be used to show the months names. The plugin supports 'en' (English), 'ko' (Korean), 'ru' (Russian) by default, and can be extended to support any language.

Default: false
The value determines will the plugin show the legend block or not.

Default: 'Legend'
The string that will be shown as header for the legend block.

Default: 'Time is occupied'
The string that will be shown as a description for the event item in the legend block.

Default: function (event) { return + '<br/>' + event.startDate + ' - ' + event.finishDate; }
The function that will be used to get the html code that will be shown in the event tooltip.

Monday, March 5, 2012

jQuery timeline plugin sections

jQuery Timeline plugin sections

Timeline contains three main sections:

  • Header section
  • Bands section
  • Legend section

Header section

Header section contains months and weeks headers.

Bands section

Bands section contains rows - bands. Each band has name and events. Each event contains name and tooltip.

Legend section

Legend section contains description for the timeline.

Read the next post: Configuration of the jQuery timeline plugin

Sunday, March 4, 2012

jQuery timeline plugin has been released

jQuery.timeline() is a plugin for jQuery which allows you to show your events in a timeline (aka time-board).

Example of the output result of the timeline plugin:

You can find the source code at:

The documentation and examples how to use it, will be published soon.