{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "calendar",
"type": "registry:ui",
"title": "Calendar",
"description": "A calendar component for React Native applications.",
"dependencies": [],
"registryDependencies": [],
"files": [
{
"path": "registry/calendar/calendar.tsx",
"content": "import { cn } from \"@/lib/utils\";\nimport { Ionicons } from \"@expo/vector-icons\";\nimport DateTimePicker from \"@react-native-community/datetimepicker\";\nimport {\n addMonths,\n eachDayOfInterval,\n endOfDay,\n endOfMonth,\n format,\n getMonth,\n isAfter,\n isBefore,\n isSameDay,\n isSameMonth,\n isToday,\n isWithinInterval,\n setHours,\n setMinutes,\n startOfDay,\n startOfMonth,\n subMonths,\n} from \"date-fns\";\nimport { enUS } from \"date-fns/locale\";\nimport * as React from \"react\";\nimport {\n Animated,\n Dimensions,\n Modal,\n Platform,\n Pressable,\n Text,\n View,\n} from \"react-native\";\n\nconst MONTHS = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n];\n\nconst WEEKDAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\ninterface DateRange {\n from: Date;\n to: Date;\n}\n\ninterface TimeConfig {\n minuteInterval?: 1 | 5 | 10 | 15 | 30;\n minTime?: string; // format \"HH:mm\"\n maxTime?: string; // format \"HH:mm\"\n disabledTimes?: string[]; // format [\"HH:mm\"]\n}\n\ninterface CalendarProps {\n mode?: \"single\" | \"range\" | \"datetime\";\n selected?: Date | Date[] | DateRange;\n onSelect?: (date: Date | Date[] | DateRange | undefined) => void;\n className?: string;\n showOutsideDays?: boolean;\n showTime?: boolean;\n disabled?: (date: Date) => boolean;\n disableWeekends?: boolean;\n fromDate?: Date;\n toDate?: Date;\n timeConfig?: TimeConfig;\n firstDayOfWeek?: 0 | 1; // 0 for Sunday, 1 for Monday\n enableQuickMonthYear?: boolean;\n}\n\nconst SCREEN_WIDTH = Dimensions.get(\"window\").width;\nconst DAY_SIZE = Math.min(Math.floor((SCREEN_WIDTH - 48) / 7), 50);\n\nconst isDateRange = (value: any): value is DateRange => {\n return value && typeof value === \"object\" && \"from\" in value && \"to\" in value;\n};\n\nconst isInRange = (date: Date, range: DateRange) => {\n return isWithinInterval(date, { start: range.from, end: range.to });\n};\n\nconst isRangeStart = (date: Date, range: DateRange) => {\n return isSameDay(date, range.from);\n};\n\nconst isRangeEnd = (date: Date, range: DateRange) => {\n return isSameDay(date, range.to);\n};\n\nconst CalendarHeader = React.memo(({\n currentDate,\n onPrevMonth,\n onNextMonth,\n onHeaderPress,\n enableQuickMonthYear,\n}: {\n currentDate: Date;\n onPrevMonth: () => void;\n onNextMonth: () => void;\n onHeaderPress?: () => void;\n enableQuickMonthYear?: boolean;\n}) => (\n \n \n \n \n\n {enableQuickMonthYear ? (\n \n \n {format(currentDate, \"MMMM yyyy\", { locale: enUS })}\n \n \n \n ) : (\n \n {format(currentDate, \"MMMM yyyy\", { locale: enUS })}\n \n )}\n\n \n \n \n \n));\n\nconst WeekdaysRow = React.memo(({ orderedWeekdays }: { orderedWeekdays: string[] }) => (\n \n {orderedWeekdays.map((day) => (\n \n \n {day}\n \n \n ))}\n \n));\n\nconst CalendarDay = React.memo(({\n date,\n currentDate,\n mode,\n selected,\n isSelected,\n isDisabled,\n onPress,\n}: {\n date: Date;\n currentDate: Date;\n mode: \"single\" | \"range\" | \"datetime\";\n selected: Date | Date[] | DateRange | undefined;\n isSelected: boolean;\n isDisabled: boolean;\n onPress: () => void;\n}) => {\n const isCurrentMonth = isSameMonth(date, currentDate);\n const isTodayDate = isToday(date);\n\n let rangeStyles = \"\";\n if (mode === \"range\" && selected && isDateRange(selected)) {\n const isInCurrentRange = isInRange(date, selected);\n const isStart = isRangeStart(date, selected);\n const isEnd = isRangeEnd(date, selected);\n\n if (isInCurrentRange) {\n rangeStyles = \"bg-primary/20\";\n }\n if (isStart) {\n rangeStyles += \" rounded-l-lg\";\n }\n if (isEnd) {\n rangeStyles += \" rounded-r-lg\";\n }\n if (isStart || isEnd) {\n rangeStyles += \" bg-primary\";\n }\n }\n\n return (\n \n \n {format(date, \"d\")}\n \n \n );\n});\n\nconst TimeSelector = React.memo(({\n selectedDate,\n showTimePicker,\n onToggleTimePicker,\n}: {\n selectedDate: Date;\n showTimePicker: boolean;\n onToggleTimePicker: () => void;\n}) => (\n \n \n \n \n \n \n \n {format(selectedDate, \"HH:mm\")}\n \n \n \n \n {showTimePicker ? \"Tap to close\" : \"Tap to change\"}\n \n \n \n \n \n));\n\nconst MonthYearPickerHeader = React.memo(({\n activeTab,\n onClose,\n}: {\n activeTab: \"month\" | \"year\";\n setActiveTab: (tab: \"month\" | \"year\") => void;\n onClose: () => void;\n}) => (\n \n \n \n Cancel\n \n \n {activeTab === \"month\" ? \"Select month\" : \"Select year\"}\n \n \n Done\n \n \n \n));\n\nconst MonthPicker = React.memo(({\n currentDate,\n onMonthSelect,\n onYearChange,\n onTabChange,\n fromDate,\n toDate,\n}: {\n currentDate: Date;\n onMonthSelect: (month: number) => void;\n onYearChange: (year: number) => void;\n onTabChange: () => void;\n fromDate?: Date;\n toDate?: Date;\n}) => {\n const currentYear = currentDate.getFullYear();\n const isPrevYearDisabled = fromDate && currentYear <= fromDate.getFullYear();\n const isNextYearDisabled = toDate && currentYear >= toDate.getFullYear();\n\n return (\n \n \n \n onYearChange(currentYear - 1)}\n disabled={isPrevYearDisabled}\n className={cn(\n \"p-2 rounded-full active:scale-90 transition-transform\",\n isPrevYearDisabled && \"opacity-50\"\n )}\n >\n \n \n\n \n \n {currentYear}\n \n \n \n \n \n\n onYearChange(currentYear + 1)}\n disabled={isNextYearDisabled}\n className={cn(\n \"p-2 rounded-full active:scale-90 transition-transform\",\n isNextYearDisabled && \"opacity-50\"\n )}\n >\n \n \n \n \n {MONTHS.map((month, index) => {\n const isDisabled =\n (fromDate && (\n currentYear === fromDate.getFullYear() &&\n index < fromDate.getMonth()\n )) ||\n (toDate && (\n currentYear === toDate.getFullYear() &&\n index > toDate.getMonth()\n ));\n\n return (\n onMonthSelect(index)}\n disabled={isDisabled}\n className={cn(\n \"w-[30%] py-3 rounded-lg mb-3 active:scale-95 transition-transform\",\n getMonth(currentDate) === index ? \"bg-black\" : \"bg-grey\",\n isDisabled && \"opacity-50\"\n )}\n >\n \n {month}\n \n \n );\n })}\n \n \n \n );\n});\n\nconst YearPicker = React.memo(({\n currentDate,\n onYearSelect,\n onYearNavigate,\n fromDate,\n toDate,\n}: {\n currentDate: Date;\n onYearSelect: (year: number) => void;\n onYearNavigate: (year: number) => void;\n fromDate?: Date;\n toDate?: Date;\n}) => {\n const startYear = currentDate.getFullYear() - 10;\n const years = Array.from({ length: 20 }, (_, i) => startYear + i);\n\n const minYear = fromDate ? fromDate.getFullYear() : undefined;\n const maxYear = toDate ? toDate.getFullYear() : undefined;\n const isPrevDisabled = minYear !== undefined && startYear - 20 < minYear;\n const isNextDisabled = maxYear !== undefined && startYear + 20 > maxYear;\n\n return (\n \n \n \n onYearNavigate(startYear - 20)}\n disabled={isPrevDisabled}\n className={cn(\n \"p-2 rounded-full active:scale-90 transition-transform\",\n isPrevDisabled && \"opacity-50\"\n )}\n >\n \n \n \n {`${startYear} - ${startYear + 19}`}\n \n onYearNavigate(startYear + 20)}\n disabled={isNextDisabled}\n className={cn(\n \"p-2 rounded-full active:scale-90 transition-transform\",\n isNextDisabled && \"opacity-50\"\n )}\n >\n \n \n \n\n \n {years.map((year) => {\n const isDisabled =\n (minYear !== undefined && year < minYear) ||\n (maxYear !== undefined && year > maxYear);\n\n return (\n onYearSelect(year)}\n disabled={isDisabled}\n className={cn(\n \"w-[23%] py-3 rounded-lg mb-3 active:scale-95 transition-transform\",\n currentDate.getFullYear() === year ? \"bg-black\" : \"bg-grey\",\n isDisabled && \"opacity-50\"\n )}\n >\n \n {year}\n \n \n );\n })}\n \n \n \n );\n});\n\nexport function Calendar({\n mode = \"single\",\n selected,\n onSelect,\n className,\n showOutsideDays = true,\n disabled,\n fromDate,\n toDate,\n timeConfig,\n firstDayOfWeek = 1,\n enableQuickMonthYear = false,\n}: CalendarProps) {\n const [currentDate, setCurrentDate] = React.useState(() => {\n if (selected instanceof Date) {\n return selected;\n }\n return new Date();\n });\n const [showTimePicker, setShowTimePicker] = React.useState(false);\n const [showMonthYearPicker, setShowMonthYearPicker] = React.useState(false);\n const [activeTab, setActiveTab] = React.useState<\"month\" | \"year\">(\"month\");\n const [tempSelectedDate, setTempSelectedDate] = React.useState(null);\n\n const fadeAnim = React.useRef(new Animated.Value(0)).current;\n\n const orderedWeekdays = React.useMemo(() => {\n const days = [...WEEKDAYS];\n const firstDays = days.splice(0, firstDayOfWeek);\n return [...days, ...firstDays];\n }, [firstDayOfWeek]);\n\n const getDaysInMonth = React.useCallback((date: Date) => {\n const start = startOfMonth(date);\n const end = endOfMonth(date);\n const days = eachDayOfInterval({ start, end });\n\n // Add days from previous month to fill the first week\n const firstDayOfMonth = (start.getDay() - firstDayOfWeek + 7) % 7;\n if (showOutsideDays && firstDayOfMonth > 0) {\n const prevMonthDays = eachDayOfInterval({\n start: subMonths(start, 1),\n end: subMonths(end, 1),\n }).slice(-firstDayOfMonth);\n days.unshift(...prevMonthDays);\n }\n\n // Add days from next month to fill the last week\n if (showOutsideDays && days.length < 42) {\n const remainingDays = 42 - days.length;\n const nextMonthDays = eachDayOfInterval({\n start: addMonths(start, 1),\n end: addMonths(end, 1),\n }).slice(0, remainingDays);\n days.push(...nextMonthDays);\n }\n\n return days;\n }, [firstDayOfWeek, showOutsideDays]);\n\n const isSelected = React.useCallback((date: Date) => {\n if (!selected) return false;\n if (selected instanceof Date) {\n return isSameDay(selected, date);\n }\n if (Array.isArray(selected)) {\n return selected.some((s) => isSameDay(s, date));\n }\n if (isDateRange(selected)) {\n return (\n isSameDay(selected.from, date) ||\n isSameDay(selected.to, date) ||\n isWithinInterval(date, { start: selected.from, end: selected.to })\n );\n }\n return false;\n }, [selected]);\n\n const isDisabled = React.useCallback((date: Date) => {\n if (fromDate && isBefore(date, startOfDay(fromDate))) return true;\n if (toDate && isAfter(date, endOfDay(toDate))) return true;\n if (typeof disabled === \"function\") return disabled(date);\n return false;\n }, [fromDate, toDate, disabled]);\n\n const showPicker = React.useCallback(() => {\n setShowMonthYearPicker(true);\n Animated.timing(fadeAnim, {\n toValue: 1,\n duration: 200,\n useNativeDriver: true,\n }).start();\n }, [fadeAnim]);\n\n const hidePicker = React.useCallback(() => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n duration: 200,\n useNativeDriver: true,\n }).start(() => {\n setShowMonthYearPicker(false);\n });\n }, [fadeAnim]);\n\n const handleMonthSelect = React.useCallback((month: number) => {\n const newDate = new Date(currentDate);\n newDate.setMonth(month);\n setCurrentDate(newDate);\n setShowMonthYearPicker(false);\n }, [currentDate]);\n\n const handleYearChange = React.useCallback((year: number) => {\n const newDate = new Date(currentDate);\n newDate.setFullYear(year);\n setCurrentDate(newDate);\n }, [currentDate]);\n\n const handleYearSelect = React.useCallback((year: number) => {\n handleYearChange(year);\n setActiveTab(\"month\");\n }, [handleYearChange]);\n\n const handleYearNavigate = React.useCallback((year: number) => {\n handleYearChange(year);\n // Ne pas changer d'onglet, rester en mode année\n }, [handleYearChange]);\n\n const handleDateSelect = React.useCallback((date: Date) => {\n if (isDisabled(date)) return;\n\n let newSelected: Date | Date[] | DateRange | undefined;\n\n switch (mode) {\n case \"single\":\n newSelected = date;\n break;\n case \"range\":\n if (!selected || !isDateRange(selected)) {\n newSelected = { from: date, to: date };\n } else {\n if (isSameDay(selected.from, selected.to)) {\n if (isBefore(date, selected.from)) {\n newSelected = { from: date, to: selected.from };\n } else {\n newSelected = { from: selected.from, to: date };\n }\n } else {\n newSelected = { from: date, to: date };\n }\n }\n break;\n case \"datetime\":\n setTempSelectedDate(date);\n if (selected instanceof Date) {\n const newDate = setMinutes(\n setHours(date, selected.getHours()),\n selected.getMinutes()\n );\n onSelect?.(newDate);\n } else {\n onSelect?.(date);\n }\n return;\n default:\n newSelected = date;\n }\n\n onSelect?.(newSelected);\n }, [mode, selected, onSelect, isDisabled]);\n\n const handleTimeChange = React.useCallback((event: any, selectedTime?: Date) => {\n if (Platform.OS === \"android\") {\n setShowTimePicker(false);\n if (event.type === \"dismissed\") return;\n }\n\n if (selectedTime && selected instanceof Date) {\n const newDate = setMinutes(\n setHours(selected, selectedTime.getHours()),\n selectedTime.getMinutes()\n );\n onSelect?.(newDate);\n }\n }, [selected, onSelect]);\n\n const handlePrevMonth = React.useCallback(() => {\n setCurrentDate(subMonths(currentDate, 1));\n }, [currentDate]);\n\n const handleNextMonth = React.useCallback(() => {\n setCurrentDate(addMonths(currentDate, 1));\n }, [currentDate]);\n\n const handleToggleTimePicker = React.useCallback(() => {\n setShowTimePicker(!showTimePicker);\n }, [showTimePicker]);\n\n return (\n \n \n \n\n \n \n \n \n\n {activeTab === \"month\" ? (\n setActiveTab(\"year\")}\n fromDate={fromDate}\n toDate={toDate}\n />\n ) : (\n \n )}\n \n \n \n\n \n\n \n {getDaysInMonth(currentDate).map((date, index) => (\n handleDateSelect(date)}\n />\n ))}\n \n \n\n {mode === \"datetime\" && selected instanceof Date && (\n \n )}\n\n {showTimePicker &&\n selected instanceof Date &&\n (Platform.OS === \"ios\" ? (\n \n \n \n \n \n ) : (\n \n ))}\n \n );\n}\n",
"type": "registry:ui"
}
],
"changelog": [],
"customUsage": "import { Calendar } from \"@/components/ui/calendar\";\nimport * as React from \"react\";\n\nexport default function CalendarExample() {\n const [quickPickerDate, setQuickPickerDate] = React.useState();\n\n return (\n setQuickPickerDate(date as Date)}\n className=\"border border-border\"\n enableQuickMonthYear={true}\n fromDate={new Date(2020, 0, 1)}\n toDate={new Date(2050, 11, 31)}\n />\n );\n}\n",
"customPreview": "import { Calendar } from \"@/components/ui/calendar\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function CalendarExample() {\n const [singleDate, setSingleDate] = React.useState();\n const [dateRange, setDateRange] = React.useState<{\n from: Date;\n to: Date;\n }>();\n const [dateTime, setDateTime] = React.useState();\n const [dateTime5min, setDateTime5min] = React.useState();\n const [disabledDate, setDisabledDate] = React.useState();\n const [quickPickerDate, setQuickPickerDate] = React.useState();\n\n return (\n <>\n \n \n \n \n Calendar\n \n \n A date picker component with single date, date range, and\n date-time selection modes.\n \n \n\n {/* Quick Month/Year Selection - English */}\n \n \n Quick Month/Year Selection (English)\n \n setQuickPickerDate(date as Date)}\n className=\"border border-border\"\n enableQuickMonthYear={true}\n fromDate={new Date(2020, 0, 1)}\n toDate={new Date(2050, 11, 31)}\n />\n \n Tap on the month/year to open native month/year picker\n \n \n Selected date: {quickPickerDate?.toLocaleDateString(\"fr\")}\n \n \n\n {/* Single Date Selection */}\n \n \n Single Date (Sunday First)\n \n setSingleDate(date as Date)}\n className=\"border border-border\"\n firstDayOfWeek={0}\n />\n \n Selected date: {singleDate?.toLocaleDateString()}\n \n \n\n {/* Date Range Selection */}\n \n \n Date Range\n \n \n setDateRange(range as { from: Date; to: Date })\n }\n className=\"border border-border\"\n />\n \n Selected range:{\" \"}\n {dateRange\n ? `${dateRange.from.toLocaleDateString()} - ${dateRange.to.toLocaleDateString()}`\n : \"No range selected\"}\n \n \n\n {/* Date Time Selection */}\n \n \n Date & Time (Default)\n \n setDateTime(date as Date)}\n showTime\n className=\"border border-border\"\n />\n \n Selected date & time:{\" \"}\n {dateTime\n ? `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`\n : \"No date/time selected\"}\n \n \n\n {/* Date Time with 5min intervals */}\n \n \n Date & Time (5min intervals)\n \n setDateTime5min(date as Date)}\n showTime\n timeConfig={{\n minuteInterval: 5,\n }}\n className=\"border border-border\"\n />\n \n Selected date & time:{\" \"}\n {dateTime5min\n ? `${dateTime5min.toLocaleDateString()} ${dateTime5min.toLocaleTimeString()}`\n : \"No date/time selected\"}\n \n \n\n {/* Disabled Dates Example */}\n \n \n With Disabled Dates\n \n setDisabledDate(date as Date)}\n fromDate={new Date()}\n disabled={\n (date) => date.getDay() === 0 || date.getDay() === 6 // Disable weekends\n }\n className=\"border border-border\"\n />\n \n Selected date:{\" \"}\n {disabledDate?.toLocaleDateString() || \"No date selected\"}\n \n \n\n \n \n \n \n );\n}\n"
}