react-native-ll-calendar 0.15.1 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +102 -12
  2. package/lib/module/calendar/month-calendar/MonthCalendar.js +3 -1
  3. package/lib/module/calendar/month-calendar/MonthCalendar.js.map +1 -1
  4. package/lib/module/calendar/month-calendar/view/MonthCalendarEventOverlay.js +21 -0
  5. package/lib/module/calendar/month-calendar/view/MonthCalendarEventOverlay.js.map +1 -0
  6. package/lib/module/calendar/month-calendar/view/MonthCalendarViewItem.js +2 -0
  7. package/lib/module/calendar/month-calendar/view/MonthCalendarViewItem.js.map +1 -1
  8. package/lib/module/calendar/month-calendar/view/MonthCalendarWeekRow.js +118 -66
  9. package/lib/module/calendar/month-calendar/view/MonthCalendarWeekRow.js.map +1 -1
  10. package/lib/module/calendar/resources-calendar/ResourcesCalendar.js +102 -50
  11. package/lib/module/calendar/resources-calendar/ResourcesCalendar.js.map +1 -1
  12. package/lib/module/calendar/week-resources-calendar/WeekPanel.js +402 -0
  13. package/lib/module/calendar/week-resources-calendar/WeekPanel.js.map +1 -0
  14. package/lib/module/calendar/week-resources-calendar/WeekResourcesCalendar.js +119 -0
  15. package/lib/module/calendar/week-resources-calendar/WeekResourcesCalendar.js.map +1 -0
  16. package/lib/module/index.js +2 -0
  17. package/lib/module/index.js.map +1 -1
  18. package/lib/typescript/src/calendar/month-calendar/MonthCalendar.d.ts +8 -0
  19. package/lib/typescript/src/calendar/month-calendar/MonthCalendar.d.ts.map +1 -1
  20. package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarEventOverlay.d.ts +16 -0
  21. package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarEventOverlay.d.ts.map +1 -0
  22. package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarViewItem.d.ts +3 -0
  23. package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarViewItem.d.ts.map +1 -1
  24. package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarWeekRow.d.ts +3 -0
  25. package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarWeekRow.d.ts.map +1 -1
  26. package/lib/typescript/src/calendar/resources-calendar/ResourcesCalendar.d.ts +8 -1
  27. package/lib/typescript/src/calendar/resources-calendar/ResourcesCalendar.d.ts.map +1 -1
  28. package/lib/typescript/src/calendar/week-resources-calendar/WeekPanel.d.ts +33 -0
  29. package/lib/typescript/src/calendar/week-resources-calendar/WeekPanel.d.ts.map +1 -0
  30. package/lib/typescript/src/calendar/week-resources-calendar/WeekResourcesCalendar.d.ts +39 -0
  31. package/lib/typescript/src/calendar/week-resources-calendar/WeekResourcesCalendar.d.ts.map +1 -0
  32. package/lib/typescript/src/index.d.ts +3 -0
  33. package/lib/typescript/src/index.d.ts.map +1 -1
  34. package/package.json +1 -1
  35. package/src/calendar/month-calendar/MonthCalendar.tsx +16 -1
  36. package/src/calendar/month-calendar/view/MonthCalendarEventOverlay.tsx +37 -0
  37. package/src/calendar/month-calendar/view/MonthCalendarViewItem.tsx +5 -0
  38. package/src/calendar/month-calendar/view/MonthCalendarWeekRow.tsx +186 -113
  39. package/src/calendar/resources-calendar/ResourcesCalendar.tsx +181 -96
  40. package/src/calendar/week-resources-calendar/WeekPanel.tsx +562 -0
  41. package/src/calendar/week-resources-calendar/WeekResourcesCalendar.tsx +174 -0
  42. package/src/index.tsx +4 -0
package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarWeekRow.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import dayjs from 'dayjs';
2
+ import type { ReactNode } from 'react';
2
3
  import { type LayoutChangeEvent } from 'react-native';
3
4
  import { type ViewStyle } from 'react-native';
4
5
  import type { CalendarEvent, WeekdayNum } from '../../../types/month-calendar';
