diff --git a/common/changes/@visactor/vtable/feat-calendar-gif_2025-01-08-12-00.json b/common/changes/@visactor/vtable/feat-calendar-gif_2025-01-08-12-00.json
new file mode 100644
index 000000000..489b96180
--- /dev/null
+++ b/common/changes/@visactor/vtable/feat-calendar-gif_2025-01-08-12-00.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "docs: add weather calendar demo",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
\ No newline at end of file
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index dfa911942..2c07d32e3 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -296,9 +296,9 @@ importers:
       '@types/react-dom': ^18.0.0
       '@visactor/vchart': 1.13.3-alpha.2
       '@visactor/vdataset': ~0.18.1
-      '@visactor/vrender-components': 0.21.7-alpha.1
-      '@visactor/vrender-core': 0.21.7-alpha.1
-      '@visactor/vrender-kits': 0.21.7-alpha.1
+      '@visactor/vrender-components': 0.21.9-alpha.1
+      '@visactor/vrender-core': 0.21.9-alpha.1
+      '@visactor/vrender-kits': 0.21.9-alpha.1
       '@visactor/vscale': ~0.18.1
       '@visactor/vtable-editors': workspace:*
       '@visactor/vutils': ~0.18.14
@@ -342,9 +342,9 @@ importers:
       vite-plugin-markdown: ^2.1.0
     dependencies:
       '@visactor/vdataset': 0.18.18
-      '@visactor/vrender-components': 0.21.7-alpha.1
-      '@visactor/vrender-core': 0.21.7-alpha.1
-      '@visactor/vrender-kits': 0.21.7-alpha.1
+      '@visactor/vrender-components': 0.21.9-alpha.1
+      '@visactor/vrender-core': 0.21.9-alpha.1
+      '@visactor/vrender-kits': 0.21.9-alpha.1
       '@visactor/vscale': 0.18.18
       '@visactor/vtable-editors': link:../vtable-editors
       '@visactor/vutils': 0.18.18
@@ -4266,11 +4266,11 @@ packages:
       '@visactor/vscale': 0.19.3
       '@visactor/vutils': 0.19.3
 
-  /@visactor/vrender-components/0.21.7-alpha.1:
-    resolution: {integrity: sha512-I3D2xIk8OSZYkSJl2dXGUUPtw1Xl+uY3wG0rwrv6F2L+v/enl9F+j32+EuQqsa4mimq+Phy5Ct+WtWtG3pzHsw==}
+  /@visactor/vrender-components/0.21.9-alpha.1:
+    resolution: {integrity: sha512-N4G2htA9kqAGUyn8cGqPnWYokw8LyMi1Djj4Hk5L8HrGPyPETdTMWLWFW8pJgAGRrENNabhVtIn4h93vFHBWLg==}
     dependencies:
-      '@visactor/vrender-core': 0.21.7-alpha.1
-      '@visactor/vrender-kits': 0.21.7-alpha.1
+      '@visactor/vrender-core': 0.21.9-alpha.1
+      '@visactor/vrender-kits': 0.21.9-alpha.1
       '@visactor/vscale': 0.19.3
       '@visactor/vutils': 0.19.3
     dev: false
@@ -4281,8 +4281,8 @@ packages:
       '@visactor/vutils': 0.19.3
       color-convert: 2.0.1
 
-  /@visactor/vrender-core/0.21.7-alpha.1:
-    resolution: {integrity: sha512-maHMwPrejAmdiYQsZqjbVSU+b81xL+0qkE62pdINvUJ0ok82GRdAJ1tOh5aUdxHKI/wQ/iTwUu65eGPUCBIgag==}
+  /@visactor/vrender-core/0.21.9-alpha.1:
+    resolution: {integrity: sha512-brOsA6s8d1vMC2aSw1A3GcNTbW5s30InDCFmmqyvVNb3FS9vuxomOc34x6LaCz0P9iukol6VVME55meFtXzV0Q==}
     dependencies:
       '@visactor/vutils': 0.19.3
       color-convert: 2.0.1
