
Year Planner
github.com/vas3k/year.vas3k.cloud- Category
- Productivity
- Rank
- No. 1974Tools index
- Pricing
- Open Source
- Type
- APP
- Builder
- vas3k
- GitHub
- 257 stars
- Date
About
Vas3k's one-page year planner — print one sheet that covers a whole year of weeks at a glance.
What it does
Year Planner turns a browser into a customizable wall calendar. Choose a year and one of three layouts, then mark individual days with colors, textures, emojis, or text. Changes stay in browser storage, while JSON export and import provide manual backups.
Why it's ranked here
The tool has a narrow idea and executes it with useful depth. Three calendar views, drag-based marking, per-day notes, offline operation, and printable controls make it practical without accounts or setup. Its privacy comes from keeping planning data entirely on the user’s device.
What's good
Eight colors and three textures support quick visual coding. Clicking a date number creates editable text, while dragging marks several dates efficiently. Weekends receive distinct styling, today gets a border, and view, year, markings, and notes persist between browser sessions.
Tradeoffs
There is no server, cloud synchronization, account system, or shared editing. Browser storage may be deleted, so durable use depends on manually exporting JSON backups. The year selector only covers the previous year through five future years. A day cannot retain both a color and texture.
How to use it well
It suits individuals who think spatially and want a private annual overview for milestones, travel, habits, or broad scheduling. Pick a consistent color vocabulary, annotate only important dates, and export backups regularly. Use another tool when you need reminders, detailed appointments, collaboration, or cross-device synchronization.
Technical notes+
The application is a private React and TypeScript package defined in package.json, using React 19, date-fns, and react-scripts. src/contexts/CalendarContext.tsx owns calendar state and writes it to localStorage under calendar_data. src/utils/colors.ts defines eight colors, three SVG or CSS textures, date keys, and mutually exclusive color or texture application. src/components/SaveLoadData.tsx exports formatted JSON, merges imported date-cell records into existing data, restores supported preferences, and clears local state after confirmation. src/components/Day.tsx handles pointer marking, hover presentation, today and weekend styling, and text creation. src/components/CustomText.tsx uses an editable browser element with Enter to commit and Escape to cancel. src/components/views/ColumnView.tsx renders months as columns in a horizontally scrollable table. README.md documents local development, production builds, and a Docker Compose deployment exposing port 3000.
Observed
- Primary language
- TypeScript with React components
- Interface
- Browser-based graphical calendar application
- Data storage
- Browser localStorage with JSON export and import
- Network model
- Runs locally without a server or cloud service
- Installation surface
- npm development and production build scripts, plus Docker Compose deployment
- Calendar layouts
- Linear, Classic, and Column views
Read from README.md, package.json, src/App.tsx, src/index.tsx, src/react-app-env.d.ts, src/utils/colors.ts, src/components/Day.tsx, src/components/Calendar.tsx, src/components/CustomText.tsx, src/components/ColorPicker.tsx, src/components/SaveLoadData.tsx, src/components/ViewSelector.tsx, src/components/CalendarTitle.tsx, src/contexts/CalendarContext.tsx, src/components/views/ColumnView.tsx.
What it can do
Generate a one-page yearly calendar layout
Year selection → Single-page calendar showing all weeks of the year
Display weeks at a glance view
Selected year → Condensed weekly view of entire year
Create printable year planner
Year parameter → Print-ready single sheet document
Format calendar for single page printing
Year data → Optimized layout fitting one printed page
Tags
Tech Stack
Media

Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.