Plan your perfect week with a beautiful, intuitive visual planner. Create time blocks, customize them with colors and styles, and organize your schedule exactly how you want it.
Week Planner is a visual scheduling tool that helps you organize your time across a full week. Instead of boring text lists, you get a beautiful grid where you can:
- Create time blocks by clicking and dragging
- Customize colors and styles to match your workflow
- Move and resize blocks with simple drag-and-drop
- Copy and paste recurring activities
- Export your schedule as images or data files
- Professional interface with modern glass morphism design
- Quick Tools panel for instant access to essential functions
- Full undo/redo support with keyboard shortcuts
Perfect for students, professionals, freelancers, or anyone who wants to visualize their weekly schedule with a truly beautiful interface!
- Click and drag on the grid to create a time block
- Double-click the block to add text (like "Team Meeting" or "Gym")
- Right-click to access styling options and actions
- Single click + drag: Create a block spanning multiple time slots
- Double-click any cell: Create a quick 30-minute block
- Drag across days: Create blocks that span multiple days (great for vacations!)
When you select a block, a styling panel appears with these options:
- 🎨 Colors: Change background and text colors
- 📝 Typography: Adjust font size, bold, italic
- 📐 Alignment: Left, center, right text alignment
- 🔲 Borders: Customize border color, style, and thickness
- ⚪ Corners: Add rounded corners for a modern look
- 👻 Opacity: Make blocks semi-transparent
- Use color coding: Different colors for work, personal, health, etc.
- Consistent sizing: Keep similar activities the same size
- High contrast: Dark backgrounds with light text are easier to read
- Rounded corners: Make your schedule look more modern and friendly
- Ctrl + M: Open/close the main menu
- Ctrl + A: Select all blocks
- Ctrl + Z: Undo last action
- Ctrl + Y: Redo last undone action
- Delete or Backspace: Delete selected blocks
- Escape: Cancel editing or deselect all blocks
- Right-click → Copy: Copy selected blocks
- Right-click → Paste: Paste blocks at cursor location
- Right-click → Copy Style: Copy just the colors and formatting
- Right-click → Paste Style: Apply copied style to selected blocks
- Ctrl + Click: Select multiple blocks
- Click + Drag: Move selected blocks together
- Style changes apply to all selected blocks at once!
- Select one or more blocks
- Drag them to a new location
- Blocks snap to the grid automatically
- Ghost preview shows where they'll land
- Select a block to see blue resize handles
- Drag the handles to make blocks longer/shorter
- Corner handles: Resize both time and day span
- Edge handles: Resize just time or just days
- Overlap prevention: Blocks won't overlap each other
- Boundary limits: Blocks stay within the schedule grid
- 30-minute snapping: Everything aligns to clean time slots
Access these from the main menu (☰ button):
- 📸 PNG Image: Perfect for printing or sharing
- 🎨 SVG Vector: Scalable graphics for presentations
- 💾 JSON Data: Save all your data to reload later
- 📝 Markdown: Export as text format for notes
- 📂 JSON: Reload a saved schedule
- 📝 Markdown: Import from text templates
- PNG exports are sized perfectly for horizontal A4 paper
- Use high contrast colors for better printing
- Avoid very light colors that won't show up on paper
- Color code by category: Blue for work, green for personal, red for urgent
- Block out focus time: Large blocks for deep work sessions
- Schedule breaks: Don't forget to plan rest time!
- Weekly templates: Save common weeks and reuse them
- Time blocking: Group similar activities together
- Buffer time: Add 15-minute buffers between meetings
- Realistic planning: Don't overpact your schedule
- Review weekly: Adjust your template based on what actually works
- Copy recurring blocks: Weekly meetings, daily routines, etc.
- Multi-select for batch changes: Update all "Meeting" blocks at once
- Use consistent naming: Makes your schedule easier to scan
- Plan the night before: Set up tomorrow's blocks today
- Block out meeting times
- Schedule focused work sessions
- Plan lunch breaks and commutes
- Color-code different projects
- Map out class schedules
- Plan study sessions for each subject
- Block out assignment deadlines
- Schedule social time and breaks
- Allocate time for different clients
- Plan project milestones
- Schedule admin tasks
- Block out business development time
- Plan workout schedules
- Organize family time
- Schedule meal prep
- Block out hobby time
Week Planner features a modern, professional interface with:
- Glass Morphism Design: Beautiful frosted glass effects with backdrop blur
- Dark Theme: Professional dark interface with carefully chosen color palette
- Gradient Backgrounds: Subtle gradients throughout for depth and visual interest
- Responsive Layout: Optimized for all screen sizes with mobile-first approach
Access essential functions through the collapsible Quick Tools panel:
- 🎯 Smart Positioning: Fixed position with elegant handle to show/hide
- ⚡ Quick Actions: Select All, Clear All, and other essential operations
- 🎨 Integrated Controls: Seamlessly integrated with the main interface
- ⌨️ Keyboard Accessible: Full keyboard navigation support
Streamlined header with functional buttons:
- ↶ Undo/Redo: Full undo/redo functionality with keyboard shortcuts (Ctrl+Z/Ctrl+Y)
- 📁 Menu Access: Clean menu system with organized import/export options
- 🎨 Color Picker: Prominently placed for quick block color changes
- ✨ Professional Styling: Glass morphism buttons with hover effects
- Drag across multiple days for vacations, conferences, or projects
- Perfect for planning extended activities
- Maintains single block for easy editing
- Copy styles from your favorite blocks
- Paste styles to quickly format new blocks
- Build your own color palette over time
- Select multiple blocks with Ctrl+click
- Apply styling changes to all selected blocks
- Move groups of blocks together
- Delete multiple blocks at once
"My blocks disappeared!"
- Check if you accidentally pressed Delete
- Look for them at the edge of the grid
- Try refreshing the page
"I can't create a block"
- Make sure you're clicking in empty space
- Check that you're within the grid boundaries (5 AM to midnight)
- Try a different time slot
"The styling panel won't show"
- Make sure you've clicked a block to select it
- Try clicking directly on the block text
- Check that only one block is selected for full styling options
"Copy/paste isn't working"
- Right-click the selected block to copy
- Right-click empty space to paste
- Make sure there's room for the pasted blocks
- Use Tab to navigate between UI elements
- Enter to activate buttons
- Escape to close any open panels
- Template approach: Create a base week template
- Copy and modify: Start with last week's schedule
- Batch creation: Make all similar blocks first, then customize
- Style last: Get your time blocks right, then make them pretty
- GTD (Getting Things Done): Different colors for contexts
- Time blocking: Large focused work blocks
- Energy management: Match activities to your energy levels
- Theme days: Monday for meetings, Tuesday for deep work, etc.
- Node.js (v24.7.0 or higher)
- npm
# Clone the repository
git clone https://github.com/dsebastien/week-planner.git
cd week-planner
# Install dependencies
npm install
# Start development server
npm run devnpm run build- Build for productionnpm run dev- Start development servernpm run test- Run testsnpm run lint- Check code qualitynpm run serve- Serve the application
This project uses GitHub Actions for continuous integration and deployment:
- Automated testing on every push and PR
- ESLint for code quality
- Automated deployment to GitHub Pages
- Release management with semantic versioning
See RELEASE.md for release and deployment procedures.
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch
- Make your changes
- Run tests and linting
- Submit a pull request
If Week Planner helps you stay organized, consider buying me a coffee! ☕
Your support helps keep this tool free and continuously improving.
Made with ❤️ for productive people everywhere