@@ -4296,12 +4296,13 @@ packages:
       '@visactor/vutils': 0.19.3
       roughjs: 4.5.2
 
-  /@visactor/vrender-kits/0.21.7-alpha.1:
-    resolution: {integrity: sha512-6i+cuvWA/vgAN/OBfiJYkuJzRDIm3zy4sRbWqeovOl1eAyFI/AFb2kd2PD5H0YAt1sThCYQQLC2+8QmQMESQ4Q==}
+  /@visactor/vrender-kits/0.21.9-alpha.1:
+    resolution: {integrity: sha512-VmdbSHRv4mk9CDwdb1+dcNaUh6A9ztgQKjuWNS2JTFEaUNlL9eXysbOkBrCYsg2G7D9VTkJQcZLjq+8OyQ/Ckg==}
     dependencies:
       '@resvg/resvg-js': 2.4.1
-      '@visactor/vrender-core': 0.21.7-alpha.1
+      '@visactor/vrender-core': 0.21.9-alpha.1
       '@visactor/vutils': 0.19.3
+      gifuct-js: 2.1.2
       roughjs: 4.5.2
     dev: false
 
diff --git a/docs/assets/demo/en/calendar/calendar-custom-layout.md b/docs/assets/demo/en/calendar/calendar-custom-layout.md
new file mode 100644
index 000000000..e4e47ae12
--- /dev/null
+++ b/docs/assets/demo/en/calendar/calendar-custom-layout.md
@@ -0,0 +1,82 @@
+---
+category: examples
+group: Calendar
+title: Calendar
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/calendar-weather.gif
+link: calendar/introduction
+option: Calendar#startDate
+---
+
+# Weather Calendar
+
+Cell custom content, implement weather calendar.
+
+## Key Configurations
+
+- `tableOptions` calendar table configuration (this configuration will be passed to the corresponding VTable instance for deep customization)
+
+## Code demo
+
+```javascript livedemo template=vtable
+// import * as VRender from '@visactor/vtable/es/vrender';
+
+const {
+  createGroup,
+  GifImage,
+  container,
+  gifImageModule,
+  gifImageCanvasPickModule
+} = VRender;
+
+const gifs = [
+  '/icons8-雨.gif',
+  '/icons8-夏季.gif',
+  '/icons8-多云兼雨.gif',
+  '/icons8-有风的天气.gif',
+  '/icons8-冬季.gif',
+  '/icons8-小雨2.gif',
+  '/icons8-瓢泼大雨.gif',
+  '/icons8-白天晴间多云.gif'
+];
+
+container.load(gifImageModule);
+container.load(gifImageCanvasPickModule);
+
+const calendar = new VTableCalendar.Calendar(document.getElementById(CONTAINER_ID), {
+  rangeDays: 20,
+  tableOptions: {
+    customLayout: args => {
+      const { table, row, col, rect } = args;
+      const record = table.getCellOriginRecord(col, row);
+      const { height, width } = rect ?? table.getCellRect(col, row);
+
+      const container = createGroup({
+        height,
+        width,
+        // fill: 'yellow',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexWrap: 'nowrap'
+      });
+
+      const gif = gifs[Math.floor(Math.random() * gifs.length)];
+      const image = new GifImage({
+        width: 50,
+        height: 50,
+        gifImage: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media' + gif
+      });
+
+      container.add(image);
+
+      return {
+        rootContainer: container,
+        renderDefault: true
+      };
+    }
+  }
+});
+
+window['calendar'] = calendar;
+```
diff --git a/docs/assets/demo/menu.json b/docs/assets/demo/menu.json
index 61e084e9c..87dfb6728 100644
--- a/docs/assets/demo/menu.json
+++ b/docs/assets/demo/menu.json
@@ -353,6 +353,13 @@
             "zh": "日历图自定义日程",
             "en": "Calendar Custom Event"
           }
+        },
+        {
+          "path": "calendar-custom-layout",
+          "title": {
+            "zh": "日历图自定义单元格",
+            "en": "Calendar Custom Layout"
+          }
         }
       ]
     },
diff --git a/docs/assets/demo/zh/calendar/calendar-custom-layout.md b/docs/assets/demo/zh/calendar/calendar-custom-layout.md
new file mode 100644
index 000000000..b735b8b0b
--- /dev/null
+++ b/docs/assets/demo/zh/calendar/calendar-custom-layout.md
@@ -0,0 +1,82 @@
+---
+category: examples
+group: Calendar
+title: Calendar
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/calendar-weather.gif
+link: calendar/introduction
+option: Calendar#startDate
+---
+
+# 天气日历图
+
+自定义单元格，实现天气日历图
+
+## 关键配置
+
+- `tableOptions` 日历表格的配置（这里的配置会被传给对应的VTable实例，用于深度自定义）
+
+## 代码演示
+
+```javascript livedemo template=vtable
+// import * as VRender from '@visactor/vtable/es/vrender';
+
+const {
+  createGroup,
+  GifImage,
+  container,
+  gifImageModule,
+  gifImageCanvasPickModule
+} = VRender;
+
+const gifs = [
+  '/icons8-雨.gif',
+  '/icons8-夏季.gif',
+  '/icons8-多云兼雨.gif',
+  '/icons8-有风的天气.gif',
+  '/icons8-冬季.gif',
+  '/icons8-小雨2.gif',
+  '/icons8-瓢泼大雨.gif',
+  '/icons8-白天晴间多云.gif'
+];
+
+container.load(gifImageModule);
+container.load(gifImageCanvasPickModule);
+
+const calendar = new VTableCalendar.Calendar(document.getElementById(CONTAINER_ID), {
+  rangeDays: 20,
+  tableOptions: {
+    customLayout: args => {
+      const { table, row, col, rect } = args;
+      const record = table.getCellOriginRecord(col, row);
+      const { height, width } = rect ?? table.getCellRect(col, row);
+
+      const container = createGroup({
+        height,
+        width,
+        // fill: 'yellow',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexWrap: 'nowrap'
+      });
+
+      const gif = gifs[Math.floor(Math.random() * gifs.length)];
+      const image = new GifImage({
+        width: 50,
+        height: 50,
+        gifImage: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media' + gif
+      });
+
+      container.add(image);
+
+      return {
+        rootContainer: container,
+        renderDefault: true
+      };
+    }
+  }
+});
+
+window['calendar'] = calendar;
+```
diff --git a/docs/assets/guide/en/calendar/calendar_custom_layout.md b/docs/assets/guide/en/calendar/calendar_custom_layout.md
new file mode 100644
index 000000000..29a9d3987
--- /dev/null
+++ b/docs/assets/guide/en/calendar/calendar_custom_layout.md
@@ -0,0 +1,69 @@
+# Calendar chart custom date cell
+
+Using the relevant custom capabilities provided by VTable, you can customize the content displayed in the cell. Through the configuration transfer of tableOptions, you can use all the custom cell capabilities supported by VTable. For example, when returning renderDefault: true, the custom content can be displayed together with the original date content in the cell, just like defining a VTable table to customize the content in the calendar chart cell.
+
+Here, the GIF image component provided by VRender is used, and a dynamic weather effect is drawn in each cell using customLayout:
+
+```javascript livedemo template=vtable
+// import * as VRender from '@visactor/vtable/es/vrender';
+
+const {
+  createGroup,
+  GifImage,
+  container,
+  gifImageModule,
+  gifImageCanvasPickModule
+} = VRender;
+
+const gifs = [
+  '/icons8-雨.gif',
+  '/icons8-夏季.gif',
+  '/icons8-多云兼雨.gif',
+  '/icons8-有风的天气.gif',
+  '/icons8-冬季.gif',
+  '/icons8-小雨2.gif',
+  '/icons8-瓢泼大雨.gif',
+  '/icons8-白天晴间多云.gif'
+];
+
+container.load(gifImageModule);
+container.load(gifImageCanvasPickModule);
+
+const calendarInstance = new VTableCalendar.Calendar(document.getElementById(CONTAINER_ID), {
+  rangeDays: 20,
+  tableOptions: {
+    customLayout: args => {
+      const { table, row, col, rect } = args;
+      const record = table.getCellOriginRecord(col, row);
+      const { height, width } = rect ?? table.getCellRect(col, row);
+
+      const container = createGroup({
+        height,
+        width,
+        // fill: 'yellow',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexWrap: 'nowrap'
+      });
+
+      const gif = gifs[Math.floor(Math.random() * gifs.length)];
+      const image = new GifImage({
+        width: 50,
+        height: 50,
+        gifImage: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media' + gif
+      });
+
+      container.add(image);
+
+      return {
+        rootContainer: container,
+        renderDefault: true
+      };
+    }
+  }
+});
+
+window['calendarInstance'] = calendarInstance;
+```
diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json
index 174b845c5..444448f99 100644
--- a/docs/assets/guide/menu.json
+++ b/docs/assets/guide/menu.json
@@ -206,6 +206,13 @@
             "zh": "日历图介绍",
             "en": "calendar introduction"
           }
