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 () {
    $("#timeline").timeline(settings);
}

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

timelineDataUrl
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.

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

language
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.

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

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

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

getTooltipHtml(event)
Default: function (event) { return event.name + '<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:
https://github.com/anmalkov/jquery-timeline

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

Documentation: