This time I will share jQuery Plugin and tutorial about Simple Dynamic Gantt Chart Plugin For jQuery – Gantt, hope it will help you in programming stack.
| File Size: | 55.1 KB |
|---|---|
| Views Total: | 10596 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Gantt is a simple, lightweight jQuery plugin that helps you dynamically draw a customizable Gantt Chart to plan, coordinate, and track specific schedules/tasks in a horizontal bar chart.
Features:
- Supports local and external data source.
- Custom start/end dates.
- Multiple languages.
- Data lazy load.
- Mouse scroll is supported.
Basic usage:
1. Add the latest version of jQuery library and the jQuery Gantt plugin’s JavaScript and CSS files to the Html page.
1 |
<link rel="stylesheet" href="jquery-gantt.css"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="jquery-gantt.js"></script> |
2. Create a container element in which you want to render the gantt chart.
1 |
<div id="demo"></div> |
3. Prepare your events to be presented in the gantt chart.
01 |
var eventsData = [{ |
02 |
"title": "Event 1", |
03 |
"startdate": "2016/07/21", |
04 |
"enddate": "2016/07/26", |
05 |
"url": "http://www.google.com", |
06 |
"type": "Tur", |
07 |
"minNight": "4", |
08 |
"price": { |
09 |
"original": { |
10 |
"price": 798.0000, |
11 |
"priceType": "EUR" |
12 |
}, |
13 |
"converted": { |
14 |
"price": 2673, |
15 |
"priceType": "TL" |
16 |
} |
17 |
}, |
18 |
"tooltipData": { |
19 |
"title": "Title", |
20 |
"image": "Image1.jpg", |
21 |
"desc": ["Desc 1", " Desc 2", " Desc 3"], |
22 |
"dates": { |
23 |
"begin": "Start date", |
24 |
"end": "End date" |
25 |
}, |
26 |
"url": null |
27 |
}, |
28 |
"dateorder": "/Date(1469048400000)/" |
29 |
}]; |
4. Initialize the gantt chart plugin and done.
1 |
$('#demo').gantt({ |
2 |
data: eventsData |
3 |
}); |
5. Available options and defaults.
01 |
$('#demo').gantt({ |
02 |
03 |
// user defined data array of event [source] |
04 |
data: [], |
05 |
06 |
// data URL |
07 |
dataURL: '', |
08 |
09 |
// start date calendar |
10 |
startDate: new Date(), |
11 |
12 |
// end date calendar |
13 |
endDate: new Date(), |
14 |
15 |
// cell width px |
16 |
cellWidth: 20, |
17 |
18 |
// cell height px |
19 |
cellHeight: 38, |
20 |
21 |
// language |
22 |
language: 'en', |
23 |
24 |
// sticky header |
25 |
stickyHeader: false, |
26 |
27 |
// mouse scroll |
28 |
mouse<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: false, |
29 |
30 |
// mouse scroll px |
31 |
mouseScrollpx: 120, |
32 |
33 |
// lazy load |
34 |
lazyLoad: false, |
35 |
36 |
// auto hide |
37 |
autoHide: false, |
38 |
39 |
// onInit event |
40 |
onInit: $.noop, |
41 |
42 |
// onDestroy event |
43 |
onDestroy: $.noop |
44 |
|
45 |
}); |
About Author:
Author: oguzhan
Website: https://github.com/oguzhanoya/jquery-gantt
This awesome jQuery plugin is developed by oguzhanoya. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
