🗓️ Building a Custom Timeline Calendar with Next.js

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!