Calendar

1import { cn } from "@/lib/utils";
2import { Ionicons } from "@expo/vector-icons";
3import DateTimePicker from "@react-native-community/datetimepicker";
4import {
5  addMonths,
6  eachDayOfInterval,
7  endOfDay,
8  endOfMonth,
9  format,
10  getMonth,
11  isAfter,
12  isBefore,
13  isSameDay,
14  isSameMonth,
15  isToday,
16  isWithinInterval,
17  setHours,
18  setMinutes,
19  startOfDay,
20  startOfMonth,
21  subMonths,
22} from "date-fns";
23import { enUS } from "date-fns/locale";
24import * as React from "react";
25import {
26  Animated,
27  Dimensions,
28  Modal,
29  Platform,
30  Pressable,
31  Text,
32  View,
33} from "react-native";
34 
35const MONTHS = [
36  "January",
37  "February",
38  "March",
39  "April",
40  "May",
41  "June",
42  "July",
43  "August",
44  "September",
45  "October",
46  "November",
47  "December",
48];
49 
50const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
51 
52interface DateRange {
53  from: Date;
54  to: Date;
55}
56 
57interface TimeConfig {
58  minuteInterval?: 1 | 5 | 10 | 15 | 30;
59  minTime?: string; // format "HH:mm"
60  maxTime?: string; // format "HH:mm"
61  disabledTimes?: string[]; // format ["HH:mm"]
62}
63 
64interface CalendarProps {
65  mode?: "single" | "range" | "datetime";
66  selected?: Date | Date[] | DateRange;
67  onSelect?: (date: Date | Date[] | DateRange | undefined) => void;
68  className?: string;
69  showOutsideDays?: boolean;
70  showTime?: boolean;
71  disabled?: (date: Date) => boolean;
72  disableWeekends?: boolean;
73  fromDate?: Date;
74  toDate?: Date;
75  timeConfig?: TimeConfig;
76  firstDayOfWeek?: 0 | 1; // 0 for Sunday, 1 for Monday
77  enableQuickMonthYear?: boolean;
78}
79 
80const SCREEN_WIDTH = Dimensions.get("window").width;
81const DAY_SIZE = Math.min(Math.floor((SCREEN_WIDTH - 48) / 7), 50);
82 
83const isDateRange = (value: any): value is DateRange => {
84  return value && typeof value === "object" && "from" in value && "to" in value;
85};
86 
87const isInRange = (date: Date, range: DateRange) => {
88  return isWithinInterval(date, { start: range.from, end: range.to });
89};
90 
91const isRangeStart = (date: Date, range: DateRange) => {
92  return isSameDay(date, range.from);
93};
94 
95const isRangeEnd = (date: Date, range: DateRange) => {
96  return isSameDay(date, range.to);
97};
98 
99const CalendarHeader = React.memo(({
100  currentDate,
101  onPrevMonth,
102  onNextMonth,
103  onHeaderPress,
104  enableQuickMonthYear,
105}: {
106  currentDate: Date;
107  onPrevMonth: () => void;
108  onNextMonth: () => void;
109  onHeaderPress?: () => void;
110  enableQuickMonthYear?: boolean;
111}) => (
112  <View className="flex-row items-center justify-between mb-4">
113    <Pressable
114// … truncated