"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