Convert Figma logo to code with AI

neuronetio logogantt-elastic

Gantt Chart [ javascript gantt chart, gantt component, vue gantt, vue gantt chart, responsive gantt, project manager , vue projects ]

1,277
312
1,277
16
View on GitHubView on NPM

Top Related Projects

DHTMLX's avatar

gantt

1,471

GPL version of Javascript Gantt Chart

nhn's avatar

tui.calendar

11,862

🍞📅A JavaScript calendar that has everything you need.

robicch's avatar

jQueryGantt

2,211

jQuery Gantt editor

uxsolutions's avatar

bootstrap-datepicker

12,664

A datepicker for twitter bootstrap (@twbs)

Quick Overview

Gantt-elastic is a Vue.js component for creating interactive Gantt charts. It offers a highly customizable and feature-rich solution for project management and scheduling, with support for various data formats and real-time updates.

Pros

  • Highly customizable with numerous options for styling and functionality
  • Supports real-time updates and dynamic data loading
  • Responsive design that works well on different screen sizes
  • Extensive documentation and examples provided

Cons

  • Steep learning curve due to the large number of configuration options
  • Performance may degrade with very large datasets
  • Requires Vue.js, which may not be suitable for all projects
  • Limited built-in export options for chart data

Code Examples

  1. Basic Gantt chart initialization:
import Vue from 'vue';
import GanttElastic from 'gantt-elastic';

new Vue({
  el: '#app',
  template: '<gantt-elastic :tasks="tasks" :options="options"></gantt-elastic>',
  data: {
    tasks: [
      {id: 1, label: 'Task 1', start: '2023-05-01', duration: 5},
      {id: 2, label: 'Task 2', start: '2023-05-03', duration: 3}
    ],
    options: {
      title: {label: 'My Gantt Chart'},
      taskList: {columns: ['id', 'label', 'start', 'duration']}
    }
  },
  components: {
    'gantt-elastic': GanttElastic
  }
});
  1. Adding custom task styling:
tasks: [
  {
    id: 1,
    label: 'Important Task',
    start: '2023-05-01',
    duration: 5,
    style: {
      base: {
        fill: '#ff0000',
        stroke: '#000000'
      }
    }
  }
]
  1. Implementing a task click event:
methods: {
  onTaskClick(task) {
    console.log('Clicked task:', task);
  }
},
template: '<gantt-elastic :tasks="tasks" :options="options" @task-click="onTaskClick"></gantt-elastic>'

Getting Started

  1. Install the package:

    npm install gantt-elastic

  2. Import and use the component in your Vue.js application:

    import Vue from 'vue';
import GanttElastic from 'gantt-elastic';
import 'gantt-elastic/dist/gantt-elastic.css';

new Vue({
  el: '#app',
  template: '<gantt-elastic :tasks="tasks" :options="options"></gantt-elastic>',
  data: {
    tasks: [
      {id: 1, label: 'Task 1', start: '2023-05-01', duration: 5},
      {id: 2, label: 'Task 2', start: '2023-05-03', duration: 3}
    ],
    options: {
      title: {label: 'My First Gantt Chart'},
      taskList: {columns: ['id', 'label', 'start', 'duration']}
    }
  },
  components: {
    'gantt-elastic': GanttElastic
  }
});

  3. Customize the chart by modifying the tasks and options objects to suit your needs.

Competitor Comparisons

DHTMLX logo

gantt

1,471

GPL version of Javascript Gantt Chart

Pros of DHTMLX/gantt

  • More comprehensive and feature-rich, offering advanced functionalities like resource management and critical path calculation
  • Better documentation and extensive API, making it easier for developers to implement and customize
  • Larger community and longer development history, resulting in more stability and support

Cons of DHTMLX/gantt

  • Commercial license required for most use cases, which can be costly for some projects
  • Steeper learning curve due to its extensive feature set and API
  • Heavier and potentially slower performance for simpler projects that don't require all the advanced features

Code Comparison

gantt-elastic:

import GanttElastic from "gantt-elastic";

const gantt = new GanttElastic({
  el: "#gantt",
  tasks: tasks,
  options: options
});

DHTMLX/gantt:

gantt.init("gantt_here");
gantt.parse({
  data: tasks,
  links: dependencies
});

Both libraries offer straightforward initialization, but DHTMLX/gantt provides more built-in options for data parsing and configuration. gantt-elastic focuses on simplicity and flexibility, while DHTMLX/gantt offers a more comprehensive set of features out of the box.

nhn logo

tui.calendar

11,862

🍞📅A JavaScript calendar that has everything you need.

Pros of tui.calendar

  • More comprehensive calendar functionality, including day, week, and month views
  • Better documentation and examples
  • Larger community and more frequent updates

Cons of tui.calendar

  • Steeper learning curve due to more complex API
  • Heavier in terms of file size and performance impact

Code Comparison

tui.calendar:

import Calendar from '@toast-ui/calendar';

const calendar = new Calendar('#calendar', {
  defaultView: 'week',
  taskView: true,
  scheduleView: ['allday', 'time'],
});

Gantt-elastic:

import GanttElastic from "gantt-elastic";

const gantt = new GanttElastic({
  el: "#gantt",
  tasks: tasks,
  options: options
});

Summary

tui.calendar offers a more feature-rich calendar solution with multiple views and extensive documentation. However, it may be overkill for simpler projects and has a steeper learning curve. Gantt-elastic focuses specifically on Gantt charts, making it more lightweight and easier to implement for projects that only require this functionality. The choice between the two depends on the specific needs of the project, with tui.calendar being better suited for complex calendar applications and Gantt-elastic for simpler Gantt chart implementations.

robicch logo

jQueryGantt

2,211

jQuery Gantt editor

Pros of jQueryGantt

  • Mature and well-established project with a longer history
  • Extensive documentation and examples available
  • Built on jQuery, which may be familiar to many developers

Cons of jQueryGantt

  • Relies on jQuery, which may be considered outdated for modern web development
  • Less flexible and customizable compared to Gantt-elastic
  • May have performance limitations with large datasets

Code Comparison

jQueryGantt:

var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'week');
g.setShowRes(1);
g.setShowDur(1);
g.setShowComp(1);
g.Draw();

Gantt-elastic:

import Vue from 'vue';
import GanttElastic from 'gantt-elastic';
Vue.component('gantt-elastic', GanttElastic);
new Vue({
  el: '#app',
  template: '<gantt-elastic :tasks="tasks" :options="options"></gantt-elastic>'
});

The code comparison shows that jQueryGantt uses a more traditional JavaScript approach, while Gantt-elastic is designed to work with modern frameworks like Vue.js. Gantt-elastic offers a more component-based structure, which can be easier to integrate into contemporary web applications.

uxsolutions logo

bootstrap-datepicker

12,664

A datepicker for twitter bootstrap (@twbs)

Pros of bootstrap-datepicker

  • Lightweight and easy to integrate with Bootstrap-based projects
  • Extensive browser compatibility, including older versions
  • Well-documented with numerous configuration options

Cons of bootstrap-datepicker

  • Limited to date selection functionality only
  • Less modern UI compared to more recent datepicker libraries
  • Lacks advanced features like time selection or range picking

Code Comparison

bootstrap-datepicker:

$('#datepicker').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '-3d',
    autoclose: true
});

gantt-elastic:

import GanttElastic from "gantt-elastic";

new GanttElastic({
    el: '#gantt',
    tasks: tasks,
    options: options
}).render();

While bootstrap-datepicker focuses solely on date selection with a simple API, gantt-elastic is a more complex library for creating Gantt charts. The code snippets highlight the difference in complexity and purpose between the two libraries.

