Calendar — OutfitKit
Calendar
Vista mensual con eventos. Construido a partir de primitivos: no existe ningún componente Calendar en OutfitKit. Es composición de un Card + header con nav + Grid cols="7" de días con Chip para eventos. Consulta el ejemplo completo en examples/mini-apps/calendar.html.
Composición:
Card + Toolbar (título + Button de navegación + Chip de filtros) + un Grid cols="7" de cabecera de días + un Grid cols="7" de celdas. Cada celda es un <div> con número de día + Chip size="sm" para eventos.
Vista mensual · mayo 2026
Mayo 2026
Vencimiento
Recordatorio
Informativo
Lun
Mar
Mié
Jue
Vie
Sáb
Dom
27
28
29
30
1
09:00 Festivo2
3
4
5
10:00 Demo6
12:00 Inv.Nóminas7 · Hoy
15:30 Reunión17:00 Llamada+ 3 más
8
9
10
11
12
Vence factura13
14
All-hands15
16
17
<div class="card" style="width:100%">
<header class="head row" style="justify-content:space-between;align-items:center">
<h2 class="title lg">Mayo 2026</h2>
<div class="row" style="gap:4px">
<button class="btn ghost sm icon"><iconify-icon icon="lucide:chevron-left" width="16"></iconify-icon></button>
<button class="btn outline sm">Hoy</button>
<button class="btn ghost sm icon"><iconify-icon icon="lucide:chevron-right" width="16"></iconify-icon></button>
</div>
</header>
<div class="row meta" style="gap:14px;padding:0 12px 8px;flex-wrap:wrap">
<span><span class="dot danger"></span> Vencimiento</span>
<span><span class="dot warn"></span> Recordatorio</span>
<span><span class="dot info"></span> Informativo</span>
</div>
<div class="grid grid-auto-cols cols-7 gap-1">
<div class="meta text-center">Lun</div><div class="meta text-center">Mar</div><div class="meta text-center">Mié</div><div class="meta text-center">Jue</div><div class="meta text-center">Vie</div><div class="meta text-center">Sáb</div><div class="meta text-center">Dom</div>
</div>
<div class="grid grid-auto-cols cols-7 gap-1">
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">27</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">28</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">29</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">30</div></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">1</div><span class="chip info sm">09:00 Festivo</span></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">2</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">3</div></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">4</div></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">5</div><span class="chip brand sm">10:00 Demo</span></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">6</div><span class="chip success sm">12:00 Inv.</span><span class="chip info sm">Nóminas</span></div>
<div class="card ring brand" style="min-height:90px;padding:6px"><div class="title sm">7 · Hoy</div><span class="chip brand sm">15:30 Reunión</span><span class="chip warn sm">17:00 Llamada</span><div class="meta">+ 3 más</div></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">8</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">9</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">10</div></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">11</div></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">12</div><span class="chip danger sm">Vence factura</span></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">13</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--brand-soft)"><div class="title sm brand">14</div><span class="chip brand sm">All-hands</span></div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">15</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">16</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">17</div></div>
</div>
</div><Card>
<header class="head row" style="justify-content:space-between;align-items:center">
<h2 class="title lg">Mayo 2026</h2>
<div class="row" style="gap:4px">
<Button icon="lucide:chevron-left" icon_only variant="ghost" size="sm" />
<Button label="Hoy" variant="outline" size="sm" />
<Button icon="lucide:chevron-right" icon_only variant="ghost" size="sm" />
</div>
</header>
<!-- Leyenda -->
<div class="row meta" style="gap:14px;padding:0 12px 8px;flex-wrap:wrap">
<span><span class="dot danger"></span> Vencimiento</span>
<span><span class="dot warn"></span> Recordatorio</span>
<span><span class="dot info"></span> Informativo</span>
</div>
<!-- Cabecera de días -->
<Grid cols="7" gap="1">
<div class="meta text-center">Lun</div>
<div class="meta text-center">Mar</div>
<div class="meta text-center">Mié</div>
<div class="meta text-center">Jue</div>
<div class="meta text-center">Vie</div>
<div class="meta text-center">Sáb</div>
<div class="meta text-center">Dom</div>
</Grid>
<!-- Grid de celdas -->
<Grid cols="7" gap="1">
<!-- Fila 1: días "fuera" del mes anterior + inicio de mayo -->
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">27</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">28</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">29</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">30</div></div>
<div class="card flat" style="min-height:90px;padding:6px">
<div class="meta">1</div>
<Chip color="info" size="sm">09:00 Festivo</Chip>
</div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">2</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">3</div></div>
<!-- Fila 2 -->
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">4</div></div>
<div class="card flat" style="min-height:90px;padding:6px">
<div class="meta">5</div>
<Chip color="brand" size="sm">10:00 Demo</Chip>
</div>
<div class="card flat" style="min-height:90px;padding:6px">
<div class="meta">6</div>
<Chip color="success" size="sm">12:00 Inv.</Chip>
<Chip color="info" size="sm">Nóminas</Chip>
</div>
<div class="card ring brand" style="min-height:90px;padding:6px">
<div class="title sm">7 · Hoy</div>
<Chip color="brand" size="sm">15:30 Reunión</Chip>
<Chip color="warn" size="sm">17:00 Llamada</Chip>
<div class="meta">+ 3 más</div>
</div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">8</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">9</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">10</div></div>
<!-- Fila 3 -->
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">11</div></div>
<div class="card flat" style="min-height:90px;padding:6px">
<div class="meta">12</div>
<Chip color="danger" size="sm">Vence factura</Chip>
</div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">13</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--brand-soft)">
<div class="title sm brand">14</div>
<Chip color="brand" size="sm">All-hands</Chip>
</div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">15</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">16</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">17</div></div>
</Grid>
</Card><Card>
<header class="head row" style="justify-content:space-between;align-items:center">
<h2 class="title lg">Mayo 2026</h2>
<div class="row" style="gap:4px">
<Button icon="lucide:chevron-left" icon_only variant="ghost" size="sm" />
<Button label="Hoy" variant="outline" size="sm" />
<Button icon="lucide:chevron-right" icon_only variant="ghost" size="sm" />
</div>
</header>
<!-- Leyenda -->
<div class="row meta" style="gap:14px;padding:0 12px 8px;flex-wrap:wrap">
<span><span class="dot danger"></span> Vencimiento</span>
<span><span class="dot warn"></span> Recordatorio</span>
<span><span class="dot info"></span> Informativo</span>
</div>
<!-- Cabecera de días -->
<Grid cols="7" gap="1">
<div class="meta text-center">Lun</div>
<div class="meta text-center">Mar</div>
<div class="meta text-center">Mié</div>
<div class="meta text-center">Jue</div>
<div class="meta text-center">Vie</div>
<div class="meta text-center">Sáb</div>
<div class="meta text-center">Dom</div>
</Grid>
<!-- Grid de celdas -->
<Grid cols="7" gap="1">
<!-- Fila 1: días "fuera" del mes anterior + inicio de mayo -->
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">27</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">28</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">29</div></div>
<div class="card flat muted" style="min-height:90px;padding:6px"><div class="meta">30</div></div>
<div class="card flat" style="min-height:90px;padding:6px">
<div class="meta">1</div>
<Chip color="info" size="sm">09:00 Festivo</Chip>
</div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">2</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">3</div></div>
<!-- Fila 2 -->
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">4</div></div>
<div class="card flat" style="min-height:90px;padding:6px">
<div class="meta">5</div>
<Chip color="brand" size="sm">10:00 Demo</Chip>
</div>
<div class="card flat" style="min-height:90px;padding:6px">
<div class="meta">6</div>
<Chip color="success" size="sm">12:00 Inv.</Chip>
<Chip color="info" size="sm">Nóminas</Chip>
</div>
<div class="card ring brand" style="min-height:90px;padding:6px">
<div class="title sm">7 · Hoy</div>
<Chip color="brand" size="sm">15:30 Reunión</Chip>
<Chip color="warn" size="sm">17:00 Llamada</Chip>
<div class="meta">+ 3 más</div>
</div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">8</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">9</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">10</div></div>
<!-- Fila 3 -->
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">11</div></div>
<div class="card flat" style="min-height:90px;padding:6px">
<div class="meta">12</div>
<Chip color="danger" size="sm">Vence factura</Chip>
</div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">13</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--brand-soft)">
<div class="title sm brand">14</div>
<Chip color="brand" size="sm">All-hands</Chip>
</div>
<div class="card flat" style="min-height:90px;padding:6px"><div class="meta">15</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">16</div></div>
<div class="card flat" style="min-height:90px;padding:6px;background:var(--bg-2)"><div class="meta">17</div></div>
</Grid>
</Card>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Para selección de fecha simple (date-picker) usa el componente Datetime.