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

feat: change date format and month format on parent component props with default values

Browse Source
This commit is contained in:
Сергей Солодягин
2021-11-11 16:36:58 +03:00
parent fdb2d3a451
commit 6f605a7598
7 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+5 -1
View File
@@ -123,20 +123,24 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
| Prop | Type | Default | Description |
| ------------------------ | --------------- | ---------------- | ------------------------------------------------------------------- |
| allow-add | `Boolean` | `true` | allow to add new bar on double click |
| bar-config-key | `String` | `ganttBarConfig` | |
| bar-start-key | `String` | `start` | property name of the bar objects that represents the start datetime |
| bar-end-key | `String` | `end` | property name of the bar objects that represents the end datetime |
| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` |
| day-format | `String` | `ddd DD MMMM` | |
| grid | `Boolean` | `false` | hide/show grid |
| grid-size | `Number` | `30` | horizontal cell width in pixels |
| default-bar-length | `Number` | `1` | |
| height | `String` | - | the total height of the entire Vue-Ganttastic component |
| hide-timeaxis | `Boolean` | `false` | hide timeaxis |
| highlighted-days | `Array<String>` | `[]` | format of day `YYYY-MM-DD` |
| highlighted-hours | `Array<Number>` | `[]` | |
| is-magnetic | `Boolean` | - | magnetic effect |
| locale | `String` | `en` | localization |
| may-add | `Boolean` | `true` | add new bar on double click |
| min-gap-between-bars | `Number` | `0` | |
| month-format | `String` | `MMMM YYYY` | |
| precision | `String` | `month` | day, month |
| push-on-overlap | `Boolean` | - | |
| row-height | `Number` | `40` | |
lib/components/GGanttChart.vue
+5 -1
View File
@@ -15,6 +15,8 @@
:time-format="timeFormat"
:time-count="timeCount"
:grid-size="gridSize"
:day-format="dayFormat"
:month-format="monthFormat"
/>
<div
@@ -76,7 +78,9 @@ export default {
barConfigKey: { type: String, default: 'ganttBarConfig' },
barStartKey: { type: String, default: 'start' }, // property name of the bar objects that represents the start datetime
barEndKey: { type: String, default: 'end' }, // property name of the bar objects that represents the end datetime
mayAdd: { type: Boolean, default: true }
allowAdd: { type: Boolean, default: true },
dayFormat: { type: String, default: 'ddd DD MMMM' },
monthFormat: { type: String, default: 'MMMM YYYY' }
},
data() {
lib/components/GGanttRow.vue
+1 -1
View File
@@ -173,7 +173,7 @@ export default {
},
onDoubleClick(e) {
if (!this.chartProps.mayAdd) return
if (!this.chartProps.allowAdd) return
let barContainer = this.$refs.barContainer.getBoundingClientRect()
let xPos = e.clientX - barContainer.left
let timeDiffFromStart = Math.floor(
lib/components/GGanttTimeaxis.vue
+4 -4
View File
@@ -68,16 +68,16 @@ export default {
precision: { type: String },
timeFormat: { type: String },
timeCount: { type: Number },
gridSize: { type: Number }
gridSize: { type: Number },
dayFormat: { type: String },
monthFormat: { type: String }
},
data() {
return {
axisPoints: [],
timemarker: null,
hourFontSize: '11px',
dayFormat: 'ddd DD MMMM',
monthFormat: 'MMMM YYYY'
hourFontSize: '11px'
}
},
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "@tenrok/vue-ganttastic",
"version": "0.10.18",
"version": "0.10.19",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@tenrok/vue-ganttastic",
"version": "0.10.18",
"version": "0.10.19",
"license": "MIT",
"dependencies": {
"vue": "^2.6.12"
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@tenrok/vue-ganttastic",
"version": "0.10.18",
"version": "0.10.19",
"description": "A simple and customizable Gantt chart component for Vue.js",
"keywords": [
"gantt",
@@ -32,7 +32,7 @@
}
],
"files": [
"dist"
"dist/vue-ganttastic.*"
],
"main": "dist/vue-ganttastic.common.js",
"repository": {
src/App.vue
+2 -2
View File
@@ -53,7 +53,7 @@
:theme="chart2.theme"
:width="chart2.width"
:height="chart2.height"
:may-add="chart2.mayAdd"
:allow-add="chart2.allowAdd"
>
<g-gantt-row
v-for="row in chart2.rows"
@@ -254,7 +254,7 @@ export default {
theme: 'vue', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare'
width: '1100px',
height: '250px',
mayAdd: false,
allowAdd: false,
rows: [
{
label: 'Row #1',