+        },
+        {
+          "path": "calendar_custom_layout",
+          "title": {
+            "zh": "日历图自定义单元格",
+            "en": "calendar custom layout"
+          }
         }
       ]
     },
diff --git a/docs/assets/guide/zh/calendar/calendar_custom_layout.md b/docs/assets/guide/zh/calendar/calendar_custom_layout.md
new file mode 100644
index 000000000..91af318db
--- /dev/null
+++ b/docs/assets/guide/zh/calendar/calendar_custom_layout.md
@@ -0,0 +1,69 @@
+# 日历图自定义日期单元格
+
+使用VTable提供的相关自定义能力，可以定制单元格内展示的内容。通过tableOptions的配置传递，可以使用VTable支持的所有自定义单元格能力，以customLayout自定义函数来说，在返回renderDefault: true时，就可以将自定义内容和单元格里原有的日期内容一起显示，像定义VTable表格一样来定制日历图单元格中的内容。
+
+这里使用VRender提供的GIF图组件，使用customLayout在每个单元格内绘制了一个动态天气效果：
+
+```javascript livedemo template=vtable
+// import * as VRender from '@visactor/vtable/es/vrender';
+
+const {
+  createGroup,
+  GifImage,
+  container,
+  gifImageModule,
+  gifImageCanvasPickModule
+} = VRender;
+
+const gifs = [
+  '/icons8-雨.gif',
+  '/icons8-夏季.gif',
+  '/icons8-多云兼雨.gif',
+  '/icons8-有风的天气.gif',
+  '/icons8-冬季.gif',
+  '/icons8-小雨2.gif',
+  '/icons8-瓢泼大雨.gif',
+  '/icons8-白天晴间多云.gif'
+];
+
+container.load(gifImageModule);
+container.load(gifImageCanvasPickModule);
+
+const calendarInstance = new VTableCalendar.Calendar(document.getElementById(CONTAINER_ID), {
+  rangeDays: 20,
+  tableOptions: {
+    customLayout: args => {
+      const { table, row, col, rect } = args;
+      const record = table.getCellOriginRecord(col, row);
+      const { height, width } = rect ?? table.getCellRect(col, row);
+
+      const container = createGroup({
+        height,
+        width,
+        // fill: 'yellow',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexWrap: 'nowrap'
+      });
+
+      const gif = gifs[Math.floor(Math.random() * gifs.length)];
+      const image = new GifImage({
+        width: 50,
+        height: 50,
+        gifImage: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media' + gif
+      });
+
+      container.add(image);
+
+      return {
+        rootContainer: container,
+        renderDefault: true
+      };
+    }
+  }
+});
+
+window['calendarInstance'] = calendarInstance;
+```
diff --git "a/packages/vtable-calendar/demo/gif/icons8-\345\206\254\345\255\243.gif" "b/packages/vtable-calendar/demo/gif/icons8-\345\206\254\345\255\243.gif"
new file mode 100644
index 000000000..a0ed97fab
Binary files /dev/null and "b/packages/vtable-calendar/demo/gif/icons8-\345\206\254\345\255\243.gif" differ
diff --git "a/packages/vtable-calendar/demo/gif/icons8-\345\244\217\345\255\243.gif" "b/packages/vtable-calendar/demo/gif/icons8-\345\244\217\345\255\243.gif"
new file mode 100644
index 000000000..beb235a43
Binary files /dev/null and "b/packages/vtable-calendar/demo/gif/icons8-\345\244\217\345\255\243.gif" differ
diff --git "a/packages/vtable-calendar/demo/gif/icons8-\345\244\232\344\272\221\345\205\274\351\233\250.gif" "b/packages/vtable-calendar/demo/gif/icons8-\345\244\232\344\272\221\345\205\274\351\233\250.gif"
new file mode 100644
index 000000000..6c75de131
Binary files /dev/null and "b/packages/vtable-calendar/demo/gif/icons8-\345\244\232\344\272\221\345\205\274\351\233\250.gif" differ
diff --git "a/packages/vtable-calendar/demo/gif/icons8-\345\260\217\351\233\2502.gif" "b/packages/vtable-calendar/demo/gif/icons8-\345\260\217\351\233\2502.gif"
new file mode 100644
index 000000000..943050fd1
Binary files /dev/null and "b/packages/vtable-calendar/demo/gif/icons8-\345\260\217\351\233\2502.gif" differ
diff --git "a/packages/vtable-calendar/demo/gif/icons8-\346\234\211\351\243\216\347\232\204\345\244\251\346\260\224.gif" "b/packages/vtable-calendar/demo/gif/icons8-\346\234\211\351\243\216\347\232\204\345\244\251\346\260\224.gif"
new file mode 100644
index 000000000..c64983a96
Binary files /dev/null and "b/packages/vtable-calendar/demo/gif/icons8-\346\234\211\351\243\216\347\232\204\345\244\251\346\260\224.gif" differ
diff --git "a/packages/vtable-calendar/demo/gif/icons8-\347\223\242\346\263\274\345\244\247\351\233\250.gif" "b/packages/vtable-calendar/demo/gif/icons8-\347\223\242\346\263\274\345\244\247\351\233\250.gif"
new file mode 100644
index 000000000..f1ec182f7
Binary files /dev/null and "b/packages/vtable-calendar/demo/gif/icons8-\347\223\242\346\263\274\345\244\247\351\233\250.gif" differ
diff --git "a/packages/vtable-calendar/demo/gif/icons8-\347\231\275\345\244\251\346\231\264\351\227\264\345\244\232\344\272\221.gif" "b/packages/vtable-calendar/demo/gif/icons8-\347\231\275\345\244\251\346\231\264\351\227\264\345\244\232\344\272\221.gif"
new file mode 100644
index 000000000..79c2b4688
Binary files /dev/null and "b/packages/vtable-calendar/demo/gif/icons8-\347\231\275\345\244\251\346\231\264\351\227\264\345\244\232\344\272\221.gif" differ
diff --git "a/packages/vtable-calendar/demo/gif/icons8-\351\233\250.gif" "b/packages/vtable-calendar/demo/gif/icons8-\351\233\250.gif"
new file mode 100644
index 000000000..a4b7fac6e
Binary files /dev/null and "b/packages/vtable-calendar/demo/gif/icons8-\351\233\250.gif" differ
diff --git a/packages/vtable-calendar/demo/list/custom-weather.ts b/packages/vtable-calendar/demo/list/custom-weather.ts
new file mode 100644
index 000000000..c4eda1325
--- /dev/null
+++ b/packages/vtable-calendar/demo/list/custom-weather.ts
@@ -0,0 +1,63 @@
+import { Calendar } from '../../src';
+import {
+  createGroup,
+  GifImage,
+  container,
+  gifImageModule,
+  gifImageCanvasPickModule
+} from '@visactor/vtable/es/vrender';
+const CONTAINER_ID = 'vTable';
+
+const gifs = [
+  '/gif/icons8-雨.gif',
+  '/gif/icons8-夏季.gif',
+  '/gif/icons8-多云兼雨.gif',
+  '/gif/icons8-有风的天气.gif',
+  '/gif/icons8-冬季.gif',
+  '/gif/icons8-小雨2.gif',
+  '/gif/icons8-瓢泼大雨.gif',
+  '/gif/icons8-白天晴间多云.gif'
+];
+
+container.load(gifImageModule);
+container.load(gifImageCanvasPickModule);
+
+export function createTable() {
+  const calendar = new Calendar(document.getElementById(CONTAINER_ID), {
+    rangeDays: 20,
+    tableOptions: {
+      customLayout: args => {
+        const { table, row, col, rect } = args;
+        const record = table.getCellOriginRecord(col, row);
+        const { height, width } = rect ?? table.getCellRect(col, row);
+
+        const container = createGroup({
+          height,
+          width,
+          // fill: 'yellow',
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexWrap: 'nowrap'
+        });
+
+        const gif = gifs[Math.floor(Math.random() * gifs.length)];
+        const image = new GifImage({
+          width: 50,
+          height: 50,
+          gifImage: gif
+        });
+
+        container.add(image);
+
+        return {
+          rootContainer: container,
+          renderDefault: true
+        };
+      }
+    }
+  });
+
+  window.calendar = calendar;
+}
diff --git a/packages/vtable-calendar/demo/menu.ts b/packages/vtable-calendar/demo/menu.ts
index cdd0de286..00e9f067e 100644
--- a/packages/vtable-calendar/demo/menu.ts
+++ b/packages/vtable-calendar/demo/menu.ts
@@ -13,6 +13,10 @@ export const menus = [
       {
         path: 'list',
         name: 'edit-demo'
+      },
+      {
+        path: 'list',
+        name: 'custom-weather'
       }
     ]
   }
