react-native-calendar-resource 1.0.0

package/dist/components/calendar/EventsLayer.js

@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+import { Pressable, Text, View } from "react-native";
+export function EventsLayer({ events, resources, onEventPress, timeConfig, dimensions, eventStyles, renderEvent, }) {
+    const positionedEvents = useMemo(() => {
+        return events
+            .map((event) => {
+            const resourceIndex = resources.findIndex((resource) => resource.id === event.resourceId);
+            if (resourceIndex === -1) {
+                return null;
+            }
+            const topPosition = (event.startHour - timeConfig.startHour - 1) * dimensions.hourHeight;
+            const blockHeight = (event.endHour - event.startHour) * dimensions.hourHeight;
+            const leftPosition = resourceIndex * dimensions.resourceWidth;
+            const blockWidth = dimensions.resourceWidth;
+            return {
+                event,
+                topPosition,
+                leftPosition,
+                blockWidth,
+                blockHeight,
+            };
+        })
+            .filter(Boolean);
+    }, [events, resources, timeConfig.startHour, dimensions]);
+    const gridTotalWidth = resources.length * dimensions.resourceWidth;
+    const gridBodyHeight = (timeConfig.endHour - timeConfig.startHour - 1) * dimensions.hourHeight;
+    const handleEventPress = (event) => {
+        onEventPress?.(event);
+    };
+    const defaultColor = eventStyles?.defaultColor || "#3b82f6";
+    const borderRadius = eventStyles?.borderRadius || 8;
+    const opacity = eventStyles?.opacity || 1;
+    return (<View style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            zIndex: 10,
+            width: gridTotalWidth,
+            height: gridBodyHeight,
+        }} pointerEvents="box-none">
+      {positionedEvents.map((item) => {
+            const eventColor = item.event.color || defaultColor;
+            return (<View key={item.event.id} style={{
+                    position: "absolute",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backgroundColor: "#1a1a1a",
+                    top: item.topPosition,
+                    left: item.leftPosition,
+                    height: item.blockHeight,
+                    width: item.blockWidth,
+                }}>
+            <Pressable onPress={() => handleEventPress(item.event)} style={{
+                    height: item.blockHeight - 2,
+                    width: item.blockWidth - 2,
+                    backgroundColor: eventColor,
+                    borderRadius,
+                    opacity,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    padding: 8,
+                    overflow: "hidden",
+                }}>
+              {renderEvent ? (renderEvent(item.event, {
+                    width: item.blockWidth - 2,
+                    height: item.blockHeight - 2,
+                })) : (<Text style={{
+                        color: "#ffffff",
+                        fontSize: 14,
+                        fontWeight: "600",
+                        textAlign: "center",
+                    }} numberOfLines={2}>
+                  {item.event.title}
+                </Text>)}
+            </Pressable>
+          </View>);
+        })}
+    </View>);
+}

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

