mirrors/vue-ganttastic
2
0
Fork 0
mirror of https://github.com/tenrok/vue-ganttastic.git synced 2026-06-19 04:00:33 +03:00
Code Activity

feat: add magnetic effect

Browse Source
This commit is contained in:
yicone
2021-02-09 23:27:45 +08:00
parent cf63e2ea9a
commit 6152b08088
6 changed files with 325 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/GGanttBar.vue
+149 -50
View File
@@ -35,9 +35,9 @@
this.barStyle.background || this.barStyle.backgroundColor,
}"
/>
{{ bar[barStart] }}
{{ barStartText }}
-
{{ bar[barEnd] }}
{{ barEndText }}
</div>
</transition>
</div>
@@ -51,8 +51,8 @@ export default {
props: {
bar: { type: Object },
barStart: { type: String }, // property name of the bar objects that represents the start datetime
barEnd: { type: String }, // property name of the bar objects that represents the end datetime,
barStartKey: { type: String }, // property name of the bar objects that represents the start datetime,
barEndKey: { type: String }, // property name of the bar objects that represents the end datetime,
barContainer: [Object, DOMRect],
allBarsInRow: { type: Array },
},
@@ -85,29 +85,43 @@ export default {
barStartBeforeDrag: null,
barEndBeforeDrag: null,
timeUnit: this.getTimeUnit(),
timeChildKey: this.getTimeUnit() === 'days' ? 'hours' : 'minutes',
timeChildKey:
this.ganttChartProps.timeaxisMode === 'month_days'
? 'hours'
: 'minutes',
timeChildFormat:
this.ganttChartProps.timeaxisMode === 'month_days' ? 'MM-DD' : 'HH:mm',
timeFormat: this.getTimeFormat(),
}
},
computed: {
// use these computed moment objects to work with the bar's start/end dates:
// instead of directly mutating them:
barStartMoment: {
get() {
return moment(this.bar[this.barStart])
get: function () {
return moment(this.bar[this.barStartKey], this.timeFormat)
},
set(value) {
this.bar[this.barStart] = moment(value).format(this.timeFormat)
set: function (value) {
this.bar[this.barStartKey] = value.format(this.timeFormat)
},
},
barEndMoment: {
get: function () {
return moment(this.bar[this.barEndKey])
},
set: function (value) {
this.bar[this.barEndKey] = value.format(this.timeFormat)
},
},
barStartText: {
get() {
return moment(this.barStartMoment).format(this.timeChildFormat)
},
},
barEndMoment: {
barEndText: {
get() {
return moment(this.bar[this.barEnd])
},
set(value) {
this.bar[this.barEnd] = moment(value).format(this.timeFormat)
let endMoment = moment(this.barEndMoment)
return endMoment.format(this.timeChildFormat)
},
},
@@ -128,6 +142,8 @@ export default {
},
barStyle() {
if (!this.barContainer.width) return
let xStart = this.mapTimeToPosition(this.barStartMoment)
let xEnd = this.mapTimeToPosition(this.barEndMoment)
return {
@@ -228,8 +244,9 @@ export default {
initDrag(e) {
// "e" must be the mousedown event
this.isDragging = true
this.barStartBeforeDrag = this.bar[this.barStart]
this.barEndBeforeDrag = this.bar[this.barEnd]
this.barStartBeforeDrag = this.bar[this.barStartKey]
this.barEndBeforeDrag = this.bar[this.barEndKey]
let barX = this.$refs['g-gantt-bar'].getBoundingClientRect().left
this.cursorOffsetX = e.clientX - barX
let mousedownType = e.target.className
@@ -239,7 +256,7 @@ export default {
this.mousemoveCallback = this.dragByHandleLeft
break
case 'g-gantt-bar-handle-right':
document.body.style.cursor = 'w-resize'
document.body.style.cursor = 'e-resize'
this.mousemoveCallback = this.dragByHandleRight
break
default:
@@ -279,7 +296,7 @@ export default {
let newXEnd = e.clientX - this.barContainer.left
let newEndMoment = this.mapPositionToTime(newXEnd)
if (
newEndMoment.isSameOrBefore(this.barStartMoment) ||
newEndMoment.isSameOrBefore(this.barStartMoment, this.timeUnit) ||
this.isPosOutOfDragRange(null, newXEnd)
) {
return
@@ -289,13 +306,13 @@ export default {
},
isPosOutOfDragRange(xStart, xEnd) {
// 不能推动旁边的bar时，拖拽就不停止
if (!this.ganttChartProps.pushOnOverlap) {
return false
}
if (xStart && xStart < 0) {
return true
}
// 设置允许推动旁边的bar时，拖拽到到位置就算进入了重叠，也不算超出范围
if (this.ganttChartProps.pushOnOverlap) {
return false
}
if (
xStart &&
this.dragLimitLeft !== null &&
@@ -314,6 +331,78 @@ export default {
},
endDrag(e) {
// Magnetic suction
if (this.ganttChartProps.isMagnetic) {
let left = false,
right = false,
move = false
switch (document.body.style.cursor) {
case 'e-resize':
right = true
break
case 'w-resize':
left = true
break
default:
move = true
break
}
console.log({ left, right, move })
this.allBarsInRow.forEach((bar) => {
if (this.ganttChartProps.timeaxisMode === 'month_days') {
if (left && bar == this.bar) {
if (moment(bar[this.barStartKey]).hours() < 12) {
bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(0)
} else {
bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(24)
}
} else if (right && bar == this.bar) {
if (moment(bar[this.barEndKey]).hours() < 12) {
bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(0)
} else {
bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(24)
}
} else {
if (moment(bar[this.barStartKey]).hours() < 12) {
bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(0)
bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(0)
} else {
bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(24)
bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(24)
}
}
} else {
if (left && bar == this.bar) {
if (moment(bar[this.barStartKey]).minutes() < 30) {
bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(0)
} else {
bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(
60
)
}
} else if (right && bar == this.bar) {
if (moment(bar[this.barEndKey]).minutes() < 30) {
bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(0)
} else {
bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(60)
}
} else {
if (moment(bar[this.barStartKey]).minutes() < 30) {
bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(0)
bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(0)
} else {
bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(
60
)
bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(60)
}
}
}
})
}
this.isDragging = false
this.dragLimitLeft = null
this.dragLimitRight = null
@@ -327,8 +416,8 @@ export default {
},
snapBack() {
this.barStartMoment = this.barStartBeforeDrag
this.barEndMoment = this.barEndBeforeDrag
this.barStartMoment = moment(this.barStartBeforeDrag)
this.barEndMoment = moment(this.barEndBeforeDrag)
},
manageOverlapping() {
@@ -342,10 +431,10 @@ export default {
let { overlapBar, overlapType } = this.getOverlapBarAndType(currentBar)
while (overlapBar) {
let minuteDiff
let currentStartMoment = moment(currentBar[this.barStart])
let currentEndMoment = moment(currentBar[this.barEnd])
let overlapStartMoment = moment(overlapBar[this.barStart])
let overlapEndMoment = moment(overlapBar[this.barEnd])
let currentStartMoment = moment(currentBar[this.barStartKey])
let currentEndMoment = moment(currentBar[this.barEndKey])
let overlapStartMoment = moment(overlapBar[this.barStartKey])
let overlapEndMoment = moment(overlapBar[this.barEndKey])
switch (overlapType) {
case 'left':
minuteDiff =
@@ -354,10 +443,10 @@ export default {
this.timeChildKey,
true
) + this.getMinGapBetweenBars()
overlapBar[this.barEnd] = currentStartMoment
overlapBar[this.barEndKey] = currentStartMoment
.subtract(this.getMinGapBetweenBars(), this.timeChildKey, true)
.format(this.timeFormat)
overlapBar[this.barStart] = overlapStartMoment
overlapBar[this.barStartKey] = overlapStartMoment
.subtract(minuteDiff, this.timeChildKey, true)
.format(this.timeFormat)
break
@@ -368,10 +457,10 @@ export default {
this.timeChildKey,
true
) + this.getMinGapBetweenBars()
overlapBar[this.barStart] = currentEndMoment
overlapBar[this.barStartKey] = currentEndMoment
.add(this.getMinGapBetweenBars(), this.timeChildKey, true)
.format(this.timeFormat)
overlapBar[this.barEnd] = overlapEndMoment
overlapBar[this.barEndKey] = overlapEndMoment
.add(minuteDiff, this.timeChildKey, true)
.format(this.timeFormat)
break
@@ -389,8 +478,8 @@ export default {
},
getOverlapBarAndType(bar) {
let barStartMoment = moment(bar[this.barStart])
let barEndMoment = moment(bar[this.barEnd])
let barStartMoment = moment(bar[this.barStartKey])
let barEndMoment = moment(bar[this.barEndKey])
let overlapLeft, overlapRight, overlapInBetween
let overlapBar = this.allBarsInRow.find((otherBar) => {
if (
@@ -399,13 +488,20 @@ export default {
) {
return false
}
let otherBarStart = moment(otherBar[this.barStart])
let otherBarEnd = moment(otherBar[this.barEnd])
overlapLeft = barStartMoment.isBetween(otherBarStart, otherBarEnd)
overlapRight = barEndMoment.isBetween(otherBarStart, otherBarEnd)
let otherBarStartMoment = moment(otherBar[this.barStartKey])
let otherBarEndMoment = moment(otherBar[this.barEndKey])
overlapLeft = barStartMoment.isBetween(
otherBarStartMoment,
otherBarEndMoment
)
overlapRight = barEndMoment.isBetween(
otherBarStartMoment,
otherBarEndMoment
)
overlapInBetween =
otherBarStart.isBetween(barStartMoment, barEndMoment) ||
otherBarEnd.isBetween(barStartMoment, barEndMoment)
otherBarStartMoment.isBetween(barStartMoment, barEndMoment) ||
otherBarEndMoment.isBetween(barStartMoment, barEndMoment)
return overlapLeft || overlapRight || overlapInBetween
})
let overlapType = overlapLeft
@@ -420,35 +516,35 @@ export default {
// this is used in GGanttChart, when a bar from a bundle is pushed
// so that bars from its bundle also get pushed
moveBarByMinutesAndPush(minuteCount, direction) {
moveBarByChildPointsAndPush(childPointCount, direction) {
switch (direction) {
case 'left':
this.barStartMoment = moment(this.barStartMoment).subtract(
minuteCount,
childPointCount,
this.timeChildKey,
true
)
this.barEndMoment = moment(this.barEndMoment).subtract(
minuteCount,
childPointCount,
this.timeChildKey,
true
)
break
case 'right':
this.barStartMoment = moment(this.barStartMoment).add(
minuteCount,
childPointCount,
this.timeChildKey,
true
)
this.barEndMoment = moment(this.barEndMoment).add(
minuteCount,
childPointCount,
this.timeChildKey,
true
)
break
default:
// eslint-disable-next-line
console.warn('wrong direction in moveBarByMinutesAndPush')
console.warn('wrong direction in moveBarByChildPointsAndPush')
return
}
this.manageOverlapping()
@@ -463,7 +559,9 @@ export default {
this.timeUnit,
true
)
return (timeDiffFromStart / this.getTimeCount()) * this.barContainer.width
let pos =
(timeDiffFromStart / this.getTimeCount()) * this.barContainer.width
return pos
},
mapPositionToTime(xPos) {
@@ -519,15 +617,16 @@ export default {
background: white;
opacity: 0.7;
border-radius: 40px;
cursor: w-resize;
}
.g-gantt-bar-handle-left {
left: 0;
cursor: w-resize;
}
.g-gantt-bar-handle-right {
right: 0;
cursor: e-resize;
}
.g-gantt-bar-label img {
src/GGanttChart.vue
+4 -4
View File
@@ -56,6 +56,7 @@ export default {
highlightedHours: { type: Array, default: () => [] },
width: { type: String, default: '100%' }, // the total width of the entire ganttastic component in %
pushOnOverlap: { type: Boolean },
isMagnetic: { type: Boolean },
snapBackOnOverlap: { type: Boolean },
minGapBetweenBars: {
type: Number,
@@ -72,7 +73,7 @@ export default {
movedBarsInDrag: new Set(),
timeUnit: this.timeaxisMode === 'month_days' ? 'days' : 'hours',
timeFormat:
this.timeaxisMode === 'month_days' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm',
this.timeaxisMode === 'month_days' ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD HH:mm',
}
},
@@ -142,7 +143,7 @@ export default {
ganttBarChild.barConfig.bundle === bundleId &&
ganttBarChild.bar !== pushedBar
) {
ganttBarChild.moveBarByMinutesAndPush(minuteDiff, overlapType)
ganttBarChild.moveBarByChildPointsAndPush(minuteDiff, overlapType)
this.movedBarsInDrag.add(ganttBarChild.bar)
}
})
@@ -377,9 +378,8 @@ export default {
snapBackBundle: (ganttBar) => this.snapBackBundle(ganttBar),
getMinGapBetweenBars: () => this.minGapBetweenBars,
getDefaultBarLength: () => this.defaultBarLength,
getTimeaxisMode: () => this.timeaxisMode,
getTimeUnit: () => this.timeUnit,
getTimeFormat: () => this.timeFormat
getTimeFormat: () => this.timeFormat,
}
},
}
src/GGanttGrid.vue
+5 -5
View File
@@ -7,11 +7,11 @@
}"
>
<div
v-for="(hour, index) in allHours"
v-for="(childPoint, index) in allChildPoints"
:key="index"
:class="{
'g-grid-line': true,
'g-grid-line-highlighted': highlightedHours.includes(hour),
'g-grid-line-highlighted': highlightedHours.includes(childPoint),
}"
/>
</div>
@@ -23,7 +23,7 @@ import moment from 'moment'
export default {
name: 'GGanttGrid',
inject: ['getTimeaxisMode'],
inject: ['ganttChartProps'],
props: {
chartStart: { type: String },
@@ -33,11 +33,11 @@ export default {
},
computed: {
allHours() {
allChildPoints() {
let momentChartStart = moment(this.chartStart)
let momentChartEnd = moment(this.chartEnd)
let res = []
const timeaxisMode = this.getTimeaxisMode()
const timeaxisMode = this.ganttChartProps.timeaxisMode
while (momentChartStart.isSameOrBefore(momentChartEnd)) {
if (timeaxisMode === 'month_days') {
res.push(momentChartStart.date())
src/GGanttRow.vue
+4 -10
View File
@@ -26,8 +26,8 @@
:key="`ganttastic_bar_${index}`"
:bar="bar"
ref="ganttBar"
:bar-start="barStart"
:bar-end="barEnd"
:bar-start-key="barStartKey"
:bar-end-key="barEndKey"
:bar-container="barContainer"
:all-bars-in-row="bars"
>
@@ -53,8 +53,8 @@ export default {
props: {
label: { type: String, default: 'Row' },
bars: { type: Array, default: () => [] },
barStart: { type: String, required: true }, // property name of the bar objects that represents the start datetime
barEnd: { type: String, required: true }, // property name of the bar objects that represents the end datetime,
barStartKey: { type: String, required: true }, // property name of the bar objects that represents the start datetime
barEndKey: { type: String, required: true }, // property name of the bar objects that represents the end datetime,
highlightOnHover: Boolean,
},
@@ -103,15 +103,9 @@ export default {
onDragover(e) {
e.preventDefault() // enables dropping content on row
if (this.highlightOnHover) {
console.log({
backgroundColor: this.$refs['g-gantt-row'].style.backgroundColor,
})
this.$refs[
'g-gantt-row'
].style.backgroundColor = this.getThemeColors().hoverHighlight
console.log({
backgroundColor: this.$refs['g-gantt-row'].style.backgroundColor,
})
}
},
src/GGanttTimeaxis.vue
+9 -9
View File
@@ -55,7 +55,7 @@ import moment from 'moment'
export default {
name: 'GGanttTimeaxis',
inject: ['getTimeaxisMode', 'getTimeUnit', 'getTimeFormat'],
inject: ['ganttChartProps', 'getTimeUnit', 'getTimeFormat'],
props: {
chartStart: String,
@@ -73,9 +73,9 @@ export default {
timemarker: null,
hourFontSize: '11px',
dayFormat: 'MM-DD', // ISO 8601
mode: this.getTimeaxisMode(),
mode: this.ganttChartProps.timeaxisMode,
timeUnit: this.getTimeUnit(),
timeFormat: this.getTimeFormat()
timeFormat: this.getTimeFormat(),
}
},
@@ -198,17 +198,17 @@ export default {
}
},
monthFormatted(month) {
monthFormatted(point) {
// do not display month text if the month is smaller than x%
return month.widthPercentage >= (1 / 32) * 100
? moment().locale(this.locale).localeData().months(month.value)
return point.widthPercentage >= (1 / 32) * 100
? moment().locale(this.locale).localeData().months(point.value)
: ''
},
dayFormatted(day) {
dayFormatted(point) {
// do not display day text if the day is smaller than 12%
return day.widthPercentage >= 12
? moment(day.value).locale(this.locale).format(this.dayFormat)
return point.widthPercentage >= 12
? moment(point.value).locale(this.locale).format(this.dayFormat)
: ''
},
},
src/Playground.vue
+154 -110
View File
@@ -2,33 +2,35 @@
<template>
<div>
<g-gantt-chart
:chart-start="chartStart"
:chart-end="chartEnd"
:grid="grid"
:hide-timeaxis="hideTimeaxis"
:push-on-overlap="true"
snap-back-on-overlap
:highlighted-hours="highlightedHours"
:row-label-width="`${rowLabelWidth}%`"
:row-height="rowHeight"
:theme="selectedTheme"
@dragend-bar="onDragend($event)"
>
<template v-for="row in rowList">
<g-gantt-row
:key="row.label"
:label="row.label"
:bars="row.barList"
:highlight-on-hover="highlightOnHover"
bar-start="myStart"
bar-end="myEnd"
>
<template #bar-label="{bar}">
<span>{{bar.label}}</span>
</template>
</g-gantt-row>
</template>
</g-gantt-chart>
:chart-start="chartStart"
:chart-end="chartEnd"
:grid="grid"
:hide-timeaxis="hideTimeaxis"
:push-on-overlap="pushOnOverlap"
snap-back-on-overlap
timeaxisMode="day_hours"
:is-magnetic="isMagnetic"
:highlighted-hours="highlightedHours"
:row-label-width="`${rowLabelWidth}%`"
:row-height="rowHeight"
:theme="selectedTheme"
@dragend-bar="onDragend($event)"
>
<template v-for="row in rowList">
<g-gantt-row
:key="row.label"
:label="row.label"
:bars="row.barList"
:highlight-on-hover="highlightOnHover"
bar-start-key="myStart"
bar-end-key="myEnd"
>
<template #bar-label="{ bar }">
<span>{{ bar.label }}</span>
</template>
</g-gantt-row>
</template>
</g-gantt-chart>
</div>
</template>
@@ -37,144 +39,186 @@ import GGanttChart from './GGanttChart.vue'
import GGanttRow from './GGanttRow.vue'
export default {
components:{
components: {
GGanttChart,
GGanttRow
GGanttRow,
},
data(){
data() {
return {
chartStart: "2020-03-02 00:00",
chartEnd: "2020-03-04 00:00",
chartStart: '2020-03-02 00:00',
chartEnd: '2020-03-04 00:00',
pushOnOverlap: true,
isMagnetic: true,
grid: true,
rowHeight: 40,
rowLabelWidth: 15,
hideTimeaxis: false,
highlightOnHover: false,
hours: [...Array(24).keys()],
highlightedHours: [10,12],
highlightedHours: [10, 12],
showContextmenu: false,
contextmenuTimeout: null,
contextmenuX: 0,
contextmenuY: 0,
selectedTheme: "default",
selectedTheme: 'default',
themes: [
"default",
"vue",
"dark",
"material-blue",
"creamy",
"slumber",
"sky",
"crimson",
"grove",
"fuchsia",
"flare"
'default',
'vue',
'dark',
'material-blue',
'creamy',
'slumber',
'sky',
'crimson',
'grove',
'fuchsia',
'flare',
],
rowList: [
{
label: "Row #1",
label: 'Row #1',
barList: [
{
myStart: "2020-03-03 18:00",
myEnd: "2020-03-03 23:00",
label: "Immobile",
ganttBarConfig: {color:"white", backgroundColor: "#404040", opacity: 0.5, immobile: true}
myStart: '2020-03-03 18:00',
myEnd: '2020-03-03 23:00',
label: 'Immobile',
ganttBarConfig: {
color: 'white',
backgroundColor: '#404040',
opacity: 0.5,
immobile: true,
},
},
{
myStart: "2020-03-03 04:00",
myEnd: "2020-03-03 15:00",
label: "Bar",
ganttBarConfig: {color:"white", backgroundColor: "#2e74a3", bundle: "blueBundle"}
}
]
myStart: '2020-03-03 04:00',
myEnd: '2020-03-03 15:00',
label: 'Bar',
ganttBarConfig: {
color: 'white',
backgroundColor: '#2e74a3',
bundle: 'blueBundle',
},
},
],
},
{
label: "Row #2",
label: 'Row #2',
barList: [
{
myStart: "2020-03-02 09:00",
myEnd: "2020-03-02 18:00",
image: "vue_ganttastic_logo_no_text.png",
label: "I have an image",
ganttBarConfig: {color:"white", backgroundColor: "#de3b26", bundle:"redBundle"}
myStart: '2020-03-02 09:00',
myEnd: '2020-03-02 18:00',
image: 'vue_ganttastic_logo_no_text.png',
label: 'I have an image',
ganttBarConfig: {
color: 'white',
backgroundColor: '#de3b26',
bundle: 'redBundle',
},
},
{
myStart: "2020-03-03 04:00",
myEnd: "2020-03-03 15:00",
label: "We belong together ^",
ganttBarConfig: {color:"white", backgroundColor: "#2e74a3", bundle:"blueBundle"}
myStart: '2020-03-03 04:00',
myEnd: '2020-03-03 15:00',
label: 'We belong together ^',
ganttBarConfig: {
color: 'white',
backgroundColor: '#2e74a3',
bundle: 'blueBundle',
},
},
{
myStart: "2020-03-03 18:00",
myEnd: "2020-03-03 22:00",
label: "Bar",
ganttBarConfig: {color:"white", backgroundColor: "#aa34a3"}
}
]
myStart: '2020-03-03 18:00',
myEnd: '2020-03-03 22:00',
label: 'Bar',
ganttBarConfig: { color: 'white', backgroundColor: '#aa34a3' },
},
],
},
{
label: "Row #3",
label: 'Row #3',
barList: [
{
myStart: "2020-03-02 09:00",
myEnd: "2020-03-02 18:00",
label: "I am with stupid ^",
ganttBarConfig: {color:"white", backgroundColor: "#de3b26", bundle: "redBundle"}
myStart: '2020-03-02 09:00',
myEnd: '2020-03-02 18:00',
label: 'I am with stupid ^',
ganttBarConfig: {
color: 'white',
backgroundColor: '#de3b26',
bundle: 'redBundle',
},
},
{
myStart: "2020-03-02 22:30",
myEnd: "2020-03-03 05:00",
label: "With handles!",
ganttBarConfig: {color:"white", backgroundColor: "#a23def", handles: true}
myStart: '2020-03-02 22:30',
myEnd: '2020-03-03 05:00',
label: 'With handles!',
ganttBarConfig: {
color: 'white',
backgroundColor: '#a23def',
handles: true,
},
},
{
myStart: "2020-03-02 01:00",
myEnd: "2020-03-02 07:00",
label: "Bar",
ganttBarConfig: {color:"white", backgroundColor: "#5effad", pushOnOverlap: false, zIndex: 3}
myStart: '2020-03-02 01:00',
myEnd: '2020-03-02 07:00',
label: 'Bar',
ganttBarConfig: {
color: 'white',
backgroundColor: '#5effad',
pushOnOverlap: false,
zIndex: 3,
},
},
{
myStart: "2020-03-03 14:00",
myEnd: "2020-03-03 20:00",
label: "Woooow!",
ganttBarConfig: {color:"white", background: "repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)"}
},
]
myStart: '2020-03-03 14:00',
myEnd: '2020-03-03 20:00',
label: 'Woooow!',
ganttBarConfig: {
color: 'white',
background:
'repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)',
},
},
],
},
{
label: "Row #4",
label: 'Row #4',
barList: [
{
myStart: "2020-03-03 06:30",
myEnd: "2020-03-03 20:00",
label: "Bar",
ganttBarConfig:{color:"white", backgroundColor: "#d18aaf", handles: true}
myStart: '2020-03-03 06:30',
myEnd: '2020-03-03 20:00',
label: 'Bar',
ganttBarConfig: {
color: 'white',
backgroundColor: '#d18aaf',
handles: true,
},
},
{
myStart: "2020-03-02 00:30",
myEnd: "2020-03-03 01:00",
label: "Rectangular",
ganttBarConfig: {color:"white", backgroundColor: "#f2840f", borderRadius: 0}
},
]
}
]
myStart: '2020-03-02 00:30',
myEnd: '2020-03-03 01:00',
label: 'Rectangular',
ganttBarConfig: {
color: 'white',
backgroundColor: '#f2840f',
borderRadius: 0,
},
},
],
},
],
}
},
methods: {
onDragend(e){
console.log(e)
}
}
onDragend(e) {
let {event, bar} = e
console.log('onDragend', {event: event.type, bar})
},
},
}
</script>
<style>
</style>