diff --git a/packages/vtable-calendar/src/month-calendar.ts b/packages/vtable-calendar/src/month-calendar.ts
index 23c7b3d1c..244dfe697 100644
--- a/packages/vtable-calendar/src/month-calendar.ts
+++ b/packages/vtable-calendar/src/month-calendar.ts
@@ -105,6 +105,9 @@ export class Calendar extends EventTarget {
 
     tableInstance.addEventListener('scroll', () => {
       const record: DateRecord = this.getYearAndMonth();
+      if (!record) {
+        return;
+      }
       if (!record.Sun) {
         // top
         this._updateMonthCustomStyle(this.startDate.getFullYear(), this.startDate.getMonth());
diff --git a/packages/vtable-calendar/src/table/table-option.ts b/packages/vtable-calendar/src/table/table-option.ts
index a86c157ea..93dbfdb34 100644
--- a/packages/vtable-calendar/src/table/table-option.ts
+++ b/packages/vtable-calendar/src/table/table-option.ts
@@ -4,6 +4,7 @@ import type { DateRecord, DateRecordKeys } from '../date-util';
 import { defaultDayTitles, getMonthString, getWeekdayString } from '../date-util';
 import { calendarCustomLayout } from '../custom/custom-layout';
 import { merge } from '@visactor/vutils';
+import { addDays, isSameDay } from 'date-fns';
 
 export function createTableOption(
   week: DateRecordKeys[],
@@ -16,11 +17,7 @@ export function createTableOption(
       title: item,
       // width: columnWidth ?? 140,
       fieldFormat: (record: DateRecord) => {
-        if (
-          record.year === currentDate.getFullYear() &&
-          record.month === currentDate.getMonth() &&
-          record[item] === currentDate.getDate()
-        ) {
+        if (isSameDay(addDays(new Date(record.year, record.month, record.Sun), index), currentDate)) {
           return `${record[item]}\nToday`;
         } else if (record[item] === 1) {
           const monthIndex = item === 'Sun' ? record.month : record.month + 1;
@@ -29,7 +26,7 @@ export function createTableOption(
         }
         return record[item];
       },
-      customLayout: calendarCustomLayout
+      customLayout: config.tableOptions?.customLayout ?? calendarCustomLayout
     };
   });
 
@@ -63,9 +60,10 @@ export function createTableOption(
               const month = record.Sun > dataValue ? record.month + 1 : record.month;
               const year = record.month === 11 && record.Sun > dataValue ? record.year + 1 : record.year;
               if (
-                year === currentDate.getFullYear() &&
-                month === currentDate.getMonth() &&
-                date === currentDate.getDate()
+                // year === currentDate.getFullYear() &&
+                // month === currentDate.getMonth() &&
+                // date === currentDate.getDate()
+                isSameDay(addDays(new Date(record.year, record.month, record.Sun), col), currentDate)
               ) {
                 return '#f0f0f0';
               }
diff --git a/packages/vtable/package.json b/packages/vtable/package.json
index 63223002d..4516346eb 100644
--- a/packages/vtable/package.json
+++ b/packages/vtable/package.json
@@ -52,9 +52,9 @@
   },
   "dependencies": {
     "@visactor/vtable-editors": "workspace:*",
-    "@visactor/vrender-core": "0.21.7-alpha.1",
-    "@visactor/vrender-kits": "0.21.7-alpha.1",
-    "@visactor/vrender-components": "0.21.7-alpha.1",
+    "@visactor/vrender-core": "0.21.9-alpha.1",
+    "@visactor/vrender-kits": "0.21.9-alpha.1",
+    "@visactor/vrender-components": "0.21.9-alpha.1",
     "@visactor/vutils": "~0.18.14",
     "@visactor/vscale": "~0.18.1",
     "@visactor/vdataset": "~0.18.1",
diff --git a/packages/vtable/src/index.ts b/packages/vtable/src/index.ts
index 66b018349..9fc8b7745 100644
--- a/packages/vtable/src/index.ts
+++ b/packages/vtable/src/index.ts
@@ -50,6 +50,8 @@ export { getDataCellPath } from './tools/get-data-path';
 export * from './render/jsx';
 export { getTargetCell } from './event/util';
 
+export { Icon } from './scenegraph/graphic/icon';
+
 // export * as VRender from './vrender';
 // import * as VRender from './vrender';
 
@@ -105,6 +107,7 @@ export {
   graphicUtil,
   setCustomAlphabetCharSet,
   restoreMeasureText
+
   // VRender // should use import {xxx} from '@visactor/vtable/es/vrender'
 };
 
diff --git a/packages/vtable/src/scenegraph/graphic/icon.ts b/packages/vtable/src/scenegraph/graphic/icon.ts
index 731240e9c..fad611365 100644
--- a/packages/vtable/src/scenegraph/graphic/icon.ts
+++ b/packages/vtable/src/scenegraph/graphic/icon.ts
@@ -57,7 +57,7 @@ export class Icon extends Image {
 
   loadGif() {
     this.playing = false;
-    ResourceLoader.GetFile((this.attribute as any).gif + '?role=gif', 'arrayBuffer') // ?role=gif: hack for ResourceLoader cache
+    ResourceLoader.GetFile((this.attribute as any).gif + '?role=gif' + `&radom=${Math.random()}`, 'arrayBuffer') // ?role=gif: hack for ResourceLoader cache
       .then((res: ArrayBuffer) => {
         const gif = parseGIF(res);
         const frames = decompressFrames(gif, true);