Components
Loading preview...
Event Scheduler Card Compact scheduling widget highlighting upcoming events with date, time, and location. Ideal for calendar apps to provide at-a-glance reminders and quick event actions.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-14// demo.tsx
import { EventCard } from "@/components/ui/card-14"; // Adjust the import path as needed
export default function EventCardDemo() {
const eventDate = new Date("2025-03-11T10:30:00");
const handleMarkEvent = () => {
// In a real app, this would handle the logic for marking the event.
console.log("Event action clicked!");
alert("Event marked!");
};
return (
<div className="flex h-full w-full items-center justify-center bg-background p-10">
<EventCard
heading="Scheduling"
description="You have one scheduled event today – don't miss it!"
date={eventDate}
imageUrl="https://plus.unsplash.com/premium_photo-1756839166140-b6710d3074de?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQ1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop"
imageAlt="Lush lavender fields under a clear sky with a single tree."
eventName="Expo World Press Photo Montreal"
location="325 Rue de la Commune E"
time="10:30 AM"
actionLabel="Mark this event"
onActionClick={handleMarkEvent}
/>
</div>
);
}