vue 甘特图 vxe-gantt 设置视图每周的起始天

在实际项目管理中，不同团队或地区对“一周的开始”有不同的习惯——国内通常以周一为起始，而部分欧美国家以周日为起始。vxe-gantt 通过 scales 中 week 类型的 startDay 参数，允许你灵活自定义每周的起始天，让甘特图的时间轴更贴合业务习惯。

核心配置：startDay 参数

在 taskViewConfig.scales 中，将 week 层级配置为对象形式，通过 startDay 指定一周的起始天：

taskViewConfig: {
  scales: [
    { type: 'week', startDay: 1 },  // 1 = 周一，0 = 周日，依此类推
    { type: 'day' },
    { type: 'date' }
  ]
}

startDay 取值对照表：

代码

通过设置 startDay 来自定义一周的开始日

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const ganttOptions = reactive({
  border: true,
  height: 300,
  loading: false,
  taskBarConfig: {
    showProgress: true,
    showContent: true,
    barStyle: {
      round: true,
      bgColor: '#f56565',
      completedBgColor: '#65c16f'
    }
  },
  taskViewConfig: {
    // 核心配置：设置周起始日为周一（1）
    scales: [
      { type: 'week', startDay: 1 },  // 周一为起始
      { type: 'day' },
      { type: 'date' }
    ],
    tableStyle: {
      width: 320
    }
  },
  columns: [
    { field: 'title', title: '任务名称', width: 120 },
    { field: 'owner', title: '负责人', width: 100 },
    { field: 'start', title: '开始时间', width: 160 },
    { field: 'end', title: '结束时间', width: 160 }
  ],
  data: [
    { id: 10001, title: '任务R790', start: '2024-03-01', end: '2024-03-04', progress: 3, owner: '张三' },
    { id: 10002, title: '任务C30456572349', start: '2024-03-03', end: '2024-03-08', progress: 10, owner: '小徐' },
    { id: 10003, title: '任务E563', start: '2024-03-03', end: '2024-03-11', progress: 90, owner: '李四' },
    { id: 10004, title: '任务P687', start: '2024-03-05', end: '2024-03-11', progress: 15, owner: '李四' },
    { id: 10005, title: '任务L8412430903', start: '2024-03-08', end: '2024-03-15', progress: 100, owner: '老六' },
    { id: 10006, title: '任务B567', start: '2024-03-10', end: '2024-03-21', progress: 5, owner: '小明' },
    { id: 10007, title: '任务V513802134450', start: '2024-03-15', end: '2024-03-24', progress: 70, owner: '王五' },
    { id: 10008, title: '任务G110', start: '2024-03-20', end: '2024-03-29', progress: 50, owner: '小徐' },
    { id: 10009, title: '任务I802', start: '2024-03-19', end: '2024-03-20', progress: 5, owner: '王五' },
    { id: 10010, title: '任务K778', start: '2024-03-12', end: '2024-03-20', progress: 10, owner: '老六' }
  ]
})
</script>

配置层级组合

// 仅显示周层级（粗粒度）
scales: [{ type: 'week', startDay: 1 }]

// 周 + 天（常用组合）
scales: [{ type: 'week', startDay: 1 }, { type: 'day' }]

// 月 + 周 + 天（更精细）
scales: [{ type: 'month' }, { type: 'week', startDay: 1 }, { type: 'date' }]

tartDay 通常与 week、day、date 等层级配合使用，形成完整的时间轴结构：

不同起始日效果预览

通过调整 startDay 的值，时间轴的周划分会相应变化（以下图示基于同一组数据）：

周一（startDay: 1）

周二（startDay: 2）

周三（startDay: 3）

周四（startDay: 4）

周五（startDay: 5）

周六（startDay: 6）

周日（startDay: 0）

• 通过 scales 中 week 类型的 startDay 参数，可以轻松自定义每周的起始天，适配不同地区或企业的排期习惯。只需一行配置即可切换，无需修改数据或重新计算日期。结合 day、date 等层级组合，能灵活构建符合业务场景的时间轴。

https://gantt.vxeui.com

原文链接：vue 甘特图 vxe-gantt 设置视图每周的起始天