diff --git a/docs/.vitepress/theme/components/AdvancedGanttDemo.vue b/docs/.vitepress/theme/components/AdvancedGanttDemo.vue
index 7b56325..cf2f6db 100644
--- a/docs/.vitepress/theme/components/AdvancedGanttDemo.vue
+++ b/docs/.vitepress/theme/components/AdvancedGanttDemo.vue
@@ -27,6 +27,8 @@ const enableMinutes = ref(false)
const currentTime = ref(true)
const currentTimeLabel = ref('Now')
const locale = ref('en')
+const utc = ref(false)
+
// Display Configuration
const hideTimeaxis = ref(false)
@@ -442,6 +444,12 @@ const formattedEventLog = computed(() => {
>
+
+
+
@@ -744,6 +752,7 @@ const formattedEventLog = computed(() => {
:milestones="milestones"
:enableConnectionCreation="enableConnectionCreation"
:enableConnectionDeletion="enableConnectionDeletion"
+ :utc="utc"
@click-bar="handleEvent($event, 'Bar Click')"
@drag-bar="handleEvent($event, 'Bar Drag')"
@sort="handleEvent($event, 'Sort Change')"
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index a467c23..8e65d95 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -8,6 +8,7 @@ import isSameOrAfter from "dayjs/plugin/isSameOrAfter.js"
import isBetween from "dayjs/plugin/isBetween.js"
import weekOfYear from "dayjs/plugin/weekOfYear"
import dayOfYear from "dayjs/plugin/dayOfYear.js"
+import utc from "dayjs/plugin/utc"
export function extendDayjs() {
@@ -17,6 +18,7 @@ export function extendDayjs() {
dayjs.extend(weekOfYear)
dayjs.extend(isoWeek)
dayjs.extend(dayOfYear)
+ dayjs.extend(utc)
}
const GanttDemo = defineClientComponent(() => {
diff --git a/docs/components/g-gantt-chart.md b/docs/components/g-gantt-chart.md
index 5b0101b..ac15098 100644
--- a/docs/components/g-gantt-chart.md
+++ b/docs/components/g-gantt-chart.md
@@ -76,6 +76,7 @@ Here's a minimal example of using the GGanttChart component:
| defaultProgressResizable | `boolean` | `true` | Enable progress adjustment through dragging |
| enableConnectionCreation | `boolean` | `false` | Enable the possibility to draw connections |
| enableConnectionDelete | `boolean` | `false` | Enable the possibility to delete connections |
+| utc | `boolean` | `false` | Set the current time position based on UTC |
### Events
@@ -105,6 +106,7 @@ Here's a minimal example of using the GGanttChart component:
| connection-delete | `{ sourceBar: GanttBarObject, targetBar: GanttBarObject, e: MouseEvent }` | Delete a connection |
+
### Slots
| Slot Name | Props | Description |
diff --git a/src/components/GGanttChart.vue b/src/components/GGanttChart.vue
index 2c024cc..412792b 100644
--- a/src/components/GGanttChart.vue
+++ b/src/components/GGanttChart.vue
@@ -124,7 +124,8 @@ const props = withDefaults(defineProps(), {
showProgress: true,
defaultProgressResizable: true,
enableConnectionCreation: false,
- enableConnectionDeletion: false
+ enableConnectionDeletion: false,
+ utc: false
})
// Events
diff --git a/src/components/GGanttCurrentTime.vue b/src/components/GGanttCurrentTime.vue
index 9d8ac7e..7e95d35 100644
--- a/src/components/GGanttCurrentTime.vue
+++ b/src/components/GGanttCurrentTime.vue
@@ -1,5 +1,5 @@
@@ -34,7 +42,7 @@ useIntervalFn(loopTime, 1000)
/>
- {{ currentTimeLabel }}
+ {{ currentTimeDisplay }}
diff --git a/src/hy-vue-gantt.ts b/src/hy-vue-gantt.ts
index fb3d4b0..5d44c8f 100644
--- a/src/hy-vue-gantt.ts
+++ b/src/hy-vue-gantt.ts
@@ -9,6 +9,7 @@ import advancedFormat from "dayjs/plugin/advancedFormat"
import customParseFormat from "dayjs/plugin/customParseFormat.js"
import dayOfYear from "dayjs/plugin/dayOfYear.js"
import localizedFormat from "dayjs/plugin/localizedFormat"
+import utc from "dayjs/plugin/utc"
import GGanttChart from "./components/GGanttChart.vue"
import GGanttRow from "./components/GGanttRow.vue"
@@ -103,6 +104,7 @@ export function extendDayjs() {
dayjs.extend(advancedFormat)
dayjs.extend(dayOfYear)
dayjs.extend(localizedFormat)
+ dayjs.extend(utc)
}
export type {
diff --git a/src/types/config.ts b/src/types/config.ts
index 11258eb..76fd078 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -65,6 +65,7 @@ export interface GGanttChartProps {
showLabel?: boolean
showProgress?: boolean
defaultProgressResizable?: boolean
+ utc?: boolean
}
export type GGanttChartConfig = ToRefs> & {
diff --git a/tests/components/GGanttCurrentTime.test.ts b/tests/components/GGanttCurrentTime.test.ts
index 093c094..9a0d459 100644
--- a/tests/components/GGanttCurrentTime.test.ts
+++ b/tests/components/GGanttCurrentTime.test.ts
@@ -9,6 +9,26 @@ vi.mock("../composables/useTimePositionMapping", () => ({
})
}))
+vi.mock("dayjs", () => {
+ const mockDayjs = vi.fn((input) => ({
+ format: vi.fn().mockReturnValue(input || "2024-01-01"),
+ diff: vi.fn().mockReturnValue(60),
+ add: vi.fn().mockImplementation((value, unit) => mockDayjs("2024-01-02")),
+ subtract: vi.fn().mockImplementation((value, unit) => mockDayjs("2023-12-31")),
+ locale: vi.fn().mockReturnValue(mockDayjs),
+ utc: vi.fn()
+ }))
+
+ // Add static methods and properties that dayjs uses
+ mockDayjs.extend = vi.fn()
+ mockDayjs.locale = vi.fn()
+
+ return {
+ default: mockDayjs,
+ __esModule: true
+ }
+})
+
describe("GGanttCurrentTime", () => {
beforeEach(() => {
mockMapTimeToPosition.mockClear()
diff --git a/tests/vitestSetup.ts b/tests/vitestSetup.ts
index 90f23bf..173b889 100644
--- a/tests/vitestSetup.ts
+++ b/tests/vitestSetup.ts
@@ -90,7 +90,8 @@ beforeAll(() => {
locale: ref("en"),
sortable: ref(true),
enableRowDragAndDrop: ref(true),
- showLabel: ref(true)
+ showLabel: ref(true),
+ utc: ref(false)
},
[EMIT_BAR_EVENT_KEY]: () => {},
[BAR_CONTAINER_KEY]: ref(barContainerElement),