@@ -0,0 +1,14 @@
+import { CalendarDimensions, CalendarEvent, CalendarStyles, CalendarTimeConfig, Resource, UnavailableSlot } from "../../types/calendar";
+type GridBodyProps<TEvent = any, TResource = any, TUnavailable = any> = {
+    resources: Resource<TResource>[];
+    events: CalendarEvent<TEvent>[];
+    unavailableSlots: UnavailableSlot<TUnavailable>[];
+    onSlotPress?: (hour: number, resourceId: string, date: Date) => void;
+    date: Date;
+    timeConfig: CalendarTimeConfig;
+    dimensions: CalendarDimensions;
+    styles?: CalendarStyles;
+};
+export declare function GridBody<TEvent = any, TResource = any, TUnavailable = any>({ resources, events, unavailableSlots, onSlotPress, date, timeConfig, dimensions, styles, }: GridBodyProps<TEvent, TResource, TUnavailable>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=GridBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridBody.d.ts","sourceRoot":"","sources":["../../../components/calendar/GridBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,QAAQ,EACR,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAE9B,KAAK,aAAa,CAAC,MAAM,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,EAAE,YAAY,GAAG,GAAG,IAAI;IACtE,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;IACjC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;IAChC,gBAAgB,EAAE,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACrE,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,kBAAkB,CAAC;IAC/B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE,SAAS,GAAG,GAAG,EAAE,YAAY,GAAG,GAAG,EAAE,EAC1E,SAAS,EACT,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,IAAI,EACJ,UAAU,EACV,UAAU,EACV,MAAM,GACP,EAAE,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,YAAY,CAAC,+BAgGhD"}

package/dist/components/calendar/GridBody.js

@@ -0,0 +1,70 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import { useMemo } from "react";
+import { Pressable, View } from "react-native";
+export function GridBody({ resources, events, unavailableSlots, onSlotPress, date, timeConfig, dimensions, styles, }) {
+    const hoursArray = useMemo(() => {
+        const result = [];
+        for (let hour = timeConfig.startHour + 1; hour <= timeConfig.endHour; hour++) {
+            result.push(hour);
+        }
+        return result;
+    }, [timeConfig.startHour, timeConfig.endHour]);
+    const occupiedSlots = useMemo(() => {
+        const occupied = new Set();
+        events.forEach((event) => {
+            for (let hour = event.startHour; hour < event.endHour; hour++) {
+                occupied.add(`${event.resourceId}-${hour}`);
+            }
+        });
+        unavailableSlots.forEach((slot) => {
+            for (let hour = slot.startHour; hour < slot.endHour; hour++) {
+                occupied.add(`${slot.resourceId}-${hour}`);
+            }
+        });
+        return occupied;
+    }, [events, unavailableSlots]);
+    const gridTotalWidth = resources.length * dimensions.resourceWidth;
+    const gridBodyHeight = (timeConfig.endHour - timeConfig.startHour - 1) * dimensions.hourHeight;
+    const handleSlotPress = (hour, resourceId) => {
+        onSlotPress?.(hour, resourceId, date);
+    };
+    const slotBgColor = styles?.slotBackgroundColor || "#1f1f1f";
+    const gridLineColor = styles?.gridColor || "#333";
+    return (<View style={{
+            flexDirection: "row",
+            width: gridTotalWidth,
+            height: gridBodyHeight,
+        }}>
+      {resources.map((resource, resourceIndex) => (<View key={resource.id}>
+          {hoursArray.map((hour) => {
+                const slotKey = `${resource.id}-${hour}`;
+                const isSlotOccupied = occupiedSlots.has(slotKey);
+                const isLastColumn = resourceIndex === resources.length - 1;
+                const isFirstColumn = resourceIndex === 0;
+                if (isSlotOccupied) {
+                    return (<View key={slotKey} style={{
+                            width: dimensions.resourceWidth,
+                            height: dimensions.hourHeight,
+                            borderLeftWidth: 1,
+                            borderBottomWidth: 1,
+                            borderRightWidth: isLastColumn ? 1 : 0,
+                            borderColor: gridLineColor,
+                        }}/>);
+                }
+                return (<Pressable key={slotKey} onPress={() => handleSlotPress(hour, resource.id)} style={{
+                        width: dimensions.resourceWidth,
+                        height: dimensions.hourHeight,
+                        backgroundColor: slotBgColor,
+                        borderLeftWidth: isFirstColumn ? 0 : 1,
+                        borderBottomWidth: 1,
+                        borderRightWidth: isLastColumn ? 1 : 0,
+                        borderColor: gridLineColor,
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }}>
+                <MaterialIcons name="add" size={14} color="#474747"/>
+              </Pressable>);
+            })}
+        </View>))}
+    </View>);
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { CalendarDimensions, RenderResourceHeaderFunction, Resource } from "../../types/calendar";
+type ResourceHeadersProps<T = any> = {
+    resources: Resource<T>[];
+    scrollRef: React.RefObject<ScrollView | null>;
+    dimensions: CalendarDimensions;
+    renderResourceHeader?: RenderResourceHeaderFunction<T>;
+    onResourcePress?: (resource: Resource<T>) => void;
+};
+export declare function ResourceHeaders<T = any>({ resources, scrollRef, dimensions, renderResourceHeader, onResourcePress, }: ResourceHeadersProps<T>): React.JSX.Element;
+export {};
+//# sourceMappingURL=ResourceHeaders.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceHeaders.d.ts","sourceRoot":"","sources":["../../../components/calendar/ResourceHeaders.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,UAAU,EAAc,MAAM,cAAc,CAAC;AACjE,OAAO,EACL,kBAAkB,EAClB,4BAA4B,EAC5B,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAE9B,KAAK,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI;IACnC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAC9C,UAAU,EAAE,kBAAkB,CAAC;IAC/B,oBAAoB,CAAC,EAAE,4BAA4B,CAAC,CAAC,CAAC,CAAC;IACvD,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,GAAG,GAAG,EAAE,EACvC,SAAS,EACT,SAAS,EACT,UAAU,EACV,oBAAoB,EACpB,eAAe,GAChB,EAAE,oBAAoB,CAAC,CAAC,CAAC,qBAiDzB"}

package/dist/components/calendar/ResourceHeaders.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+export function ResourceHeaders({ resources, scrollRef, dimensions, renderResourceHeader, onResourcePress, }) {
+    return (<View style={{ flexDirection: "row", zIndex: 10 }}>
+      <View style={{
+            backgroundColor: "#262626",
+            borderBottomWidth: 1,
+            borderBottomColor: "#333",
+            zIndex: 20,
+            width: dimensions.resourceWidth,
+        }}/>
+      <ScrollView ref={scrollRef} horizontal showsHorizontalScrollIndicator={false} scrollEnabled={false} bounces={false} style={{ flex: 1 }}>
+        <View style={{ flexDirection: "row" }}>
+          {resources.map((resource) => (<Pressable key={resource.id} onPress={() => onResourcePress?.(resource)} style={{
+                justifyContent: "center",
+                backgroundColor: "#262626",
+                borderLeftWidth: 1,
+                borderBottomWidth: 1,
+                borderColor: "#333",
+                paddingVertical: 16,
+                paddingHorizontal: 10,
+                width: dimensions.resourceWidth,
+                height: dimensions.resourceWidth,
+            }}>
+              {renderResourceHeader ? (renderResourceHeader(resource)) : (<Text style={{ color: "#fefefe", fontSize: 14, textAlign: "left" }}>
+                  {resource.label}
+                </Text>)}
+            </Pressable>))}
+        </View>
+      </ScrollView>
+    </View>);
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { CalendarDimensions, CalendarStyles, CalendarTimeConfig, RenderTimeSlotFunction } from "../../types/calendar";
+type TimeColumnProps = {
+    scrollRef: React.RefObject<ScrollView | null>;
+    gridTotalHeight: number;
+    timeConfig: CalendarTimeConfig;
+    dimensions: CalendarDimensions;
+    renderTimeSlot?: RenderTimeSlotFunction;
+    styles?: CalendarStyles;
+};
+export declare function TimeColumn({ scrollRef, gridTotalHeight, timeConfig, dimensions, renderTimeSlot, styles, }: TimeColumnProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=TimeColumn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeColumn.d.ts","sourceRoot":"","sources":["../../../components/calendar/TimeColumn.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAc,MAAM,cAAc,CAAC;AACtD,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,sBAAsB,CAAC;AAE9B,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB,CAAC;AAQF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,EACV,cAAc,EACd,MAAM,GACP,EAAE,eAAe,qBAsEjB"}

package/dist/components/calendar/TimeColumn.js

@@ -0,0 +1,56 @@
+import { format } from "date-fns";
+import React, { useMemo } from "react";
+import { ScrollView, Text, View } from "react-native";
+function formatHour(hour, timeFormat) {
+    const date = new Date();
+    date.setHours(hour, 0, 0, 0);
+    return format(date, timeFormat);
+}
+export function TimeColumn({ scrollRef, gridTotalHeight, timeConfig, dimensions, renderTimeSlot, styles, }) {
+    const hoursArray = useMemo(() => {
+        const result = [];
+        for (let hour = timeConfig.startHour + 1; hour <= timeConfig.endHour; hour++) {
+            result.push(hour);
+        }
+        return result;
+    }, [timeConfig.startHour, timeConfig.endHour]);
+    const bgColor = styles?.timeColumnBackgroundColor || "#262626";
+    return (<View style={{
+            zIndex: 10,
+            position: "relative",
+            borderRightWidth: 1,
+            borderRightColor: "#333",
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 5,
+            width: dimensions.resourceWidth,
+            backgroundColor: bgColor,
+        }}>
+      <ScrollView ref={scrollRef} showsVerticalScrollIndicator={false} scrollEnabled={false} bounces={false} contentContainerStyle={{ minHeight: gridTotalHeight }}>
+        <View style={{
+            position: "relative",
+            width: dimensions.resourceWidth,
+            height: gridTotalHeight,
+        }}>
+          {hoursArray.map((hour, hourIndex) => {
+            const topPosition = hourIndex * dimensions.hourHeight;
+            return (<View key={hour} style={{
+                    position: "absolute",
+                    left: 0,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    top: topPosition,
+                    width: dimensions.resourceWidth,
+                    height: dimensions.hourHeight,
+                }}>
+                {renderTimeSlot ? (renderTimeSlot(hour)) : (<Text style={{ color: "#fefefe", fontSize: 14 }}>
+                    {formatHour(hour, timeConfig.timeFormat || "HH:mm")}
+                  </Text>)}
+              </View>);
+        })}
+        </View>
+      </ScrollView>
+    </View>);
+}

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

@@ -0,0 +1,12 @@
+import { CalendarDimensions, CalendarTimeConfig, RenderUnavailableSlotFunction, Resource, UnavailableSlot, UnavailableSlotStyles } from "../../types/calendar";
+type UnavailableLayerProps<TResource = any, TUnavailable = any> = {
+    unavailableSlots: UnavailableSlot<TUnavailable>[];
+    resources: Resource<TResource>[];
+    timeConfig: CalendarTimeConfig;
+    dimensions: CalendarDimensions;
+    unavailableStyles?: UnavailableSlotStyles;
+    renderUnavailableSlot?: RenderUnavailableSlotFunction<TUnavailable>;
+};
+export declare function UnavailableLayer<TResource = any, TUnavailable = any>({ unavailableSlots, resources, timeConfig, dimensions, unavailableStyles, renderUnavailableSlot, }: UnavailableLayerProps<TResource, TUnavailable>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=UnavailableLayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnavailableLayer.d.ts","sourceRoot":"","sources":["../../../components/calendar/UnavailableLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,6BAA6B,EAC7B,QAAQ,EACR,eAAe,EACf,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,KAAK,qBAAqB,CAAC,SAAS,GAAG,GAAG,EAAE,YAAY,GAAG,GAAG,IAAI;IAChE,gBAAgB,EAAE,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC;IAClD,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;IACjC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,qBAAqB,CAAC,EAAE,6BAA6B,CAAC,YAAY,CAAC,CAAC;CACrE,CAAC;AAuDF,wBAAgB,gBAAgB,CAAC,SAAS,GAAG,GAAG,EAAE,YAAY,GAAG,GAAG,EAAE,EACpE,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,qBAAqB,GACtB,EAAE,qBAAqB,CAAC,SAAS,EAAE,YAAY,CAAC,+BAkIhD"}

package/dist/components/calendar/UnavailableLayer.js

@@ -0,0 +1,122 @@
+import { useMemo } from "react";
+import { View } from "react-native";
+function DiagonalStripes({ color, width, height, }) {
+    const stripeWidth = 1;
+    const gapBetweenStripes = 5;
+    const stripeSpacing = stripeWidth + gapBetweenStripes;
+    const diagonalLength = Math.sqrt(width * width + height * height);
+    const numberOfStripes = Math.ceil(diagonalLength / stripeSpacing);
+    const stripes = [];
+    for (let stripeIndex = -numberOfStripes; stripeIndex < numberOfStripes; stripeIndex++) {
+        stripes.push(<View key={stripeIndex} style={{
+                position: "absolute",
+                backgroundColor: color,
+                left: stripeIndex * stripeSpacing,
+                top: -width,
+                width: stripeWidth,
+                height: diagonalLength * 2.1,
+                transform: [{ rotate: "45deg" }],
+            }}/>);
+    }
+    return (<View style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            overflow: "hidden",
+        }}>
+      {stripes}
+    </View>);
+}
+export function UnavailableLayer({ unavailableSlots, resources, timeConfig, dimensions, unavailableStyles, renderUnavailableSlot, }) {
+    const positionedSlots = useMemo(() => {
+        return unavailableSlots
+            .map((slot) => {
+            const resourceIndex = resources.findIndex((resource) => resource.id === slot.resourceId);
+            if (resourceIndex === -1) {
+                return null;
+            }
+            const topPosition = (slot.startHour - timeConfig.startHour - 1) * dimensions.hourHeight;
+            const blockHeight = (slot.endHour - slot.startHour) * dimensions.hourHeight;
+            const leftPosition = resourceIndex * dimensions.resourceWidth;
+            const blockWidth = dimensions.resourceWidth;
+            return { slot, topPosition, leftPosition, blockWidth, blockHeight };
+        })
+            .filter(Boolean);
+    }, [unavailableSlots, resources, timeConfig.startHour, dimensions]);
+    const gridTotalWidth = resources.length * dimensions.resourceWidth;
+    const gridBodyHeight = (timeConfig.endHour - timeConfig.startHour - 1) * dimensions.hourHeight;
+    // Default styles
+    const getSlotStyle = (type) => {
+        switch (type) {
+            case "reserved":
+                return {
+                    backgroundColor: unavailableStyles?.reserved?.backgroundColor || "#7f1d1d",
+                    opacity: unavailableStyles?.reserved?.opacity || 0.3,
+                };
+            case "offHours":
+                return {
+                    backgroundColor: unavailableStyles?.offHours?.backgroundColor || "#404040",
+                    opacity: unavailableStyles?.offHours?.opacity || 0.5,
+                };
+            case "disabled":
+                return {
+                    backgroundColor: unavailableStyles?.disabled?.backgroundColor || "#525252",
+                    opacity: unavailableStyles?.disabled?.opacity || 0.6,
+                };
+            default:
+                return {
+                    backgroundColor: "#404040",
+                    opacity: 0.5,
+                };
+        }
+    };
+    const getStripeColor = (type) => {
+        if (type === "reserved")
+            return "#dc2626";
+        return "#737373";
+    };
+    return (<View style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: gridTotalWidth,
+            height: gridBodyHeight,
+            zIndex: 1,
+        }} pointerEvents="none">
+      {positionedSlots.map((item) => {
+            const showStripes = item.slot.type !== "disabled";
+            const slotStyle = getSlotStyle(item.slot.type);
+            const stripeColor = getStripeColor(item.slot.type);
+            if (renderUnavailableSlot) {
+                return (<View key={item.slot.id} style={{
+                        position: "absolute",
+                        top: item.topPosition,
+                        left: item.leftPosition,
+                        width: item.blockWidth,
+                        height: item.blockHeight,
+                    }}>
+              {renderUnavailableSlot(item.slot, {
+                        width: item.blockWidth,
+                        height: item.blockHeight,
+                    })}
+            </View>);
+            }
+            return (<View key={item.slot.id} style={{
+                    position: "absolute",
+                    overflow: "hidden",
+                    top: item.topPosition,
+                    left: item.leftPosition,
+                    width: item.blockWidth,
+                    height: item.blockHeight,
+                    backgroundColor: slotStyle.backgroundColor,
+                    opacity: slotStyle.opacity,
+                    borderWidth: 1,
+                    borderColor: "#333",
+                }}>
+            {showStripes && (<DiagonalStripes color={stripeColor} width={item.blockWidth} height={item.blockHeight}/>)}
+          </View>);
+        })}
+    </View>);
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Native date utility functions to replace date-fns
+ * Zero external dependencies
+ */
+/**
+ * Add days to a date
+ */
+export declare function addDays(date: Date, days: number): Date;
+/**
+ * Subtract days from a date
+ */
+export declare function subDays(date: Date, days: number): Date;
+/**
+ * Format a date according to a format string
+ * Supports common tokens:
+ * - EEE: Short weekday name (Mon, Tue, etc.)
+ * - EEEE: Full weekday name (Monday, Tuesday, etc.)
+ * - MMM: Short month name (Jan, Feb, etc.)
+ * - MMMM: Full month name (January, February, etc.)
+ * - MM: Month as 2 digits (01-12)
+ * - M: Month as 1-2 digits (1-12)
+ * - dd: Day as 2 digits (01-31)
+ * - d: Day as 1-2 digits (1-31)
+ * - yyyy: Full year (2026)
+ * - yy: 2-digit year (26)
+ * - HH: Hour in 24h format with leading zero (00-23)
+ * - H: Hour in 24h format (0-23)
+ * - hh: Hour in 12h format with leading zero (01-12)
+ * - h: Hour in 12h format (1-12)
+ * - mm: Minutes with leading zero (00-59)
+ * - m: Minutes (0-59)
+ * - ss: Seconds with leading zero (00-59)
+ * - s: Seconds (0-59)
+ * - a: AM/PM
+ */
+export declare function formatDate(date: Date, formatString: string): string;
+//# sourceMappingURL=dateUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../components/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAItD;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAItD;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CA+FnE"}

package/dist/components/calendar/dateUtils.js

@@ -0,0 +1,128 @@
+/**
+ * Native date utility functions to replace date-fns
+ * Zero external dependencies
+ */
+/**
+ * Add days to a date
+ */
+export function addDays(date, days) {
+    const result = new Date(date);
+    result.setDate(result.getDate() + days);
+    return result;
+}
+/**
+ * Subtract days from a date
+ */
+export function subDays(date, days) {
+    const result = new Date(date);
+    result.setDate(result.getDate() - days);
+    return result;
+}
+/**
+ * Format a date according to a format string
+ * Supports common tokens:
+ * - EEE: Short weekday name (Mon, Tue, etc.)
+ * - EEEE: Full weekday name (Monday, Tuesday, etc.)
+ * - MMM: Short month name (Jan, Feb, etc.)
+ * - MMMM: Full month name (January, February, etc.)
+ * - MM: Month as 2 digits (01-12)
+ * - M: Month as 1-2 digits (1-12)
+ * - dd: Day as 2 digits (01-31)
+ * - d: Day as 1-2 digits (1-31)
+ * - yyyy: Full year (2026)
+ * - yy: 2-digit year (26)
+ * - HH: Hour in 24h format with leading zero (00-23)
+ * - H: Hour in 24h format (0-23)
+ * - hh: Hour in 12h format with leading zero (01-12)
+ * - h: Hour in 12h format (1-12)
+ * - mm: Minutes with leading zero (00-59)
+ * - m: Minutes (0-59)
+ * - ss: Seconds with leading zero (00-59)
+ * - s: Seconds (0-59)
+ * - a: AM/PM
+ */
+export function formatDate(date, formatString) {
+    const weekdaysShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const weekdaysFull = [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+    ];
+    const monthsShort = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+    ];
+    const monthsFull = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ];
+    const day = date.getDate();
+    const month = date.getMonth();
+    const year = date.getFullYear();
+    const weekday = date.getDay();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const pad = (num, size = 2) => {
+        return num.toString().padStart(size, "0");
+    };
+    const tokens = {
+        EEEE: weekdaysFull[weekday],
+        EEE: weekdaysShort[weekday],
+        MMMM: monthsFull[month],
+        MMM: monthsShort[month],
+        MM: pad(month + 1),
+        M: (month + 1).toString(),
+        dd: pad(day),
+        d: day.toString(),
+        yyyy: year.toString(),
+        yy: year.toString().slice(-2),
+        HH: pad(hours),
+        H: hours.toString(),
+        hh: pad(hours % 12 || 12),
+        h: (hours % 12 || 12).toString(),
+        mm: pad(minutes),
+        m: minutes.toString(),
+        ss: pad(seconds),
+        s: seconds.toString(),
+        a: hours >= 12 ? "PM" : "AM",
+    };
+    let result = formatString;
+    // Sort by length descending to replace longer tokens first (e.g., MMMM before MMM)
+    const sortedTokens = Object.keys(tokens).sort((a, b) => b.length - a.length);
+    for (const token of sortedTokens) {
+        // Use a unique placeholder to avoid re-replacement issues
+        const placeholder = `\x00${token}\x00`;
+        result = result.replace(new RegExp(token, "g"), placeholder);
+    }
+    // Replace placeholders with actual values
+    for (const token of sortedTokens) {
+        const placeholder = `\x00${token}\x00`;
+        result = result.replace(new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), tokens[token]);
+    }
+    return result;
+}

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

