diff --git a/demo/App.vue b/demo/App.vue
index 9047586..e15648d 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -40,6 +40,7 @@
         end-key="endTime"
         expand-all
         highlight-date
+        locale="zh-cn"
         :dark="isDark"
         :gantt-column-size="colSize"
         :show-checkbox="showCheckbox"
@@ -114,7 +115,7 @@
 
           <template #title="data">
             <div>
-              <div>name---{{data}}</div>
+              <div>name---{{ data }}</div>
               <div>line2</div>
               <!-- <div>{{ a }}</div> -->
             </div>
@@ -138,8 +139,8 @@
 
         <XGanttColumn label="时间">
           <template #title="data">
-              <div style="padding: 12px 0">time from slot - {{data}}</div>
-            </template>
+            <div style="padding: 12px 0">time from slot - {{ data }}</div>
+          </template>
 
           <XGanttColumn prop="startTime" width="150" center :merge="merge4" />
 
@@ -151,9 +152,7 @@
             :merge="merge4"
           >
             <template #default="{ row }">
-              <div
-                :style="{ backgroundColor: `#${555}`, color: '#789' }"
-              >
+              <div :style="{ backgroundColor: `#${555}`, color: '#789' }">
                 abc - {{ row }}
               </div>
             </template>
@@ -199,7 +198,7 @@
       <button @click="() => (colSize = 'large')">大</button>
     </div>
     <button @click="changeUnit1">切换单位</button>
-    <button @click="() => useProgress = !useProgress">使用进度</button>
+    <button @click="() => (useProgress = !useProgress)">使用进度</button>
   </div>
 
   <div v-else aria-label="多页">
@@ -221,6 +220,7 @@
           :show-weekend="showWeekend2"
           :show-today="showToday2"
           :show-expand="showExpand2"
+          :unit="unit2"
           :data="dataList2"
           :links="linkList2"
           :header-style="headerStyle2"
@@ -296,6 +296,7 @@
         <button @click="() => (colSize2 = 'normal')">中</button>
         <button @click="() => (colSize2 = 'large')">大</button>
       </div>
+      <button @click="changeUnit2">切换单位</button>
     </div>
 
     <div style="padding-bottom: 10px">
