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" />;
}