"use client" import * as React from "react" import { add, eachDayOfInterval, endOfMonth, endOfWeek, format, getDay, isEqual, isSameDay, isSameMonth, isToday, parse, startOfToday, startOfWeek, } from "date-fns" import { ChevronLeftIcon, ChevronRightIcon, Search } from "lucide-react" import { cn } from "@/src/lib/utils" import { Button } from "@/src/components/appui/button" import { Separator } from "@/src/components/appui/separator" import { useMediaQuery } from "@/lib/hooks/useMediaQuery" interface Event { id: number name: string time: string datetime: string } interface CalendarData { day: Date events: Event[] } interface FullScreenCalendarProps { data: CalendarData[] } const colStartClasses = ["", "col-start-2", "col-start-3", "col-start-4", "col-start-5", "col-start-6", "col-start-7"] export function FullScreenCalendar({ data }: FullScreenCalendarProps) { const today = startOfToday() const [selectedDay, setSelectedDay] = React.useState(today) const [currentMonth, setCurrentMonth] = React.useState(format(today, "MMM-yyyy")) const firstDayCurrentMonth = parse(currentMonth, "MMM-yyyy", new Date()) const isDesktop = useMediaQuery("(min-width: 768px)") const days = eachDayOfInterval({ start: startOfWeek(firstDayCurrentMonth), end: endOfWeek(endOfMonth(firstDayCurrentMonth)), }) 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")) } function goToToday() { setCurrentMonth(format(today, "MMM-yyyy")) } return (

{/* Calendar Header */}

{format(today, "MMM")}

{format(today, "d")}

{format(firstDayCurrentMonth, "MMMM, yyyy")}

{format(firstDayCurrentMonth, "MMM d, yyyy")} -{" "} {format(endOfMonth(firstDayCurrentMonth), "MMM d, yyyy")}

{/* Calendar Grid */}

{/* Week Days Header */}

Sun

Mon

Tue

Wed

Thu

Fri

Sat

{/* Calendar Days */}

{days.map((day, dayIdx) => !isDesktop ? ( ) : (

setSelectedDay(day)} className={cn( dayIdx === 0 && colStartClasses[getDay(day)], !isEqual(day, selectedDay) && !isToday(day) && !isSameMonth(day, firstDayCurrentMonth) && "bg-accent/50 text-muted-foreground", "relative flex flex-col border-b border-r hover:bg-muted focus:z-10", !isEqual(day, selectedDay) && "hover:bg-accent/75", )} >

{data .filter((event) => isSameDay(event.day, day)) .map((day) => (

{day.events.slice(0, 1).map((event) => (

{event.name}

{event.time}

))} {day.events.length > 1 && (

+ {day.events.length - 1} more

)}

))}

), )}

{days.map((day, dayIdx) => ( ))}

) }

Calendar

Aug

August, 2025

Installation