Docs
Bill Calendar
Bill Calendar
Displays a beautiful Bill Calendar.
October 2024
Current Month
5 Events
October 2024
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | +1 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
Installation
Install the following dependencies:
npm install @radix-ui/react-tooltip framer-motion date-fns react-day-picker rechartsInstall the shadcn/ui dependencies:
You need to install shadcn components, like this:
npx shadcn@latest add chart toastCopy 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. |