react-native-calendar-resource 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 [Your Name]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,403 @@
+# React Native Calendar Component
+
+A fully customizable, type-safe resource-based calendar component for React Native. Built with TypeScript and pure React Native styling, this calendar displays events across multiple resources (courts, rooms, equipment, etc.) with flexible time slots and unavailable periods.
+
+## Features
+
+- ✨ **Fully Customizable** - Configure everything from dimensions to colors to rendering
+- 🎯 **Type-Safe** - Full TypeScript support with generics
+- 📱 **Resource-Based** - Display multiple resources side-by-side
+- ⏰ **Flexible Time Slots** - Configure any start/end hour range
+- 🎨 **Custom Rendering** - Override default renderers for events, resources, and slots
+- 🚫 **Unavailable Slots** - Support for reserved, off-hours, and disabled periods
+- 📐 **Configurable Dimensions** - Adjust resource width and hour height
+- 🎭 **Style Customization** - Full control over colors and appearance
+- 👆 **Interactive** - Handle slot, event, and resource press events
+- 🔄 **Synchronized Scrolling** - Header and time column scroll with the grid
+
+---
+
+## Installation
+
+```bash
+npm install react-native-calendar-resource
+# or
+yarn add react-native-calendar-resource
+```
+
+### Dependencies
+
+Ensure you have the required peer dependencies:
+
+```bash
+npm install react react-native date-fns
+```
+
+---
+
+## Quick Start
+
+```tsx
+import { Calendar } from "react-native-calendar-resource";
+
+function MyCalendar() {
+  return (
+    <Calendar
+      date={new Date()}
+      resources={[
+        { id: "1", label: "event 1" },
+        { id: "2", label: "event 2" },
+      ]}
+      events={[
+        {
+          id: "evt1",
+          title: "Booked",
+          resourceId: "1",
+          startHour: 10,
+          endHour: 12,
+          color: "#3b82f6",
+        },
+      ]}
+      onSlotPress={(hour, resourceId, date) => {
+        console.log("Slot pressed:", { hour, resourceId, date });
+      }}
+    />
+  );
+}
+```
+
+---
+
+## API Reference
+
+### Required Props
+
+| Prop        | Type                 | Description                              |
+| ----------- | -------------------- | ---------------------------------------- |
+| `date`      | `Date`               | The date to display in the calendar      |
+| `resources` | `Resource<T>[]`      | Array of resources to display as columns |
+| `events`    | `CalendarEvent<T>[]` | Array of events to render                |
+
+### Optional Props
+
+| Prop                     | Type                               | Default                                              | Description                            |
+| ------------------------ | ---------------------------------- | ---------------------------------------------------- | -------------------------------------- |
+| `unavailableSlots`       | `UnavailableSlot<T>[]`             | `[]`                                                 | Slots that are unavailable             |
+| `timeConfig`             | `CalendarTimeConfig`               | `{ startHour: 9, endHour: 24, timeFormat: "HH:mm" }` | Time configuration                     |
+| `dimensions`             | `Partial<CalendarDimensions>`      | `{ resourceWidth: 64, hourHeight: 64 }`              | Grid dimensions                        |
+| `styles`                 | `CalendarStyles`                   | -                                                    | Overall calendar styling               |
+| `eventStyles`            | `CalendarEventStyles`              | -                                                    | Event-specific styling                 |
+| `unavailableStyles`      | `UnavailableSlotStyles`            | -                                                    | Unavailable slot styling               |
+| `onSlotPress`            | `(hour, resourceId, date) => void` | -                                                    | Called when empty slot is pressed      |
+| `onEventPress`           | `(event) => void`                  | -                                                    | Called when event is pressed           |
+| `onResourcePress`        | `(resource) => void`               | -                                                    | Called when resource header is pressed |
+| `renderEvent`            | `(event, dimensions) => ReactNode` | -                                                    | Custom event renderer                  |
+| `renderResourceHeader`   | `(resource) => ReactNode`          | -                                                    | Custom resource header renderer        |
+| `renderTimeSlot`         | `(hour) => ReactNode`              | -                                                    | Custom time slot renderer              |
+| `renderUnavailableSlot`  | `(slot, dimensions) => ReactNode`  | -                                                    | Custom unavailable slot renderer       |
+| `showHeader`             | `boolean`                          | `true`                                               | Show date header                       |
+| `showTimeColumn`         | `boolean`                          | `true`                                               | Show time column                       |
+| `showResourceHeaders`    | `boolean`                          | `true`                                               | Show resource headers                  |
+| `enableHorizontalScroll` | `boolean`                          | `true`                                               | Enable horizontal scrolling            |
+| `enableVerticalScroll`   | `boolean`                          | `true`                                               | Enable vertical scrolling              |
+
+---
+
+## Type Definitions
+
+```typescript
+type Resource<T = any> = {
+  id: string;
+  label: string;
+  data?: T; // Additional custom data
+};
+
+type CalendarEvent<T = any> = {
+  id: string;
+  title: string;
+  resourceId: string;
+  startHour: number;
+  endHour: number;
+  color?: string;
+  data?: T; // Additional custom data
+};
+
+type UnavailableSlot<T = any> = {
+  id: string;
+  resourceId: string;
+  startHour: number;
+  endHour: number;
+  type: "reserved" | "offHours" | "disabled";
+  data?: T; // Additional custom data
+};
+
+type CalendarTimeConfig = {
+  startHour: number; // 0-23
+  endHour: number; // 1-24
+  timeFormat?: string; // date-fns format string
+};
+
+type CalendarDimensions = {
+  resourceWidth: number; // px
+  hourHeight: number; // px
+};
+```
+
+---
+
+## Examples
+
+### Custom Time Range
+
+```tsx
+<Calendar
+  date={new Date()}
+  resources={resources}
+  events={events}
+  timeConfig={{
+    startHour: 6, // Start at 6 AM
+    endHour: 22, // End at 10 PM
+    timeFormat: "h:mm a", // 12-hour format
+  }}
+/>
+```
+
+### Custom Dimensions
+
+```tsx
+<Calendar
+  date={new Date()}
+  resources={resources}
+  events={events}
+  dimensions={{
+    resourceWidth: 100,
+    hourHeight: 80,
+  }}
+/>
+```
+
+### Custom Event Rendering
+
+```tsx
+<Calendar
+  date={new Date()}
+  resources={resources}
+  events={events}
+  renderEvent={(event, { width, height }) => (
+    <View style={{ width, height, backgroundColor: event.color, padding: 8 }}>
+      <Text style={{ color: "white", fontWeight: "bold" }}>{event.title}</Text>
+      <Text style={{ color: "white", fontSize: 12 }}>
+        {event.startHour}:00 - {event.endHour}:00
+      </Text>
+    </View>
+  )}
+/>
+```
+
+### Custom Resource Headers
+
+```tsx
+<Calendar
+  date={new Date()}
+  resources={resources}
+  events={events}
+  renderResourceHeader={(resource) => (
+    <View style={{ padding: 8 }}>
+      <Text style={{ fontSize: 16, fontWeight: "bold", color: "#fff" }}>
+        {resource.label}
+      </Text>
+      <Text style={{ fontSize: 12, color: "#999" }}>Available</Text>
+    </View>
+  )}
+/>
+```
+
+### Custom Styling
+
+```tsx
+<Calendar
+  date={new Date()}
+  resources={resources}
+  events={events}
+  styles={{
+    backgroundColor: "#000",
+    gridColor: "#333",
+    slotBackgroundColor: "#1a1a1a",
+  }}
+  eventStyles={{
+    defaultColor: "#3b82f6",
+    borderRadius: 12,
+    opacity: 0.9,
+  }}
+  unavailableStyles={{
+    reserved: {
+      backgroundColor: "#dc2626",
+      opacity: 0.4,
+    },
+    offHours: {
+      backgroundColor: "#404040",
+      opacity: 0.6,
+    },
+  }}
+/>
+```
+
+### With TypeScript Generics
+
+```tsx
+interface eventData {
+  capacity: number;
+  amenities: string[];
+}
+
+interface BookingData {
+  userId: string;
+  notes: string;
+}
+
+<Calendar<BookingData, eventData>
+  date={new Date()}
+  resources={[
+    {
+      id: "1",
+      label: "event 1",
+      data: { capacity: 4, amenities: ["lights", "net"] },
+    },
+  ]}
+  events={[
+    {
+      id: "1",
+      title: "Booked",
+      resourceId: "1",
+      startHour: 10,
+      endHour: 12,
+      data: { userId: "user123", notes: "Bring equipment" },
+    },
+  ]}
+  onEventPress={(event) => {
+    console.log(event.data.userId); // Type-safe!
+  }}
+/>;
+```
+
+---
+
+## Technologies
+
+- React Native
+- Expo
+- TypeScript
+- date-fns
+- NativeWind (optional, for default styling)
+
+---
+
+## License
+
+MIT
+
+- The tab bar remains visible while navigating deeper into Explore-related screens
+- Navigation context is preserved
+- Platform-native gestures and transitions are maintained
+
+Headers are disabled at the stack level and selectively enabled per screen to match the Figma design and avoid default iOS -Liquid Glass- system back button styling.
+
+---
+
+### Calendar Component
+
+The booking calendar was implemented from scratch instead of relying on third-party libraries.
+
+Reasons for this decision:
+
+1. No third-party library was found that met the requirements of the project.
+2. Pixel-perfect alignment with the design
+3. Full control over a resource-based grid (events × time)
+4. Optimized performance for the specific use case
+5. Reduced dependency and bundle size overhead
+
+#### Calendar Architecture
+
+```
+Calendar/
+├── Calendar.tsx
+├── CalendarHeader.tsx
+├── TimeColumn.tsx
+├── ResourceHeaders.tsx
+├── GridBody.tsx
+├── EventsLayer.tsx
+└── UnavailableLayer.tsx
+```
+
+#### Key Features
+
+- Synchronized horizontal and vertical scrolling
+- Resource-based layout for multiple events
+- Three slot states: available, booked, unavailable
+- Configurable time range, slot height, and column width
+- Cross-platform behavior parity (iOS & Android)
+
+---
+
+### Styling Approach
+
+Styling is handled using NativeWind (TailwindCSS for React Native):
+
+- Semantic color tokens (background, card, accent, muted)
+- Consistent spacing and typography via utility classes
+- Centralized theme configuration
+- Custom fonts (Asap, Bebas Neue) loaded via `expo-font`
+- A mix of @expo/vector-icons and SVG icon components was used. SVGs were introduced for icons where an exact visual match was not available in the Expo icon set.
+
+---
+
+### Date & Time Handling
+
+All date and time operations use date-fns for:
+
+- Clear and readable date manipulation
+- Tree-shakeable imports
+- Safer alternatives to native Date APIs
+
+---
+
+## Tech Stack
+
+- Expo SDK 54
+- TypeScript
+- Expo Router + React Navigation Stack
+- NativeWind (TailwindCSS)
+- date-fns
+- react-native-leaflet-view (Leaflet maps via WebView)
+- expo-linear-gradient
+- react-native-reanimated
+
+---
+
+## Implemented Features
+
+- Venue details screen with image carousel
+- Rating badges and amenity tags
+- Coach cards with detail navigation
+- Custom calendar grid
+- Date shortcuts (Today / Tomorrow)
+- Visual distinction between slot states
+- Location card with map preview
+- Persistent tab bar navigation
+- Nested stack navigation within Explore
+- Cross-platform support (iOS & Android)
+
+---
+
+## Additional Notes
+
+- The Explore tab was used to display event details since no design was provided for the Home screen.
+  In a real-world application, the Explore tab would typically be used to search for or browse events, then navigate to the event details screen.
+- Non-Explore tabs are intentionally minimal as they are outside the task scope
+- Leaflet (via `react-native-leaflet-view`) was used for maps instead of `react-native-maps` or other Google Maps-based libraries, as those require a Google Cloud API key and billing subscription
+- Mock data is used throughout the app
+- Safe area insets are handled for iOS notch and home indicator
+
+---
+
+**Author:** Abdelrahman Sobhy

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,3 @@
+import { CalendarProps } from "../../types/calendar";
+export declare function Calendar<TEvent = any, TResource = any, TUnavailable = any>({ date, resources, events, unavailableSlots, timeConfig, dimensions, styles, eventStyles, unavailableStyles, onSlotPress, onEventPress, onResourcePress, onDateChange, minDate, maxDate, allowPastDates, renderEvent, renderResourceHeader, renderTimeSlot, renderUnavailableSlot, showHeader, showTimeColumn, showResourceHeaders, enableHorizontalScroll, enableVerticalScroll, showDateNavigation, dateFormat, accessibilityLabel, }: CalendarProps<TEvent, TResource, TUnavailable>): import("react").JSX.Element;
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/components/calendar/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../components/calendar/Calendar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,aAAa,EAEd,MAAM,sBAAsB,CAAC;AAoB9B,wBAAgB,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,EAAE,YAAY,GAAG,GAAG,EAAE,EAC1E,IAAI,EACJ,SAAS,EACT,MAAM,EACN,gBAAqB,EACrB,UAAU,EACV,UAAU,EACV,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,OAAO,EACP,OAAO,EACP,cAAsB,EACtB,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,qBAAqB,EACrB,UAAiB,EACjB,cAAqB,EACrB,mBAA0B,EAC1B,sBAA6B,EAC7B,oBAA2B,EAC3B,kBAAyB,EACzB,UAA+B,EAC/B,kBAA+B,GAChC,EAAE,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,YAAY,CAAC,+BA0IhD"}

