Glass Calendar

Component 1.8K

About

A sleek, animated calendar component with a glassmorphism effect. It's interactive, theme-adaptive, and now features a smooth horizontal scroll to navigate the days of the month.

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

Code

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

Usage.tsx

import * as React from "react";
import { GlassCalendar } from "@/components/ui/glass-calendar"; // Adjust the import path as needed

export default function GlassCalendarDemo() {
  const [selectedDate, setSelectedDate] = React.useState(new Date());
  
  // A high-quality, abstract background image for the glass effect
  const backgroundImageUrl = "https://cdn.21st.dev/assets/mirror/6b/6b26d74b493809987a1077fff2770ce4fe1914e3032b286d07e410d034884e13.jpg";

  return (
    <div 
      className="flex min-h-screen w-full items-center justify-center bg-cover bg-center p-4 bg-slate-900"
      style={{ backgroundImage: `url(${backgroundImageUrl})` }}
    >
      <GlassCalendar 
        selectedDate={selectedDate}
        onDateSelect={setSelectedDate}
        className="transform transition-transform duration-500 hover:scale-105"
      />
    </div>
  );
}