Skip to content

Commit b27cc49

Browse files
catousecatouse
committed
* calendar: simplify calendar initialization by consolidating event configurations and enhancing the example setup, improving usability and clarity for developers.
1 parent 904bf1c commit b27cc49

2 files changed

Lines changed: 26 additions & 170 deletions

File tree

‎lib/calendar/README.md‎

Lines changed: 4 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,7 @@
11
# Calendar 日历
22

3-
用于展示和管理事件的日历组件。它允许用户查看日期、添加特定日期的事件来安排日程。提供可配置的事件与日历集。
3+
## 示例
44

5-
## 基本使用
6-
7-
使用HTML标签 `<div>` 作为容器来实现日历组件，可使用zui-create-calendar、new zui.Calendar()等指令来配置日历组件。
8-
9-
## 默认样式
10-
11-
<div class="calendar-normal"></div>
12-
13-
## 自定义事件与事件集
14-
15-
<!-- 日历集和事件在日历中都可以进行自定义配置, 日历集和事件id都需要唯一，否则会导致日历显示异常。
16-
事件与事件集的配置项如下： -->
17-
事件是在日历中添加的具体事件，可自定义事件的颜色、文字、日期、拖拽回调函数、点击回调函数等。事件集是一组事件的集合与事件唯一关联。事件、事件集id都需要唯一。任意一个事件可进行拖拽来修改事件时间,并会触发回调函数。左侧日历集可决定属于该日日历集的事件是否显示。
18-
<div class='calendar-event'></div>
19-
20-
## 可配置项
21-
22-
### 日历
23-
24-
| 参数 | 类型 | 作用 |
25-
|----------------------|:------------------------------------------------------:|------------------------------------------|
26-
| `date` | Date | 当前日期 |
27-
| `calendarEvents` | CalendarEvent[] | 当前的日历事件数组 |
28-
| `calendarEventGroups`| CalendarEventGroup[] | 当前的事件组数组 |
29-
| `mode` | 'day' \| 'week' \| 'year' | 日历的显示模式 |
30-
| `showCalendarGroup` | boolean | 是否显示日历事件组 |
31-
| `shrinkFreeWeekend` | boolean | 是否压缩空闲周末 |
32-
| `onDateClick` | (date: Date) => void | 日期点击时的回调函数 |
33-
| `onDragChange` | (newState: DraggableState, oldState: DraggableState) => void | 拖动状态变化时的回调函数 |
34-
| `onEventClick` | (e: CalendarEvent) => void | 事件点击时的回调函数 |
35-
| `maxVisibleEvents` | number | 每个日期最大可见事件数量 |
36-
37-
|
38-
39-
### 事件属性
40-
41-
calendarEvent:
42-
43-
| 参数 | 类型 | 作用 |
44-
| ------------- |:-------------:| ----- |
45-
| `id` | string | 事件的唯一标识符 |
46-
| `title` | string | 事件的标题 |
47-
| `calendarEventGroup` | string | 事件所属的事件组ID |
48-
| `date` | Date | 事件的日期 |
49-
| `description` | string | 事件的描述（可选） |
50-
51-
### 事件集
52-
53-
CalendarEventGroups:
54-
55-
| 参数 | 类型 | 作用 |
56-
| ------------- |:-------------:| ----- |
57-
| `id` | string | 事件组的唯一标识符 |
58-
| `title` | string | 事件组的标题（可选） |
59-
| `color` | string | 事件组的颜色（可选） |
60-
| `checked` | boolean | 事件组是否被选中（可选） |
5+
```html:example
6+
<div id="calendar"></div>
7+
```

‎lib/calendar/dev.ts‎

Lines changed: 22 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,30 @@
11
import 'preact/debug';
22
import 'zui-dev';
3+
import '@zui/button';
4+
import '@zui/toolbar';
5+
import '@zui/list';
6+
import '@zentao/icons';
37
import {Calendar} from './src/main';
8+
import events from './dev/events-example';
49