package/dist/components/calendar/Calendar.js

@@ -0,0 +1,69 @@
+import { useMemo, useRef } from "react";
+import { ScrollView, View, } from "react-native";
+import { CalendarHeader } from "./CalendarHeader";
+import { EventsLayer } from "./EventsLayer";
+import { GridBody } from "./GridBody";
+import { ResourceHeaders } from "./ResourceHeaders";
+import { TimeColumn } from "./TimeColumn";
+import { UnavailableLayer } from "./UnavailableLayer";
+// Default configuration
+const DEFAULT_DIMENSIONS = {
+    resourceWidth: 64,
+    hourHeight: 64,
+};
+const DEFAULT_TIME_CONFIG = {
+    startHour: 9,
+    endHour: 24,
+    timeFormat: "HH:mm",
+};
+export function Calendar({ date, resources, events, unavailableSlots = [], timeConfig, dimensions, styles, eventStyles, unavailableStyles, onSlotPress, onEventPress, onResourcePress, onDateChange, minDate, maxDate, allowPastDates = false, renderEvent, renderResourceHeader, renderTimeSlot, renderUnavailableSlot, showHeader = true, showTimeColumn = true, showResourceHeaders = true, enableHorizontalScroll = true, enableVerticalScroll = true, showDateNavigation = true, dateFormat = "EEE, MMM d, yyyy", accessibilityLabel = "Calendar", }) {
+    const headerScrollRef = useRef(null);
+    const timeColumnScrollRef = useRef(null);
+    // Merge configurations with defaults
+    const finalDimensions = useMemo(() => ({ ...DEFAULT_DIMENSIONS, ...dimensions }), [dimensions]);
+    const finalTimeConfig = useMemo(() => ({ ...DEFAULT_TIME_CONFIG, ...timeConfig }), [timeConfig]);
+    // Calculate grid dimensions
+    const gridTotalWidth = resources.length * finalDimensions.resourceWidth;
+    const totalHours = finalTimeConfig.endHour - finalTimeConfig.startHour;
+    const gridTotalHeight = totalHours * finalDimensions.hourHeight;
+    const handleHorizontalScroll = (scrollEvent) => {
+        const horizontalOffset = scrollEvent.nativeEvent.contentOffset.x;
+        headerScrollRef.current?.scrollTo({ x: horizontalOffset, animated: false });
+    };
+    const handleVerticalScroll = (scrollEvent) => {
+        const verticalOffset = scrollEvent.nativeEvent.contentOffset.y;
+        timeColumnScrollRef.current?.scrollTo({
+            y: verticalOffset,
+            animated: false,
+        });
+    };
+    const backgroundColor = styles?.backgroundColor || "#1a1a1a";
+    return (<View style={{ flex: 1, backgroundColor }} accessibilityLabel={accessibilityLabel}>
+      {showHeader && (<CalendarHeader date={date} timeConfig={finalTimeConfig} onDateChange={onDateChange} showDateNavigation={showDateNavigation} dateFormat={dateFormat} minDate={minDate} maxDate={maxDate} allowPastDates={allowPastDates}/>)}
+
+      {showResourceHeaders && (<ResourceHeaders resources={resources} scrollRef={headerScrollRef} dimensions={finalDimensions} renderResourceHeader={renderResourceHeader} onResourcePress={onResourcePress}/>)}
+
+      <View style={{ flex: 1, flexDirection: "row" }}>
+        {showTimeColumn && (<TimeColumn scrollRef={timeColumnScrollRef} gridTotalHeight={gridTotalHeight} timeConfig={finalTimeConfig} dimensions={finalDimensions} renderTimeSlot={renderTimeSlot} styles={styles}/>)}
+
+        <View style={{ flex: 1 }}>
+          <ScrollView horizontal={enableHorizontalScroll} showsHorizontalScrollIndicator={enableHorizontalScroll} bounces={false} onScroll={handleHorizontalScroll} scrollEventThrottle={16} nestedScrollEnabled={true} scrollEnabled={enableHorizontalScroll}>
+            <ScrollView showsVerticalScrollIndicator={enableVerticalScroll} bounces={false} onScroll={handleVerticalScroll} scrollEventThrottle={16} nestedScrollEnabled={true} scrollEnabled={enableVerticalScroll} contentContainerStyle={{
+            width: gridTotalWidth,
+            height: gridTotalHeight,
+        }}>
+              <View style={{
+            position: "relative",
+            width: gridTotalWidth,
+            height: gridTotalHeight,
+        }}>
+                <GridBody resources={resources} events={events} unavailableSlots={unavailableSlots} onSlotPress={onSlotPress} date={date} timeConfig={finalTimeConfig} dimensions={finalDimensions} styles={styles}/>
+                <UnavailableLayer unavailableSlots={unavailableSlots} resources={resources} timeConfig={finalTimeConfig} dimensions={finalDimensions} unavailableStyles={unavailableStyles} renderUnavailableSlot={renderUnavailableSlot}/>
+                <EventsLayer events={events} resources={resources} onEventPress={onEventPress} timeConfig={finalTimeConfig} dimensions={finalDimensions} eventStyles={eventStyles} renderEvent={renderEvent}/>
+              </View>
+            </ScrollView>
+          </ScrollView>
+        </View>
+      </View>
+    </View>);
+}

