import React, { Dispatch, SetStateAction, SyntheticEvent, useState, } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { format } from "date-fns"; import { FiArrowLeft, FiArrowRight, FiEdit } from "react-icons/fi"; import { DateObj, useDayzed } from "dayzed"; export const FlipCalendarExample = () => { return (

); }; const FlipCalendar = () => { const [index, setIndex] = useState(0); const [date, setDate] = useState(new Date()); const [visible, setVisible] = useState(true); const handleSelectDate = (selectedDate: { date: Date }) => { setDate(selectedDate.date); setIndex((pv) => pv + 1); }; return (

{visible && ( )}

); }; const CalendarDisplay = ({ index, date, visible, setVisible, }: CalendarDisplayProps) => { return (

{format(date, "LLLL")}

{format(date, "do")}

{format(date, "do")} {format(date, "yyyy")}

); }; const DatePicker = (props: DatePickerProps) => { let { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed(props); const calendar = calendars[0]; return (

{MONTH_NAMES[calendar.month]} {calendar.year}

{WEEKDAY_NAMES.map((weekday) => (

{weekday}

))}

{calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => { let key = `${calendar.month}${calendar.year}${weekIndex}${index}`; if (!dateObj) { return (

); } let { date, selected } = dateObj; return ( ); }) )}

); }; interface CalendarDisplayProps { index: number; date: Date; visible: boolean; setVisible: Dispatch>; } interface DatePickerProps { selected: Date; onDateSelected: ( selectedDate: DateObj, event: SyntheticEvent ) => void; } const MONTH_NAMES = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; const WEEKDAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

Calendars

Flip Calendar