@@ -0,0 +1,9 @@
+export { Calendar } from "./Calendar";
+export { CalendarHeader } from "./CalendarHeader";
+export { EventsLayer } from "./EventsLayer";
+export { GridBody } from "./GridBody";
+export { ResourceHeaders } from "./ResourceHeaders";
+export { TimeColumn } from "./TimeColumn";
+export { UnavailableLayer } from "./UnavailableLayer";
+export type { CalendarDimensions, CalendarEvent, CalendarEventStyles, CalendarProps, CalendarStyles, CalendarTimeConfig, RenderEventFunction, RenderResourceHeaderFunction, RenderTimeSlotFunction, RenderUnavailableSlotFunction, Resource, UnavailableSlot, UnavailableSlotStyles, UnavailableType, } from "../../types/calendar";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,YAAY,EACV,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,4BAA4B,EAC5B,sBAAsB,EACtB,6BAA6B,EAC7B,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,eAAe,GAChB,MAAM,sBAAsB,CAAC"}

package/dist/components/calendar/index.js

@@ -0,0 +1,7 @@
+export { Calendar } from "./Calendar";
+export { CalendarHeader } from "./CalendarHeader";
+export { EventsLayer } from "./EventsLayer";
+export { GridBody } from "./GridBody";
+export { ResourceHeaders } from "./ResourceHeaders";
+export { TimeColumn } from "./TimeColumn";
+export { UnavailableLayer } from "./UnavailableLayer";

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Calendar } from "./components/calendar/Calendar";
+export { CalendarHeader } from "./components/calendar/CalendarHeader";
+export { EventsLayer } from "./components/calendar/EventsLayer";
+export { GridBody } from "./components/calendar/GridBody";
+export { ResourceHeaders } from "./components/calendar/ResourceHeaders";
+export { TimeColumn } from "./components/calendar/TimeColumn";
+export { UnavailableLayer } from "./components/calendar/UnavailableLayer";
+export type { CalendarDimensions, CalendarEvent, CalendarEventStyles, CalendarProps, CalendarStyles, CalendarTimeConfig, RenderEventFunction, RenderResourceHeaderFunction, RenderTimeSlotFunction, RenderUnavailableSlotFunction, Resource, UnavailableSlot, UnavailableSlotStyles, UnavailableType, } from "./types/calendar";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG1D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAG1E,YAAY,EACV,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,4BAA4B,EAC5B,sBAAsB,EACtB,6BAA6B,EAC7B,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,eAAe,GAChB,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,9 @@
+// Main package entry point
+export { Calendar } from "./components/calendar/Calendar";
+// Sub-components
+export { CalendarHeader } from "./components/calendar/CalendarHeader";
+export { EventsLayer } from "./components/calendar/EventsLayer";
+export { GridBody } from "./components/calendar/GridBody";
+export { ResourceHeaders } from "./components/calendar/ResourceHeaders";
+export { TimeColumn } from "./components/calendar/TimeColumn";
+export { UnavailableLayer } from "./components/calendar/UnavailableLayer";