Calendar Widget

A calendar widget with animated dates and blur effects. It shows a month's dates, highlights the selected date, and displays events with blur. It allows scrolling and interaction with tap and drag. Use it for date selection and event tracking in a visually engaging way.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/calendar-widget

npx layro-cli add @watermeloncorp/calendar-widget

npx layro-cli add @watermeloncorp/calendar-widget

bunx layro-cli add @watermeloncorp/calendar-widget

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import { useState, useRef, useEffect, type FC } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { CalendarDays } from 'lucide-react';

export interface CalendarEvent {
  title: string;
  time: string;
}

export interface EventsData {
  [key: string]: CalendarEvent[];
}