"use client"; import React from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ChevronLeft, ChevronRight, Plus, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import Image from "next/image"; import { cn } from "@/lib/utils"; import { add, eachDayOfInterval, endOfMonth, format, isEqual, isSameMonth, isToday, parse, startOfMonth, startOfWeek, endOfWeek, } from "date-fns"; interface Subscription { id: string; name: string; date: number; icon: string; color: string; } interface SubscriptionDay { date: Date; subscriptions: Subscription[]; isCurrentMonth: boolean; } function EventCalendar() { const [subscriptions, setSubscriptions] = React.useState([]); const [currentMonth, setCurrentMonth] = React.useState( format(new Date(), "MMM-yyyy"), ); const [isAddModalOpen, setIsAddModalOpen] = React.useState(false); const firstDayCurrentMonth = parse(currentMonth, "MMM-yyyy", new Date()); const days = React.useMemo(() => { const start = startOfWeek(startOfMonth(firstDayCurrentMonth)); const end = endOfWeek(endOfMonth(firstDayCurrentMonth)); return eachDayOfInterval({ start, end }).map( (day): SubscriptionDay => ({ date: day, subscriptions: subscriptions.filter( (subscription) => subscription.date === day.getDate(), ), isCurrentMonth: isSameMonth(day, firstDayCurrentMonth), }), ); }, [firstDayCurrentMonth, subscriptions]); function previousMonth() { const firstDayNextMonth = add(firstDayCurrentMonth, { months: -1 }); setCurrentMonth(format(firstDayNextMonth, "MMM-yyyy")); } function nextMonth() { const firstDayNextMonth = add(firstDayCurrentMonth, { months: 1 }); setCurrentMonth(format(firstDayNextMonth, "MMM-yyyy")); } const handleAddSubscription = (newSubscription: Omit) => { const subscription = { ...newSubscription, id: Date.now().toString() }; setSubscriptions([...subscriptions, subscription]); }; const handleRemoveSubscription = (id: string) => { setSubscriptions(subscriptions.filter((sub) => sub.id !== id)); }; return (

{format(firstDayCurrentMonth, "MMMM yyyy")}

{["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map((day) => ( {day} ))} {days.map((day, dayIdx) => ( {format(day.date, "d")}

{day.subscriptions.map((subscription) => (

{subscription.name} ))}

))}

); } export default EventCalendar;

Event Calendar

Installation

Install the package

Paste this code into your project

Build Beautiful Interfaces LikeSpectrum UI for Your Product

Build Beautiful Interfaces Like
Spectrum UI for Your Product