Docs
Bill Calendar
Bill Calendar
Displays a beautiful Bill Calendar.
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Bill Calendar code into your project.
API Reference
| Prop | Type | Description |
|---|---|---|
| currentDate | Date | The currently displayed month. |
| selectedDate | Date | undefined | The selected date. |
| showChart | boolean | Controls the visibility of the chart. |
| events | Record<string, Event> | The list of events by date. |
| chartConfig | ChartConfig | Configuration for chart display. |
| chartData | Array<object> | Data used in the chart. |
| maxEvents | number | Maximum events displayed per day. |
| className | string | Custom class names for styling. |
| handlePreviousMonth | () => void | Handles the previous month action. |
| handleNextMonth | () => void | Handles the next month action. |
| renderDayContent | (day: Date) => JSX.Element | null | Custom rendering for each day. |
| show | () => void | Triggers a toast notification. |
| totalVisitors | number | Total visitors calculated from chart data. |
| getEventIcons | (day: Date) => JSX.Element | null | Retrieves icons for events. |