Timeline slider the jQuery plugin
Posted By : Arun Kataria | 29-May-2018
Timeline slider is a jQuery plugin for creating a responsive, dynamic, horizontal, touch-friendly,
By using show the Timeline Slider Jquery plugin where you want to book the time or show the Booked time. By clicking on a particular time This plugin will return the Time on which you have clicked, and also the nearby booked time slot in that paticular Date. It had a feature of draging to select time from that which you want to select. It will show the selected time that you have selected. Its UI is also not destorted in any screen size.
This Plugin is compatible with Ionic 1 to Ionic 3. You can customize its View by changing its CSS file Like changing clour of Booked time or Background time. This plugin is compatible with all the Devices and all the screen size. It's Pure Jquery plugin. So that you can use it with any application such as AngularJs, ReactJs etc.
Let's have a look at, how to integrate it with our Front-end application. Below I had mentioned the code to integrate it.
How to use:-
1) Add script to main html.
1 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" |
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="jquery.timespace.js"></script> |
2) theme CSS of your choice in the head section of the page.
1 |
<!-- Dark theme --> |
2 |
<link href="css/jquery.timespace.dark.css" rel="stylesheet"> |
3 |
4 |
<!-- Light theme --> |
5 |
<link href="css/jquery.timespace.light.css" rel="stylesheet"> |
3) Create a Div where a event timeline should appear.
1 |
<div id="timeline"></div> |
4) Create in JS file to define your own events displayed in the timeline.
01 |
$('#timeline').timespace({ |
02 |
03 |
// 24-hour timeline |
04 |
data: { |
05 |
headings: [ |
06 |
{start: 0, end: 6, title:'Night'}, |
07 |
{start: 6, end: 12, title:'Morning'}, |
08 |
{start: 12, end: 18, title:'Afternoon'}, |
09 |
{start: 18, title:'Evening'}, |
10 |
], |
11 |
events: [ |
12 |
{ |
13 |
start: 6.50, |
14 |
title:'Breakfast', |
15 |
description:'Eat a healthy breakfast.', |
16 |
// width: number |
17 |
// noDetails: false, |
18 |
// class:string, |
19 |
// callback: Function |
20 |
}, |
21 |
{start: 8, end: 10, title:'Walk', description:'Go for a walk.'}, |
22 |
{start: 14, title:'Lunch', description:'Eat a healthy lunch.'}, |
23 |
{start: 14.75, title:'Meeting', description:'Meeting with Co-workers.'}, |
24 |
] |
25 |
}, |
26 |
27 |
}); |
5) These are the default options for customize a event timeline.
01 |
$('#timeline').timespace({ |
02 |
03 |
// max width in pixels |
04 |
maxWidth: 1000, |
05 |
06 |
// max height in pixels |
07 |
maxHeight: 280, |
08 |
09 |
// the amount of pixels to move the Timespace on navigation |
10 |
// 0 to disable |
11 |
navigateAmount: 200, |
12 |
13 |
// The multiplier to use with navigateAmount when dragging the time table horizontally |
14 |
dragXMultiplier: 1, |
15 |
16 |
// The multiplier to use with navigateAmount when dragging the time table vertically |
17 |
dragYMultiplier: 1, |
18 |
19 |
// selected event |
20 |
// 0 for first event, -1 to disable |
21 |
selectedEvent: 0, |
22 |
23 |
// if the time table should shift when an event is selected |
24 |
shiftOnEventSelect:true, |
25 |
26 |
// If the window should scroll to the event display box on event selection (only applies if the time table height is greater than the window height) |
27 |
scrollToDisplayBox:true, |
28 |
29 |
// jQuery object to use for the event display box |
30 |
customEventDisplay:null, |
31 |
32 |
// or '<a href="https://www.jqueryscript.net/time-clock/">date</a>' |
33 |
timeType:'hour', |
34 |
35 |
// using 12-Hour time |
36 |
use12HourTime:true, |
37 |
38 |
// if a suffix should be added to the displayed time (e.g. '12 AM' or '300 AD') |
39 |
useTimeSuffix:true, |
40 |
41 |
// receives the lowercase suffix string and returns a formatted string |
42 |
timeSuffixFunction: s =>' ' + s[0].toUpperCase() + s[1].toUpperCase(), |
43 |
44 |
// start/end time |
45 |
startTime: 0, |
46 |
endTime: 23, |
47 |
48 |
// the amount of time markers to use |
49 |
// 0 to calculate from startTime, endTime, and markerIncrement |
50 |
markerAmount: 0, |
51 |
52 |
// the amount of time between each marker |
53 |
markerIncrement: 1, |
54 |
55 |
// width of marker |
56 |
markerWidth: 100, |
57 |
58 |
controlText: { |
59 |
navLeft:'Move Left', |
60 |
navRight:'Move Right', |
61 |
drag:'Drag', |
62 |
eventLeft:'Previous Event', |
63 |
eventRight:'Next Event', |
64 |
} |
65 |
66 |
}); |
This is default options for customize a event timeline you can change as per your requirements.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Arun Kataria
Arun has good skills in AngularJS, NodeJS, MongoDB and many more. He is highly motivated which allow him to strive for proficiency when accomplishing assigned duties. He is an excellent team operative.