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.

Custom Timeline Calendar

Create a task

✨ 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!