Draggable Event Timeline Slider With jQuery - Timespace

Draggable Event Timeline Slider With jQuery - Timespace

Timespace is a jQuery plugin for creating a dynamic, responsive, horizontal, draggable timeline to display custom events in a slider manner. Click on the event slot you will sell more details about the event.

1. Load the latest version of jQuery (slim build) and the Timespace plugin's JavaScript in the html page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.timespace.js"></script>

2. Load a theme CSS of your choice in the head section of the page.

<!-- Dark theme -->
<link href="css/jquery.timespace.dark.css" rel="stylesheet">
<!-- Light theme -->
<link href="css/jquery.timespace.light.css" rel="stylesheet">

3. Create a container where the event timeline should appear.

<div id="timeline"></div>

4. Call the function on the container element and define your own events displayed in the timeline.

$('#timeline').timespace({
  // 24-hour timeline
  data: {
    headings: [
      {start: 0, end: 6, title: 'Night'},
      {start: 6, end: 12, title: 'Morning'},
      {start: 12, end: 18, title: 'Afternoon'},
      {start: 18, title: 'Evening'},
    ],
    events: [
      {start: 6.50, title: 'Breakfast', description: 'Eat a healthy breakfast.'},
      {start: 8, end: 10, title: 'Walk', description: 'Go for a walk.'},
      {start: 14, title: 'Lunch', description: 'Eat a healthy lunch.'},
      {start: 14.75, title: 'Meeting', description: 'Meeting with Co-workers.'},
    ]
  },
});

5. All default options to customize the event timeline.

$('#timeline').timespace({
  // max width in pixels
  maxWidth: 1000,
  // the amount of pixels to move the Timespace on navigation
  // 0 to disable
  navigateAmount: 200,
  // selected event
  // 0 for first event, -1 to disable
  selectedEvent: 0,
  // if the time table should shift when an event is selected
  shiftOnEventSelect: true,
  // jQuery object to use for the event display box
  customEventDisplay: null,
  // or 'date'
  timeType: 'hour',
  // using 12-Hour time
  use12HourTime: true,
  // if a suffix should be added to the displayed time (e.g. '12 AM' or '300 AD')
  useTimeSuffix: true,
  // receives the lowercase suffix string and returns a formatted string
  timeSuffixFunction: s => ' ' + s[0].toUpperCase() + s[1].toUpperCase(),
  // start/end time
  startTime: 0,
  endTime: 23,
  // the amount of time markers to use
  // 0 to calculate from startTime, endTime, and markerIncrement
  markerAmount: 0,
  // the amount of time between each marker
  markerIncrement: 1,
  // width of marker
  markerWidth: 100
});

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

  • Publication date: 09.04.2018
  • Source