package/dist/components/calendar/CalendarHeader.d.ts

@@ -0,0 +1,14 @@
+import { CalendarTimeConfig } from "../../types/calendar";
+type CalendarHeaderProps = {
+    date: Date;
+    timeConfig: CalendarTimeConfig;
+    onDateChange?: (date: Date) => void;
+    showDateNavigation?: boolean;
+    dateFormat?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    allowPastDates?: boolean;
+};
+export declare function CalendarHeader({ date, timeConfig, onDateChange, showDateNavigation, dateFormat, minDate, maxDate, allowPastDates, }: CalendarHeaderProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CalendarHeader.d.ts.map

package/dist/components/calendar/CalendarHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../../components/calendar/CalendarHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,kBAAyB,EACzB,UAA+B,EAC/B,OAAO,EACP,OAAO,EACP,cAAqB,GACtB,EAAE,mBAAmB,+BA4IrB"}

package/dist/components/calendar/CalendarHeader.js

@@ -0,0 +1,113 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import { addDays, format, subDays } from "date-fns";
+import { Pressable, Text, View } from "react-native";
+export function CalendarHeader({ date, timeConfig, onDateChange, showDateNavigation = true, dateFormat = "EEE, MMM d, yyyy", minDate, maxDate, allowPastDates = true, }) {
+    const handlePreviousDay = () => {
+        const newDate = subDays(date, 1);
+        // Check if going back is allowed
+        if (!allowPastDates) {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            const checkDate = new Date(newDate);
+            checkDate.setHours(0, 0, 0, 0);
+            if (checkDate < today)
+                return;
+        }
+        // Check minDate constraint
+        if (minDate) {
+            const min = new Date(minDate);
+            min.setHours(0, 0, 0, 0);
+            const checkDate = new Date(newDate);
+            checkDate.setHours(0, 0, 0, 0);
+            if (checkDate < min)
+                return;
+        }
+        onDateChange?.(newDate);
+    };
+    const handleNextDay = () => {
+        const newDate = addDays(date, 1);
+        // Check maxDate constraint
+        if (maxDate) {
+            const max = new Date(maxDate);
+            max.setHours(0, 0, 0, 0);
+            const checkDate = new Date(newDate);
+            checkDate.setHours(0, 0, 0, 0);
+            if (checkDate > max)
+                return;
+        }
+        onDateChange?.(newDate);
+    };
+    // Check if previous button should be disabled
+    const isPreviousDisabled = () => {
+        const prevDate = subDays(date, 1);
+        if (!allowPastDates) {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            const checkDate = new Date(prevDate);
+            checkDate.setHours(0, 0, 0, 0);
+            if (checkDate < today)
+                return true;
+        }
+        if (minDate) {
+            const min = new Date(minDate);
+            min.setHours(0, 0, 0, 0);
+            const checkDate = new Date(prevDate);
+            checkDate.setHours(0, 0, 0, 0);
+            if (checkDate < min)
+                return true;
+        }
+        return false;
+    };
+    // Check if next button should be disabled
+    const isNextDisabled = () => {
+        if (!maxDate)
+            return false;
+        const nextDate = addDays(date, 1);
+        const max = new Date(maxDate);
+        max.setHours(0, 0, 0, 0);
+        const checkDate = new Date(nextDate);
+        checkDate.setHours(0, 0, 0, 0);
+        return checkDate > max;
+    };
+    const prevDisabled = isPreviousDisabled();
+    const nextDisabled = isNextDisabled();
+    return (<View style={{
+            backgroundColor: "#1a1a1a",
+            paddingHorizontal: 20,
+            paddingVertical: 16,
+        }}>
+      <View style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+        }}>
+        {showDateNavigation ? (<>
+            <Pressable onPress={handlePreviousDay} disabled={prevDisabled} style={{
+                width: 40,
+                height: 40,
+                borderRadius: 20,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "rgba(38, 38, 38, 0.75)",
+            }}>
+              <MaterialIcons name="chevron-left" size={20} color={prevDisabled ? "#626262" : "#fefefe"}/>
+            </Pressable>
+            <Text style={{ color: "#fefefe", fontSize: 16, fontWeight: "600" }}>
+              {format(date, dateFormat)}
+            </Text>
+            <Pressable onPress={handleNextDay} disabled={nextDisabled} style={{
+                width: 40,
+                height: 40,
+                borderRadius: 20,
+                backgroundColor: "rgba(38, 38, 38, 0.75)",
+                alignItems: "center",
+                justifyContent: "center",
+            }}>
+              <MaterialIcons name="chevron-right" size={20} color={nextDisabled ? "#626262" : "#fefefe"}/>
+            </Pressable>
+          </>) : (<Text style={{ color: '#fefefe', fontSize: 16, fontWeight: '600' }}>
+            {format(date, dateFormat)}
+          </Text>)}
+      </View>
+    </View>);
+}

