widget calendar week events schedule dashboard widget calendar week events schedule planner weekly calendar widget event schedule mini calendar
Widget Calendar
Fetch pattern JSON:
curl https://webspire.de/patterns/widgets/calendar.json calendar.html
<div class="ws-widgets rounded-xl border border-[var(--ws-widgets-border)] bg-[var(--ws-widgets-bg)] p-5">
<div class="mb-4 flex items-center justify-between">
<h3 class="text-sm font-semibold text-[var(--ws-widgets-text)]">March 2026</h3>
<div class="flex gap-1">
<button type="button" class="rounded-md p-1 text-[var(--ws-widgets-text-soft)] hover:bg-[var(--ws-widgets-border)]" aria-label="Previous week">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
</button>
<button type="button" class="rounded-md p-1 text-[var(--ws-widgets-text-soft)] hover:bg-[var(--ws-widgets-border)]" aria-label="Next week">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>
</button>
</div>
</div>
<div class="grid grid-cols-7 gap-1 text-center text-xs" role="grid" aria-label="Weekly calendar view">
<div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Mon</div>
<div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Tue</div>
<div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Wed</div>
<div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Thu</div>
<div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Fri</div>
<div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Sat</div>
<div role="columnheader" class="pb-2 font-medium text-[var(--ws-widgets-text-soft)]">Sun</div>
<div class="py-1 text-[var(--ws-widgets-text)]">16</div>
<div class="py-1 text-[var(--ws-widgets-text)]">17</div>
<div class="rounded-md bg-[var(--ws-widgets-accent)]/10 py-1 font-semibold text-[var(--ws-widgets-accent)]">18</div>
<div class="py-1 text-[var(--ws-widgets-text)]">19</div>
<div class="py-1 text-[var(--ws-widgets-text)]">20</div>
<div class="py-1 text-[var(--ws-widgets-text-soft)]">21</div>
<div class="py-1 text-[var(--ws-widgets-text-soft)]">22</div>
</div>
<div class="mt-3 space-y-1.5">
<div class="flex items-center gap-2 rounded-md bg-indigo-500/10 px-2 py-1.5 text-xs">
<span class="h-2 w-2 rounded-full bg-indigo-500" aria-hidden="true"></span>
<span class="font-medium text-[var(--ws-widgets-text)]">Team Standup</span>
<span class="ml-auto text-[var(--ws-widgets-text-soft)]">9:00</span>
</div>
<div class="flex items-center gap-2 rounded-md bg-emerald-500/10 px-2 py-1.5 text-xs">
<span class="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>
<span class="font-medium text-[var(--ws-widgets-text)]">Design Review</span>
<span class="ml-auto text-[var(--ws-widgets-text-soft)]">14:00</span>
</div>
<div class="flex items-center gap-2 rounded-md bg-amber-500/10 px-2 py-1.5 text-xs">
<span class="h-2 w-2 rounded-full bg-amber-500" aria-hidden="true"></span>
<span class="font-medium text-[var(--ws-widgets-text)]">Sprint Planning</span>
<span class="ml-auto text-[var(--ws-widgets-text-soft)]">16:30</span>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
widgetcalendarweekeventsscheduledashboard
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Month/year label and navigation arrows. |
| grid | Yes | 7-column day grid with date numbers. |
| events | Yes | List of colored event items. |
Week view calendar widget with a 7-column day grid, highlighted current day, and color-coded event blocks below. Perfect for dashboard sidebars and schedule overviews.