bootstrap-datepicker is ideal for projects requiring basic date input functionality, especially those already using Bootstrap. gantt-elastic, on the other hand, is better suited for projects needing comprehensive Gantt chart capabilities with a modern, responsive design.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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 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" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>GanttElastic editor demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs"></script>

    <script src="https://unpkg.com/gantt-elastic/dist/GanttElastic.umd.js"></script>
    <script src="https://unpkg.com/gantt-elastic-header/dist/Header.umd.js"></script>
  </head>

  <body>
    <div style="width:100%;height:100%">
      <div id="app" v-if="!destroy">
        <gantt-elastic :tasks="tasks" :options="options" :dynamic-style="dynamicStyle">
          <gantt-header slot="header"></gantt-header>
          <gantt-footer slot="footer"></gantt-footer>
        </gantt-elastic>
      </div>
    </div>

    <script>
      // just helper to get current dates
      function getDate(hours) {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        const currentMonth = currentDate.getMonth();
        const currentDay = currentDate.getDate();
        const timeStamp = new Date(currentYear, currentMonth, currentDay, 0, 0, 0).getTime();
        return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
      }

      let tasks = [
        {
          id: 1,
          label: 'Make some noise',
          user:
            '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
          start: getDate(-24 * 5),
          duration: 15 * 24 * 60 * 60 * 1000,
          progress: 85,
          type: 'project',
          //collapsed: true,
        },
        {
          id: 2,
          label: 'With great power comes great responsibility',
          user:
            '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
          parentId: 1,
          start: getDate(-24 * 4),
          duration: 4 * 24 * 60 * 60 * 1000,
          progress: 50,
          type: 'milestone',
          collapsed: true,
          style: {
            base: {
              fill: '#1EBC61',
              stroke: '#0EAC51',
            },
            /*'tree-row-bar': {
              fill: '#1EBC61',
              stroke: '#0EAC51'
            },
            'tree-row-bar-polygon': {
              stroke: '#0EAC51'
            }*/
          },
        },
        {
          id: 3,
          label: 'Courage is being scared to death, but saddling up anyway.',
          user:
            '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
          parentId: 2,
          start: getDate(-24 * 3),
          duration: 2 * 24 * 60 * 60 * 1000,
          progress: 100,
          type: 'task',
        },
        {
          id: 4,
          label: 'Put that toy AWAY!',
          user:
            '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
          start: getDate(-24 * 2),
          duration: 2 * 24 * 60 * 60 * 1000,
          progress: 50,
          type: 'task',
          dependentOn: [3],
        },
      ];

      let options = {
        maxRows: 100,
        maxHeight: 300,
        title: {
          label: 'Your project title as html (link or whatever...)',
          html: false,
        },
        row: {
          height: 24,
        },
        calendar: {
          hour: {
            display: false,
          },
        },
        chart: {
          progress: {
            bar: false,
          },
          expander: {
            display: true,
          },
        },
        taskList: {
          expander: {
            straight: false,
          },
          columns: [
            {
              id: 1,
              label: 'ID',
              value: 'id',
              width: 40,
            },
            {
              id: 2,
              label: 'Description',
              value: 'label',
              width: 200,
              expander: true,
              html: true,
              events: {
                click({ data, column }) {
                  alert('description clicked!\n' + data.label);
                },
              },
            },
            {
              id: 3,
              label: 'Assigned to',
              value: 'user',
              width: 130,
              html: true,
            },
            {
              id: 3,
              label: 'Start',
              value: (task) => dayjs(task.start).format('YYYY-MM-DD'),
              width: 78,
            },
            {
              id: 4,
              label: 'Type',
              value: 'type',
              width: 68,
            },
            {
              id: 5,
              label: '%',
              value: 'progress',
              width: 35,
              style: {
                'task-list-header-label': {
                  'text-align': 'center',
                  width: '100%',
                },
                'task-list-item-value-container': {
                  'text-align': 'center',
                  width: '100%',
                },
              },
            },
          ],
        },
        /*locale:{
          name: 'pl', // name String
          weekdays: 'Poniedziałek_Wtorek_Środa_Czwartek_Piątek_Sobota_Niedziela'.split('_'), // weekdays Array
          weekdaysShort: 'Pon_Wto_Śro_Czw_Pią_Sob_Nie'.split('_'), // OPTIONAL, short weekdays Array, use first three letters if not provided
          weekdaysMin: 'Pn_Wt_Śr_Cz_Pt_So_Ni'.split('_'), // OPTIONAL, min weekdays Array, use first two letters if not provided
          months: 'Styczeń_Luty_Marzec_Kwiecień_Maj_Czerwiec_Lipiec_Sierpień_Wrzesień_Październik_Listopad_Grudzień'.split('_'), // months Array
          monthsShort: 'Sty_Lut_Mar_Kwi_Maj_Cze_Lip_Sie_Wrz_Paź_Lis_Gru'.split('_'), // OPTIONAL, short months Array, use first three letters if not provided
          ordinal: n => `${n}`, // ordinal Function (number) => return number + output
          relativeTime: { // relative time format strings, keep %s %d as the same
            future: 'za %s', // e.g. in 2 hours, %s been replaced with 2hours
            past: '%s temu',
            s: 'kilka sekund',
            m: 'minutę',
            mm: '%d minut',
            h: 'godzinę',
            hh: '%d godzin', // e.g. 2 hours, %d been replaced with 2
            d: 'dzień',
            dd: '%d dni',
            M: 'miesiąc',
            MM: '%d miesięcy',
            y: 'rok',
            yy: '%d lat'
          }
       }*/
      };

      // create instance
      const app = new Vue({
        components: {
          'gantt-header': Header,
          'gantt-elastic': GanttElastic,
          'gantt-footer': {
            template: `<span>this is a footer</span>`,
          },
        },
        data: {
          tasks: tasks.map((task) => Object.assign({}, task)),
          options,
          dynamicStyle: {
            'task-list-header-label': {
              'font-weight': 'bold',
            },
          },
          destroy: false,
        },
      });

      // gantt state which will be updated in realtime
      let ganttState, ganttInstance;

      // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event
      // to get the gantt state for real time modification
      app.$on('gantt-elastic-ready', (ganttElasticInstance) => {
        ganttInstance = ganttElasticInstance;

        ganttInstance.$on('tasks-changed', (tasks) => {
          app.tasks = tasks;
        });
        ganttInstance.$on('options-changed', (options) => {
          app.options = options;
        });
        ganttInstance.$on('dynamic-style-changed', (style) => {
          app.dynamicStyle = style;
        });

        ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {
          console.log('task mouse enter', { data, event });
        });
        ganttInstance.$on('updated', () => {
          //console.log('gantt view was updated');
        });
        ganttInstance.$on('destroyed', () => {
          //console.log('gantt was destroyed');
        });
        ganttInstance.$on('times-timeZoom-updated', () => {
          console.log('time zoom changed');
        });
        ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {
          console.log('task list clicked! (task)', { data, column });
        });
      });

      // mount gantt to DOM
      app.$mount('#app');
    </script>
  </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:`<gantt-elastic :tasks="tasks" :options="options">
    <gantt-elastic-header slot="header"></gantt-elastic-header>
    <gantt-elastic-footer slot="footer"></gantt-elastic-footer>
  </gantt-elastic>`,
  components: {
    ganttElasticHeader: {template:`<span>your header</span>`}, // or Header
    ganttElastic: GanttElastic
    ganttElasticFooter: {template:`<span>your footer</span>`},
  },
  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

NPM DownloadsLast 30 Days