多房间预约需要按月扫描,也需要快速落到具体操作
我的职责包括数据字段、月历布局、筛选逻辑、事件状态、创建/编辑/删除流程与浏览器回归。
SaaS Calendar · Resource Management
Resource Calendar · Booking Management
面向酒店、宠物寄养和场地管理的多资源预约界面。月视图同时展示房间与日期,支持预约状态、拖拽调整、深浅主题、搜索和筛选。
Project Overview
运营人员需要同时查看多个房间在整月中的占用情况,并快速处理移动、取消和新建预约。页面以资源为行、日期为列,保留整月视野,同时提供筛选与详情操作。
Calendar Design
以日期为横轴、资源单元(房间/场地)为纵轴,预约以彩色条块跨列呈现,直观反映每个资源的占用情况。支持深色 / 浅色双主题,适配不同操作环境。
Core Features
Design & implementation
先定义资源、预约、日期范围和状态,再实现日历布局、拖拽确认、筛选与主题切换。
Tech Stack
使用 React 与 CSS Grid 实现月视图,自定义拖拽逻辑,并通过 Token 控制深浅主题。
Case evidence / resource operations
我负责月视图信息结构、房间与状态筛选、预约表单、冲突恢复和响应式边界。案例结果以当前可运行 Demo 和本轮测试为准,不借用测试数据推导真实运营效果。
我的职责包括数据字段、月历布局、筛选逻辑、事件状态、创建/编辑/删除流程与浏览器回归。
点击日期新建、点击预约编辑;房间和状态作为结构化筛选;冲突错误留在表单内,用户可直接改日期或房间后再次保存。
月历格、资源列表、状态 Badge、输入、Select、错误消息、Toast 与删除动作共享明确的默认、悬停、焦点、错误、成功和禁用状态。
当前成果能证明月历不是静态展示,而是可完成管理任务的原型。模拟预约仅用于复测,不作为真实入住率或效率数据。
可配置资源类型、分组和状态,适用于酒店、宠物寄养与场地预订。