Bill Calendar

Docs

Bill Calendar

Displays a beautiful Bill Calendar.

Component event-calendar not found in registry.

Installation

Install the following dependencies:

npm install framer-motion

Copy 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.