calendar — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited calendar (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Date picker calendar with day/month/year views, range selection, time picker, presets, min/max constraints, and animated transitions. Built on date-fns and Framer Motion.
import { Calendar } from 'reablocks';| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
value | `Date \ | [Date, Date] \ | undefined` | — | Selected date(s) |
min | Date | — | Minimum selectable date | ||
max | `Date \ | 'now'` | — | Maximum selectable date ('now' for current date) | |
disabled | boolean | — | Disable the calendar | ||
isRange | boolean | — | Enable range selection mode | ||
showDayOfWeek | boolean | — | Show day-of-week labels | ||
showToday | boolean | — | Highlight today's date | ||
showTime | boolean | false | Show time picker alongside calendar | ||
is12HourCycle | boolean | false | Use 12-hour format for time picker | ||
animated | boolean | true | Enable view transition animations | ||
animation | MotionNodeAnimationOptions | — | Custom animation for day transitions | ||
animationViewChange | MotionNodeAnimationOptions | — | Custom animation for view changes | ||
preset | PresetOption[] | — | Preset date options (quick filters) | ||
previousArrow | `ReactNode \ | string` | '‹' | Previous button content | |
nextArrow | `ReactNode \ | string` | '›' | Next button content | |
onChange | `(value: Date \ | [Date, Date]) => void` | — | Date selection handler | |
onViewChange | (view: CalendarViewType) => void | — | View change callback | ||
theme | CalendarTheme | — | Per-instance theme override |
The calendar cycles through views: 'days' → 'months' → 'years' (click header to drill up).
const [date, setDate] = useState(new Date());
<Calendar value={date} onChange={setDate} showDayOfWeek />const [range, setRange] = useState<[Date, Date]>([startDate, endDate]);
<Calendar value={range} isRange onChange={setRange} showDayOfWeek /><Calendar value={date} showTime onChange={setDate} />
<Calendar value={date} showTime is12HourCycle onChange={setDate} /><Calendar value={date} min={new Date('2024-01-01')} max="now" onChange={setDate} />const presets: PresetOption[] = [
{ label: 'Today', value: new Date() },
{ label: 'Last 7 days', value: () => [subDays(new Date(), 7), new Date()] },
{ label: 'Last 30 days', value: () => [subDays(new Date(), 30), new Date()] }
];
<Calendar value={date} preset={presets} isRange onChange={setDate} />PresetOption has { label: string; value: Date | [Date, Date] | (() => Date | [Date, Date]) }.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.