Merge pull request #227 from LingYe-007/dev_calendar_up

Dev calendar up
easysoft · Oct 31, 2024 · fb6ec8b · fb6ec8b
2 parents 435bc77 + f4f188e
commit fb6ec8b
Show file tree

Hide file tree

Showing 34 changed files with 1,176 additions and 22 deletions.
diff --git a/dev/zui-dev/package.json b/dev/zui-dev/package.json
@@ -0,0 +1,7 @@
+{
+    "name": "zui-dev",
+    "description": "ZUI dev helpers",
+    "version": "0.0.1",
+    "type": "module",
+    "main": "src/main.ts"
+}
diff --git a/dev/zui-dev/src/dev.ts b/dev/zui-dev/src/dev.ts
@@ -0,0 +1,26 @@
+export type PageLoadListener = () => void;
+export type PageUpdateListener = () => void;
+
+export function onPageLoad(listener: PageLoadListener) {
+    const isLoaded = document.getElementById('libPage')?.classList.contains('is-loaded');
+    if (isLoaded) {
+        listener();
+    } else {
+        document.addEventListener('dev-page-load', listener);
+    }
+}
+
+export function onPageUpdate(listener: PageUpdateListener) {
+    onPageLoad(listener);
+    document.addEventListener('dev-page-update', listener);
+}
+
+Object.assign(globalThis, {
+    onPageLoad,
+    onPageUpdate,
+});
+
+declare global {
+    function onPageLoad(listener: PageLoadListener): void;
+    function onPageUpdate(listener: PageUpdateListener): void;
+}
diff --git a/dev/zui-dev/src/main.ts b/dev/zui-dev/src/main.ts
@@ -0,0 +1 @@
+export * from './dev';
diff --git a/lib/calendar/README.md b/lib/calendar/README.md
@@ -0,0 +1,59 @@
+# Calendar 日历
+
+用于展示和管理事件的日历组件。它允许用户查看日期、添加特定日期的事件来安排日程。提供可配置的事件与日历集。
+
+## 基本使用
+
+使用HTML标签 `<div>` 作为容器来实现日历组件，可使用zui-create-calendar、new zui.Calendar()等指令来配置日历组件。
+
+## 默认样式
+
+<div class="calendar-normal"></div>
+
+## 自定义事件与事件集
+
+ <!-- 日历集和事件在日历中都可以进行自定义配置, 日历集和事件id都需要唯一，否则会导致日历显示异常。
+ 事件与事件集的配置项如下： -->
+ 事件是在日历中添加的具体事件，可自定义事件的颜色、文字、日期、拖拽回调函数、点击回调函数等。事件集是一组事件的集合与事件唯一关联。事件、事件集id都需要唯一。任意一个事件可进行拖拽来修改事件时间,并会触发回调函数。左侧日历集可决定属于该日日历集的事件是否显示。
+<div class='calendar-event'></div>
+
+## 可配置项
+
+### 日历:
+| 参数                   | 类型                                                     | 作用                                       |
+|----------------------|:------------------------------------------------------:|------------------------------------------|
+| `date`               | Date                                                   | 当前日期                                   |
+| `calendarEvents`     | CalendarEvent[]                                        | 当前的日历事件数组                        |
+| `calendarEventGroups`| CalendarEventGroup[]                                   | 当前的事件组数组                          |
+| `mode`               | 'day' \| 'week' \| 'year'                             | 日历的显示模式                            |
+| `showCalendarGroup`  | boolean                                               | 是否显示日历事件组                       |
+| `shrinkFreeWeekend`  | boolean                                               | 是否压缩空闲周末                          |
+| `onDateClick`        | (date: Date) => void                                  | 日期点击时的回调函数                      |
+| `onDragChange`       | (newState: DraggableState, oldState: DraggableState) => void | 拖动状态变化时的回调函数          |
+| `onEventClick`       | (e: CalendarEvent) => void                            | 事件点击时的回调函数                     |
+| `maxVisibleEvents`   | number                                                | 每个日期最大可见事件数量                  |
+                   |
+
+
+### 事件属性:
+calendarEvent:
+
+| 参数       | 类型           | 作用  |
+| ------------- |:-------------:| ----- |
+| `id`              | string | 事件的唯一标识符 |
+| `title`         | string | 事件的标题 |
+| `calendarEventGroup`      | string | 事件所属的事件组ID |
+| `date`      | Date | 事件的日期 |
+| `description`           | string | 事件的描述（可选）  |
+
+### 事件集:
+CalendarEventGroups:
+
+| 参数       | 类型           | 作用  |
+| ------------- |:-------------:| ----- |
+| `id`              | string | 事件组的唯一标识符 |
+| `title`         | string | 事件组的标题（可选） |
+| `color`         | string | 事件组的颜色（可选） |
+| `checked`       | boolean | 事件组是否被选中（可选） |
+
+
diff --git a/lib/calendar/dev.ts b/lib/calendar/dev.ts
@@ -0,0 +1,121 @@
+import 'preact/debug';
+import 'zui-dev';
+import {Calendar} from './src/main';
+
+onPageLoad(() => {
+    const calendarNormal = new Calendar('.calendar-normal', {});
+    const calendarEvent = new Calendar('.calendar-event', {
+        maxVisibleEvents:2,
+        shrinkFreeWeekend:true,
+        calendarEvents:[{
+            id: '1',
+            title: '观看天花板',
+            calendarEventGroup: '1',
+            date:new Date(2024, 8, 25, 9, 29),
+            description: '观看天花板',
+        },
+        {
+            id: '2',
+            title: '和绿巨人睡觉',
+            calendarEventGroup: '2',
+            date:new Date(2024, 8, 26, 7, 12, 47),
+            description: '和绿巨人睡觉',
+        },
+        {
+            id: '3',
+            title: '和路人乙捶打',
+            calendarEventGroup: '3',
+            date:new Date(2024, 8, 27, 7, 30, 30),
+            description: '和路人乙捶打',
+        },
+        {
+            id: '4',
+            title: '自言自语',
+            calendarEventGroup: '4',
+            date:new Date(2024, 8, 28, 1, 58, 30),
+            description: '自言自语',
+        },
+        {
+            id: '5',
+            title: '观望天花板',
+            calendarEventGroup: '5',
+            date:new Date(2024, 8, 29, 7, 30, 30),
+            description: '观望天花板',
+        },
+        {
+            id: '6',
+            title: 'event3',
+            calendarEventGroup: '1',
+            date:new Date(2024, 7, 9),
+            description: '你好呀',
+        },
+        ],
+        calendarEventGroups:[{
+            id: '1',
+            title: 'event set 1',
+            color: '#f39988'}, {
+            id: '2',
+            title: 'event set 2',
+            color: '#d4a785'}, {id: '3', title: 'event set 3', color: '#29bcd2'},
+        {id: '4', title: 'event set 4', color: '#7ec67e'},
+        {id: '5', title: 'event set 5', color: '#f1bd73'}]});
+    const calendar = new Calendar('.calendar', {
+        maxVisibleEvents:2,
+        shrinkFreeWeekend:true,
+        calendarEvents:[{
+            id: '1',
+            title: '观看天花板',
+            calendarEventGroup: '1',
+            date:new Date(2024, 8, 25, 9, 29),
+            description: '观看天花板',
+        },
+        {
+            id: '2',
+            title: '和绿巨人睡觉',
+            calendarEventGroup: '2',
+            date:new Date(2024, 8, 26, 7, 12, 47),
+            description: '和绿巨人睡觉',
+        },
+        {
+            id: '3',
+            title: '和路人乙捶打',
+            calendarEventGroup: '3',
+            date:new Date(2024, 8, 27, 7, 30, 30),
+            description: '和路人乙捶打',
+        },
+        {
+            id: '4',
+            title: '自言自语',
+            calendarEventGroup: '4',
+            date:new Date(2024, 8, 28, 1, 58, 30),
+            description: '自言自语',
+        },
+        {
+            id: '5',
+            title: '观望天花板',
+            calendarEventGroup: '5',
+            date:new Date(2024, 8, 29, 7, 30, 30),
+            description: '观望天花板',
+        },
+        {
+            id: '6',
+            title: 'event3',
+            calendarEventGroup: '1',
+            date:new Date(2024, 7, 9),
+            description: '你好呀',
+        },
+        ],
+        calendarEventGroups:[{
+            id: '1',
+            title: 'event set 1',
+            color: '#f39988'}, {
+            id: '2',
+            title: 'event set 2',
+            color: '#d4a785'}, {id: '3', title: 'event set 3', color: '#29bcd2'},
+        {id: '4', title: 'event set 4', color: '#7ec67e'},
+        {id: '5', title: 'event set 5', color: '#f1bd73'}]});
+
+    console.log('> calendar-normal instance created', calendarNormal);
+    console.log('> calendar-event instance created', calendarEvent);
+    console.log('> calendar instance created', calendar);
+});
diff --git a/lib/calendar/docs/lib/components/index.md b/lib/calendar/docs/lib/components/index.md
@@ -0,0 +1,59 @@
+# Calendar 日历
+
+用于展示和管理事件的日历组件。它允许用户查看日期、添加特定日期的事件来安排日程。提供可配置的事件与日历集。
+
+## 基本使用
+
+使用HTML标签 `<div>` 作为容器来实现日历组件，可使用zui-create-calendar、new zui.Calendar()等指令来配置日历组件。
+
+## 默认样式
+
+<div class="calendar-normal"></div>
+
+## 自定义事件与事件集
+
+ <!-- 日历集和事件在日历中都可以进行自定义配置, 日历集和事件id都需要唯一，否则会导致日历显示异常。
+ 事件与事件集的配置项如下： -->
+ 事件是在日历中添加的具体事件，可自定义事件的颜色、文字、日期、拖拽回调函数、点击回调函数等。事件集是一组事件的集合与事件唯一关联。事件、事件集id都需要唯一。任意一个事件可进行拖拽来修改事件时间,并会触发回调函数。左侧日历集可决定属于该日日历集的事件是否显示。
+<div class='calendar-event'></div>
+
+## 可配置项
+
+### 日历:
+| 参数                   | 类型                                                     | 作用                                       |
+|----------------------|:------------------------------------------------------:|------------------------------------------|
+| `date`               | Date                                                   | 当前日期                                   |
+| `calendarEvents`     | CalendarEvent[]                                        | 当前的日历事件数组                        |
+| `calendarEventGroups`| CalendarEventGroup[]                                   | 当前的事件组数组                          |
+| `mode`               | 'day' \| 'week' \| 'year'                             | 日历的显示模式                            |
+| `showCalendarGroup`  | boolean                                               | 是否显示日历事件组                       |
+| `shrinkFreeWeekend`  | boolean                                               | 是否压缩空闲周末                          |
+| `onDateClick`        | (date: Date) => void                                  | 日期点击时的回调函数                      |
+| `onDragChange`       | (newState: DraggableState, oldState: DraggableState) => void | 拖动状态变化时的回调函数          |
+| `onEventClick`       | (e: CalendarEvent) => void                            | 事件点击时的回调函数                     |
+| `maxVisibleEvents`   | number                                                | 每个日期最大可见事件数量                  |
+                   |
+
+
+### 事件属性:
+calendarEvent:
+
+| 参数       | 类型           | 作用  |
+| ------------- |:-------------:| ----- |
+| `id`              | string | 事件的唯一标识符 |
+| `title`         | string | 事件的标题 |
+| `calendarEventGroup`      | string | 事件所属的事件组ID |
+| `date`      | Date | 事件的日期 |
+| `description`           | string | 事件的描述（可选）  |
+
+### 事件集:
+CalendarEventGroups:
+
+| 参数       | 类型           | 作用  |
+| ------------- |:-------------:| ----- |
+| `id`              | string | 事件组的唯一标识符 |
+| `title`         | string | 事件组的标题（可选） |
+| `color`         | string | 事件组的颜色（可选） |
+| `checked`       | boolean | 事件组是否被选中（可选） |
+
+
diff --git a/lib/calendar/package.json b/lib/calendar/package.json
@@ -0,0 +1,37 @@
+{
+    "name": "@zui/calendar",
+    "description": "ZUI Calendar",
+    "version": "0.0.1",
+    "keywords": [
+        "js",
+        "cs",
+        "zui:component"
+    ],
+    "main": "src/main.ts",
+    "module": "src/main.ts",
+    "browser": "src/main.ts",
+    "dependencies": {
+        "@zui/core": "workspace:^0.0.1",
+        "@zui/helpers": "workspace:^0.0.1"
+    },
+    "files": [
+        "./src/**/*"
+    ],
+    "devDependencies": {
+        "zui-dev": "workspace:^0.0.1"
+    },
+    "zui": {
+        "type": "component",
+        "displayName": "日历",
+        "notReady": true,
+        "contributes": {
+            "css": [
+                "class",
+                "var"
+            ],
+            "js": [
+                "component"
+            ]
+        }
+    }
+}