＜自用文學習＞用 Claude Code 做一個日歷

環境：

OS: Windows 11
IDE：TREA
Model: Sonnet / Qwen (免費 Token 用完)

參考：

Claude Code Beginner Guide – Get Started in 20 Minutes (2025)?

by?Alex Finn?油管博客

https://www.youtube.com/watch?v=iYiuzAsWnHU&list=TLGG1L6Rr9WQcXAwNzA5MjAyNQ

可以試試：https://cobalt.tools/? 下載。

正文：

一、安裝 Claude Code (以后用 CC 代替)

參考我之前的文章：?https://blog.csdn.net/davenian/article/details/148855154?

二、使用 QwenCode 代替 Sonnet

阿里有免費 90 天 Token，什么事兒還沒做 token 用了 30%，推薦 GLM? 20塊充值包。它們的方法都一樣，給 CC 一個接口 URL，然后是 API 格式的 KEY

TREA/Cursor 都是調用 PowerShell，我是用 npm 安裝的 CC ，第一次要在終端里運行“Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser" 再執行 claude 來運行 CC

引自秋芝：https://ccnk05wgo092.feishu.cn/wiki/BxLTwlkvkiQhJkkJ7vgc95aZnMe

三、用 CC 制作一個日歷

1 告訴要做什么

prompt: 
i want to build a calendar app using next.js. it should show a calender view of this week and make it so i can create new events and assign dates and times to the events. it should be a realty beautiful app.

用中文也一樣，提示詞：

我想使用 Next.js 構建一個日歷應用。它應該顯示本周的日歷視圖，并且讓我能夠創建新事件，為事件分配日期和時間。它應該是一個非常漂亮的應用。

當時沒想寫文章，第一版的截圖沒有做。? 大概是白色+淺灰線

2 告訴它改進

提示詞，我用的中文

好的，干得不錯。我首先想讓這個日歷看起來非常漂亮，有干凈的顏色和易于閱讀的簡約界面。請為我制定執行這個任務的計劃。現在它非常樸素有些丑，沒有任何樣式。

做出來是這樣的，一行代碼沒敲，因為不會 next.js

3 創建規則文件 CLAUDE.md?

角色類似項目管理員，來指定規劃與規則。

留意文件名，CLAUDE 是大寫, md 是小寫。這個文章是用來設定規則。

## 標準工作流程
1. 首先，仔細思考問題，閱讀代碼庫中的相關文件，并將計劃寫入任務文件 todo.md。
2. 該計劃應包含一個待辦事項列表，以便您在完成時可以勾選。
3. 在開始工作之前，請與我確認，我將核實該計劃。
4. 然后，開始處理待辦事項，并隨時標記已完成的項目。
5. 在每一步中，請向我簡要說明您所做的更改。
6. 使您執行的每項任務和代碼更改都盡可能簡單。我們希望避免進行任何大規模或復雜的更改。每次更改應影響盡可能少的代碼。一切都以簡單為中心。
7. 最后，在 todo.md 文件中添加一個審查部分，總結您所做的更改和任何其他相關信息。

英文：

## Standard Workflow
1. First think through the problem, read the codebase for relevant files, and write a plan to tasks file todo.md.
2. The plan should have a list of todo items that you can check off as you complete them
3. Before you begin working, check in with me and I will verify the plan.
4. Then, begin working on the todo items, marking them as complete as you go.
5. Please every step of the way just give me a high level explanation of what changes you made
6. Make every task and code change you do as simple as possible. We want to avoid making any massive or complex changes. Every change should impact as little code as possible. Everything is about simplicity.
7. Finally, add a review section to the todo.md file with a summary of the changes you made and any other relevant information.

用@CLAUDE.me? 讓CC過一下。視頻只用幾秒帶過“we're going to put in a few rules here that are really powerful that are going to make Claude code even better at coding So here's the rules we're going to put in I'll also include this down below in the description?” 沒有演示。所以我沒領悟到，是在代碼第二次生成后，才讓 CC 讀取這個規則。造成 todo.md 是空的。

todo.md 文件作用是，查看待辦清單 / Check List?

油管博客 Finn 用提示詞讓 AI 生成 PLAN

提示詞：

what do you think we should add to make this calendar even more powerful?

中文：

你認為我們應該添加什么功能來讓這個日歷應用更加強大？

（到此，看一下白送的 TOKEN 還有多少？）

以下是 CC 的思考輸出， FINN視頻里用的 OPUS 模型，給出的 PLAN 要強些有限。

what do you think we should add to make this calendar even more powerful?

? Thinking…

? The user is asking for my recommendations on what features we could add to make ??
? the calendar even more powerful. They want me to think about what additional ? ? ?
? functionality would enhance the calendar app. This is about planning and?
? suggesting features, not implementing them yet since I'm in plan mode.

? Let me think about what would make a calendar app more powerful and useful: ? ? ??