@@ -444,6 +445,7 @@ export default defineComponent({
       showWeekend2: true,
       showToday2: true,
       showExpand2: true,
+      unit2: 'day',
       levelColor2: ['#123456', '#654321'] as string[],
       headerStyle2: {
         bgColor: '#684',
@@ -565,7 +567,7 @@ export default defineComponent({
     this.dataList2 = [
       {
         index: INDEX++,
-        startDate: '2023-05-01',
+        startDate: '2023-04-28',
         endDate: '2023-05-10',
         name: '2号数据: 1'
       },
@@ -661,12 +663,12 @@ export default defineComponent({
 
     merge4: function (data: any) {
       // return data.row.id % 4 !== 0;
-      return false
+      return false;
     },
 
     merge5: function (data: any) {
       // return data.row.id % 5 !== 0;
-      return false
+      return false;
     },
 
     handleMove: function ({
@@ -961,6 +963,12 @@ export default defineComponent({
       this.dataList2 = [...this.dataList2];
     },
 
+    changeUnit2() {
+      const u = ['month', 'week', 'day', 'hour'];
+      this.unit2 = u[(u.indexOf(this.unit2) + 1) % u.length];
+      console.log('this.unit2', this.unit2);
+    },
+
     handleClickDelete2() {
       console.log(this.dataList2.shift());
     },
diff --git a/demo/demo.vue b/demo/demo.vue
index 8cddbac..b1463c7 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -157,40 +157,70 @@ import DatePicker from './components/DatePicker.vue';
 
 let id = 0;
 
-const ganttData = reactive<any>([]);
+// const ganttData = reactive<any>([]);
 
-for (let i = 0; i < 50; i++) {
-  onAdd();
-}
+// for (let i = 0; i < 50; i++) {
+//   onAdd();
+// }
 
-ganttData[0].children = [
-  {
-    index: ++id,
-    name: 'sub-t' + id,
-    startDate: new Date(2023, 3, 5),
-    endDate: new Date(2023, 3, 5, 23, 59, 59),
-    progress: 0.8,
-    o: { t1: 'a', t2: 'b' }
-  },
+// ganttData[0].children = [
+//   {
+//     index: ++id,
+//     name: 'sub-t' + id,
+//     startDate: new Date(2023, 3, 5),
+//     endDate: new Date(2023, 3, 5, 23, 59, 59),
+//     progress: 0.8,
+//     o: { t1: 'a', t2: 'b' }
+//   },
+//   {
+//     index: ++id,
+//     name: 'sub-t' + id,
+//     startDate: new Date(2023, 3, 6),
+//     endDate: new Date(2023, 3, 10),
+//     progress: 0.5,
+//     o: { t1: 'a', t2: 'b' },
+//     children: [
+//       {
+//         index: ++id,
+//         name: 'sub-sub-t' + id,
+//         startDate: new Date(2023, 3, 5),
+//         endDate: new Date(2023, 3, 10),
+//         progress: 0.3333333333,
+//         o: { t1: 'a', t2: 'b' }
+//       }
+//     ]
+//   }
+// ];
+
+const ganttData = reactive([
   {
-    index: ++id,
-    name: 'sub-t' + id,
-    startDate: new Date(2023, 3, 6),
-    endDate: new Date(2023, 3, 10),
-    progress: 0.5,
-    o: { t1: 'a', t2: 'b' },
+    index: '2',
+    type: 1,
+    startDate: new Date('2022-02-19'),
+    endDate: new Date('2022-07-24'),
     children: [
       {
-        index: ++id,
-        name: 'sub-sub-t' + id,
-        startDate: new Date(2023, 3, 5),
-        endDate: new Date(2023, 3, 10),
-        progress: 0.3333333333,
-        o: { t1: 'a', t2: 'b' }
+        index: '20000001',
+        startDate: new Date('2022-03-09'),
+        endDate: new Date('2022-07-17'),
+        children: [
+          {
+            index: '2000000101',
+            startDate: new Date('2022-03-09'),
+            endDate: new Date('2022-07-17'),
+            children: []
+          },
+          {
+            index: '2000000102',
+            startDate: new Date('2022-03-09'),
+            endDate: new Date('2022-06-19'),
+            children: []
+          }
+        ]
       }
     ]
   }
-];
+]);
 
 let linkId = 1;
 const ganttLinks = reactive([
diff --git a/demo/main.ts b/demo/main.ts
index b804813..c5f74bc 100644
--- a/demo/main.ts
+++ b/demo/main.ts
@@ -1,16 +1,8 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 // import App from './demo.vue';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-
-import Gantt from '../src/index';
-
-dayjs.locale('zh-cn');
-
-console.log('main', dayjs.locale());
-
-// import Gantt from '../dist/index.es';
-// import '../dist/style.css';
+import Gantt from '../dist/index.es';
+// import Gantt from '../src/index';
+import '../dist/style.css';
 
 createApp(App).use(Gantt).mount('#app');
diff --git a/src/components/root/index.vue b/src/components/root/index.vue
index 455f246..5b66a9e 100644
--- a/src/components/root/index.vue
+++ b/src/components/root/index.vue
@@ -84,10 +84,14 @@ import useLinks from '@/composables/useLinks';
 import Variables from '@/constants/vars';
 import useExport from '@/composables/useExport';
 import useElement from '@/composables/useElement';
+import { setLocale } from '@/utils/date';
 
 const containerId = uuid(10);
 const props = defineProps(rootProps);
 
+// 本地化
+setLocale(props.locale);
+
 // #region 挂载实例
 const { rootRef } = useRoot();
 // #endregion
diff --git a/src/components/root/rootProps.ts b/src/components/root/rootProps.ts
index f7eb3dc..f41bc9c 100644
--- a/src/components/root/rootProps.ts
+++ b/src/components/root/rootProps.ts
@@ -236,5 +236,13 @@ export default {
   draggable: {
     type: [Object, Boolean] as PropType<boolean | Partial<DraggableOptions>>,
     default: false
+  },
+
+  /**
+   * 国际化
+   */
+  locale: {
+    type: String,
+    default: 'en'
   }
 };
diff --git a/src/utils/date.ts b/src/utils/date.ts
index b331085..c41f9a6 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,8 +1,11 @@
 import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import IsoWeek from 'dayjs/plugin/isoWeek';
+import localeData from 'dayjs/plugin/localeData';
+import updateLocale from 'dayjs/plugin/updateLocale';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import Variables from '@/constants/vars';
+import './lang';
 
 /** ********************************** */
 /** *** 下面方法全部使用 dayjs 实现 **** */
@@ -15,8 +18,30 @@ dayjs.extend(IsoWeek);
 // 添加自定义格式化
 dayjs.extend(advancedFormat);
 
+// 添加本地化
+dayjs.extend(localeData);
+dayjs.extend(updateLocale);
+
 export const day = dayjs;
 
+let L = 'en';
+
+export function setLocale(locale: string) {
+  if (L === locale) return;
+
+  L = locale;
+  day.locale(locale);
+}
+
+/**
+ * 更新本地化
+ */
+export function updateLocaleData() {
+  dayjs.updateLocale(L, {
+    weekStart: 1
+  });
+}
+
 /**
  * 获取对应单位的毫秒数
  * @param unit
diff --git a/src/utils/lang.ts b/src/utils/lang.ts
new file mode 100644
index 0000000..627c1d2
--- /dev/null
+++ b/src/utils/lang.ts
@@ -0,0 +1,142 @@
+import 'dayjs/locale/am';
+import 'dayjs/locale/ar-dz';
+import 'dayjs/locale/ar-iq';
+import 'dayjs/locale/ar-kw';
+import 'dayjs/locale/ar-ly';
+import 'dayjs/locale/ar-ma';
+import 'dayjs/locale/ar-sa';
+import 'dayjs/locale/ar-tn';
+import 'dayjs/locale/ar';
+import 'dayjs/locale/az';
+import 'dayjs/locale/be';
+import 'dayjs/locale/bg';
+import 'dayjs/locale/bi';
+import 'dayjs/locale/bm';
+import 'dayjs/locale/bn-bd';
+import 'dayjs/locale/bn';
+import 'dayjs/locale/bo';
+import 'dayjs/locale/br';
+import 'dayjs/locale/bs';
+import 'dayjs/locale/ca';
+import 'dayjs/locale/cs';
+import 'dayjs/locale/cv';
+import 'dayjs/locale/cy';
+import 'dayjs/locale/da';
+import 'dayjs/locale/de-at';
+import 'dayjs/locale/de-ch';
+import 'dayjs/locale/de';
+import 'dayjs/locale/dv';
+import 'dayjs/locale/el';
+import 'dayjs/locale/en-au';
+import 'dayjs/locale/en-ca';
+import 'dayjs/locale/en-gb';
+import 'dayjs/locale/en-ie';
+import 'dayjs/locale/en-il';
+import 'dayjs/locale/en-in';
+import 'dayjs/locale/en-nz';
+import 'dayjs/locale/en-sg';
+import 'dayjs/locale/en-tt';
+import 'dayjs/locale/en';
+import 'dayjs/locale/eo';
+import 'dayjs/locale/es-do';
+import 'dayjs/locale/es';
+import 'dayjs/locale/et';
+import 'dayjs/locale/eu';
+import 'dayjs/locale/fa';
+import 'dayjs/locale/fi';
+import 'dayjs/locale/fo';
+import 'dayjs/locale/fr-ca';
+import 'dayjs/locale/fr-ch';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/fy';
+import 'dayjs/locale/ga';
+import 'dayjs/locale/gd';
+import 'dayjs/locale/gl';
+import 'dayjs/locale/gom-latn';
+import 'dayjs/locale/gu';
+import 'dayjs/locale/he';
+import 'dayjs/locale/hi';
+import 'dayjs/locale/hr';
+import 'dayjs/locale/ht';
+import 'dayjs/locale/hu';
+import 'dayjs/locale/hy-am';
+import 'dayjs/locale/id';
+import 'dayjs/locale/is';
+import 'dayjs/locale/it-ch';
+import 'dayjs/locale/it';
+import 'dayjs/locale/ja';
+import 'dayjs/locale/jv';
+import 'dayjs/locale/ka';
+import 'dayjs/locale/kk';
+import 'dayjs/locale/km';
+import 'dayjs/locale/kn';
+import 'dayjs/locale/ko';
+import 'dayjs/locale/ku';
+import 'dayjs/locale/ky';
+import 'dayjs/locale/lb';
+import 'dayjs/locale/lo';
+import 'dayjs/locale/lt';
+import 'dayjs/locale/lv';
+import 'dayjs/locale/me';
+import 'dayjs/locale/mi';
+import 'dayjs/locale/mk';
+import 'dayjs/locale/ml';
+import 'dayjs/locale/mn';
+import 'dayjs/locale/mr';
+import 'dayjs/locale/ms-my';
+import 'dayjs/locale/ms';
+import 'dayjs/locale/mt';
+import 'dayjs/locale/my';
+import 'dayjs/locale/nb';
+import 'dayjs/locale/ne';
+import 'dayjs/locale/nl-be';
+import 'dayjs/locale/nl';
+import 'dayjs/locale/nn';
+import 'dayjs/locale/oc-lnc';
+import 'dayjs/locale/pa-in';
+import 'dayjs/locale/pl';
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/rn';
+import 'dayjs/locale/ro';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/rw';
+import 'dayjs/locale/sd';
+import 'dayjs/locale/se';
+import 'dayjs/locale/si';
+import 'dayjs/locale/sk';
+import 'dayjs/locale/sl';
+import 'dayjs/locale/sq';
+import 'dayjs/locale/sr-cyrl';
+import 'dayjs/locale/sr';
+import 'dayjs/locale/ss';
+import 'dayjs/locale/sv-fi';
+import 'dayjs/locale/sv';
+import 'dayjs/locale/sw';
+import 'dayjs/locale/ta';
+import 'dayjs/locale/te';
+import 'dayjs/locale/tet';
+import 'dayjs/locale/tg';
+import 'dayjs/locale/th';
+import 'dayjs/locale/tk';
+import 'dayjs/locale/tl-ph';
+import 'dayjs/locale/tlh';
+import 'dayjs/locale/tr';
+import 'dayjs/locale/tzl';
+import 'dayjs/locale/tzm-latn';
+import 'dayjs/locale/tzm';
+import 'dayjs/locale/ug-cn';
+import 'dayjs/locale/uk';
+import 'dayjs/locale/ur';
+import 'dayjs/locale/uz-latn';
+import 'dayjs/locale/uz';
+import 'dayjs/locale/vi';
+import 'dayjs/locale/x-pseudo';
+import 'dayjs/locale/yo';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/zh-hk';
+import 'dayjs/locale/zh-tw';
+import 'dayjs/locale/zh';
+import 'dayjs/locale/es-mx';
+import 'dayjs/locale/es-pr';
+import 'dayjs/locale/es-us';
diff --git a/vite.config.ts b/vite.config.ts
index 454f988..77ed9e8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,11 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
+import glob from 'fast-glob';
 import eslintPlugin from 'vite-plugin-eslint';
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(async () => ({
   plugins: [
     vue(),
     eslintPlugin({
@@ -21,6 +22,14 @@ export default defineConfig({
     }
   },
 
+  optimizeDeps: {
+    include: (
+      await glob(['dayjs/locale/*.js'], {
+        cwd: path.resolve(__dirname, 'node_modules')
+      })
+    ).map(p => p.replace(/\.js$/, ''))
+  },
+
   build: {
     // sourcemap: true,
     target: 'modules',
@@ -40,4 +49,4 @@ export default defineConfig({
       }
     }
   }
-});
+}));