用AI建站搭建预约系统，日历和提醒怎么对接？

学完这篇，你能用 AI 建站工具做出一个带真实日历同步和自动提醒的预约系统，而不是只会在页面上摆一个假表单。

第一步：先决定走哪条路，别一上来就写代码

这一步要确定技术路线，结果是你知道后面该让 AI 生成什么代码。两条路：

路线 A（推荐新手）：页面用 AI 生成，日历和提醒交给 Cal.com 或 Calendly 托管。你只需要把它们的嵌入代码塞进页面。
路线 B（要深度定制）：自己调 Google Calendar API + 邮件服务，AI 负责写后端逻辑。

判断标准很简单：如果你只是要「客户选个时间、双方都收到提醒」，选 A，半小时能上线；如果要做多员工排班、和自家数据库打通，选 B。

注意：路线 A 的免费版通常只支持 1 个日历、提醒模板有限；路线 B 一旦涉及 OAuth，调试时间会翻 3 倍以上。

第二步：用 AI 生成预约表单页面

这一步做出用户能看见的界面，结果是有一个能选日期、选时段、填姓名的页面。

在 Lovable（2024 年后的版本，界面右上角有 Chat 输入框）里新建项目，直接输入提示词：

生成一个预约页面：
- 字段：姓名、邮箱、手机号、预约日期（日期选择器）、时间段（下拉，9:00-18:00 每小时一档）
- 提交后调用 /api/book 接口，POST JSON
- 选中的日期不能是过去的时间
- 移动端优先，用 Tailwind

如果你用的是 v0.dev，同样把上面这段贴进对话框，它会直接给你可预览的 React 组件。

注意：AI 生成的日期选择器默认常常没做时区处理，先用浏览器控制台打印 new Date() 确认你本机时区，否则后面日历同步会整体偏 8 小时。

第三步：把预约写进真实日历

这一步让预约自动出现在你的 Google 日历上，结果是客户一提交，你手机日历立刻多一条事件。

路线 A 做法：在 Cal.com 后台（Settings → Event Types → 新建一个事件类型），设置好可用时段后，点 Embed → 复制 <script> 那段，粘贴到 AI 生成页面的 <head> 里，或者在 Lovable 里直接说「把这段脚本加到 layout」。日历同步在 Cal.com 里默认就开着，你去 Settings → Calendars 点 Connect Google Calendar，走一遍授权即可。

路线 B 做法：

1. 打开 Google Cloud Console（console.cloud.google.com），新建项目；
2. 左侧菜单 API 和服务 → 库 → 搜索 "Google Calendar API" → 点「启用」；
3. API 和服务 → OAuth 同意屏幕 → 选「外部」→ 填应用名和你的邮箱 → 保存；
4. API 和服务 → 凭据 → 创建凭据 → OAuth 客户端 ID → 类型选「Web 应用」→ 授权重定向 URI 填 https://你的域名/api/auth/callback/google；
5. 把拿到的 Client ID 和 Secret 存进环境变量，让 AI 用 googleapis 这个 npm 包写一段创建事件的代码。

注意：OAuth 同意屏幕在「测试」状态下，refresh token 7 天就失效。要长期用，必须点「发布应用」，哪怕是个人用也要走这一步。

第四步：接上提醒，别忘了定时任务

这一步让客户在预约前收到通知，结果是不用你手动发消息。提醒有两种触发方式：

即时确认：预约成功后立刻发一封邮件。用 Resend（resend.com）注册后拿 API Key，在项目里装 resend 包，AI 生成发送邮件的函数即可，免费额度每天 100 封。

提前提醒：预约时间前 24 小时发。这需要定时任务。如果你部署在 Vercel，在项目根目录建 vercel.json：

{
  "crons": [{ "path": "/api/remind", "schedule": "0 * * * *" }]
}

意思是每小时跑一次 /api/remind，这个接口去数据库查「未来 24 小时内、还没发过提醒」的预约，逐条发送并标记已发送。

注意：Vercel 免费版（Hobby）的 Cron 每天只能触发一次，且触发时间不精确。要每小时跑，得升级到 Pro；不想花钱就换成 GitHub Actions 的 schedule 定时调你的接口。

第五步：跑一遍完整测试

用你自己的邮箱下一条 25 小时后的预约，确认三件事：Google 日历里出现事件、立刻收到确认邮件、24 小时后收到提醒邮件。时区、提醒逻辑任何一个不对，测试时都会暴露。

小结

• 新手优先走托管路线（Cal.com / Calendly），别自己硬写日历 API
• AI 只负责生成页面和拼装代码，日历授权、API Key 这些必须你手动去后台配
• OAuth 应用不发布，「测试」状态的 token 一周就废
• 提醒功能靠定时任务，Vercel 免费版频率不够就换 GitHub Actions
• 上线前一定跑一次跨 24 小时的完整测试，重点查时区