Grid-based drag-and-drop scheduler component
Drag events to reschedule · Resize from the bottom edge
[
{
"id": "1",
"x": 0,
"y": 2,
"w": 1,
"h": 4,
"title": "Team Standup",
"color": "#3b82f6"
},
{
"id": "2",
"x": 0,
"y": 4,
"w": 1,
"h": 3,
"title": "Design Review",
"color": "#a855f7"
},
{
"id": "3",
"x": 0,
"y": 8,
"w": 1,
"h": 2,
"title": "Lunch Break",
"color": "#22c55e"
},
{
"id": "4",
"x": 1,
"y": 2,
"w": 1,
"h": 5,
"title": "Project Work",
"color": "#f59e0b"
},
{
"id": "5",
"x": 1,
"y": 3,
"w": 1,
"h": 3,
"title": "1:1 with Alice",
"color": "#f43f5e"
},
{
"id": "6",
"x": 1,
"y": 4,
"w": 1,
"h": 4,
"title": "Sprint Planning",
"color": "#06b6d4"
},
{
"id": "7",
"x": 2,
"y": 0,
"w": 1,
"h": 3,
"title": "Morning Sync",
"color": "#14b8a6"
},
{
"id": "8",
"x": 2,
"y": 6,
"w": 1,
"h": 4,
"title": "Client Call",
"color": "#f97316"
},
{
"id": "9",
"x": 3,
"y": 1,
"w": 1,
"h": 6,
"title": "Deep Work",
"color": "#6366f1"
},
{
"id": "10",
"x": 3,
"y": 5,
"w": 1,
"h": 3,
"title": "Code Review",
"color": "#ec4899"
},
{
"id": "11",
"x": 4,
"y": 3,
"w": 1,
"h": 4,
"title": "Retro",
"color": "#84cc16"
},
{
"id": "12",
"x": 0,
"y": 12,
"w": 3,
"h": 2,
"title": "Offsite Workshop",
"color": "#8b5cf6"
},
{
"id": "13",
"x": 1,
"y": 12,
"w": 3,
"h": 2,
"title": "Team Offsite",
"color": "#0ea5e9"
},
{
"id": "14",
"x": 2,
"y": 15,
"w": 2,
"h": 3,
"title": "Conf Talk Prep",
"color": "#d97706"
}
]