? 1. Data Persistence - Currently events are only stored in local state, so they ? ?
? disappear on refresh
? 2. Event Management - Can't edit, delete, or view event details
? 3. Different View Types - Only has weekly view, could add monthly, daily, year ? ?
? view
? 4. Recurring Events - No support for repeating events
? 5. Categories/Tags - Better organization of events
? 6. Search and Filtering - Finding specific events
? 7. Import/Export - Integration with other calendar systems
? 8. Notifications/Reminders - Alert users about upcoming events
? 9. Time Zone Support - Handle different time zones
? 10. Drag and Drop - Moving events around visually
? 11. Multi-user Support - Sharing and collaboration
? 12. Event Templates - Quick creation of similar events
? 13. Analytics/Insights - Time tracking, productivity metrics
? 14. Mobile Responsiveness - Better touch interactions
? 15. Keyboard Shortcuts - Power user features
? 16. Print Support - Physical calendar printing
? 17. Dark/Light Mode - Theme switching
? 18. Integration APIs - Connect with other services
? 19. Event Conflicts - Detect overlapping events
? 20. Meeting Features - Video calls, attendees, locations

? I should organize these into categories and prioritize them based on impact and ??
? development effort.

● Looking at the current calendar app, I can see several areas where we could ? ? ??
? significantly enhance its power and usability. Let me analyze what would make ? ??
? the biggest impact:

● Read(calendar-app\src\components\Calendar.tsx)
? ? ?Read 50 lines (ctrl+r to expand)
? ? ?calendar-app\CLAUDE.md

? Thinking…

? Based on my analysis of the current calendar app, I can see that it's beautiful ??
? but has some fundamental limitations:

? 1. Current State:?
? ? - Only weekly view
? ? - Events are stored in local state (lost on refresh)
? ? - Can only create events, not edit/delete them
? ? - No recurring events
? ? - No categories or organization
? ? - Basic event structure

? Let me think about what would make the biggest impact for users while keeping ? ??
? changes simple and manageable:

? High Impact, Low Complexity:
? 1. Data Persistence - Save events to localStorage so they persist across sessions?
? 2. Event Management - Edit, delete, and view event details?
? 3. Multiple Views - Monthly and daily views in addition to weekly
? 4. Drag & Drop - Move events by dragging them around

? Medium Impact, Medium Complexity:
? 5. Recurring Events - Daily, weekly, monthly repeating events
? 6. Event Categories - Color-coded categories for organization
? 7. Search & Filter - Find events quickly
? 8. Today Navigation - Quick jump to current date

? High Impact, Higher Complexity:
? 9. Import/Export - .ics file support for integration with other calendars
? 10. Notifications - Browser notifications for upcoming events
? 11. Event Conflicts - Detect and warn about overlapping events
? 12. Mini Calendar - Small month view for navigation

? I should prioritize based on user value and development complexity. The most ? ? ?
? impactful improvements would be:

