Managing tasks across a team can get messy—especially when you want to see what everyone is working on. That’s why I built Custom Timeline Calendar: a responsive, timeline-style calendar that visually maps tasks across a 24-hour day, per user.
✨ Key Features
- 📅 Select a specific day to view
- 👤 Each row represents a team member
- 🕒 Tasks are laid out hour by hour
- 📱 Fully responsive design
- 🛠️ Easy to customize and extend
🧱 Tech Stack
- React / Next.js — for a fast and modern web framework
- Tailwind CSS — utility-first styling
- Ant Design — clean and functional date picker component
🚀 Try It Out
1. Clone the Repository
git clone https://github.com/ZinebEsso/Custom-Timeline-Calendar.git
cd custom-timeline-calendar
2. Install Dependencies
npm install
3. Start the Dev Server
npm run dev
Then open your browser at http://localhost:3000.
📂 Project Structure
.
├── components/
│ └── calendar_v1.tsx // Main calendar UI
├── pages/
│ └── index.tsx // Main entry page
├── screenshots/ // For README visuals
└── README.md
🔄 Ongoing Development
This is just version 1 of the Custom Timeline Calendar — and there's a lot more coming! I'm actively working on improvements like:
- Task modals with more detail
- Drag-and-drop task blocks
- Weekly and monthly views
- Integrations with tools like Google Calendar or Trello
If you have ideas or want to contribute, feel free to open an issue or submit a PR on GitHub!
🔗 Check It Out
👉 GitHub: custom-timeline-calendar
☕ Support
If you find this calendar helpful, feel free to buy me a coffee 💛. It really helps keep side projects like this alive!
Top comments (0)