# vue-dhtmlxfgantt

**Repository Path**: lwenbin/vue-dhtmlxfgantt

## Basic Information

- **Project Name**: vue-dhtmlxfgantt
- **Description**: dhtmlxfgantt for vue  demo 主要记录了一些api参数
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-05-19
- **Last Updated**: 2022-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# product-plan-gannt

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

# 主要记录一下Api
```vue
  gantt.config.autofit = true;//自动调整列宽
    // gantt.config.grid_width = 500;//设置宽度
    gantt.config.autoscroll = false;//任务拖出边界时自动滚动
    gantt.config.date_format = "%Y-%m-%d %H:%i";//设置数据中的时间格式，对应start_date格式
    gantt.config.scale_height = 30; //设置表头行高
    gantt.config.task_height = 16;  //设置任务条高度
    gantt.config.row_height = 20; //表格行高
    gantt.i18n.setLocale('cn');//国际化
    gantt.config.xml_date = "%Y-%m-%d %H-%i";
    gantt.config.scales = [
      // {unit: "day", step: 30, format: "%Y-%m-%d"},
      {unit: "minute", step: 30, format: "%H:%i"}
    ];
    gantt.config.duration_unit = 'minute' // 工期计算的基本单位
    gantt.config.columns = [//设置列
      {name:"text",label:"物料",tree:true,align:"left" },
      {name:"start_date", label:"开始时间", align:"center" }
    ];
    gantt.plugins({
      tooltip: true,//鼠标划过任务是否显示明细
      auto_scheduling: true,//根据任务之间的关系自动安排任务
      multiselect: true, //为任务激活多任务选择
    });
    //自定义工具栏
    gantt.templates.tooltip_text = function (start, end, task) {
      return '<b>物料:</b> ' + task.text + '<br/><b>工作时间:</b> '+new Date(start).getFullYear()+'-'+parseInt(new Date(start).getMonth()+1)+'-'+new Date(start).getDay()+' '+ new Date(start).getHours()+':'+new Date(start).getMinutes()+' - '+ new Date(end).getHours()+':'+new Date(end).getMinutes()
    }
    // gantt.config.start_date = new Date("2021-05-17 00:00");//时间刻度的开始时间
    // gantt.config.end_date = new Date("2020-05-17 23:00");//时间刻度的结束时间
    //拖拽改变位置或大小后的回调函数
    // gantt.attachEvent("onAfterTaskUpdate", function(id,item){
    //   //any custom logic here
    //   console.log(1)
    // });
    gantt.templates.task_class = function(start, end, task){
      //可用于修改任务条的样式
      //比如可以判断当前时间时否时加班时间设置不同的背景色用于区分是否是加班任务
      return "workcss";
    };
    gantt.config.show_links = false; //禁用连线
    gantt.config.show_progress = false;//禁用进度拖拽
    gantt.config.details_on_dblclick = false;//禁用编辑弹窗
    gantt.config.multiselect = true;
    gantt.config.multiselect_one_level = true;
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
```