MiniCalendar
A compact calendar component for displaying a month view with selectable dates.
Source
LLM docs
Package
npm install @plocks/datesExamples
3
Properties
41
Playground
Basics
Compact calendar showing a week view with date selection.
Loading demo…
import { useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { MiniCalendar } from '@plocks/dates';
export function Demo() {
const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
return (
<Block fullWidth>
<MiniCalendar
value={selectedDate}
onChange={(date: Date | null) => setSelectedDate(date)}
numberOfDays={7}
/>
<Text size="sm" c="secondary">
{selectedDate ? `Selected: ${selectedDate.toLocaleDateString()}` : 'No date selected'}
</Text>
</Block>
);
}Custom Day Count
MiniCalendar with configurable number of days displayed.
Loading demo…
import React, { useState } from 'react';
import { Block, Button, Row, Text } from '@plocks/ui';
import { MiniCalendar } from '@plocks/dates';
const DAY_OPTIONS = [3, 5, 7];
export function Demo() {
const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
const [numberOfDays, setNumberOfDays] = useState(5);
return (
<Block fullWidth>
<Row gap="xs">
{DAY_OPTIONS.map((days) => (
<Button
key={days}
size="sm"
variant={numberOfDays === days ? 'filled' : 'outline'}
onPress={() => setNumberOfDays(days)}
>
{days} days
</Button>
))}
</Row>
<MiniCalendar
value={selectedDate}
onChange={(date: Date | null) => setSelectedDate(date)}
numberOfDays={numberOfDays}
/>
<Text size="sm" c="secondary">
{selectedDate ? `Selected: ${selectedDate.toLocaleDateString()}` : 'No date selected'}
</Text>
</Block>
);
}Date Constraints
MiniCalendar with minimum and maximum date restrictions.
Loading demo…
import React, { useMemo, useState } from 'react';
import { Block, Text } from '@plocks/ui';
import { MiniCalendar } from '@plocks/dates';
export function Demo() {
const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
const { minDate, maxDate } = useMemo(() => {
const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(today.getDate() + 7);
return { minDate: today, maxDate: nextWeek };
}, []);
return (
<Block fullWidth>
<MiniCalendar
value={selectedDate}
onChange={(date: Date | null) => setSelectedDate(date)}
numberOfDays={7}
minDate={minDate}
maxDate={maxDate}
/>
<Text size="sm" c="secondary">
{selectedDate ? `Selected: ${selectedDate.toLocaleDateString()}` : 'No date selected'}
</Text>
<Text size="xs" c="secondary">
Only the next seven days are enabled
</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources