Economic Calendar

Cards 227

About

Economic Calendar Description: A responsive, horizontally-scrolling component to display a series of economic events. It features controls for navigation and uses framer-motion for smooth loading and interaction animations. The component is themed using shadcn/ui variables for seamless light and dark mode support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Economic Calendar to your project and fits it to your theme.

Code

How Economic Calendar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { EconomicCalendar, EconomicEvent } from "@/components/ui/economic-calendar";

const eventsData: EconomicEvent[] = [
  {
    countryCode: "US",
    time: "21:30",
    eventName: "15-Year Mortgage Rate",
    actual: "10:59",
    forecast: null,
    prior: "5.49%",
    impact: 'medium',
  },
  {
    countryCode: "US",
    time: "21:30",
    eventName: "30-Year Mortgage Rate",
    actual: "10:59",
    forecast: null,
    prior: "6.3%",
    impact: 'high',
  },
  {
    countryCode: "EU",
    time: "22:30",
    eventName: "ECB Guindos Speech",
    actual: null,
    forecast: null,
    prior: null,
    impact: 'low',
  },
  {
    countryCode: "CA",
    time: "23:10",
    eventName: "BoC Mendes Speech",
    actual: null,
    forecast: null,
    prior: null,
    impact: 'low',
  },
  {
    countryCode: "JP",
    time: "23:50",
    eventName: "BoJ Core CPI y/y",
    actual: "2.8%",
    forecast: "2.9%",
    prior: "3.1%",
    impact: 'high',
  },
  {
    countryCode: "AU",
    time: "01:00",
    eventName: "RBA Financial Stability Review",
    actual: null,
    forecast: null,
    prior: null,
    impact: 'medium',
  },
];

export default function EconomicCalendarDemo() {
  return (
    <div className="w-full bg-background flex items-center justify-center py-12">
      <EconomicCalendar title="Economic Calendar" events={eventsData} />
    </div>
  );
}