Gantt-elastic - Javascript Gantt Chart (editable, responsive)

Javascript Gantt Chart for vue, jquery, vanilla js and other frameworks

Project moved as next major version to gantt-schedule-timeline-calendar

This project is not suitable for use in a production environment as it runs very slowly even in standard medium projects. This project has been completely rewritten and built with super performance in mind and is available in the new repository as a gantt-schedule-timeline-calendar.

Gantt-elastic demo here

preview img preview gif

Gantt-elastic

is a vue component but it could be used in other frameworks or even with jQuery (vue is kind of elastic and lightweight framework).

WIKI

Vue Example

Installation

npm install --save gantt-elastic or download zip from github / clone repo

and if you want default header

npm install --save gantt-elastic-header

Usage

<!DOCTYPE html>
<html charset="utf-8">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" c />
    <title>GanttElastic editor demo</title>
</head>
<body>     <div style="width:100%;height:100%">       <div id="app" v-if="!destroy">         <gantt-elastic :tasks="tasks" :opti :dynamic-style="dynamicStyle">           <gantt-header slot="header"></gantt-header>           <gantt-footer slot="footer"></gantt-footer>         </gantt-elastic>       </div>     </div>
</body> </html>

gantt-elastic as vue component

Take a look at the vue.html inside examples folder file to see how you could add gantt-elastic inside <script> tag along with the Vue framework

Demo project: https://github.com/neuronetio/vue-gantt-elastic

You can also import gantt-elastic as compiled js component in commonjs or umd format (examples folder) or just grab GanttElastic.vue from src directory and add to your existing vue project.

import Vue from 'vue';
import GanttElastic from "gantt-elastic";
import Header from "gantt-elastic-header"; // if you want standard header (npm i -s gantt-elastic-header)
new Vue({
  el:'#gantt',
  template:&lt;gantt-elastic :tasks=&quot;tasks&quot; :opti&gt;
    &lt;gantt-elastic-header slot=&quot;header&quot;&gt;&lt;/gantt-elastic-header&gt;
    &lt;gantt-elastic-footer slot=&quot;footer&quot;&gt;&lt;/gantt-elastic-footer&gt;
  &lt;/gantt-elastic&gt;,
  components: {
    ganttElasticHeader: {template:&lt;span&gt;your header&lt;/span&gt;}, // or Header
    ganttElastic: GanttElastic
    ganttElasticFooter: {template:&lt;span&gt;your footer&lt;/span&gt;},
  },
  data() {
    return {
      tasks: tasks,
      options: options
    };
  }
});

or

import Vue from 'vue';
import App from './App.vue'; // your app that uses gantt-elastic from 'gantt-elastic/src/GanttElastic.vue'
new Vue({   el: '#app',   render: (h) => h(App), });

For webpack usage (pure javascript, inside other frameworks or Vue App/Component)

Take a look at this demo project: https://github.com/neuronetio/gantt-elastic-webpack for other bundlers use umd or commonjs from dist folder.

import GanttElastic from 'gantt-elastic/dist/GantElastic.umd.js';
import GanttElastic from 'gantt-elastic/dist/GantElastic.common.js'; // same as import GanttElastic from 'gantt-elastic';
import GanttElastic from 'gantt-elastic/src/GantElastic.vue'; // if you want vue component directly without compilation - look above
// and the same with require
const GanttElastic = require('gantt-elastic/dist/GantElastic.common.js');

uglifyjs

If you are using uglifyjs in your project be sure to have es6 compatible version like uglify-es

Licensce

MIT

🔗 More in this category