青梧 UI

Calendar 弹出选择

输入框 + 日历图标触发 → 弹出面板,农历/节气/节日/黄历宜忌详情侧栏,支持三种详情悬浮方式(inside 面板内覆盖 / left 左展开 / right 右展开),键盘导航。

操作日志
暂无日志,操作日历后将在此显示
import { Calendar } from "@qingwu-ui/calendar";
import "@qingwu-ui/calendar/style.css";

function CalendarPicker() {
  const rootRef = useRef<HTMLDivElement>(null);
  const calRef = useRef<Calendar | null>(null);

  useEffect(() => {
    const el = rootRef.current;
    if (!el) return;
    calRef.current = new Calendar(el, {
  showDetailPanel: true,    // 开启右侧详情面板
  holidays: {
    holidays: ["2026-10-01","2026-10-02","2026-10-03","2026-10-04","2026-10-05","2026-10-06","2026-10-07"],
    workdays: ["2026-10-10","2026-10-11"],
  },
    });
    return () => calRef.current?.destroy();
  }, []);

  return <div ref={rootRef} className="qw-cal-root" />;
}

详情悬浮方式

detailPosition 控制详情面板的悬浮方式:right 右侧展开(面板加宽)/ left 左侧展开 / inside 面板内覆盖浮层(不改变面板宽度)。点击各日历中的日期查看效果。

right · 右侧展开
left · 左侧展开
inside · 面板内覆盖

日格结构

日历月视图的网格结构。每个日格包含公历数字、农历日期、节日/节气标注、休/工角标。

2026 年 8 月丙午年·七月
27廿三
28廿四
29廿五
30廿六
31廿七
1建军
2十九
7二十
8廿一
9廿二
10廿三
11廿四
12廿五
13廿六
14廿七
15廿八
16廿九
17三十
18初一
19初二
20初三
21初四
22初五
23初六
24初七
25初八
26初九
27初十
28十1
29十2
30十3
31十4
1十-26
2十-25
3十-24
图例: = 休息日 · = 调班工作日 · 节气 = 节气标注

DayMeta 渲染管线

每个日格的 dayMeta 对象经过多层插件管线合并生成,最终写入 DOM。所有插件遵循统一的 DayMetaProvider 契约。

Step 1
基础日期
Step 2
农历插件
Step 3
节日/节气
Step 4
休假表
Step 5
规则引擎
Output
dayMeta

完整交互演示请使用上方「Calendar 弹出选择」卡片。

节假日与调休

通过 createHolidayPlugin() 注入自定义节假日数据,与农历插件走同一 DayMetaProvider 管线。下方是 2026 年法定节假日在日历网格上的映射。

一月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
二月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
四月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
五月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
六月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
九月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
十月
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

休假表配置

向 Calendar 组件传入 holidays / workdays JSON 配置即可启用休假标记。

// 在日历初始化时传入休假配置
new Calendar(el, {
holidays: {
holidays: ["2026-10-01", "2026-10-02", ...],
workdays: ["2026-10-10", ...],
},
});

禁用规则

通过 registerRules() 注册禁用规则,与内置插件走同一管线。支持星期、区间、日期范围、自定义函数四种规则类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
规则代码
registerRules([
  { type: "dayOfWeek", values: [0, 6] },
]);
禁用所有周六和周日,不可选择。

支持的规则类型

四种内置规则类型覆盖常见禁用场景,同时支持自定义函数实现复杂逻辑。

dayOfWeek
按星期禁用(0=周日,6=周六)
values: [0, 6]
range
日期区间禁用(含起止日)
start: "2026-10-01", end: "2026-10-08"
before / after
某日期之前/之后全部禁用
date: "2026-01-01"
custom
自定义函数,接收 dayMeta 返回 boolean
fn: (dayMeta) => boolean