Introduction

Usage

<Gantt:data="data"itemText="Project"dateText="Date":dateRangeList="dateRangeList"/>

import{ref}from'vue'importGanttfrom'vue3-gantt'import'vue3-gantt/dist/style.css'constdateRangeList=ref(['2022-01-01','2022-03-05'])constdata=ref([{type:'normal',color:'',name:'Project 1',schedule:[{id:333330,name:'900 Warriors Simultaneous Online Celebration Event',desc:'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',backgroundColor:'rgb(253, 211, 172)',textColor:'rgb(245, 36, 9)',days:["2022-01-15","2022-02-05"]},{id:555550,name:'XXXXXX',desc:'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',backgroundColor:'#28f',textColor:'#fff',days:["2022-02-15","2022-02-25"]},],},{type:'normal',color:'',name:'Meteor Butterfly Sword',schedule:[{id:222221,name:'Chinese New Year Event',desc:'This event is very important, generating millions of revenue. It is a cross-departmental collaboration and a major project with the CEO personally present to command. Everyone must work together!',backgroundColor:'#482',textColor:'#fff',days:["2022-02-25","2022-03-10"]}],},])

Component Props

Component Events

Data Configuration: data Array[Object]

Schedule Configuration: schedule Object

repeatMode Configuration: Object

Component Instance Methods

Export Full Snapshot Image of the Current Gantt Chart

<Ganttref="gantt".../><button@click="exportImg">Download Image</button>

constgantt=ref(null)constexportImg=()=>{gantt.value.exportImg({download:true,waterValue:'Made by YiJio'})}

Exporting Current Gantt Chart to Excel

<Ganttref="gantt".../><button@click="exportGanttExcel">Export Excel</button>

constgantt=ref(null)constexportGanttExcel=()=>{gantt.value.exportGanttExcel({fileName:'TestList'})}