1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos calendardatagrid

Minimal Month Calendar

Vista de calendario mensual con eventos destacados, días activos y selector de mes.

October 2024

MoTuWeThFrSaSu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { MinimalMonthCalendar } from 'astro-component-kit';
---

<CalendarGridView>Content</CalendarGridView>
--- import { MinimalMonthCalendar } from 'astro-component-kit'; --- <CalendarGridView>Content</CalendarGridView>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/MinimalMonthCalendar.astro:

astro 
---
---
<div class="cal-card">
  <div class="cal-head"><h4>October 2024</h4></div>
  <div class="cal-grid">
    <span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span><span>Su</span>
    {[...Array(31)].map((_, i) => <div class:list={[{ "today": i+1 === 24 }]}>{i+1}</div>)}
  </div>
</div>
<style>
  .cal-card { background: #111; border: 1px solid #333; border-radius: 16px; padding: 1.25rem; width: fit-content; }
  .cal-head { text-align: center; margin-bottom: 1rem; color: #fff; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 35px); text-align: center; font-size: 0.75rem; color: #64748b; }
  .cal-grid span { font-weight: 800; padding: 5px 0; color: #818cf8; }
  .cal-grid div { padding: 8px 0; cursor: pointer; transition: 0.2s; }
  .cal-grid div:hover { color: #fff; background: rgba(255,255,255,0.05); border-radius: 5px; }
  .today { background: #6366f1; color: #fff !important; border-radius: 5px; box-shadow: 0 0 10px rgba(99,102,241,0.4); }
</style>
--- --- <div class="cal-card"> <div class="cal-head"><h4>October 2024</h4></div> <div class="cal-grid"> <span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span><span>Su</span> {[...Array(31)].map((_, i) => <div class:list={[{ "today": i+1 === 24 }]}>{i+1}</div>)} </div> </div> <style> .cal-card { background: #111; border: 1px solid #333; border-radius: 16px; padding: 1.25rem; width: fit-content; } .cal-head { text-align: center; margin-bottom: 1rem; color: #fff; } .cal-grid { display: grid; grid-template-columns: repeat(7, 35px); text-align: center; font-size: 0.75rem; color: #64748b; } .cal-grid span { font-weight: 800; padding: 5px 0; color: #818cf8; } .cal-grid div { padding: 8px 0; cursor: pointer; transition: 0.2s; } .cal-grid div:hover { color: #fff; background: rgba(255,255,255,0.05); border-radius: 5px; } .today { background: #6366f1; color: #fff !important; border-radius: 5px; box-shadow: 0 0 10px rgba(99,102,241,0.4); } </style>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
MinimalMonthCalendar.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
calendardatagrid