510
onPageLoad(() => {
6-
const calendarNormal = new Calendar('.calendar-normal', {});
7-
const calendarEvent = new Calendar('.calendar-event', {
8-
maxVisibleEvents: 2,
9-
shrinkFreeWeekend: true,
10-
calendarEvents: [{
11-
id: '1',
12-
title: '观看天花板',
13-
calendarEventGroup: '1',
14-
date: new Date(2024, 8, 25, 9, 29),
15-
description: '观看天花板',
16-
},
17-
{
18-
id: '2',
19-
title: '和绿巨人睡觉',
20-
calendarEventGroup: '2',
21-
date: new Date(2024, 8, 26, 7, 12, 47),
22-
description: '和绿巨人睡觉',
23-
},
24-
{
25-
id: '3',
26-
title: '和路人乙捶打',
27-
calendarEventGroup: '3',
28-
date: new Date(2024, 8, 27, 7, 30, 30),
29-
description: '和路人乙捶打',
30-
},
31-
{
32-
id: '4',
33-
title: '自言自语',
34-
calendarEventGroup: '4',
35-
date: new Date(2024, 8, 28, 1, 58, 30),
36-
description: '自言自语',
37-
},
38-
{
39-
id: '5',
40-
title: '观望天花板',
41-
calendarEventGroup: '5',
42-
date: new Date(2024, 8, 29, 7, 30, 30),
43-
description: '观望天花板',
44-
},
45-
{
46-
id: '6',
47-
title: 'event3',
48-
calendarEventGroup: '1',
49-
date: new Date(2024, 7, 9),
50-
description: '你好呀',
51-
},
11+
const calendar = new Calendar('#calendar', {
12+
headerTitle: 'My Todo Calendar',
13+
headerActions: [
14+
{text: 'Export'},
15+
{text: 'Print', btnType: 'primary'},
5216
],
53-
calendarEventGroups: [{
54-
id: '1',
55-
title: 'event set 1',
56-
color: '#f39988'}, {
57-
id: '2',
58-
title: 'event set 2',
59-
color: '#d4a785'}, {id: '3', title: 'event set 3', color: '#29bcd2'},
60-
{id: '4', title: 'event set 4', color: '#7ec67e'},
61-
{id: '5', title: 'event set 5', color: '#f1bd73'}]});
62-
const calendar = new Calendar('.calendar', {
63-
maxVisibleEvents: 2,
64-
shrinkFreeWeekend: true,
65-
calendarEvents: [{
66-
id: '1',
67-
title: '观看天花板',
68-
calendarEventGroup: '1',
69-
date: new Date(2024, 8, 25, 9, 29),
70-
description: '观看天花板',
71-
},
72-
{
73-
id: '2',
74-
title: '和绿巨人睡觉',
75-
calendarEventGroup: '2',
76-
date: new Date(2024, 8, 26, 7, 12, 47),
77-
description: '和绿巨人睡觉',
78-
},
79-
{
80-
id: '3',
81-
title: '和路人乙捶打',
82-
calendarEventGroup: '3',
83-
date: new Date(2024, 8, 27, 7, 30, 30),
84-
description: '和路人乙捶打',
85-
},
86-
{
87-
id: '4',
88-
title: '自言自语',
89-
calendarEventGroup: '4',
90-
date: new Date(2024, 8, 28, 1, 58, 30),
91-
description: '自言自语',
92-
},
93-
{
94-
id: '5',
95-
title: '观望天花板',
96-
calendarEventGroup: '5',
97-
date: new Date(2024, 8, 29, 7, 30, 30),
98-
description: '观望天花板',
99-
},
100-
{
101-
id: '6',
102-
title: 'event3',
103-
calendarEventGroup: '1',
104-
date: new Date(2024, 7, 9),
105-
description: '你好呀',
106-
},
17+
categories: [
18+
{
19+
id: 'DEFAULT',
20+
name: '默认日历',
21+
color: 'red',
22+
},
10723
],
108-
calendarEventGroups: [{
109-
id: '1',
110-
title: 'event set 1',
111-
color: '#f39988'}, {
112-
id: '2',
113-
title: 'event set 2',
114-
color: '#d4a785'}, {id: '3', title: 'event set 3', color: '#29bcd2'},
115-
{id: '4', title: 'event set 4', color: '#7ec67e'},
116-
{id: '5', title: 'event set 5', color: '#f1bd73'}]});
117-
118-
console.log('> calendar-normal instance created', calendarNormal);
119-
console.log('> calendar-event instance created', calendarEvent);
120-
console.log('> calendar instance created', calendar);
24+
events,
25+
onClickEvent: (event, category, mouseEvent) => {
26+
console.log('> onClickEvent', {event, category, mouseEvent});
27+
},
28+
});
29+
console.log('> calendar', calendar);
12130
});

0 commit comments

Comments
 (0)