Skip to content
A jQuery plugin to handle displaying of time events
JavaScript CSS HTML
Branch: master
Clone or download
Michael Howard
Michael Howard 1.3.1
Latest commit 18b3a5d Apr 28, 2018

jQuery Timespace

The jQuery Timespace plugin provides a way to handle the display of event data in a horizontal table that can be dragged in all directions. Each event in the time table can be selected to display more details about the event.

Important: This Plugin uses features that are not supported by any Internet Explorer version.


See the example.html file for more details.

Codepen Example


We can call the Timespace plugin on an empty container and send in some data. See the example.html file for more information on the options argument and how to format the data.

$('#timeContainer').timespace(options, callback);
  • options : The options object
  • callback : A callback function to execute on completion. If using a URL for the data option and it fails to load, the callback will receive the jqxhr object.


Key Description Default
data The data to use for the Timespace instance (See data variable below), or a URL for loading the data object with jQuery.get() null
startTime The starting time of the time table 0
endTime The ending time of the time table 24
markerAmount The amount of time markers to use (0 to calculate from startTime, endTime, and markerIncrement) 0
markerIncrement The amount of time each marker spans 1
markerWidth The width of each time marker td element (0 to calculate from maxWidth and markerAmount) 100
maxWidth The maximum width for the time table container 1000
maxHeight The maximum height for the time table container 280
navigateAmount The amount of pixels to move the time table on navigation (0 to disable) 400
dragXMultiplier The multiplier to use with navigateAmount when dragging the time table horizontally 1
dragYMultiplier The multiplier to use with navigateAmount when dragging the time table vertically 1
selectedEvent The index number of the event to start on (0 for first event, -1 to disable) 0
shiftOnEventSelect If the time table should shift on event selection true
scrollToDisplayBox If the window should scroll to the display box on event selection (only applies if the time table height is greater than the window height, and if the event has a description) true
customEventDisplay The jQuery Object of the element to use for the display box null
timeType Use 'hour' or 'date' for the type of time being used. Note: If using 'date', 0 AD will display as 1 AD 'hour'
use12HourTime If using 12-Hour time (e.g. '2:00 PM' instead of '14:00') true
useTimeSuffix If a suffix should be added to the displayed time (e.g. '12 AM' or '300 AD') - No time suffix is used if timeType is 'hour' and use12HourTime is false true
timeSuffixFunction The function that receives the lowercase suffix string and returns a formatted string s => ' ' + s[0].toUpperCase() + s[1].toUpperCase()
controlText The object of title texts for the various control elements (See controlText variable below)
let data = {
	headings: [
			// Important: The start and end times for the headings are rounded to the increment
			//   e.g. If my increment is 10, a start time of 35 will round to 40, and 34 will round to 30.
			start: number, // The start time for the heading
			end:   number, // The end time for the heading (only optional for the last heading)
			title: string, // The text for the heading
	events: [
			start:       number,         // The start time for the event
			end:         number,         // The optional end time for the event
			title:       string,         // The text for the event title
			description: string||jQuery, // The optional text or jQuery Object for the event description
			width:       number,         // The optional width for the event box
			noDetails:   bool,           // If the time event should not have a display (If noDetails and a description exists, it will be used for the event's title attribute)
			class:       string,         // The optional CSS class to use for the event's <p> element
			callback:    Function,       // The optional callback to run on event selection.
			// The callback cannot be an arrow function if calling any API methods within the callback

let controlText = {
	navLeft: 'Move Left',
	navRight: 'Move Right',
	drag: 'Drag',
	eventLeft: 'Previous Event',
	eventRight: 'Next Event',

Methods & Properties

These methods and properties can only be accessed from within a callback function using the this keyword.


To set the shiftOnEventSelect option from within a callback function:

this.shiftOnEventSelect = true;


To set the navigateAmount option from within a callback function:

this.navigateAmount = true;


To get the jQuery container element of the Timespace instance from within a callback function:

let myContainer = this.container;


To get the currently selected event's jQuery div element of the Timespace instance from within a callback function: Note: Returns null if no event is currently selected.

let eventBox = this.event;

.navigateTime(direction, duration)

Navigate the time table in a direction or by a specified amount.

  • direction : An [x, y] Array with x = 'left' or 'right', y = 'up' or 'down', or positive or negative numbers
  • duration : The amount of seconds for the time table to animate its position



You can’t perform that action at this time.