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.

Example

See the example.html file for more details.

Codepen Example

API

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.

Options

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.

.shiftOnEventSelect

To set the shiftOnEventSelect option from within a callback function:

this.shiftOnEventSelect = true;

.navigateAmount

To set the navigateAmount option from within a callback function:

this.navigateAmount = true;

.container

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

let myContainer = this.container;

.event

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

License

MIT