Merge pull request #3264 from VisActor/feat/calendar-gif

feat: add vtable-calendar gif demo

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"
+}

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;
+```

docs/assets/demo/menu.json

@@ -353,6 +353,13 @@
             "zh": "日历图自定义日程",
             "en": "Calendar Custom Event"
           }
+        },
+        {
+          "path": "calendar-custom-layout",
+          "title": {
+            "zh": "日历图自定义单元格",
+            "en": "Calendar Custom Layout"
+          }
         }
       ]
     },

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;
+```

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;
+```

docs/assets/guide/menu.json

@@ -206,6 +206,13 @@
             "zh": "日历图介绍",
             "en": "calendar introduction"
           }
+        },
+        {
+          "path": "calendar_custom_layout",
+          "title": {
+            "zh": "日历图自定义单元格",
+            "en": "calendar custom layout"
+          }
         }
       ]
     },