pinchcalendar
ui component after timepage
a list of days whose density follows a pinch and settles on whole days when you let go.
states
install
a react component: the command at the top installs it, or copy its two files. it fills its parent, so give the parent a height. the density lives with you: pass back what onDensityChange reports, every frame.
import { useState } from "react";
import { PinchCalendar } from "@likemiens/pinch-calendar"; // brings pinch-calendar.css with it
// outside the component: the days are drawn again when this array is a new one
const events = [{ date: "2026-10-16", time: "09:30", title: "standup" }];
export function Agenda() {
const [density, setDensity] = useState(7);
return (
<div style={{ height: 640 }}>
<PinchCalendar
from="2026-10-01"
length={84}
today="2026-10-16"
density={density}
onDensityChange={setDensity}
events={events}
locale="en"
labels={{
calendar: "Calendar",
density: "Days in view",
today: "Back to today",
days: (count) => `${count} days`,
}}
/>
</div>
);
}githubMIT
api
densitydays in view, 3–14; fractional while it movesonDensityChangeevery frame of a pinch and of the springfrom · lengththe days of the listtodaythe day on the white plateeventsdate, time, title; a taller day shows more linesrangethe fewest and the most days to settle onlocale · labelsnames of days, words for screen readersstatepinch, focus or away, shown without a handinput
pincharound the fingers, without stepsctrl + wheela trackpad pinch on a computerdrag ⋮one pointer, the top of the view holds+ −a day fewer or more↑ ↓ on ⋮the same; home and end go to the limitsround buttonback to today, when it is out of view