Calendar Widget
Multipurpose widget for your app.
In 15 mins
Design Sync01:00 PM - 2:30 PM
Installation
Run the following command
npx shadcn@latest add https://ui.cloffstudio.com/r/calendar-widget.jsonProps
| Props | Type | Default | Description |
|---|---|---|---|
title | string | - | Event title displayed in the widget (required). |
timeLabel | string | - | Short label such as 'In 15 mins' (required). |
timeRange | string | - | Human readable time range like '01:00 PM - 2:30 PM' (required). |
guests | Guest[] | [] | Array of guest objects shown when the widget is expanded (see Guest shape below). |
layoutId | string | "container" | Optional layoutId used for motion layout animations (defaults to 'container'). |
className | string | - | Optional additional className applied to the root element. |
Guest | { id: number | string; name: string; image: string; timezone?: string } | - | Shape of a guest object used inside `guests`. |
Guest.id | number | string | - | Unique identifier for the guest (number or string). |
Guest.name | string | - | Guest display name. |
Guest.image | string | - | URL to the guest's avatar image. |
Guest.timezone | string (optional) | undefined | Optional timezone string to display next to the guest's name. |