Vue.js 에서 DHTMLX Gantt 사용하기.

1. 서론.

관련 자료를 한참 찾아봤는데, 제대로 된 자료가 없고, dhtmlx 에서도 잘못된 정보가 많아 헤딩한 결과를 아래와 같이 기록함.

 

2. Vue.js 환경에서 dhtmlx gantt 사용하기.

- app 을 구동하지 않은 상태에서 새 터미널 열기.

- 새 터미널에서 아래 명령어 실행.

npm install dhtmlx-gantt

+ 만약 라이센스를 구입하여 Pro 버전 패키지를 다운받을 수 있을 경우

- Pro 버전 패키지 다운로드.

- 솔루션 내 해당 패키지를 추가. (원본을 지울 경우 오류 발생하여 어쩔 수 없이 솔루션 내 폴더를 생성하여 관리 중)

- 터미널에서 아래 구문 실행. 

npm install ./패키지복사한경로

- /src/componts/Gantt.vue 생성 후 아래 내용 붙여넣기. 

<template>
  <div ref="gantt"></div>
</template>
 
<script>
import {gantt} from 'dhtmlx-gantt';
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: []}
      }
    }
  },
 
  mounted: function () {
    gantt.config.xml_date = "%Y-%m-%d";
 
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
  }
}
</script>
 
<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

- /src/App.vue 소스에 아래 내용 붙여넣기.

<template>
  <div class="container">
    <gantt class="left-container" :tasks="tasks"></gantt>
  </div>
</template>
 
<script>
// 경로에 주의할 것.
import Gantt from './components/Gantt.vue';
 
export default {
  name: 'app',
  components: {Gantt},
  data () {
    return {
      tasks: {
        data: [
          {id: 1, text: 'Task #1', start_date: '2020-01-17', duration: 3, progress: 0.6},
          {id: 2, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4}
        ],
        links: [
          {id: 1, source: 1, target: 2, type: '0'}
        ]
      },
    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
</style>

- 터미널에서 아래와 같이 명령어 실행하여 app 구동 후 화면 확인.

npm run dev

- 실행된 app 화면 확인.

실행 결과 예시

3. 결론.

뭐든 설정이 제일 어려움. 막상하면 별거 아닌 느낌. 그리고 패키지를 설치했는데도 원본을 지우면 오류나는 이유에 대해선 좀 더 찾아봐야 함. (링크가 별개로 있고, 난 설치하도록 했는데 이러는 이유는 뭔가 깔끔하게 참조 관계가 정리 안되서 그런것으로 추정 중.)