@@ -25,6 +26,8 @@ export declare const MonthCalendarWeekRow: (props: {
25
26
  eventHeight?: number;
26
27
  eventTextStyle?: (event: CalendarEvent) => TextStyle;
27
28
  eventEllipsizeMode?: "head" | "middle" | "tail" | "clip";
29
+ renderEventOverlay?: (event: CalendarEvent) => ReactNode;
28
30
  onLayout?: (event: LayoutChangeEvent) => void;
31
+ prioritizeCellInteraction?: boolean;
29
32
  }) => import("react/jsx-runtime").JSX.Element;
30
33
  //# sourceMappingURL=MonthCalendarWeekRow.d.ts.map
package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarWeekRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MonthCalendarWeekRow.d.ts","sourceRoot":"","sources":["../../../../../../src/calendar/month-calendar/view/MonthCalendarWeekRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC/E,OAAO,KAAK,0BAA0B,MAAM,8CAA8C,CAAC;AAE3F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,oBAAoB,GAAI,OAAO;IAC1C,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IAClD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IAC7C,yBAAyB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC;IAClE,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C,4CAkMA,CAAC"}
1
+ {"version":3,"file":"MonthCalendarWeekRow.d.ts","sourceRoot":"","sources":["../../../../../../src/calendar/month-calendar/view/MonthCalendarWeekRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC/E,OAAO,KAAK,0BAA0B,MAAM,8CAA8C,CAAC;AAE3F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,oBAAoB,GAAI,OAAO;IAC1C,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IAClD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IAC7C,yBAAyB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC;IAClE,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACzD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,4CAoPA,CAAC"}
package/lib/typescript/src/calendar/resources-calendar/ResourcesCalendar.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { type ReactNode } from 'react';
2
2
  import type { CalendarEvent, CalendarResource } from '../../types/resources-calendar';
3
3
  import { type TextStyle, type ViewStyle } from 'react-native';
4
4
  type ResourcesCalendarProps = {
@@ -24,11 +24,18 @@ type ResourcesCalendarProps = {
24
24
  bottomSpacing?: number;
25
25
  eventTextStyle?: (event: CalendarEvent) => TextStyle;
26
26
  eventEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
27
+ renderEventOverlay?: (event: CalendarEvent) => ReactNode;
27
28
  dateCellContainerStyle?: (date: Date) => ViewStyle;
28
29
  cellContainerStyle?: (resource: CalendarResource, date: Date) => ViewStyle;
29
30
  hiddenMonth?: boolean;
30
31
  allowFontScaling?: boolean;
31
32
  resourceNameLayout?: 'fixed-column' | 'inline-band';
33
+ /**
34
+ * When true, a transparent layer is placed above events in each cell so
35
+ * `onPressCell` / `onLongPressCell` receive touches for the full cell area.
36
+ * Event taps are disabled while this is on (overlay captures the gesture).
37
+ */
38
+ prioritizeCellInteraction?: boolean;
32
39
  };
33
40
  export declare function ResourcesCalendar(props: ResourcesCalendarProps): import("react/jsx-runtime").JSX.Element;
34
41
  export {};
package/lib/typescript/src/calendar/resources-calendar/ResourcesCalendar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResourcesCalendar.d.ts","sourceRoot":"","sources":["../../../../../src/calendar/resources-calendar/ResourcesCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EACjB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EAMf,MAAM,cAAc,CAAC;AAOtB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACpD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACtE,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACzD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IACnD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;CACrD,CAAC;AAuOF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAsW9D"}
1
+ {"version":3,"file":"ResourcesCalendar.d.ts","sourceRoot":"","sources":["../../../../../src/calendar/resources-calendar/ResourcesCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EACjB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EAOf,MAAM,cAAc,CAAC;AAOtB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACpD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACtE,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACzD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACzD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IACnD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC;IACpD;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAyRF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAwW9D"}
package/lib/typescript/src/calendar/week-resources-calendar/WeekPanel.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import React, { type ReactNode } from 'react';
2
+ import { type TextStyle, type ViewStyle } from 'react-native';
3
+ import type { CalendarResource, CalendarEvent } from '../../types/resources-calendar';
4
+ export declare const CELL_BORDER_WIDTH = 0.5;
5
+ export declare const BORDER_COLOR = "lightslategrey";
6
+ export type WeekPanelProps = {
7
+ weekKey: string;
8
+ width: number;
9
+ resources: CalendarResource[];
10
+ events: CalendarEvent[];
11
+ eventHeight?: number;
12
+ onPressCell?: (resource: CalendarResource, date: Date) => void;
13
+ onLongPressCell?: (resource: CalendarResource, date: Date) => void;
14
+ delayLongPressCell?: number;
15
+ onPressEvent?: (event: CalendarEvent) => void;
16
+ onLongPressEvent?: (event: CalendarEvent) => void;
17
+ delayLongPressEvent?: number;
18
+ prioritizeCellInteraction?: boolean;
19
+ eventTextStyle?: (event: CalendarEvent) => TextStyle;
20
+ eventEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
21
+ allowFontScaling?: boolean;
22
+ renderEventOverlay?: (event: CalendarEvent) => ReactNode;
23
+ dateCellContainerStyle?: (date: Date) => ViewStyle;
24
+ cellContainerStyle?: (resource: CalendarResource, date: Date) => ViewStyle;
25
+ renderDateLabel?: (date: Date) => React.JSX.Element;
26
+ renderResourceNameLabel?: (resource: CalendarResource) => React.JSX.Element;
27
+ onRefresh?: () => void;
28
+ refreshing?: boolean;
29
+ bottomSpacing?: number;
30
+ fixedRowCount?: number;
31
+ };
32
+ export declare function WeekPanel({ weekKey, width, resources, events, eventHeight, onPressCell, onLongPressCell, delayLongPressCell, onPressEvent, onLongPressEvent, delayLongPressEvent, prioritizeCellInteraction, eventTextStyle, eventEllipsizeMode, allowFontScaling, renderEventOverlay, dateCellContainerStyle, cellContainerStyle, renderDateLabel, renderResourceNameLabel, onRefresh, refreshing, bottomSpacing, fixedRowCount, }: WeekPanelProps): import("react/jsx-runtime").JSX.Element;
33
+ //# sourceMappingURL=WeekPanel.d.ts.map
package/lib/typescript/src/calendar/week-resources-calendar/WeekPanel.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WeekPanel.d.ts","sourceRoot":"","sources":["../../../../../src/calendar/week-resources-calendar/WeekPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACd,MAAM,gCAAgC,CAAC;AAIxC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,YAAY,mBAAmB,CAAC;AAG7C,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACzD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IACnD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IAC3E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACpD,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AA+OF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,SAAS,EACT,MAAM,EACN,WAAW,EACX,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,yBAAyB,EACzB,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,aAAa,EACb,aAAa,GACd,EAAE,cAAc,2CAwIhB"}
package/lib/typescript/src/calendar/week-resources-calendar/WeekResourcesCalendar.d.ts ADDED
@@ -0,0 +1,39 @@
1
+ import React, { type ReactNode } from 'react';
2
+ import { type TextStyle, type ViewStyle } from 'react-native';
3
+ import type { WeekStartsOn } from '../../types/month-calendar';
4
+ import type { CalendarResource, CalendarEvent } from '../../types/resources-calendar';
5
+ type WeekResourcesCalendarProps = {
6
+ defaultDate: Date;
7
+ weekStartsOn?: WeekStartsOn;
8
+ onChangeDate?: (date: Date) => void;
9
+ resources: CalendarResource[];
10
+ events: CalendarEvent[];
11
+ eventHeight?: number;
12
+ onPressCell?: (resource: CalendarResource, date: Date) => void;
13
+ onLongPressCell?: (resource: CalendarResource, date: Date) => void;
14
+ delayLongPressCell?: number;
15
+ onPressEvent?: (event: CalendarEvent) => void;
16
+ onLongPressEvent?: (event: CalendarEvent) => void;
17
+ delayLongPressEvent?: number;
18
+ /**
19
+ * When true, a transparent layer is placed above events in each cell so
20
+ * `onPressCell` / `onLongPressCell` receive touches for the full cell area.
21
+ * Event taps are disabled while this is on (overlay captures the gesture).
22
+ */
23
+ prioritizeCellInteraction?: boolean;
24
+ eventTextStyle?: (event: CalendarEvent) => TextStyle;
25
+ eventEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
26
+ allowFontScaling?: boolean;
27
+ renderEventOverlay?: (event: CalendarEvent) => ReactNode;
28
+ dateCellContainerStyle?: (date: Date) => ViewStyle;
29
+ cellContainerStyle?: (resource: CalendarResource, date: Date) => ViewStyle;
30
+ renderDateLabel?: (date: Date) => React.JSX.Element;
31
+ renderResourceNameLabel?: (resource: CalendarResource) => React.JSX.Element;
32
+ onRefresh?: () => void;
33
+ refreshing?: boolean;
34
+ bottomSpacing?: number;
35
+ fixedRowCount?: number;
36
+ };
37
+ export declare const WeekResourcesCalendar: ({ defaultDate, weekStartsOn, onChangeDate, resources, events, eventHeight, onPressCell, onLongPressCell, delayLongPressCell, onPressEvent, onLongPressEvent, delayLongPressEvent, prioritizeCellInteraction, eventTextStyle, eventEllipsizeMode, allowFontScaling, renderEventOverlay, dateCellContainerStyle, cellContainerStyle, renderDateLabel, renderResourceNameLabel, onRefresh, refreshing, bottomSpacing, fixedRowCount, }: WeekResourcesCalendarProps) => import("react/jsx-runtime").JSX.Element;
38
+ export {};
39
+ //# sourceMappingURL=WeekResourcesCalendar.d.ts.map
package/lib/typescript/src/calendar/week-resources-calendar/WeekResourcesCalendar.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WeekResourcesCalendar.d.ts","sourceRoot":"","sources":["../../../../../src/calendar/week-resources-calendar/WeekResourcesCalendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACd,MAAM,gCAAgC,CAAC;AAKxC,KAAK,0BAA0B,GAAG;IAChC,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACrD,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACzD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IACnD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;IAC3E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACpD,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAcF,eAAO,MAAM,qBAAqB,GAAI,qaA0BnC,0BAA0B,4CAqF5B,CAAC"}
package/lib/typescript/src/index.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  export { MonthCalendar } from './calendar/month-calendar/MonthCalendar';
2
+ export { MonthCalendarEventOverlay } from './calendar/month-calendar/view/MonthCalendarEventOverlay';
2
3
  export type { CalendarEvent } from './types/month-calendar';
3
4
  export type { MonthCalendarRef } from './calendar/month-calendar/MonthCalendar';
5
+ export type { MonthCalendarEventOverlayPosition } from './calendar/month-calendar/view/MonthCalendarEventOverlay';
4
6
  export { ResourcesCalendar } from './calendar/resources-calendar/ResourcesCalendar';
5
7
  export type { CalendarEvent as ResourcesCalendarEvent, CalendarResource, } from './types/resources-calendar';
8
+ export { WeekResourcesCalendar } from './calendar/week-resources-calendar/WeekResourcesCalendar';
6
9
  //# sourceMappingURL=index.d.ts.map
package/lib/typescript/src/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAEhF,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AACpF,YAAY,EACV,aAAa,IAAI,sBAAsB,EACvC,gBAAgB,GACjB,MAAM,4BAA4B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,0DAA0D,CAAC;AACrG,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAChF,YAAY,EAAE,iCAAiC,EAAE,MAAM,0DAA0D,CAAC;AAElH,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AACpF,YAAY,EACV,aAAa,IAAI,sBAAsB,EACvC,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-ll-calendar",
3
- "version": "0.15.1",
3
+ "version": "0.17.0",
4
4
  "description": "ReactNative Calendar Library",
5
5
  "main": "./lib/module/index.js",
6
6
  "types": "./lib/typescript/src/index.d.ts",
package/src/calendar/month-calendar/MonthCalendar.tsx CHANGED
@@ -5,7 +5,13 @@ import {
5
5
  type TextStyle,
6
6
  } from 'react-native';
7
7
  import dayjs from 'dayjs';
8
- import { useState, useRef, useImperativeHandle, forwardRef } from 'react';
8
+ import {
9
+ useState,
10
+ useRef,
11
+ useImperativeHandle,
12
+ forwardRef,
13
+ type ReactNode,
14
+ } from 'react';
9
15
  import type {
10
16
  CalendarEvent,
11
17
  WeekdayNum,
@@ -54,7 +60,14 @@ type MonthCalendarProps = {
54
60
  eventHeight?: number;
55
61
  eventTextStyle?: (event: CalendarEvent) => TextStyle;
56
62
  eventEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
63
+ renderEventOverlay?: (event: CalendarEvent) => ReactNode;
57
64
  bottomSpacing?: number;
65
+ /**
66
+ * When true, a transparent layer is placed above events in each day cell so
67
+ * `onPressCell` / `onLongPressCell` receive touches for the full cell area.
68
+ * Event taps are disabled while this is on (overlay captures the gesture).
69
+ */
70
+ prioritizeCellInteraction?: boolean;
58
71
  };
59
72
 
60
73
  export const MonthCalendar = forwardRef<MonthCalendarRef, MonthCalendarProps>(
@@ -173,7 +186,9 @@ export const MonthCalendar = forwardRef<MonthCalendarRef, MonthCalendarProps>(
173
186
  eventHeight={props.eventHeight}
174
187
  eventTextStyle={props.eventTextStyle}
175
188
  eventEllipsizeMode={props.eventEllipsizeMode}
189
+ renderEventOverlay={props.renderEventOverlay}
176
190
  bottomSpacing={props.bottomSpacing}
191
+ prioritizeCellInteraction={props.prioritizeCellInteraction}
177
192
  />
178
193
  );
179
194
  }}
package/src/calendar/month-calendar/view/MonthCalendarEventOverlay.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import { StyleSheet, View, type ViewStyle } from 'react-native';
2
+ import type { ReactNode } from 'react';
3
+
4
+ export type MonthCalendarEventOverlayPosition = Pick<
5
+ ViewStyle,
6
+ 'top' | 'bottom' | 'left' | 'right'
7
+ >;
8
+
9
+ type MonthCalendarEventOverlayProps = {
10
+ position: MonthCalendarEventOverlayPosition;
11
+ children: ReactNode;
12
+ style?: ViewStyle;
13
+ pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
14
+ };
15
+
16
+ /**
17
+ * Use inside MonthCalendar’s `renderEventOverlay` to place content over an event
18
+ * using top / right / bottom / left relative to the event row.
19
+ */
20
+ export function MonthCalendarEventOverlay(
21
+ props: MonthCalendarEventOverlayProps
22
+ ) {
23
+ return (
24
+ <View
25
+ pointerEvents={props.pointerEvents ?? 'box-none'}
26
+ style={[styles.base, props.position, props.style]}
27
+ >
28
+ {props.children}
29
+ </View>
30
+ );
31
+ }
32
+
33
+ const styles = StyleSheet.create({
34
+ base: {
35
+ position: 'absolute',
36
+ },
37
+ });
package/src/calendar/month-calendar/view/MonthCalendarViewItem.tsx CHANGED
@@ -27,6 +27,7 @@ import {
27
27
  forwardRef,
28
28
  useImperativeHandle,
29
29
  useRef,
30
+ type ReactNode,
30
31
  } from 'react';
31
32
  import { MonthCalendarWeekDayRow } from './MonthCalendarWeekDayRow';
32
33
 
@@ -63,7 +64,9 @@ type MonthCalendarViewItemProps = {
63
64
  eventHeight?: number;
64
65
  eventTextStyle?: (event: CalendarEvent) => TextStyle;
65
66
  eventEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
67
+ renderEventOverlay?: (event: CalendarEvent) => ReactNode;
66
68
  bottomSpacing?: number;
69
+ prioritizeCellInteraction?: boolean;
67
70
  };
68
71
 
69
72
  export const MonthCalendarViewItem = forwardRef<
@@ -228,6 +231,8 @@ export const MonthCalendarViewItem = forwardRef<
228
231
  eventHeight={props.eventHeight}
229
232
  eventTextStyle={props.eventTextStyle}
230
233
  eventEllipsizeMode={props.eventEllipsizeMode}
234
+ renderEventOverlay={props.renderEventOverlay}
235
+ prioritizeCellInteraction={props.prioritizeCellInteraction}
231
236
  onLayout={(e) => {
232
237
  weekHeights.current.set(weekId, e.nativeEvent.layout.height);
233
238
  }}
package/src/calendar/month-calendar/view/MonthCalendarWeekRow.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import dayjs from 'dayjs';
2
+ import type { ReactNode } from 'react';
2
3
  import {
4
+ Platform,
3
5
  StyleSheet,
4
6
  useWindowDimensions,
5
7
  type LayoutChangeEvent,
@@ -31,7 +33,9 @@ export const MonthCalendarWeekRow = (props: {
31
33
  eventHeight?: number;
32
34
  eventTextStyle?: (event: CalendarEvent) => TextStyle;
33
35
  eventEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
36
+ renderEventOverlay?: (event: CalendarEvent) => ReactNode;
34
37
  onLayout?: (event: LayoutChangeEvent) => void;
38
+ prioritizeCellInteraction?: boolean;
35
39
  }) => {
36
40
  const eventHeight = props.eventHeight || 26;
37
41
  const { width: screenWidth } = useWindowDimensions();
@@ -72,7 +76,7 @@ export const MonthCalendarWeekRow = (props: {
72
76
  return dayjs(a.start).diff(dayjs(b.start));
73
77
  });
74
78
 
75
- const events: (CalendarEvent | number)[] = [];
79
+ const cellEvents: (CalendarEvent | number)[] = [];
76
80
  if (weekId && props.eventPosition) {
77
81
  const rowNums = props.eventPosition.getRowNums({
78
82
  weekId,
@@ -82,33 +86,142 @@ export const MonthCalendarWeekRow = (props: {
82
86
  let eventIndex = 0;
83
87
  for (let ii = 1; ii <= rowsLength; ii++) {
84
88
  if (rowNums.includes(ii)) {
85
- events.push(ii);
89
+ cellEvents.push(ii);
86
90
  } else {
87
91
  const event = filteredEvents[eventIndex];
88
92
  if (event) {
89
- events.push(event);
93
+ cellEvents.push(event);
90
94
  }
91
95
  eventIndex++;
92
96
  }
93
97
  }
94
98
  }
95
- return (
96
- <TouchableOpacity
97
- key={djs.get('date')}
98
- style={[
99
- styles.dayCellCountainer,
100
- { minHeight: props.weekRowMinHeight },
101
- { zIndex: 7 - dateIndex },
102
- { borderColor: props.cellBorderColor ?? 'lightslategrey' },
103
- ]}
104
- onPress={() => {
105
- props.onPressCell?.(djs.toDate());
106
- }}
107
- onLongPress={() => {
108
- props.onLongPressCell?.(djs.toDate());
109
- }}
110
- delayLongPress={props.delayLongPressCell}
111
- >
99
+
100
+ const showPrioritizedCellOverlay =
101
+ props.prioritizeCellInteraction === true &&
102
+ (props.onPressCell != null || props.onLongPressCell != null);
103
+
104
+ const cellWrapperStyle = [
105
+ styles.dayCellCountainer,
106
+ { minHeight: props.weekRowMinHeight },
107
+ { zIndex: 7 - dateIndex },
108
+ { borderColor: props.cellBorderColor ?? 'lightslategrey' },
109
+ ];
110
+
111
+ const eventRows = cellEvents.map((event, rowIndex) => {
112
+ if (typeof event === 'number') {
113
+ return (
114
+ <View
115
+ key={`spacer-${rowIndex}`}
116
+ style={{ height: eventHeight, marginBottom: EVENT_GAP }}
117
+ />
118
+ );
119
+ }
120
+
121
+ const rawStartDjs = dayjs(event.start);
122
+ const startDjs = dateIndex === 0 ? djs : dayjs(event.start);
123
+ const endDjs = dayjs(event.end);
124
+ const isEndOnDayBoundary =
125
+ endDjs.hour() === 0 &&
126
+ endDjs.minute() === 0 &&
127
+ endDjs.second() === 0 &&
128
+ endDjs.millisecond() === 0;
129
+ const diffDays = Math.max(
130
+ 0,
131
+ endDjs.startOf('day').diff(startDjs.startOf('day'), 'day') -
132
+ (isEndOnDayBoundary ? 1 : 0)
133
+ );
134
+
135
+ const isPrevDateEvent = dateIndex === 0 && rawStartDjs.isBefore(djs);
136
+ let width =
137
+ (diffDays + 1) * dateColumnWidth -
138
+ EVENT_GAP * 2 -
139
+ CELL_BORDER_WIDTH * 2;
140
+
141
+ if (isPrevDateEvent) {
142
+ width += EVENT_GAP + 1;
143
+ }
144
+
145
+ const isLastRow = rowIndex === cellEvents.length - 1;
146
+
147
+ if (props.eventPosition && weekId) {
148
+ props.eventPosition.push({
149
+ weekId,
150
+ startDate: startDjs.toDate(),
151
+ days: diffDays + 1,
152
+ rowNum: rowIndex + 1,
153
+ });
154
+ }
155
+
156
+ const eventOverlayNode = props.renderEventOverlay?.(event);
157
+ const showEventOverlay =
158
+ props.renderEventOverlay != null &&
159
+ eventOverlayNode != null &&
160
+ eventOverlayNode !== false;
161
+
162
+ return (
163
+ <View
164
+ key={event.id}
165
+ pointerEvents={showPrioritizedCellOverlay ? 'none' : 'auto'}
166
+ style={[
167
+ styles.eventOuter,
168
+ {
169
+ width,
170
+ height: eventHeight,
171
+ },
172
+ isPrevDateEvent ? styles.prevDateEvent : {},
173
+ isLastRow ? styles.lastRowEvent : {},
174
+ ]}
175
+ >
176
+ <TouchableOpacity
177
+ style={[
178
+ styles.event,
179
+ {
180
+ backgroundColor: event.backgroundColor,
181
+ borderColor: event.borderColor,
182
+ ...(event.borderStyle !== undefined && {
183
+ borderStyle: event.borderStyle,
184
+ }),
185
+ ...(event.borderWidth !== undefined && {
186
+ borderWidth: event.borderWidth,
187
+ }),
188
+ ...(event.borderRadius !== undefined && {
189
+ borderRadius: event.borderRadius,
190
+ }),
191
+ },
192
+ ]}
193
+ onPress={() => {
194
+ props.onPressEvent?.(event);
195
+ }}
196
+ onLongPress={() => {
197
+ props.onLongPressEvent?.(event);
198
+ }}
199
+ delayLongPress={props.delayLongPressEvent}
200
+ >
201
+ <Text
202
+ numberOfLines={1}
203
+ ellipsizeMode={props.eventEllipsizeMode ?? 'tail'}
204
+ style={[
205
+ styles.eventTitle,
206
+ { color: event.color },
207
+ props.eventTextStyle?.(event),
208
+ ]}
209
+ allowFontScaling={props.allowFontScaling}
210
+ >
211
+ {event.title}
212
+ </Text>
213
+ </TouchableOpacity>
214
+ {showEventOverlay ? (
215
+ <View style={styles.eventOverlayHost} pointerEvents="box-none">
216
+ {eventOverlayNode}
217
+ </View>
218
+ ) : null}
219
+ </View>
220
+ );
221
+ });
222
+
223
+ const cellInner = (
224
+ <>
112
225
  <View
113
226
  style={[
114
227
  styles.dayCellInner,
@@ -129,98 +242,39 @@ export const MonthCalendarWeekRow = (props: {
129
242
  {text}
130
243
  </Text>
131
244
  </View>
132
- {events.map((event, rowIndex) => {
133
- if (typeof event === 'number') {
134
- return (
135
- <View
136
- key={event}
137
- style={{ height: eventHeight, marginBottom: EVENT_GAP }}
138
- />
139
- );
140
- }
141
-
142
- const rawStartDjs = dayjs(event.start);
143
- const startDjs = dateIndex === 0 ? djs : dayjs(event.start);
144
- const endDjs = dayjs(event.end);
145
- const isEndOnDayBoundary =
146
- endDjs.hour() === 0 &&
147
- endDjs.minute() === 0 &&
148
- endDjs.second() === 0 &&
149
- endDjs.millisecond() === 0;
150
- const diffDays = Math.max(
151
- 0,
152
- endDjs.startOf('day').diff(startDjs.startOf('day'), 'day') -
153
- (isEndOnDayBoundary ? 1 : 0)
154
- );
155
-
156
- const isPrevDateEvent =
157
- dateIndex === 0 && rawStartDjs.isBefore(djs);
158
- let width =
159
- (diffDays + 1) * dateColumnWidth -
160
- EVENT_GAP * 2 -
161
- CELL_BORDER_WIDTH * 2;
162
-
163
- if (isPrevDateEvent) {
164
- width += EVENT_GAP + 1;
165
- }
166
-
167
- const isLastRow = rowIndex === events.length - 1;
168
-
169
- if (props.eventPosition && weekId) {
170
- props.eventPosition.push({
171
- weekId,
172
- startDate: startDjs.toDate(),
173
- days: diffDays + 1,
174
- rowNum: rowIndex + 1,
175
- });
176
- }
245
+ {eventRows}
246
+ </>
247
+ );
177
248
 
178
- return (
179
- <TouchableOpacity
180
- key={event.id}
181
- style={[
182
- styles.event,
183
- {
184
- backgroundColor: event.backgroundColor,
185
- borderColor: event.borderColor,
186
- width: width,
187
- height: eventHeight,
188
- ...(event.borderStyle !== undefined && {
189
- borderStyle: event.borderStyle,
190
- }),
191
- ...(event.borderWidth !== undefined && {
192
- borderWidth: event.borderWidth,
193
- }),
194
- ...(event.borderRadius !== undefined && {
195
- borderRadius: event.borderRadius,
196
- }),
197
- },
198
- isPrevDateEvent ? styles.prevDateEvent : {},
199
- isLastRow ? styles.lastRowEvent : {},
200
- ]}
201
- onPress={() => {
202
- props.onPressEvent?.(event);
203
- }}
204
- onLongPress={() => {
205
- props.onLongPressEvent?.(event);
206
- }}
207
- delayLongPress={props.delayLongPressEvent}
208
- >
209
- <Text
210
- numberOfLines={1}
211
- ellipsizeMode={props.eventEllipsizeMode ?? 'tail'}
212
- style={[
213
- styles.eventTitle,
214
- { color: event.color },
215
- props.eventTextStyle?.(event),
216
- ]}
217
- allowFontScaling={props.allowFontScaling}
218
- >
219
- {event.title}
220
- </Text>
221
- </TouchableOpacity>
222
- );
223
- })}
249
+ return showPrioritizedCellOverlay ? (
250
+ <View key={djs.valueOf()} style={cellWrapperStyle}>
251
+ {cellInner}
252
+ <TouchableOpacity
253
+ accessible={false}
254
+ style={styles.cellInteractionOverlay}
255
+ activeOpacity={1}
256
+ onPress={() => {
257
+ props.onPressCell?.(djs.toDate());
258
+ }}
259
+ onLongPress={() => {
260
+ props.onLongPressCell?.(djs.toDate());
261
+ }}
262
+ delayLongPress={props.delayLongPressCell}
263
+ />
264
+ </View>
265
+ ) : (
266
+ <TouchableOpacity
267
+ key={djs.valueOf()}
268
+ style={cellWrapperStyle}
269
+ onPress={() => {
270
+ props.onPressCell?.(djs.toDate());
271
+ }}
272
+ onLongPress={() => {
273
+ props.onLongPressCell?.(djs.toDate());
274
+ }}
275
+ delayLongPress={props.delayLongPressCell}
276
+ >
277
+ {cellInner}
224
278
  </TouchableOpacity>
225
279
  );
226
280
  })}
@@ -259,15 +313,25 @@ const styles = StyleSheet.create({
259
313
  textAlign: 'center',
260
314
  fontSize: 14,
261
315
  },
316
+ eventOuter: {
317
+ position: 'relative',
318
+ marginTop: EVENT_GAP,
319
+ marginLeft: EVENT_GAP,
320
+ },
262
321
  event: {
322
+ flex: 1,
323
+ width: '100%',
324
+ height: '100%',
263
325
  borderWidth: 0.5,
264
326
  borderRadius: 4,
265
327
  paddingHorizontal: 4,
266
328
  flexDirection: 'row',
267
329
  alignItems: 'center',
268
330
  boxShadow: '0 0 2px 0 rgba(0, 0, 0, 0.1)',
269
- marginTop: EVENT_GAP,
270
- marginLeft: EVENT_GAP,
331
+ },
332
+ eventOverlayHost: {
333
+ ...StyleSheet.absoluteFillObject,
334
+ pointerEvents: 'box-none',
271
335
  },
272
336
  prevDateEvent: {
273
337
  marginLeft: -1,
@@ -280,4 +344,13 @@ const styles = StyleSheet.create({
280
344
  eventTitle: {
281
345
  fontSize: 12,
282
346
  },
347
+ cellInteractionOverlay: {
348
+ ...StyleSheet.absoluteFillObject,
349
+ zIndex: 1000,
350
+ backgroundColor: 'transparent',
351
+ ...Platform.select({
352
+ android: { elevation: 12 },
353
+ default: {},
354
+ }),
355
+ },
283
356
  });