Particle Flow Calendar Demo

Event Title

Date

October 2025

Installation

Props

Prop	Type	Default	Description
`initialEvents`	`ParticleEvent[]`	`[]`	Array of initial events
`particleCount`	`number`	`30`	Number of particles to display
`radius`	`number`	`150`	Radius of particle circle
`size`	`number`	`420`	Size of the container
`onEventsChange`	`(events: ParticleEvent[]) => void`	-	Callback when events change

Usage

import {
  ParticleFlowCalendar,
  ParticleEvent,
} from "@/components/ui/particle-flow-calendar";
 
const events: ParticleEvent[] = [
  {
    id: 1,
    title: "Conference",
    date: new Date(),
  },
];
 
function MyCalendar() {
  const [events, setEvents] = React.useState<ParticleEvent[]>([]);
 
  return (
    <ParticleFlowCalendar
      initialEvents={events}
      onEventsChange={setEvents}
      particleCount={36}
      radius={160}
      size={450}
    />
  );
}