UNPKG

jetsum_dhtmlx_gantt

Version:

An open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.

399 lines (361 loc) 9.67 kB
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="../common/docs.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale = 1.0" /> <title>Gantt : Samples</title></title> </head> <body> <div class='abstop_header'> <div class='content_area'> &nbsp; </div> </div> <div class="page_header"> <div class='page_inner_header'> <a href='https://dhtmlx.com'><div class='top_webix_logo'></div></a> Samples </div> </div> <div class="page_space"> <div class="webixdoc_page webixdoc_start"> <div id="webixContent" class='webixdoc_content'> <div class="webixdoc_content_inner"> <div class="webixdoc_breadcrumb nav_breadcrumb"> <a href="https://docs.dhtmlx.com/gantt/" class="webixdoc_back">Documentation</a> <a href="../" class="webixdoc_back">Samples</a> <a href="../" class="webixdoc_back">Extensions</a> </div> <table class='nav_table'> <tr> <td style='width:30px;'> <a href='01_quickinfo.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='01_quickinfo.html'>QuickInfo extension</a> </td> </tr> <tr> <td style='width:30px;'> <a href='02_tooltip.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='02_tooltip.html'>Tooltip</a> </td> </tr> <tr> <td style='width:30px;'> <a href='03_critical_path.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='03_critical_path.html'>Critical path</a> </td> </tr> <tr> <td style='width:30px;'> <a href='04_grid_resize.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='04_grid_resize.html'>Resizable columns in grid</a> </td> </tr> <tr> <td style='width:30px;'> <a href='05_today_line.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='05_today_line.html'>Today and Status lines in Gantt</a> </td> </tr> <tr> <td style='width:30px;'> <a href='06_dynamic_loading.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='06_dynamic_loading.html'>Loading subtasks on demand</a> </td> </tr> <tr> <td style='width:30px;'> <a href='07_managing_grid_columns.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='07_managing_grid_columns.html'>Hiding grid columns</a> </td> </tr> <tr> <td style='width:30px;'> <a href='08_tasks_grouping.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='08_tasks_grouping.html'>Tasks grouping</a> </td> </tr> <tr> <td style='width:30px;'> <a href='09_multiselection.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='09_multiselection.html'>Multiselection and Indent/Outdent tasks</a> </td> </tr> <tr> <td style='width:30px;'> <a href='10_tasks_grouping_multilevel.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='10_tasks_grouping_multilevel.html'>Multi level task grouping</a> </td> </tr> <tr> <td style='width:30px;'> <a href='11_full_screen.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='11_full_screen.html'>Full Screen</a> </td> </tr> <tr> <td style='width:30px;'> <a href='12_auto_scheduling.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='12_auto_scheduling.html'>Auto Scheduling extension</a> </td> </tr> <tr> <td style='width:30px;'> <a href='13_smart_rendering.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='13_smart_rendering.html'>Working with 30000 tasks</a> </td> </tr> <tr> <td style='width:30px;'> <a href='14_undo.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='14_undo.html'>Undo/Redo changes in Gantt</a> </td> </tr> <tr> <td style='width:30px;'> <a href='16_keyboard_navigation.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='16_keyboard_navigation.html'>Keyboard Navigation</a> </td> </tr> <tr> <td style='width:30px;'> <a href='17_keyboard_navigation_cell.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='17_keyboard_navigation_cell.html'>Keyboard Navigation - navigate cells</a> </td> </tr> <tr> <td style='width:30px;'> <a href='18_linked_tasks.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='18_linked_tasks.html'>Auto Scheduling - Groups of connected tasks</a> </td> </tr> <tr> <td style='width:30px;'> <a href='19_constraints_scheduling.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='19_constraints_scheduling.html'>Schedule From Project Start & Constraints</a> </td> </tr> <tr> <td style='width:30px;'> <a href='20_backwards_scheduling.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='20_backwards_scheduling.html'>Schedule From Project End</a> </td> </tr> <tr> <td style='width:30px;'> <a href='21_overlay.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='21_overlay.html'>Gantt chart with overlay</a> </td> </tr> <tr> <td style='width:30px;'> <a href='22_tooltip_api.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='22_tooltip_api.html'>Custom Tooltips</a> </td> </tr> <tr> <td style='width:30px;'> <a href='23_click_drag_splittask.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='23_click_drag_splittask.html'>Create split tasks by Drag and Drop</a> </td> </tr> <tr> <td style='width:30px;'> <a href='24_click_drag.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='24_click_drag.html'>Create new tasks by Drag and Drop</a> </td> </tr> <tr> <td style='width:30px;'> <a href='25_click_drag_select_by_drag.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='25_click_drag_select_by_drag.html'>Select multiple tasks by Drag and Drop</a> </td> </tr> <tr> <td style='width:30px;'> <a href='26_full_screen_with_additional_elements.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='26_full_screen_with_additional_elements.html'>Full Screen with additional elements</a> </td> </tr> <tr> <td style='width:30px;'> <a href='27_drag_timeline.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='27_drag_timeline.html'>Drag timeline</a> </td> </tr> <tr> <td style='width:30px;'> <a href='28_row_resize.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='28_row_resize.html'>Resizable rows in grid</a> </td> </tr> <tr> <td style='width:30px;'> <a href='28_tasks_grouping_relation_properties.html'> <div class='nav_page_img'>&nbsp;</div> </a> </td> <td> <a href='28_tasks_grouping_relation_properties.html'>Task grouping, different relation property types</a> </td> </tr> </table> </div> </div> </div> </div> <!--Side quick links --> <div class="side_links"> <a class="reference_link" href="https://docs.dhtmlx.com/gantt/api__refs__gantt.html"> <span>API Reference</span> </a> <a class="sample_link" href="../"> <span>Code Samples</span> </a> <a class="forum_link" href="https://forum.dhtmlx.com/c/gantt"> <span>Developer Forum </span> </a> </div> </div> </div> <div class="footer_linea">&nbsp;</div> <div class="footer_lineb"> <div class='page_inner_header'> <a href='https://dhtmlx.com'><div class='bottom_webix_block bottom_webix_logo' ></div></a> <div class='copyright bottom_webix_block'>© 2022 XB Software Ltd.<br> All rights reserved</div> <div class='bottom_webix_also'> <h4>Check also:</h4> <li><a href='https://dhtmlx.com/docs/products/dhtmlxScheduler/' target='_blank'>DHTMLX Scheduler</a></li> <li><a href='https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/' target='_blank'>DHTMLX Spreadsheet</a></li> <li><a href='https://dhtmlx.com/docs/products/dhtmlxSuite/' target='_blank'>Other DHTMLX components</a></li> </div> </div> </div> <script> var msBrowser = navigator.userAgent.indexOf("MSIE ") > 0 || navigator.userAgent.indexOf("Trident") > 0 || navigator.userAgent.indexOf("Edge") > 0 if (msBrowser){ var summaryElements = document.querySelectorAll(".list_samples"); for (var i = 0; i < summaryElements.length; i++) { var navItem = summaryElements[i]; var link = navItem.querySelector("a"); var parent = navItem.parentNode; parent.insertBefore(link, navItem); navItem.style.display = 'none'; } } </script> </body> </html>