README Gets Nudged by Commenters to Add Images: This Open-Source Calendar Panel Put Functionality First

Kargul Studio's Marcel open-sourced the Kargul Workspace calendar design on X. The repo name is spelled calender-app-design, and both the online demo and GitHub can be opened directly.

The video shows a work calendar from November 8 to 14, 2026. The left menu has Dashboard, Analytics, Personal details, Documents, Time off, Time tracking, Benefits, Payments, Invoice, Withdrawal methods. On the right are time-off stats: available days, pending requests, upcoming holidays, and total annual leave days. On the calendar, light blue is personal matters, pink is extra leave carried over, green is half-day leave, and the request table at the bottom shows Approved and Declined.

The Time off page in the repo is a pixel-perfect reproduction of the Figma design, and the other sidebar pages follow the same visual language. It can be operated directly in the browser. The calendar supports week, day, and month views; drag on empty space to create; drag events across days; drag the bottom edge to change duration; overlapping events display side by side; the all-day row includes public holidays; and there is a real-time now-line and detail popover. The Time off request dialog calculates by working days, skipping weekends and holidays, and shows the balance after submission; stats are calculated from requests and allowances; the request table supports search, filter, sort, details, edit, cancel, delete, and preview of manager approval or rejection.

The shell is also done: workspace switching, ⌘K cross-page search for events and requests as well as documents and invoices, notifications, help menu, dark mode, account menu. Shortcuts include ⌘K to search, N to create a new event, R to request time off, T to go back to today, ←/→ to switch previous/next, D/W/M to switch views, ? to see shortcuts.

The tech stack is Next.js 16 App Router and Turbopack, React 19, TypeScript, Tailwind CSS v4, shadcn/ui's Radix components, Zustand's persist middleware writing data to localStorage, next-themes for dark mode, Sonner for toasts, and cmdk for the command palette. There is no backend; all data is stored in the browser. To run it, just two steps: npm install, npm run dev. To return to the initial state of the design mockup, use Data in Settings to reset demo data, or clear site data. The seed data is that week in the video: November 8 to 14, 2026, with Tuesday, November 10 selected, and the balance showing 7 days available, 2 pending approvals, and 3 days upcoming. The license is MIT.

Some commenters pointed out that drag-to-resize and side-by-side overlapping events are the parts most calendar templates skip; data landing in localStorage makes cloning and trying it cheap. Others directly urged the README: add some images and videos, don't just put a few lines of text. That feedback is accurate: the functionality was done first, but the docs still fall a bit short.

The value of this thing is shortening the distance from design mockup to interactive prototype. If you want to copy the homework, start with the stats and request table on the Time off page; if you want to adapt it for a product, first add a backend, permissions, and auditing. Pure localStorage is fine for demos, not for use directly as a production backend.

The repo is at GitHub, and the online demo is at calender-app-design.vercel.app.