? 1. Data Persistence (Critical - events disappear on refresh)
? 2. Event Management (Critical - can't modify events once created)
? 3. Multiple Views (High value - see different time scales)
? 4. Drag & Drop (High UX improvement)
? 5. Event Categories (Organization and productivity)
? 6. Recurring Events (Common use case)
? 7. Search/Filter (Scales with more events)

? 8. Today Navigation - Implementing a quick return to the current date enhances ? ?
? user experience by providing instant temporal context.

? I'll map out a strategic approach to streamline calendar navigation and improve ??
? overall usability.

● Read(calendar-app\src\types\event.ts)
? ? ?Read 8 lines (ctrl+r to expand)

? Thinking…

? Now I have a good understanding of the current calendar structure. Let me analyze?
? what would make this calendar significantly more powerful while keeping each ? ? ?
? change simple and focused.

? Current limitations I've identified:
? 1. Events are lost on page refresh (no persistence)
? 2. Can't edit or delete events once created
? 3. Only weekly view available
? 4. No event organization or categories
? 5. No recurring events
? 6. No quick navigation features
? 7. No search functionality
? 8. No drag-and-drop interaction

? I should organize these improvements by priority and complexity, focusing on ? ? ?
? features that provide the most user value with manageable implementation?
? complexity.

● Based on my analysis of the current calendar app, I can see several powerful ? ? ?
? enhancements that would significantly improve the user experience. Let me
? present a comprehensive plan for making this calendar much more powerful:

●User approved Claude's plan:
? ? 🚀 Calendar Power-Up Enhancement Plan

? ? 🎯 Priority 1: Essential Missing Features

? ? 1. Data Persistence System

? ? - Implement localStorage to save events permanently
? ? - Events currently disappear on page refresh - critical fix
? ? - Add import/export functionality for calendar data backup

? ? 2. Complete Event Management

? ? - Edit Events: Click to modify existing events
? ? - Delete Events: Right-click or button to remove events
? ? - Event Details View: Full modal with all event information
? ? - Duplicate Events: Quick copy function for similar events

? ? 3. Multiple Calendar Views

? ? - Monthly View: Traditional month grid layout
? ? - Daily View: Detailed single-day schedule
? ? - Year View: Overview of entire year
? ? - View Toggle: Smooth transitions between views

? ? 🎯 Priority 2: Enhanced User Experience

? ? 4. Drag & Drop Functionality

? ? - Move events by dragging to different times/days
? ? - Resize events by dragging edges to adjust duration
? ? - Visual feedback during drag operations
? ? - Snap-to-grid for precise placement

? ? 5. Event Categories & Organization

? ? - Color-Coded Categories: Work, Personal, Health, etc.
? ? - Category Management: Create/edit/delete categories
? ? - Smart Filtering: Show/hide events by category
? ? - Category Statistics: Time spent per category

? ? 6. Smart Navigation & Search

? ? - Today Button: Instant jump to current date
? ? - Date Picker: Calendar widget for quick navigation
? ? - Search Bar: Find events by title, description, or category
? ? - Quick Filters: Today, This Week, Upcoming, etc.

? ? 🎯 Priority 3: Advanced Features

? ? 7. Recurring Events System

? ? - Repeat Options: Daily, weekly, monthly, yearly
? ? - Custom Patterns: Every 2 weeks, specific weekdays
? ? - End Conditions: Never, specific date, number of occurrences
? ? - Exception Handling: Skip holidays, modify single instances

? ? 8. Time Zone & Scheduling Intelligence

? ? - Multi-timezone Support: Handle different time zones
? ? - Conflict Detection: Warn about overlapping events
? ? - Suggested Times: Smart scheduling for new events
? ? - Duration Templates: Common meeting lengths (15min, 30min, 1hr)

? ? 9. Productivity & Analytics

? ? - Time Tracking: See how much time spent in different categories
? ? - Weekly/Monthly Reports: Visual charts of time allocation
? ? - Goal Setting: Target hours per category
? ? - Productivity Insights: Patterns in your schedule

? ? 🎯 Priority 4: Integration & Polish

? ? 10. Import/Export & Integration

? ? - ICS File Support: Import from Google Calendar, Outlook
? ? - JSON Export: Backup and share calendar data
? ? - URL Sharing: Share individual events or entire calendars
? ? - Print Support: Beautiful printable calendar layouts

? ? 11. Notifications & Reminders

? ? - Browser Notifications: Alerts for upcoming events
? ? - Customizable Timing: 5min, 15min, 1hr before
? ? - Sound Alerts: Optional audio notifications
? ? - Snooze Function: Delay reminders

? ? 12. Advanced UI Features

? ? - Keyboard Shortcuts: Power user navigation (n = new event, t = today)
? ? - Mini Calendar: Small month view for quick navigation
? ? - Event Templates: Save common event types for quick creation
? ? - Dark/Light Mode: Theme switching
? ? - Mobile-First Touch: Optimized gestures for mobile devices

? ? 📊 Implementation Strategy

? ? Phase 1 (Week 1): Core functionality - persistence, editing, multiple views ? ??
? ? Phase 2 (Week 2): UX improvements - drag/drop, categories, search
? ? Phase 3 (Week 3): Advanced features - recurring events, analytics
? ? Phase 4 (Week 4): Polish & integration - import/export, notifications

? ? Each feature will be implemented incrementally with minimal code changes, ? ? ??
? ? following the principle of simplicity and focused improvements.

? Thinking…

? Great! The user has approved my comprehensive plan for making the calendar more?
? powerful. Now I need to start implementing this step by step, beginning with the?
? most critical features from Priority 1.

? Let me create a detailed todo list for the implementation, starting with the?
? essential missing features that will have the biggest immediate impact.

? I'll start with:
? 1. Data Persistence System (localStorage)
? 2. Complete Event Management (edit/delete events)
? 3. Multiple Calendar Views

? These are the foundational improvements that will make the calendar actually ? ? ?
? usable as a real productivity tool.

● Perfect! Let me create a comprehensive todo list to implement these powerful
? calendar enhancements step by step.

? Thinking…

? Great! Now I have my todo list ready. Let me start with the most critical feature?
? - implementing localStorage data persistence. This is essential because currently?
? all events disappear when the page is refreshed, which makes the calendar?
? basically unusable for real-world purposes.

? I'll need to:
? 1. Create a utility for localStorage operations?
? 2. Modify the main page component to save/load events from localStorage
? 3. Ensure proper serialization/deserialization of Date objects

? Let me start by marking the first todo as in progress and then implementing the?
? localStorage functionality.

● Let me start implementing these powerful features! I'll begin with the most ? ? ??
? critical improvement - data persistence so your events don't disappear when ? ? ??
? you refresh the page.

? Thinking…

? I'll start by creating a utility for localStorage operations to handle saving and?
? loading events. This will ensure proper serialization of Date objects and provide?
? a clean API for data persistence.