Block

Todo List - Timeline

A timeline view for scheduling tasks and events with drag-and-drop reordering

Installation

npx shadcn add @mylo-ui/todo-list-timeline

Preview

Timeline View

8 Events

Today

2/5 completed

09:00

Morning Standup

meeting

Duration: 30 min

10:00

Code Review

task

Duration: 1 hour

12:00

Lunch Break

break

Duration: 1 hour

14:00

Sprint Planning

meeting

Duration: 1.5 hours

15:30

Development Work

task

Duration: 2 hours

Tomorrow

0/3 completed

10:00

Client Meeting

meeting

Duration: 1 hour

13:00

Feature Implementation

task

Duration: 3 hours

16:00

Team Retrospective

meeting

Duration: 1 hour

Usage

import { TodoListTimeline } from "@/components/blocks/todo-list-timeline"

export default function Page() {
  return <TodoListTimeline />
}

Dependencies

lucide-react

@dnd-kit/core

@dnd-kit/sortable

@dnd-kit/utilities

shadcn/ui Components

card

button

checkbox

badge

Related Blocks

More todo-list blocks you might like

View all todo-list blocks

todo-list

Todo List - Simple

A simple todo list with progress tracking and drag-and-drop reordering

Ready to use

/blocks/todo-list-simple

todo-list

Todo List - Kanban

A kanban board style todo list with full drag-and-drop support for moving and reordering tasks

Ready to use

/blocks/todo-list-kanban

todo-list

Todo List - Checklist

An organized checklist with categories, progress bars, and drag-and-drop item reordering

Ready to use

/blocks/todo-list-checklist