package/dist/components/calendar/EventsLayer.d.ts

@@ -0,0 +1,13 @@
+import { CalendarDimensions, CalendarEvent, CalendarEventStyles, CalendarTimeConfig, RenderEventFunction, Resource } from "../../types/calendar";
+type EventsLayerProps<TEvent = any, TResource = any> = {
+    events: CalendarEvent<TEvent>[];
+    resources: Resource<TResource>[];
+    onEventPress?: (event: CalendarEvent<TEvent>) => void;
+    timeConfig: CalendarTimeConfig;
+    dimensions: CalendarDimensions;
+    eventStyles?: CalendarEventStyles;
+    renderEvent?: RenderEventFunction<TEvent>;
+};
+export declare function EventsLayer<TEvent = any, TResource = any>({ events, resources, onEventPress, timeConfig, dimensions, eventStyles, renderEvent, }: EventsLayerProps<TEvent, TResource>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=EventsLayer.d.ts.map

package/dist/components/calendar/EventsLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventsLayer.d.ts","sourceRoot":"","sources":["../../../components/calendar/EventsLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAE9B,KAAK,gBAAgB,CAAC,MAAM,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,IAAI;IACrD,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;IAChC,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,WAAW,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,EAAE,EACzD,MAAM,EACN,SAAS,EACT,YAAY,EACZ,UAAU,EACV,UAAU,EACV,WAAW,EACX,WAAW,GACZ,EAAE,gBAAgB,CAAC,MAAM,EAAE,SAAS,CAAC,+BA+GrC"}