Data Display calendardatagrid

Minimal Month Calendar

Compact calendar grid for event scheduling and date selection.

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

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/MinimalMonthCalendar.astro and paste the following code:

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>

Quick Info

Category
Data Display
Filename
MinimalMonthCalendar.astro
Dependencies
None — pure Astro + CSS
Tags
calendardatagrid