at path：
ROOT
/
sistema
/
vendors
/
gantt
/
index - copia.html
run：
R
W
Run
css
DIR
2026-04-09 04:12:40
R
W
Run
img
DIR
2026-04-09 04:12:40
R
W
Run
js
DIR
2026-04-09 04:12:40
R
W
Run
tests
DIR
2026-04-09 04:12:40
R
W
Run
.gitignore
10 By
2020-05-24 00:32:28
R
W
Run
Delete
Rename
CONTRIBUTORS.md
756 By
2020-05-24 00:32:30
R
W
Run
Delete
Rename
Copia [2] de index.html
8.09 KB
2020-05-24 00:32:30
R
W
Run
Delete
Rename
Copia de index.html
8.09 KB
2020-05-24 00:32:30
R
W
Run
Delete
Rename
README.md
465 By
2020-05-24 00:32:30
R
W
Run
Delete
Rename
index - copia.html
23.17 KB
2020-05-24 00:32:30
R
W
Run
Delete
Rename
error_log
up
📄
index - copia.html
Save
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery.Gantt</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=IE8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/style.css" type="text/css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; font-size: 13px; padding: 0 0 50px 0; } h1 { margin: 40px 0 20px 0; } h2 { font-size: 1.5em; padding-bottom: 3px; border-bottom: 1px solid #DDD; margin-top: 50px; margin-bottom: 25px; } table th:first-child { width: 150px; } .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out } @keyframes octocat-wave { 0%, 100% { transform: rotate(0) } 20%, 60% { transform: rotate(-25deg) } 40%, 80% { transform: rotate(10deg) } } @media (max-width:500px) { .github-corner:hover .octo-arm { animation: none } .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out } } </style> </head> <body> <div class="container"> <h1> jQuery.Gantt <small>— Draw Gantt charts with the famous jQuery ease of development</small> </h1> <h2 id="contributors">Contributors</h2> <ul> <li> <strong><a href="http://mbielanczuk.com/" target="_blank">Marek Bielańczuk</a></strong> wrote the original jQuery.Gantt plugin that this version is based off of. </li> <li> <strong><a href="http://taitbrown.com/" target="_blank">Tait Brown</a></strong> enforced stricter code guidelines by validating the code, updating it to support HTML5 and tweaking the design. </li> <li> <strong><a href="mailto:leo.pfeifenberger%40googlemail.com">Leo Pfeifenberger</a></strong> made <em>major</em> performance updates as well as adding requested features such as click events, state persisting via cookies and scrollToToday on load functionality. </li> <li> <strong><a href="mailto:grzegorz.russek%40gmail.com">Grzegorz Russek</a></strong> helped fix the White Whale of a bug that prevented the hour view rendering correctly. Nice one. </li> <li> <strong><a href="https://github.com/taitems/jQuery.Gantt/graphs/contributors" target="_blank">Many more from the GitHub community</a></strong> </li> </ul> <h2 id="example"> Example </h2> <div class="gantt"></div> <h2 id="config"> Gantt Configuration </h2> <pre class="prettyprint lang-js"> $(".selector").gantt({ source: "ajax/data.json", scale: "weeks", minScale: "weeks", maxScale: "months", onItemClick: function(data) { alert("Item clicked - show some details"); }, onAddClick: function(dt, rowId) { alert("Empty space clicked - add an item!"); }, onRender: function() { console.log("chart rendered"); } }); </pre> <table class="table table-striped"> <thead> <tr> <th> Name </th> <th> Default </th> <th> Type </th> </tr> </thead> <tbody> <tr> <td> <code>source</code> </td> <td> <code>[]</code> </td> <td> Array, string (url) </td> </tr> <tr> <td> <code>itemsPerPage</code> </td> <td> <code>7</code> </td> <td> number </td> </tr> <tr> <td> <code>months</code> </td> <td> <code>["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]</code> </td> <td> Array (12 strings representing the months of the year) </td> </tr> <tr> <td> <code>dow</code> </td> <td> <code>["S", "M", "T", "W", "T", "F", "S"]</code> </td> <td> Array (7 strings representing the days of the week) </td> </tr> <tr> <td> <code>holidays</code> </td> <td> <code>undefined</code> </td> <td> Array of numbers (ms), date strings (see <a href="http://dygraphs.com/date-formats.html" target="_blank">formats</a>), or Date objects </td> </tr> <tr> <td> <code>navigate</code> </td> <td> <code>"buttons"</code> </td> <td> string ("buttons", "scroll") </td> </tr> <tr> <td> <code>scale</code> </td> <td> <code>"days"</code> </td> <td> string ("months", "weeks", "days", "hours") </td> </tr> <tr> <td> <code>maxScale</code> </td> <td> <code>"months"</code> </td> <td> string ("months", "weeks", "days", "hours") </td> </tr> <tr> <td> <code>minScale</code> </td> <td> <code>"hours"</code> </td> <td> string ("months", "weeks", "days", "hours") </td> </tr> <tr> <td> <code>waitText</code> </td> <td> <code>"Please wait..."</code> </td> <td> string </td> </tr> <tr> <td> <code>onItemClick</code> </td> <td> <code>function (data) { return; }</code></td> <td> Function called when clicking on a Gantt item. <br />The parameter passed to the function is the dataObj of the source item, if one was provided.</td> </tr> <tr> <td> <code>onAddClick</code></td> <td> <code>function (dt, rowId) { return; }</code></td> <td> Function called when clicking on empty space inside the Gantt data panel. <br />The parameter passed to the function is the date/time in milliseconds for the clicked cell, and the ID of the source object (row), if one was provided.</td> </tr> <tr> <td> <code>onRender</code></td> <td> <code><a href="http://api.jquery.com/jquery.noop/" target="_blank">$.noop</a></code></td> <td> Function called whenever the chart is (re)rendered</td> </tr> <tr> <td> <code>useCookie</code></td> <td> <code>false</code></td> <td> indicates whether or not cookies should be used to save and restore the chart's view state (scale, scroll position) between page loads; <code><a href="https://github.com/carhartl/jquery-cookie" target="_blank">jquery.cookie</a></code> needs to be referenced for this to work</td> </tr> <tr> <td> <code>cookieKey</code></td> <td> <code>"jquery.fn.gantt"</code></td> <td> The prefix used when storing cookies (depends on useCookie being set to <code>true</code>)</td> </tr> <tr> <td> <code>scrollToToday</code></td> <td> <code>true</code></td> <td> Boolean</td> </tr> </tbody> </table> <h2 id="source"> Source Configuration </h2> <pre class="prettyprint lang-js"> source: [ { name: "Example", desc: "Lorem ipsum dolor sit amet.", values: [ ... ] id: 1, cssClass: "redLabel" }, ... // more rows ] </pre> <table class="table table-striped"> <thead> <tr> <th> Name </th> <th> Type </th> <th> Description </th> </tr> </thead> <tbody> <tr> <td> <code>name</code> </td> <td> string </td> <td> Optional primary label for this row of values; appears in the leftmost column of the row. </td> </tr> <tr> <td> <code>desc</code> </td> <td> string </td> <td> Optional secondary label for this row of the Gantt. </td> </tr> <tr> <td> <code>values</code> </td> <td> Array </td> <td> Sequence of date ranges for each row of the Gantt. See <a href="#values">table below</a>. </td> </tr> <tr> <td> <code>id</code> </td> <td> string or number </td> <td> Optional value to be passed as second parameter to <code>onAddClick()</code> callback when triggered. </td> </tr> <tr> <td> <code>cssClass</code> </td> <td> string </td> <td> Optional space-separated class names to be applied to this row's labels. </td> </tr> </tbody> </table> <h2 id="values"> Value Configuration </h2> <pre class="prettyprint lang-js"> values: [ { from: '2012-02-10', to: '2012-04-03', label: "Example Value", desc: "Something", customClass: "ganttRed", dataObj: foo.bar[i] }, ... // more items for the row (though Gantt charts traditionally have only one item per row) ] </pre> <table class="table table-striped"> <thead> <tr> <th> Name </th> <th> Type </th> <th> Description </th> </tr> </thead> <tbody> <tr> <td> <code>from</code> </td> <td> number (ms), string (see <a href="http://dygraphs.com/date-formats.html" target="_blank">formats</a>) </td> <td> Start date/time of the Gantt item. </td> </tr> <tr> <td> <code>to</code> </td> <td> number (ms), string (see <a href="http://dygraphs.com/date-formats.html" target="_blank">formats</a>) </td> <td> End date/time of the Gantt item. </td> </tr> <tr> <td> <code>label</code> </td> <td> string </td> <td> Optional label/name of the Gantt item. </td> </tr> <tr> <td> <code>desc</code> </td> <td> string </td> <td> Optional description of the Gantt item, used as HTML content of hover "hint"). </td> </tr> <tr> <td> <code>customClass</code> </td> <td> string </td> <td> Optional space-separated class names to be applied to the Gantt item. </td> </tr> <tr> <td> <code>dataObj</code> </td> <td> Any </td> <td> Optional data object that is stored directly on the Gantt item. </td> </tr> </tbody> </table> </div> <a href="https://github.com/taitems/jQuery.Gantt" class="github-corner" aria-label="View source, download, or contribute on GitHub" title="View source, download, or contribute on GitHub"> <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg> </a> <script src="js/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script src="js/jquery.fn.gantt.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script> <script> $(function() { "use strict"; var demoSource = [{ name: "Sprint 0", desc: "Analysis", values: [{ from: 1320192000000, to: 1322401600000, label: "Requirement Gathering", customClass: "ganttRed" }] },{ desc: "Scoping", values: [{ from: 1322611200000, to: 1323302400000, label: "Scoping", customClass: "ganttRed" }] },{ name: "Sprint 1", desc: "Development", values: [{ from: 1323802400000, to: 1325685200000, label: "Development", customClass: "ganttGreen" }] },{ name: " ", desc: "Showcasing", values: [{ from: 1325685200000, to: 1325695200000, label: "Showcasing", customClass: "ganttBlue" }] },{ name: "Sprint 2", desc: "Development", values: [{ from: 1325695200000, to: 1328785200000, label: "Development", customClass: "ganttGreen" }] },{ desc: "Showcasing", values: [{ from: 1328785200000, to: 1328905200000, label: "Showcasing", customClass: "ganttBlue" }] },{ name: "Release Stage", desc: "Training", values: [{ from: 1330011200000, to: 1336611200000, label: "Training", customClass: "ganttOrange" }] },{ desc: "Deployment", values: [{ from: 1336611200000, to: 1338711200000, label: "Deployment", customClass: "ganttOrange" }] },{ desc: "Warranty Period", values: [{ from: 1336611200000, to: 1349711200000, label: "Warranty Period", customClass: "ganttOrange" }] }]; // shifts dates closer to Date.now() var offset = new Date().setHours(0, 0, 0, 0) - new Date(demoSource[0].values[0].from).setDate(35); for (var i = 0, len = demoSource.length, value; i < len; i++) { value = demoSource[i].values[0]; value.from += offset; value.to += offset; } $(".gantt").gantt({ source: demoSource, navigate: "scroll", scale: "weeks", maxScale: "months", minScale: "hours", itemsPerPage: 10, scrollToToday: false, useCookie: true, onItemClick: function(data) { alert("Item clicked - show some details"); }, onAddClick: function(dt, rowId) { alert("Empty space clicked - add an item!"); }, onRender: function() { if (window.console && typeof console.log === "function") { console.log("chart rendered"); } } }); $(".gantt").popover({ selector: ".bar", title: function _getItemText() { return this.textContent; }, container: '.gantt', content: "Here's some useful information.", trigger: "hover", placement: "auto right" }); prettyPrint(); }); </script> </body> </html>