timetable schedule weekly grid classes sessions calendar timetable schedule weekly grid classes sessions calendar time slots gym weekly schedule grid with time slots class timetable with color-coded sessions
Timetable Base
Fetch pattern JSON:
curl https://webspire.de/patterns/timetable/base.json base.html
<section class="ws-timetable bg-[var(--ws-timetable-bg)] py-16">
<div class="mx-auto max-w-5xl px-6">
<div class="text-center">
<p class="text-sm font-semibold uppercase tracking-wider text-indigo-600">Schedule</p>
<h2 class="mt-2 text-3xl font-bold text-slate-900">Weekly Timetable</h2>
<p class="mt-3 text-lg text-slate-500">Find the perfect class for your schedule. Drop in anytime.</p>
</div>
<div class="mt-10 overflow-x-auto">
<table class="w-full min-w-[640px] border-collapse text-sm">
<thead>
<tr>
<th scope="col" class="w-20 border-b border-slate-200 p-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Time</th>
<th scope="col" class="border-b border-slate-200 p-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Mon</th>
<th scope="col" class="border-b border-slate-200 p-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Tue</th>
<th scope="col" class="border-b border-slate-200 p-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Wed</th>
<th scope="col" class="border-b border-slate-200 p-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Thu</th>
<th scope="col" class="border-b border-slate-200 p-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Fri</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<!-- 09:00 -->
<tr>
<th scope="row" class="p-3 text-left text-sm font-medium text-slate-700">09:00</th>
<td class="p-2">
<div class="rounded-lg bg-blue-50 p-2.5">
<p class="font-medium text-blue-700">Yoga Flow</p>
<p class="text-xs text-blue-500">Sarah M.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-emerald-50 p-2.5">
<p class="font-medium text-emerald-700">Pilates</p>
<p class="text-xs text-emerald-500">Laura K.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-blue-50 p-2.5">
<p class="font-medium text-blue-700">Yoga Flow</p>
<p class="text-xs text-blue-500">Sarah M.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-amber-50 p-2.5">
<p class="font-medium text-amber-700">Stretch & Relax</p>
<p class="text-xs text-amber-500">Tina R.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-emerald-50 p-2.5">
<p class="font-medium text-emerald-700">Pilates</p>
<p class="text-xs text-emerald-500">Laura K.</p>
</div>
</td>
</tr>
<!-- 10:00 -->
<tr>
<th scope="row" class="p-3 text-left text-sm font-medium text-slate-700">10:00</th>
<td class="p-2">
<div class="rounded-lg bg-rose-50 p-2.5">
<p class="font-medium text-rose-700">HIIT Cardio</p>
<p class="text-xs text-rose-500">Mike D.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-violet-50 p-2.5">
<p class="font-medium text-violet-700">Spinning</p>
<p class="text-xs text-violet-500">Chris L.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-rose-50 p-2.5">
<p class="font-medium text-rose-700">HIIT Cardio</p>
<p class="text-xs text-rose-500">Mike D.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-violet-50 p-2.5">
<p class="font-medium text-violet-700">Spinning</p>
<p class="text-xs text-violet-500">Chris L.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-rose-50 p-2.5">
<p class="font-medium text-rose-700">CrossFit</p>
<p class="text-xs text-rose-500">Jake W.</p>
</div>
</td>
</tr>
<!-- 11:00 -->
<tr>
<th scope="row" class="p-3 text-left text-sm font-medium text-slate-700">11:00</th>
<td class="p-2">
<div class="rounded-lg bg-emerald-50 p-2.5">
<p class="font-medium text-emerald-700">Body Pump</p>
<p class="text-xs text-emerald-500">Alex T.</p>
</div>
</td>
<td class="p-2"></td>
<td class="p-2">
<div class="rounded-lg bg-emerald-50 p-2.5">
<p class="font-medium text-emerald-700">Body Pump</p>
<p class="text-xs text-emerald-500">Alex T.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-blue-50 p-2.5">
<p class="font-medium text-blue-700">Yoga Flow</p>
<p class="text-xs text-blue-500">Sarah M.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-amber-50 p-2.5">
<p class="font-medium text-amber-700">Stretch & Relax</p>
<p class="text-xs text-amber-500">Tina R.</p>
</div>
</td>
</tr>
<!-- 12:00 -->
<tr>
<th scope="row" class="p-3 text-left text-sm font-medium text-slate-700">12:00</th>
<td class="p-2">
<div class="rounded-lg bg-amber-50 p-2.5">
<p class="font-medium text-amber-700">Zumba</p>
<p class="text-xs text-amber-500">Maria G.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-rose-50 p-2.5">
<p class="font-medium text-rose-700">Boxing Basics</p>
<p class="text-xs text-rose-500">Jake W.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-amber-50 p-2.5">
<p class="font-medium text-amber-700">Zumba</p>
<p class="text-xs text-amber-500">Maria G.</p>
</div>
</td>
<td class="p-2"></td>
<td class="p-2">
<div class="rounded-lg bg-violet-50 p-2.5">
<p class="font-medium text-violet-700">Spinning</p>
<p class="text-xs text-violet-500">Chris L.</p>
</div>
</td>
</tr>
<!-- 13:00 -->
<tr>
<th scope="row" class="p-3 text-left text-sm font-medium text-slate-700">13:00</th>
<td class="p-2">
<div class="rounded-lg bg-violet-50 p-2.5">
<p class="font-medium text-violet-700">Barre</p>
<p class="text-xs text-violet-500">Laura K.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-blue-50 p-2.5">
<p class="font-medium text-blue-700">Meditation</p>
<p class="text-xs text-blue-500">Sarah M.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-violet-50 p-2.5">
<p class="font-medium text-violet-700">Barre</p>
<p class="text-xs text-violet-500">Laura K.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-rose-50 p-2.5">
<p class="font-medium text-rose-700">HIIT Cardio</p>
<p class="text-xs text-rose-500">Mike D.</p>
</div>
</td>
<td class="p-2">
<div class="rounded-lg bg-blue-50 p-2.5">
<p class="font-medium text-blue-700">Meditation</p>
<p class="text-xs text-blue-500">Sarah M.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Legend -->
<div class="mt-6 flex flex-wrap justify-center gap-4 text-xs">
<span class="flex items-center gap-1.5"><span class="h-3 w-3 rounded-full bg-blue-400"></span> Mind & Body</span>
<span class="flex items-center gap-1.5"><span class="h-3 w-3 rounded-full bg-emerald-400"></span> Strength</span>
<span class="flex items-center gap-1.5"><span class="h-3 w-3 rounded-full bg-rose-400"></span> Cardio</span>
<span class="flex items-center gap-1.5"><span class="h-3 w-3 rounded-full bg-violet-400"></span> Specialty</span>
<span class="flex items-center gap-1.5"><span class="h-3 w-3 rounded-full bg-amber-400"></span> Flexibility</span>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
timetablescheduleweeklygridclassessessionscalendar
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| timetable | Yes | Table with time rows and weekday columns containing session cards. |
| legend | No | Color legend for event categories. |