planning daily productivity morning-ritual mit backlog scheduler intention time-blocking daily planning morning ritual MIT most important tasks intention backlog time blocking productivity build a daily planning screen morning ritual view with priorities and schedule structured daily planner
Daily Planning View
Fetch pattern JSON:
curl https://webspire.de/patterns/daily-planning/base.json base.html
<!-- Daily Planning View — 4-in-1: Intention · MIT · Backlog→Heute · Zeitplan -->
<div class="ws-daily-planning bg-[var(--ws-color-surface)] flex flex-col overflow-hidden" style="height:700px;font-family:system-ui,sans-serif">
<!-- Header -->
<div class="flex items-center justify-between px-6 py-3 border-b border-slate-100 flex-shrink-0">
<div>
<p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Tagesplanung</p>
<h2 class="text-base font-semibold text-slate-900">Freitag, 27. März 2026</h2>
</div>
<div class="flex items-center gap-3">
<span class="text-xs text-slate-400">3 erledigt gestern</span>
<button class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors">
Starte deinen Tag →
</button>
</div>
</div>
<!-- Intention strip -->
<div class="px-6 py-3 border-b border-slate-100 bg-slate-50/50 flex-shrink-0">
<label class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block mb-1" for="intention">Tagesintention</label>
<textarea id="intention" rows="2"
class="w-full text-sm text-slate-700 bg-transparent resize-none outline-none placeholder:text-slate-300 dark:placeholder:text-slate-600"
placeholder="Was ist dein wichtigstes Ziel heute?">Heute fokussiert an der API-Dokumentation arbeiten und den Code Review abschließen.</textarea>
</div>
<!-- 3-column main -->
<div class="flex-1 grid overflow-hidden min-w-0" style="grid-template-columns:220px 1fr 280px">
<!-- MIT column -->
<aside class="border-r border-slate-100 flex flex-col overflow-y-auto p-4">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3">
Wichtigste 3 <span class="text-blue-500 font-normal normal-case tracking-normal ml-1" id="mit-count">2/3</span>
</h3>
<div class="flex flex-col gap-1" id="mit-list">
<div class="flex items-start gap-2 py-2 border-b border-slate-50 group">
<span class="text-amber-400 mt-0.5 flex-shrink-0">★</span>
<span class="text-sm text-slate-700 flex-1 leading-snug">API-Dokumentation</span>
<button class="text-slate-300 hover:text-red-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity" data-remove-mit>✕</button>
</div>
<div class="flex items-start gap-2 py-2 border-b border-slate-50 group">
<span class="text-amber-400 mt-0.5 flex-shrink-0">★</span>
<span class="text-sm text-slate-700 flex-1 leading-snug">Code Review</span>
<button class="text-slate-300 hover:text-red-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity" data-remove-mit>✕</button>
</div>
</div>
<p class="text-xs text-slate-400 mt-3">Noch 1 Platz frei — ★ in der Heute-Liste tippen</p>
</aside>
<!-- Backlog ↔ Heute -->
<div class="flex flex-col overflow-hidden border-r border-slate-100">
<div class="flex-1 overflow-y-auto">
<div class="grid grid-cols-2 divide-x divide-slate-100 h-full">
<!-- Nicht geplant -->
<div class="p-4">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3">
Nicht geplant <span class="text-slate-400 font-normal normal-case tracking-normal ml-1">4</span>
</h3>
<div class="flex flex-col gap-0.5">
<div class="flex items-center gap-2 py-2 border-b border-slate-50 group">
<span class="text-xs text-slate-600 flex-1 leading-snug">Newsletter schreiben</span>
<button class="text-[11px] text-slate-300 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">→ Heute</button>
</div>
<div class="flex items-center gap-2 py-2 border-b border-slate-50 group">
<span class="text-xs text-slate-600 flex-1 leading-snug">Backlog grooming</span>
<button class="text-[11px] text-slate-300 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">→ Heute</button>
</div>
<div class="flex items-center gap-2 py-2 border-b border-slate-50 group">
<span class="text-xs text-slate-600 flex-1 leading-snug">Rechnungen prüfen</span>
<button class="text-[11px] text-slate-300 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">→ Heute</button>
</div>
<div class="flex items-center gap-2 py-2 border-b border-slate-50 group">
<span class="text-xs text-slate-600 flex-1 leading-snug">Präsentation vorbereiten</span>
<button class="text-[11px] text-slate-300 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">→ Heute</button>
</div>
</div>
</div>
<!-- Heute -->
<div class="p-4">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3">
Heute <span class="text-blue-500 font-normal normal-case tracking-normal ml-1">3</span>
</h3>
<div class="flex flex-col gap-0.5">
<div class="flex items-start gap-2 py-2 border-b border-slate-50 group">
<button class="text-amber-400 flex-shrink-0 mt-0.5 text-sm" title="Als MIT markiert">★</button>
<span class="text-sm text-slate-700 flex-1 leading-snug">API-Dokumentation</span>
<button class="text-[11px] text-slate-300 hover:text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap mt-0.5">← raus</button>
</div>
<div class="flex items-start gap-2 py-2 border-b border-slate-50 group">
<button class="text-amber-400 flex-shrink-0 mt-0.5 text-sm" title="Als MIT markiert">★</button>
<span class="text-sm text-slate-700 flex-1 leading-snug">Code Review</span>
<button class="text-[11px] text-slate-300 hover:text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap mt-0.5">← raus</button>
</div>
<div class="flex items-start gap-2 py-2 border-b border-slate-50 group">
<button class="text-slate-300 hover:text-amber-400 flex-shrink-0 mt-0.5 text-sm transition-colors" title="Als MIT markieren">★</button>
<span class="text-sm text-slate-700 flex-1 leading-snug">E-Mails beantworten</span>
<button class="text-[11px] text-slate-300 hover:text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap mt-0.5">← raus</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Zeitplan (mini calendar, no now-line) -->
<div class="flex flex-col overflow-y-auto">
<div class="px-3 py-2.5 border-b border-slate-100 flex-shrink-0">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Zeitplan</h3>
</div>
<div class="flex-1 overflow-y-auto">
<div class="relative" style="height:704px"><!-- 11h × 64px -->
<div class="absolute inset-0 pointer-events-none select-none">
<div class="absolute left-0 right-0 flex items-start" style="top:0;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">08:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:64px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">09:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:128px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">10:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:192px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">11:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:256px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">12:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:320px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">13:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:384px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">14:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:448px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">15:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:512px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">16:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:576px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">17:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
<div class="absolute left-0 right-0 flex items-start" style="top:640px;height:64px"><span class="w-10 text-right pr-2 pt-1 text-[10px] text-slate-400">18:00</span><div class="flex-1 border-t border-slate-100 mt-[10px]"></div></div>
</div>
<div class="absolute rounded-lg bg-blue-50 border-l-[3px] border-blue-500 px-2 py-1.5 overflow-hidden"
style="left:44px;right:4px;top:64px;height:96px">
<p class="text-[11px] font-semibold text-blue-700">API-Dokumentation</p>
<p class="text-[10px] text-blue-500 mt-0.5">09:00 – 10:30</p>
</div>
<div class="absolute rounded-lg bg-violet-50 border-l-[3px] border-violet-500 px-2 py-1.5 overflow-hidden"
style="left:44px;right:4px;top:256px;height:64px">
<p class="text-[11px] font-semibold text-violet-700">Code Review</p>
<p class="text-[10px] text-violet-500 mt-0.5">12:00 – 13:00</p>
</div>
</div>
</div>
</div>
</div>
</div>
Details
Dark Mode Tailwind Only Copy & Paste
Stable Published
planningdailyproductivitymorning-ritualmitbacklogschedulerintentiontime-blocking
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Date label, optional stats, and a "Start Day" CTA that navigates to the active work view. |
| intention | Yes | Full-width textarea for the user's daily intention or focus statement. |
| mit | Yes | Left column showing the 3 Most Important Tasks (MIT). Tasks are starred from the today column. |
| backlog | Yes | Center column with two sub-lists — unscheduled tasks (drag/click to assign to today) and today's task list with MIT star toggle. |
| schedule | Yes | Right column — a day-view calendar grid for time-blocking (see calendar-day/base). |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| date | string | today | ISO date string for the planning session. |
A full-screen daily planning layout designed as a structured morning ritual. Four integrated sections guide the user from intention-setting to scheduling: (1) Tagesintention — a free-text focus statement; (2) Wichtigste 3 — select up to 3 Most Important Tasks; (3) Backlog → Heute — move unscheduled tasks to today’s plan; (4) Zeitplan — time-block the day with the day-view calendar grid. A “Starte deinen Tag” button closes the planning session and opens the active work view.