remons-calendar 1.0.0-beta.1

package/dist/services/holiday.d.ts

@@ -0,0 +1,8 @@
+import type { HolidayInfo } from '../types';
+/**
+ * 获取指定年份的节假日数据（https://timor.tech/api/holiday/year/{year}）。
+ * 按年永久缓存到 localStorage，命中缓存则不再请求。
+ * 返回 { 'YYYY-MM-DD': HolidayInfo }
+ */
+export declare function getHolidays(year: number): Promise<Record<string, HolidayInfo>>;
+//# sourceMappingURL=holiday.d.ts.map

package/dist/services/holiday.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"holiday.d.ts","sourceRoot":"","sources":["../../src/services/holiday.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAc5C;;;;GAIG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CA2CpF"}

package/dist/style.css

@@ -0,0 +1 @@
+.color-swatches{display:flex;gap:8px}.color-swatches .swatch{width:22px;height:22px;border-radius:4px;cursor:pointer;border:2px solid transparent}.color-swatches .swatch.active{border-color:#000000a6}.emoji-grid{display:flex;flex-wrap:wrap;gap:4px;max-width:280px}.emoji-grid .emoji-item{font-size:18px;line-height:1;padding:6px;border-radius:6px;cursor:pointer;border:1px solid transparent}.emoji-grid .emoji-item:hover{background:#f5f5f5}.emoji-grid .emoji-item.active{background:#e6f4ff;border-color:#1677ff}.day-cell{padding:6px 8px;border-radius:4px;display:flex;flex-direction:column;position:relative;overflow:hidden}.day-cell:nth-child(7n){border-right:none}.day-cell.out .day-num,.day-cell.out .day-lunar{color:#bbb}.day-cell.today{background:#f0f7ff}.day-cell.selected{background:#e6f4ff;outline:1px solid #1677ff;outline-offset:-1px;border-radius:6px;cursor:pointer}.day-cell.selected.today{background:#e6f4ff}.day-cell.weekend{color:#1677ff}.day-cell.holiday-work{color:inherit}.day-cell.holiday-off{color:#1677ff}.day-top{display:flex;justify-content:space-between;align-items:baseline;flex-direction:column;align-items:center;gap:2px}.day-num{font-size:22px;font-weight:650;min-width:22px;padding:2px;height:22px;display:inline-flex;align-items:center;justify-content:center}.day-lunar{font-size:12px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-holiday{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}.day-holiday.off{background:#52c41a;color:#fff}.day-holiday.work{background:#f5222d;color:#fff}@media screen and (max-width: 500px){.day-holiday{top:0;right:0}}.todo-spacer{flex:none}.schedule-list{display:flex;flex-direction:column;gap:2px;overflow:hidden}.schedule-item{display:flex;align-items:center;gap:4px;width:100%;font-size:12px;cursor:pointer;white-space:nowrap}.schedule-item:hover .schedule-name{color:#1677ff}.schedule-icon{flex:none}.schedule-name{overflow:hidden;text-overflow:ellipsis}.schedule-more{font-size:11px;color:#999}.todo-lanes{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;pointer-events:none}.todo-bar{position:absolute;height:20px;min-width:12px;opacity:.85;display:flex;align-items:center;border-radius:0;box-sizing:border-box;overflow:hidden;cursor:pointer;pointer-events:auto;box-shadow:0 1px 2px #0000001f}.todo-bar.round-left{border-top-left-radius:10px;border-bottom-left-radius:10px}.todo-bar.round-right{border-top-right-radius:10px;border-bottom-right-radius:10px}.todo-bar-label{max-width:100%;padding:0 10px;font-size:12px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-panel{border-top:1px solid #f0f0f0;padding:10px 12px 12px;flex:1}.day-panel-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:14px;font-weight:600}.day-panel-header .day-panel-title{display:flex}.day-panel-header .day-panel-title .day-panel-actions{margin-left:4px;display:flex;gap:8px}.day-panel-sub{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:400;color:#888}.day-panel-section{margin-bottom:8px}.day-panel-section:last-of-type{margin-bottom:0}.day-panel-subtitle{font-size:12px;color:#999;margin-bottom:4px}.day-panel-todo{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;background:#fff;border:1px solid #f0f0f0;margin-bottom:4px}.day-panel-todo:last-child{margin-bottom:0}.day-panel-todo:hover{border-color:#1677ff}.day-panel-todo-dot{flex:none;width:10px;height:10px;border-radius:3px}.day-panel-todo-name{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-panel-todo-range{flex:none;font-size:11px;color:#999;white-space:nowrap}.day-panel-schedule{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;background:#fff;border:1px solid #f0f0f0;margin-bottom:4px}.day-panel-schedule:last-child{margin-bottom:0}.day-panel-schedule:hover{border-color:#1677ff}.day-panel-schedule:hover .day-panel-schedule-name{color:#1677ff}.day-panel-schedule-icon{flex:none}.day-panel-schedule-name{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-panel-schedule-time{flex:none;font-size:11px;color:#999;white-space:nowrap}.calendar{border:1px solid #f0f0f0;overflow:hidden;padding:0 4px;width:600px;flex-shrink:0}@media screen and (max-width: 600px){.calendar{width:auto}}.calendar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid #f0f0f0}.calendar-title{font-size:18px;font-weight:600}.week-row{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #f0f0f0}.week-cell{text-align:center;padding:8px 0;font-size:13px;color:#666}.day-grid{display:flex;flex-direction:column}.calendar-empty{padding:32px 0 16px;display:flex;justify-content:center}.day-week{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}

package/dist/types.d.ts

@@ -0,0 +1,40 @@
+/** 待办范围（line 形式范围） */
+export interface TodoRange {
+    id: string;
+    /** 事件名称 */
+    name: string;
+    /** 开始日期 YYYY-MM-DD */
+    start: string;
+    /** 结束日期 YYYY-MM-DD */
+    end: string;
+    /** 开始时间 HH:mm（可选，分钟粒度 30；缺省视为 00:00，整天） */
+    startTime?: string;
+    /** 结束时间 HH:mm（可选，分钟粒度 30；缺省视为 24:00，整天） */
+    endTime?: string;
+    /** 颜色标记（十六进制，如 #1677ff） */
+    color: string;
+}
+/** 单日日程 */
+export interface DailySchedule {
+    id: string;
+    /** icon（emoji） */
+    icon: string;
+    /** 日期 YYYY-MM-DD */
+    date: string;
+    /** 名称 */
+    name: string;
+    /** 开始时间 HH:mm（可选，分钟粒度 30；缺省视为 00:00，整天） */
+    startTime?: string;
+    /** 结束时间 HH:mm（可选，分钟粒度 30；缺省视为 24:00，整天） */
+    endTime?: string;
+}
+/** 节假日信息（来自 timor.tech） */
+export interface HolidayInfo {
+    /** true=休息（节假日），false=补班（调休上班） */
+    holiday: boolean;
+    /** 名称，如：元旦、国庆补班 */
+    name: string;
+    /** 所属假期名称（同一假期的各天 target 相同，如"国庆"），用于识别假期首日 */
+    target?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,sBAAsB;AACtB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW;IACX,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,WAAW;AACX,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS;IACT,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,2BAA2B;AAC3B,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/utils/date.d.ts

@@ -0,0 +1,24 @@
+import type { Dayjs } from 'dayjs';
+/** 格式化 YYYY-MM-DD */
+export declare const fmt: (d: Dayjs) => string;
+/** 取开始时间，缺省视为 00:00（整天起点） */
+export declare const startTimeOf: (item: {
+    startTime?: string;
+}) => string;
+/** 取结束时间，缺省视为 24:00（整天终点） */
+export declare const endTimeOf: (item: {
+    endTime?: string;
+}) => string;
+/** 时间展示：如 "09:00-18:00"、"09:00"；未设置任何时间返回空串（表示整天） */
+export declare function formatTimeRange(item: {
+    startTime?: string;
+    endTime?: string;
+}): string;
+export interface DayItem {
+    date: Dayjs;
+    /** 是否属于当前展示的月份 */
+    inMonth: boolean;
+}
+/** 生成 6x7（42 格）月视图网格，周日为一行开始 */
+export declare function getMonthGrid(year: number, month: number): DayItem[];
+//# sourceMappingURL=date.d.ts.map

package/dist/utils/date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEnC,qBAAqB;AACrB,eAAO,MAAM,GAAG,MAAO,KAAK,WAA2B,CAAC;AAExD,6BAA6B;AAC7B,eAAO,MAAM,WAAW,SAAU;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,MAAmC,CAAC;AAE/F,6BAA6B;AAC7B,eAAO,MAAM,SAAS,SAAU;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,MAAiC,CAAC;AAEzF,qDAAqD;AACrD,wBAAgB,eAAe,CAAC,IAAI,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAGtF;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,kBAAkB;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,gCAAgC;AAChC,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,CAOnE"}

package/dist/utils/holidayDisplay.d.ts

@@ -0,0 +1,18 @@
+import type { HolidayInfo } from '../types';
+export interface HolidayDisplay {
+    /** 节日名称（如"中秋节"）。仅假期首日有值，其余为空字符串 */
+    name: string;
+    /** true=休息，false=补班 */
+    off: boolean;
+}
+/**
+ * 根据整年节假日数据计算每天的展示数据：
+ * - 补班日（holiday:false）→ { name: '', off: false }
+ * - 假期首日（前一天不是休息日，或同 target 下日期最早）→ { name: 节日名, off: true }
+ * - 假期其余天 → { name: '', off: true }
+ *
+ * 注意：2026 年实测接口无 target 字段，故首日用"前一天是否休息"判断，
+ * target 仅作为辅助（前一天无数据时才用），不单独依赖。
+ */
+export declare function getHolidayDisplay(holidays: Record<string, HolidayInfo>): Record<string, HolidayDisplay>;
+//# sourceMappingURL=holidayDisplay.d.ts.map

package/dist/utils/holidayDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"holidayDisplay.d.ts","sourceRoot":"","sources":["../../src/utils/holidayDisplay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,EAAE,OAAO,CAAC;CACd;AAYD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GACpC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAwChC"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "remons-calendar",
+  "version": "1.0.0-beta.1",
+  "description": "React 日历组件：农历/节日展示、节假日与补班、待办范围（line 形式）、单日日程",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "readme.md"
+  ],
+  "sideEffects": [
+    "*.less",
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "build:lib": "vite build -c vite.lib.config.ts && tsc -p tsconfig.build.json",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib",
+    "publish:dry": "npm run build:lib && npm publish --dry-run"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.6.1",
+    "lunar-javascript": "^1.6.14"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "antd": ">=5.21.6",
+    "dayjs": ">=1.11.13",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "less": "^4.9.1",
+    "typescript": "~5.6.3",
+    "vite": "^5.4.10"
+  }
+}

package/readme.md

@@ -0,0 +1,62 @@
+封装一个日历组件，需要支持以下功能
+
+1. 支持基础展示
+2. 头部为星期
+3. 支持展示农历和节日
+4. 支持显示休息和补班
+5. 支持添加待办范围（line形式范围）
+6. 支持添加单日日程
+
+技术栈要求：
+1. 采用React + ts，必要时采用 antd 表单组件
+2. lunar-javascript / chinese-lunar-calendar 作为农历和节日的展示
+3. 节假日采用 `https://timor.tech/api/holiday/year/2026` 接口，按年永久缓存数据
+4. 待办范围支持的字段（开始日期、结束日期、事件名称、颜色标记）
+5. 单日日程支持的额字段（icon、日期、名称）
+
+## 构建与发布（npm 包）
+
+- 构建组件包（ESM + CJS + 声明文件 + style.css）：`npm run build:lib`
+- 发布前干跑校验：`npm run publish:dry`
+- 正式发布：`npm publish --access public`（先 npmjs 登录）
+- 仓库内 `index.html` + `src/App.tsx` 为本地 demo，不参与组件包构建
+- 产物：`dist/index.js`(ESM)、`dist/index.cjs`(CJS)、`dist/index.d.ts`、`dist/style.css`
+
+> 注意：未配置 `license` 字段时，npm 会将其标记为 UNLICENSED，发布前请按需添加。
+
+## 作为 npm 组件使用
+
+```bash
+npm install remons-calendar antd dayjs
+```
+
+```tsx
+import { ConfigProvider, App as AntApp } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import { Calendar } from 'remons-calendar';
+import type { TodoRange, DailySchedule } from 'remons-calendar';
+import 'remons-calendar/style.css';
+
+// 受控数据模式：useState / useLocalStorage 管理 todos / schedules，
+// 保存/删除通过 onSaveTodo / onDeleteTodo / onSaveSchedule / onDeleteSchedule 回调。
+// 弹窗等交互逻辑已内聚到 Calendar 内部，消费方无需感知。
+<ConfigProvider locale={zhCN}>
+  <AntApp>
+    <Calendar
+      todos={todos}
+      schedules={schedules}
+      onSaveTodo={saveTodo}
+      onDeleteTodo={deleteTodo}
+      onSaveSchedule={saveSchedule}
+      onDeleteSchedule={deleteSchedule}
+    />
+  </AntApp>
+</ConfigProvider>
+```
+
+## 本地开发（demo）
+
+```bash
+npm run dev    # 启动本地 demo
+npm run build  # 构建 demo 站点
+```