项目体验

SaaS Calendar · Resource Management

Resource Calendar Drag & Drop Dark / Light Mode

资源日历
预约系统

Resource Calendar · Booking Management

面向酒店、宠物寄养和场地管理的多资源预约界面。月视图同时展示房间与日期,支持预约状态、拖拽调整、深浅主题、搜索和筛选。

场景 酒店 / 宠物寄养 / 场地预约
视图 月视图资源甘特图
技术栈 React · Tailwind · Drag & Drop
主题 深色 / 浅色双主题
设计思路

Project Overview

项目背景

运营人员需要同时查看多个房间在整月中的占用情况,并快速处理移动、取消和新建预约。页面以资源为行、日期为列,保留整月视野,同时提供筛选与详情操作。

2+
楼层 / 资源分组
20+
房间 / 资源单元
5
预约状态类型
2
深 / 浅色主题

Calendar Design

月视图日历甘特图

以日期为横轴、资源单元(房间/场地)为纵轴,预约以彩色条块跨列呈现,直观反映每个资源的占用情况。支持深色 / 浅色双主题,适配不同操作环境。

April 2026
Upstairs
Downstairs
☀ Light
⬛ Dark
ROOM
Tue
1
Wed
2
Thu
3
Fri
4
Sat
5
Sun
6
Mon
7
▾ Upstairs (U)
U 01
Bella · Confirmed
U 02
Rex · Pending Change
U 03
Kiki · Checked-in ✓
U 04
Poppy · Cancelled
▾ Downstairs (D)
D 01
Oreo · Confirmed
D 02
Luna · Pending
Confirmed
Checked-in
Pending / Change
Cancelled
Blocked

Core Features

核心功能特性

📅
月视图日历网格
以日期为横轴、资源为纵轴的甘特图布局,每格 44px,支持横向滚动,可视化全月预约分布。
🏠
多楼层资源管理
支持按楼层(分组)展开/折叠,每层最多 10+ 间资源,组头可独立控制显示。
🎯
拖拽移动预约
拖动预约条块到新位置,实时预览落点,释放时弹出二次确认对话框,防误操作。
🌙
深浅色主题切换
深色(暗蓝紫)与浅色(淡紫白)双主题,完整覆盖所有组件状态,一键切换。
🔍
搜索与筛选
按姓名、房号、状态快速搜索,支持显示/隐藏空房、屏蔽房,筛选面板可展开收起。
📋
预约详情抽屉
点击预约条块弹出详情抽屉,展示客户信息、标签、金额、联系方式,支持多 Tab 切换视图。
快速新建预约
在空白格拖拽选择日期范围即可快速开始新建预约,选区以半透明蓝色高亮标注。
🔔
Toast 操作反馈
每次移动、屏蔽、状态变更均触发 Toast 通知,明确告知操作结果,3秒自动消失。

Design & implementation

从数据模型到拖拽交互

先定义资源、预约、日期范围和状态,再实现日历布局、拖拽确认、筛选与主题切换。

💬
DISCOVERY
需求拆解
分析日历预约系统的数据结构、状态机与用户交互流程,明确核心功能边界
🧩
DATA MODEL
数据建模
设计预约数据模型(group/room/start/end/status)与日历渲染算法(getRange/diffDays)
INTERACTION
拖拽实现
实现拖拽状态机(moving/hoverCell/dragGhost)与操作确认流程
🎨
THEME
双主题设计
建立深浅色 Token,覆盖 Grid、Drawer、Toast 和 Filter
Review
性能优化
使用 useMemo 优化 bookingMap/filteredBookings,避免大数据量下的不必要重渲染

Tech Stack

实现方式

使用 React 与 CSS Grid 实现月视图,自定义拖拽逻辑,并通过 Token 控制深浅主题。

React 18 TypeScript Tailwind CSS useRef · useMemo · useState Custom Drag & Drop CSS Grid Layout Dark / Light Theme Token Toast Notification Drawer / Modal Sticky Header

Complete demo task

从月历查找开始,到冲突修正与预约维护。

产品范围覆盖房间、日期、预约状态和管理动作;交互证据覆盖月份导航、筛选空结果、创建、冲突拦截、修正、编辑与删除。

  1. 01 / Navigate切换月份与筛选
  2. 02 / Create从日期新建预约
  3. 03 / Validate填写字段与状态
  4. 04 / Recover修正房间冲突
  5. 05 / Manage编辑、取消或删除

Case evidence / resource operations

让运营人员在月视图里完成查找、创建、修正与删除,而不只浏览彩色事件

我负责月视图信息结构、房间与状态筛选、预约表单、冲突恢复和响应式边界。案例结果以当前可运行 Demo 和本轮测试为准,不借用测试数据推导真实运营效果。

01 / 背景与角色

多房间预约需要按月扫描,也需要快速落到具体操作

我的职责包括数据字段、月历布局、筛选逻辑、事件状态、创建/编辑/删除流程与浏览器回归。

02 / 难点

月视图密度与任务完成之间的取舍

  • 同一天多事件不能淹没日期与房间信息。
  • 筛选无结果要给出恢复入口。
  • 重复房间预约要被拦截,并告诉用户如何修正。
03 / 关键决策

日期格负责进入,预约条负责编辑

点击日期新建、点击预约编辑;房间和状态作为结构化筛选;冲突错误留在表单内,用户可直接改日期或房间后再次保存。

04 / 组件系统关联

复用日历、筛选、Modal、状态色与反馈

月历格、资源列表、状态 Badge、输入、Select、错误消息、Toast 与删除动作共享明确的默认、悬停、焦点、错误、成功和禁用状态。

05 / 真实交付证据

本地可操作月历

  • 可切换月份、按房间/状态/文本筛选。
  • 可从空日期或主按钮创建预约。
  • 可触发冲突、修正后保存、重新打开并删除。
06 / 结果表达

结果是补齐了运营闭环与边界状态

当前成果能证明月历不是静态展示,而是可完成管理任务的原型。模拟预约仅用于复测,不作为真实入住率或效率数据。

切换月份 / 筛选选择日期或主按钮填写房间与状态冲突提示与修正保存 / 编辑 / 删除

INTERACTIVE DEMO

体验 Resource Calendar

月视图预约管理,支持按房间筛选、切换月份,实时查看不同时期的预约分布。

全屏体验 Demo ↗

Resource Calendar

可配置资源类型、分组和状态,适用于酒店、宠物寄养与场地预订。