Custom Schedule / Timeline / Time Slider Plugin - TimeSlider

TimeSlider is a jQuery plugin for rendering a timeline / schedule widget on your webpage, featuring custom time ranges, drag'n'drop time cells and auto timestamp update. 

How to use it:

1. Load the necessary jQuery library and jQuery UI in the html document.

<link rel="stylesheet" href="/path/to/jquery-ui.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.js"></script>

2. Load the jQuery TimeSlider plugin's stylesheet and JavaScript in the document. Make sure the timeslider.js is loaded after jQuery library.

<link href="css/timeslider.css" rel="stylesheet">
<script src="js/timeslider.js"></script>

3. Create an empty DIV element that will be served as the container for the plugin.

<div id="example" class="time-slider"></div>

4. Initialize the plugin and we're ready to go.

$('#example').slider();

5. Default plugin settings.

$('#example').slider({

  // start timestamp
  start_timestamp: (new Date()).getTime(),   

  // current timestamp
  current_timestamp: (new Date()).getTime(), 

  // length of graduation ruler in hours (zoom)
  hours_per_frame: 24,                 

  // minimum pixel between graduations      
  graduation_step: 20,        

  // minimum pixel between titles of graduations               
  distance_between_gtitle: 80,    

  // in ms           
  update_timestamp_interval: 1000,
  update_interval: 1000,

  // show ms
  show_ms: false,

  // initial time cells
  init_cells: null,

  ruler_enable_move: true,
  timecell_enable_move: true,
  timecell_enable_resize: true,

  // callbacks
  on_add_timecell_callback: null,
  on_toggle_timecell_callback: null,
  on_remove_timecell_callback: null,
  on_remove_all_timecells_callback: null,
  on_dblclick_timecell_callback: null,
  on_move_timecell_callback: null,
  on_resize_timecell_callback: null,
  on_change_timecell_callback: null,
  on_dblclick_ruler_callback: null,
  on_move_ruler_callback: null,
  on_change_ruler_callback: null
  
});

Change log:

2016-02-16

• Add ability to edit time cells programmatically.

2016-02-11

• Add ability to set new 'start timestamp' programmatically.

2016-02-05

• Add ability to disable move and/or resize time cells.

2016-01-30

• Add ability to set custom css styles for time cell on init, add and toggle.

2016-01-23

• Change current time from UTC to local.
• Add processing for double click event on ruler.

2016-01-20

• Add ability to add finished time cell.

---

This awesome jQuery plugin is developed by v-v-vishnevskiy. For more Advanced Usages, please check the demo page or visit the official website.