react-native-resource-calendar 1.0.20 → 1.0.21
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.
- package/README.md +27 -29
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,9 +10,6 @@ Expo compatibility.
|
|
|
10
10
|
- ✅ Multi-resource/multi-days timeline layout
|
|
11
11
|
- 🎨 Customizable event slots (Body, TopRight)
|
|
12
12
|
- 📱 Smooth Reanimated drag-and-drop
|
|
13
|
-
- ⏰ Timezone-aware time labels
|
|
14
|
-
- 🧩 Modular store (Zustand binding by default)
|
|
15
|
-
- 🖌️ Theme support (font families, weights)
|
|
16
13
|
- 🪶 Lightweight and Expo-ready
|
|
17
14
|
|
|
18
15
|
---
|
|
@@ -59,7 +56,8 @@ react-native-svg \
|
|
|
59
56
|
🟦 Optional: Haptics Support (Expo Only)
|
|
60
57
|
|
|
61
58
|
Haptic feedback is optional.
|
|
62
|
-
If you want to enable vibration feedback when interacting with components, install the Expo Haptics package and set
|
|
59
|
+
If you want to enable vibration feedback when interacting with components, install the Expo Haptics package and set
|
|
60
|
+
enableHapticFeedback to true in your component config.
|
|
63
61
|
|
|
64
62
|
📦 Install (Expo)
|
|
65
63
|
|
|
@@ -260,30 +258,30 @@ export default function App() {
|
|
|
260
258
|
|
|
261
259
|
The `Calendar` component accepts a flexible set of props for customizing layout, theme, and interactivity.
|
|
262
260
|
|
|
263
|
-
| Prop | Type | Default | Description
|
|
264
|
-
|
|
265
|
-
| **`date`** | `Date` | `new Date()` | The anchor day shown in the timeline. In multi-day modes this is the **first** visible day.
|
|
266
|
-
| **`mode`** | `CalendarMode` (`'day' \| '3days' \| 'week'`) | `'day'` | Controls the column semantics. **day** = many resources for one day. **3days/week** = several days for one resource.
|
|
267
|
-
| **`activeResourceId`** | `number` | first `resources[0].id` | When `mode !== 'day'`, columns represent days for **this** resource.
|
|
268
|
-
| **`resources`** | `Array<Resource & { events: Event[]; disabledBlocks?: DisabledBlock[]; disableIntervals?: DisabledInterval[] }>` | **required** | Resource columns. Each resource includes its day’s `events`, optional `disabledBlocks
|
|
269
|
-
| **`timezone`** | `string` | device time zone | Used for time labels and converting block taps to a `Date`.
|
|
270
|
-
| **`startMinutes`** | `number` | `0` | Start of visible timeline in minutes after midnight (e.g. `8 * 60` = 08:00).
|
|
271
|
-
| **`numberOfColumns`** | `number` | `3` | **Day mode only.** How many resource columns to show side-by-side. (In multi-day modes, the column count is fixed by the mode: 3 or 7.)
|
|
272
|
-
| **`hourHeight`** | `number` | `120` | Vertical density, px per hour. Affects drag/resize and scroll snap.
|
|
273
|
-
| **`snapIntervalInMinutes`** | `number` | `5` | Drag/resize snapping granularity (in minutes).
|
|
274
|
-
| **`overLappingLayoutMode`** | `LayoutMode` (`'stacked' \| 'columns'`) | `'stacked'` | Strategy to lay out overlapping events inside a column.
|
|
275
|
-
| **`theme`** | `CalendarTheme` | — | Typography & palette overrides.
|
|
276
|
-
| **`enableHapticFeedback`** | `boolean` | `false` | Enable haptic feedback.
|
|
277
|
-
| **`eventSlots`** | `EventSlots` | — | Slot renderers to customize event content (e.g. `{ Body, TopRight }`).
|
|
278
|
-
| **`eventStyleOverrides`** | `StyleOverrides \| ((event: Event) => StyleOverrides \| undefined)` | — | Per-event style override (object or function).
|
|
279
|
-
| **`isEventSelected`** | `(event: Event) => boolean` | `() => false` | Marks which events are currently selected.
|
|
280
|
-
| **`isEventDisabled`** | `(event: Event) => boolean` | `() => false` | Marks events as disabled (non-interactive).
|
|
281
|
-
| **`onResourcePress`** | `(resource: Resource) => void` | — | Invoked when a resource header is pressed.
|
|
282
|
-
| **`onBlockLongPress`** | `(resource: Resource, date: Date) => void` | — | Long-press on an empty block (grid).
|
|
283
|
-
| **`onBlockTap`** | `(resource: Resource, date: Date) => void` | — | Tap on an empty block (grid).
|
|
284
|
-
| **`onDisabledBlockPress`** | `(block: DisabledBlock) => void` | — | Tap on a disabled block (e.g., lunch).
|
|
285
|
-
| **`onEventPress`** | `(event: Event) => void` | — | Tap on an event.
|
|
286
|
-
| **`onEventLongPress`** | `(event: Event) => void` | — | Long-press on an event. The calendar also preps internal drag state here.
|
|
261
|
+
| Prop | Type | Default | Description |
|
|
262
|
+
|-----------------------------|------------------------------------------------------------------------------------------------------------------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
|
|
263
|
+
| **`date`** | `Date` | `new Date()` | The anchor day shown in the timeline. In multi-day modes this is the **first** visible day. |
|
|
264
|
+
| **`mode`** | `CalendarMode` (`'day' \| '3days' \| 'week'`) | `'day'` | Controls the column semantics. **day** = many resources for one day. **3days/week** = several days for one resource. |
|
|
265
|
+
| **`activeResourceId`** | `number` | first `resources[0].id` | When `mode !== 'day'`, columns represent days for **this** resource. |
|
|
266
|
+
| **`resources`** | `Array<Resource & { events: Event[]; disabledBlocks?: DisabledBlock[]; disableIntervals?: DisabledInterval[] }>` | **required** | Resource columns. Each resource includes its day’s `events`, optional `disabledBlocks`, and `disableIntervals`. |
|
|
267
|
+
| **`timezone`** | `string` | device time zone | Used for time labels and converting block taps to a `Date`. |
|
|
268
|
+
| **`startMinutes`** | `number` | `0` | Start of visible timeline in minutes after midnight (e.g. `8 * 60` = 08:00). |
|
|
269
|
+
| **`numberOfColumns`** | `number` | `3` | **Day mode only.** How many resource columns to show side-by-side. (In multi-day modes, the column count is fixed by the mode: 3 or 7.) |
|
|
270
|
+
| **`hourHeight`** | `number` | `120` | Vertical density, px per hour. Affects drag/resize and scroll snap. |
|
|
271
|
+
| **`snapIntervalInMinutes`** | `number` | `5` | Drag/resize snapping granularity (in minutes). |
|
|
272
|
+
| **`overLappingLayoutMode`** | `LayoutMode` (`'stacked' \| 'columns'`) | `'stacked'` | Strategy to lay out overlapping events inside a column. |
|
|
273
|
+
| **`theme`** | `CalendarTheme` | — | Typography & palette overrides. |
|
|
274
|
+
| **`enableHapticFeedback`** | `boolean` | `false` | Enable haptic feedback. |
|
|
275
|
+
| **`eventSlots`** | `EventSlots` | — | Slot renderers to customize event content (e.g. `{ Body, TopRight }`). |
|
|
276
|
+
| **`eventStyleOverrides`** | `StyleOverrides \| ((event: Event) => StyleOverrides \| undefined)` | — | Per-event style override (object or function). |
|
|
277
|
+
| **`isEventSelected`** | `(event: Event) => boolean` | `() => false` | Marks which events are currently selected. |
|
|
278
|
+
| **`isEventDisabled`** | `(event: Event) => boolean` | `() => false` | Marks events as disabled (non-interactive). |
|
|
279
|
+
| **`onResourcePress`** | `(resource: Resource) => void` | — | Invoked when a resource header is pressed. |
|
|
280
|
+
| **`onBlockLongPress`** | `(resource: Resource, date: Date) => void` | — | Long-press on an empty block (grid). |
|
|
281
|
+
| **`onBlockTap`** | `(resource: Resource, date: Date) => void` | — | Tap on an empty block (grid). |
|
|
282
|
+
| **`onDisabledBlockPress`** | `(block: DisabledBlock) => void` | — | Tap on a disabled block (e.g., lunch). |
|
|
283
|
+
| **`onEventPress`** | `(event: Event) => void` | — | Tap on an event. |
|
|
284
|
+
| **`onEventLongPress`** | `(event: Event) => void` | — | Long-press on an event. The calendar also preps internal drag state here. |
|
|
287
285
|
|
|
288
286
|
---
|
|
289
287
|
|
|
@@ -340,7 +338,7 @@ type CalendarTheme = {
|
|
|
340
338
|
fontFamily?: string;
|
|
341
339
|
};
|
|
342
340
|
};
|
|
343
|
-
|
|
341
|
+
|
|
344
342
|
type CalendarMode = 'day' | '3days' | 'week';
|
|
345
343
|
```
|
|
346
344
|
|
package/dist/index.js
CHANGED
|
@@ -1079,7 +1079,8 @@ var EventBlock = React19__namespace.default.memo(({
|
|
|
1079
1079
|
fontSize: getTextSize(hourHeight),
|
|
1080
1080
|
pointerEvents: "none",
|
|
1081
1081
|
padding: 0,
|
|
1082
|
-
margin: 0
|
|
1082
|
+
margin: 0,
|
|
1083
|
+
color: "black"
|
|
1083
1084
|
}, resolved?.time],
|
|
1084
1085
|
defaultValue: `${start} - ${end}`
|
|
1085
1086
|
}
|
|
@@ -1198,7 +1199,8 @@ var DraggableEvent = ({
|
|
|
1198
1199
|
fontSize: getTextSize(hourHeight),
|
|
1199
1200
|
pointerEvents: "none",
|
|
1200
1201
|
padding: 0,
|
|
1201
|
-
margin: 0
|
|
1202
|
+
margin: 0,
|
|
1203
|
+
color: "black"
|
|
1202
1204
|
}, resolved?.time],
|
|
1203
1205
|
defaultValue: initialDisplayTime,
|
|
1204
1206
|
animatedProps: animatedTimeProps
|