react-native-bigger-calendar 0.1.0 β 0.2.1
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 +82 -2
- package/dist/index.d.mts +289 -73
- package/dist/index.d.ts +289 -73
- package/dist/index.js +659 -150
- package/dist/index.mjs +658 -151
- package/package.json +2 -2
- package/src/components/Agenda.tsx +125 -0
- package/src/components/AllDayLane.tsx +83 -0
- package/src/components/Calendar.tsx +221 -11
- package/src/components/DefaultEvent.tsx +24 -5
- package/src/components/MonthPager.tsx +138 -26
- package/src/components/MonthView.tsx +82 -14
- package/src/components/TimeGrid.tsx +351 -62
- package/src/index.tsx +9 -2
- package/src/types.ts +23 -1
- package/src/utils/dates.ts +67 -2
- package/src/utils/layout.ts +18 -0
package/README.md
CHANGED
|
@@ -2,12 +2,57 @@
|
|
|
2
2
|
|
|
3
3
|
A generic, themeable **month / week / day** calendar for React Native.
|
|
4
4
|
|
|
5
|
-
- π
|
|
5
|
+
- π Month grid plus day / 3-day / week / custom-N time-grids
|
|
6
6
|
- π€ Pinch-to-zoom on the week/day grid (UI thread, no re-renders)
|
|
7
7
|
- βΎοΈ Virtualized, snap-paging months/weeks/days via [`@legendapp/list`](https://legendapp.com/open-source/list/)
|
|
8
8
|
- π§© Bring-your-own event type (`CalendarEvent<T>`) and a `renderEvent` escape hatch
|
|
9
9
|
- π¨ Fully themeable, with sensible defaults (no styling library required)
|
|
10
10
|
|
|
11
|
+
## Relationship to react-native-big-calendar
|
|
12
|
+
|
|
13
|
+
This is a ground-up reimagining inspired by the excellent
|
|
14
|
+
[`react-native-big-calendar`](https://github.com/acro5piano/react-native-big-calendar).
|
|
15
|
+
It keeps the familiar month/week/day model but is built around Reanimated and
|
|
16
|
+
modern list virtualization β trading framework-agnosticism for a richer,
|
|
17
|
+
gesture-driven experience. It's **not a fork**; the API differs, and the name is
|
|
18
|
+
an homage. π
|
|
19
|
+
|
|
20
|
+
**What it adds over react-native-big-calendar**
|
|
21
|
+
|
|
22
|
+
- π€ **Pinch-to-zoom** time grid β row height is a Reanimated shared value, so
|
|
23
|
+
zooming runs on the UI thread with zero React re-renders.
|
|
24
|
+
- βΎοΈ **Virtualized, snap-paged** views (via `@legendapp/list`) β swipe across
|
|
25
|
+
years of dates, with native one-page paging (or opt into `freeSwipe`).
|
|
26
|
+
- π§© **Generic events + render-prop _component_** β `CalendarEvent<T>` carries your
|
|
27
|
+
own fields, and `renderEvent` is a component (so it may use hooks) that receives
|
|
28
|
+
the event box's live pixel height for progressive disclosure as the grid zooms.
|
|
29
|
+
|
|
30
|
+
**Feature parity.** It also covers the rest of react-native-big-calendar's
|
|
31
|
+
surface: month / day / 3-day / week / **custom N-day** (and `weekEndsOn`
|
|
32
|
+
partial-weeks) / **agenda (`schedule`)** modes, **all-day events** (lane +
|
|
33
|
+
`allDay` flag), multi-day clipping, `minHour`/`maxHour`, `ampm` (hour axis and
|
|
34
|
+
event times), `showTime`, `timeslots`, `hideHours`, `showWeekNumber`,
|
|
35
|
+
`weekNumberPrefix`, `hourComponent`, `sortedMonthView`, `moreLabel`,
|
|
36
|
+
`showAdjacentMonths`, `showSixWeeks`, `disableMonthEventCellPress`, a default
|
|
37
|
+
month weekday header (`renderHeaderForMonthView`), `activeDate`, per-event
|
|
38
|
+
`disabled`, `onPress`/`onLongPress` for events, cells and date headers,
|
|
39
|
+
`onChangeDateRange`, `resetPageOnPressCell`, `swipeEnabled`,
|
|
40
|
+
`verticalScrollEnabled`, `showVerticalScrollIndicator`, an agenda
|
|
41
|
+
`itemSeparatorComponent`, `eventCellStyle`, `calendarCellStyle`, a
|
|
42
|
+
`headerComponent` slot, date-fns `locale`, right-to-left column order (`isRTL`),
|
|
43
|
+
and theming. Text styling that big-calendar exposes via `calendarCellTextStyle`
|
|
44
|
+
is covered by `CalendarTheme.text`; overlapping events are laid out in
|
|
45
|
+
side-by-side columns automatically.
|
|
46
|
+
|
|
47
|
+
**Trade-offs (where react-native-big-calendar may suit you better)**
|
|
48
|
+
|
|
49
|
+
- It's **opinionated about peers**: Reanimated, Gesture Handler and
|
|
50
|
+
`@legendapp/list` are required. `react-native-big-calendar` is more
|
|
51
|
+
self-contained (no Reanimated/Gesture Handler).
|
|
52
|
+
- **RTL** is cosmetic (`isRTL` reverses the day-column order, like
|
|
53
|
+
big-calendar's): the hour gutter stays on the left and paging follows the
|
|
54
|
+
system scroll direction. Enable React Native's `I18nManager` for full RTL.
|
|
55
|
+
|
|
11
56
|
## Install
|
|
12
57
|
|
|
13
58
|
```sh
|
|
@@ -110,6 +155,34 @@ function MyEvent({ event, boxHeight, onPress }: RenderEventArgs<MyEvent>) {
|
|
|
110
155
|
See `CalendarTheme` for the full set of tokens. Anything you omit falls back to
|
|
111
156
|
`defaultTheme`.
|
|
112
157
|
|
|
158
|
+
### Modes
|
|
159
|
+
|
|
160
|
+
`mode` is one of `month`, `week`, `day`, `3days`, `custom`, or `schedule`. For
|
|
161
|
+
`custom`, set `numberOfDays` (e.g. `mode="custom" numberOfDays={5}` for a
|
|
162
|
+
work-week). Day/3-day/custom views page by their column count; `week` pages by
|
|
163
|
+
the calendar week. `schedule` is a vertical, day-grouped agenda list of the
|
|
164
|
+
events you pass (no time grid).
|
|
165
|
+
|
|
166
|
+
### Localization
|
|
167
|
+
|
|
168
|
+
Pass a date-fns [`Locale`](https://date-fns.org/docs/I18n) to localize weekday and
|
|
169
|
+
date labels:
|
|
170
|
+
|
|
171
|
+
```tsx
|
|
172
|
+
import { fr } from 'date-fns/locale';
|
|
173
|
+
|
|
174
|
+
<Calendar /* ... */ locale={fr} weekStartsOn={1} />;
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
Pass `isRTL` to reverse the day-column order in every view (month grid, week/day
|
|
178
|
+
grid and the all-day lane). It's cosmetic β the hour gutter stays on the left and
|
|
179
|
+
paging follows the system scroll direction β so enable React Native's
|
|
180
|
+
`I18nManager` alongside it for full right-to-left behaviour.
|
|
181
|
+
|
|
182
|
+
```tsx
|
|
183
|
+
<Calendar /* ... */ isRTL locale={ar} weekStartsOn={6} />;
|
|
184
|
+
```
|
|
185
|
+
|
|
113
186
|
### Week/day grid options
|
|
114
187
|
|
|
115
188
|
```tsx
|
|
@@ -128,6 +201,12 @@ See `CalendarTheme` for the full set of tokens. Anything you omit falls back to
|
|
|
128
201
|
- `ampm` switches hour labels to 12-hour AM/PM (default 24h).
|
|
129
202
|
- `onPressCell(date)` fires when empty grid space is tapped, with the date+time
|
|
130
203
|
under the touch β handy for "create event". (Event taps still go to `onPressEvent`.)
|
|
204
|
+
- **Long-press** mirrors every tap: `onLongPressEvent(event)`, `onLongPressCell(date)`
|
|
205
|
+
(week/day), and `onLongPressDay(date)` (month). All optional.
|
|
206
|
+
- **All-day events** render in a lane above the time grid (and as chips in month
|
|
207
|
+
cells), excluded from the timed columns. Mark an event `allDay: true`, or it's
|
|
208
|
+
inferred when it spans whole days (midnight-to-midnight). `renderEvent` receives
|
|
209
|
+
`isAllDay` so you can style the chip. The lane is hidden when there are none.
|
|
131
210
|
- `freeSwipe` (default `false`) controls paging: by default one day/week/month
|
|
132
211
|
moves per swipe; set it to allow a fling to carry across several pages (still
|
|
133
212
|
snapping to a page boundary). Applies to all modes.
|
|
@@ -152,7 +231,8 @@ are also exported for advanced layouts:
|
|
|
152
231
|
it spans. On the week/day grid each day shows the clipped segment (so a
|
|
153
232
|
23:00β01:00 event renders 23:00β24:00, then 00:00β01:00), and `renderEvent`
|
|
154
233
|
receives `continuesBefore`/`continuesAfter` so you can draw continuation hints.
|
|
155
|
-
|
|
234
|
+
All-day events (an explicit `allDay` flag or a midnight-to-midnight span) render
|
|
235
|
+
in a dedicated lane above the time grid.
|
|
156
236
|
- **`weekStartsOn` defaults to `0` (Sunday).** Pass `1` for Monday-first.
|
|
157
237
|
- **Controlled `date`.** The calendar is controlled: echo `onChangeDate` back
|
|
158
238
|
into the `date` prop, or paging and the "today" realign won't track.
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { Locale } from "date-fns";
|
|
1
2
|
import { ComponentType } from "react";
|
|
2
3
|
import { SharedValue, useSharedValue } from "react-native-reanimated";
|
|
3
|
-
import { TextStyle } from "react-native";
|
|
4
|
+
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
4
5
|
|
|
5
6
|
//#region src/theme.d.ts
|
|
6
7
|
/**
|
|
@@ -44,7 +45,9 @@ declare const CalendarThemeProvider: import("react").Provider<CalendarTheme>;
|
|
|
44
45
|
declare const useCalendarTheme: () => CalendarTheme;
|
|
45
46
|
//#endregion
|
|
46
47
|
//#region src/types.d.ts
|
|
47
|
-
type CalendarMode = 'day' | 'week' | 'month';
|
|
48
|
+
type CalendarMode = 'day' | '3days' | 'week' | 'custom' | 'month' | 'schedule';
|
|
49
|
+
/** The time-grid modes (day-column views, excluding month and schedule). */
|
|
50
|
+
type TimeGridMode = Exclude<CalendarMode, 'month' | 'schedule'>;
|
|
48
51
|
/**
|
|
49
52
|
* The minimal shape every calendar event must have. Layout (positioning,
|
|
50
53
|
* overlap resolution, paging) only ever reads `start`/`end`; `title` is used by
|
|
@@ -55,6 +58,14 @@ interface ICalendarEvent {
|
|
|
55
58
|
start: Date;
|
|
56
59
|
end: Date;
|
|
57
60
|
title?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Force this event into the all-day lane (above the time grid) instead of the
|
|
63
|
+
* timed columns. When omitted, an event is treated as all-day only if it spans
|
|
64
|
+
* whole days (both `start` and `end` land on midnight).
|
|
65
|
+
*/
|
|
66
|
+
allDay?: boolean;
|
|
67
|
+
/** Ignore taps/long-presses on this event (the built-in renderer also dims it). */
|
|
68
|
+
disabled?: boolean;
|
|
58
69
|
}
|
|
59
70
|
/**
|
|
60
71
|
* An event carrying arbitrary extra fields `T` alongside the required shape.
|
|
@@ -77,8 +88,13 @@ type RenderEventArgs<T = unknown> = {
|
|
|
77
88
|
* renderer draw "continues" affordances. `undefined` in month mode.
|
|
78
89
|
*/
|
|
79
90
|
continuesBefore?: boolean;
|
|
80
|
-
continuesAfter?: boolean;
|
|
81
|
-
|
|
91
|
+
continuesAfter?: boolean; /** True when this event is rendered in the all-day lane (week/day) or is an all-day event in month view. */
|
|
92
|
+
isAllDay?: boolean; /** Format the built-in renderer's time range in 12-hour AM/PM. Default false (24h). */
|
|
93
|
+
ampm?: boolean; /** Show the time range in the built-in renderer (day/week/schedule). Default true. */
|
|
94
|
+
showTime?: boolean; /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
|
|
95
|
+
cellStyle?: StyleProp<ViewStyle>;
|
|
96
|
+
onPress: () => void; /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
|
|
97
|
+
onLongPress?: () => void;
|
|
82
98
|
};
|
|
83
99
|
/**
|
|
84
100
|
* A component that renders a single event. It is rendered as a real component
|
|
@@ -92,51 +108,200 @@ type EventKeyExtractor<T = unknown> = (event: CalendarEvent<T>, index: number) =
|
|
|
92
108
|
/** Sunday = 0 β¦ Saturday = 6, matching `Date.prototype.getDay()`. */
|
|
93
109
|
type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
94
110
|
//#endregion
|
|
111
|
+
//#region src/components/TimeGrid.d.ts
|
|
112
|
+
declare const DEFAULT_HOUR_HEIGHT = 64;
|
|
113
|
+
/** Replace the hour-axis label. Receives the hour (0β23) and the `ampm` flag. */
|
|
114
|
+
type HourRenderer = (hour: number, ampm: boolean) => React.ReactNode;
|
|
115
|
+
type TimeGridProps<T> = {
|
|
116
|
+
mode: TimeGridMode; /** Day columns to show in `custom` mode. Ignored by day/3days/week. Default 1. */
|
|
117
|
+
numberOfDays?: number;
|
|
118
|
+
/**
|
|
119
|
+
* Last weekday of a `custom` partial-week view (0β6). When set, `custom` shows
|
|
120
|
+
* `weekStartsOn`β¦`weekEndsOn` of `date`'s week and pages by week, taking
|
|
121
|
+
* precedence over `numberOfDays`. Ignored by other modes.
|
|
122
|
+
*/
|
|
123
|
+
weekEndsOn?: WeekStartsOn;
|
|
124
|
+
date: Date;
|
|
125
|
+
events: CalendarEvent<T>[];
|
|
126
|
+
cellHeight: SharedValue<number>; /** Initial per-hour row height in px; seeds scroll/zoom without reading the shared value during render. */
|
|
127
|
+
hourHeight?: number;
|
|
128
|
+
weekStartsOn: WeekStartsOn;
|
|
129
|
+
renderEvent: RenderEvent<T>;
|
|
130
|
+
keyExtractor: EventKeyExtractor<T>;
|
|
131
|
+
scrollOffsetMinutes?: number;
|
|
132
|
+
hourColumnWidth?: number; /** Hide the left hour-axis column (lines stay, labels/gutter go). Default false. */
|
|
133
|
+
hideHours?: boolean; /** Sub-hour divider lines per hour (e.g. 2 = half-hours). Default 1 (none). */
|
|
134
|
+
timeslots?: number; /** Per-date style merged onto each day column. */
|
|
135
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>; /** Show the ISO week number in the header gutter. Default false. */
|
|
136
|
+
showWeekNumber?: boolean; /** Element rendered between the day header and the grid. */
|
|
137
|
+
headerComponent?: React.ReactNode; /** First hour shown (0β23). Default 0. */
|
|
138
|
+
minHour?: number; /** Last hour shown, exclusive (1β24). Default 24. */
|
|
139
|
+
maxHour?: number; /** Show hour labels in 12-hour AM/PM form. Default false (24h). */
|
|
140
|
+
ampm?: boolean; /** Reverse day-column order (right-to-left). Default false. */
|
|
141
|
+
isRTL?: boolean;
|
|
142
|
+
minHourHeight?: number;
|
|
143
|
+
maxHourHeight?: number;
|
|
144
|
+
showNowIndicator?: boolean;
|
|
145
|
+
locale?: Locale;
|
|
146
|
+
freeSwipe?: boolean; /** Allow swiping between pages. Default true. */
|
|
147
|
+
swipeEnabled?: boolean; /** Show the vertical scroll indicator on the time grid. Default true. */
|
|
148
|
+
showVerticalScrollIndicator?: boolean; /** Allow vertical scrolling of the time grid. Default true. */
|
|
149
|
+
verticalScrollEnabled?: boolean; /** Prefix for the week-number label (e.g. "W"). Default "W". */
|
|
150
|
+
weekNumberPrefix?: string; /** Replace the hour-axis label. Receives the hour (0β23) and `ampm`. */
|
|
151
|
+
hourComponent?: HourRenderer; /** Highlight this date in the header instead of the real "today". */
|
|
152
|
+
activeDate?: Date; /** After an empty-cell press, snap the pager back to the active page. Default false. */
|
|
153
|
+
resetPageOnPressCell?: boolean;
|
|
154
|
+
onPressEvent: (event: CalendarEvent<T>) => void;
|
|
155
|
+
onLongPressEvent?: (event: CalendarEvent<T>) => void;
|
|
156
|
+
onPressCell?: (date: Date) => void;
|
|
157
|
+
onLongPressCell?: (date: Date) => void; /** Tap a day's column header (default header only). */
|
|
158
|
+
onPressDateHeader?: (date: Date) => void;
|
|
159
|
+
onChangeDate: (date: Date) => void; /** Optional header above the grid (e.g. weekday labels). Rendered full-width. */
|
|
160
|
+
renderHeader?: (days: Date[]) => React.ReactNode;
|
|
161
|
+
};
|
|
162
|
+
declare function TimeGridInner<T>({
|
|
163
|
+
mode,
|
|
164
|
+
numberOfDays,
|
|
165
|
+
weekEndsOn,
|
|
166
|
+
date,
|
|
167
|
+
events,
|
|
168
|
+
cellHeight,
|
|
169
|
+
hourHeight,
|
|
170
|
+
weekStartsOn,
|
|
171
|
+
renderEvent,
|
|
172
|
+
keyExtractor,
|
|
173
|
+
scrollOffsetMinutes,
|
|
174
|
+
hourColumnWidth: hourColumnWidthProp,
|
|
175
|
+
hideHours,
|
|
176
|
+
timeslots,
|
|
177
|
+
calendarCellStyle,
|
|
178
|
+
showWeekNumber,
|
|
179
|
+
headerComponent,
|
|
180
|
+
minHour,
|
|
181
|
+
maxHour,
|
|
182
|
+
ampm,
|
|
183
|
+
isRTL,
|
|
184
|
+
minHourHeight,
|
|
185
|
+
maxHourHeight,
|
|
186
|
+
showNowIndicator,
|
|
187
|
+
locale,
|
|
188
|
+
freeSwipe,
|
|
189
|
+
swipeEnabled,
|
|
190
|
+
showVerticalScrollIndicator,
|
|
191
|
+
verticalScrollEnabled,
|
|
192
|
+
weekNumberPrefix,
|
|
193
|
+
hourComponent,
|
|
194
|
+
activeDate,
|
|
195
|
+
resetPageOnPressCell,
|
|
196
|
+
onPressEvent,
|
|
197
|
+
onLongPressEvent,
|
|
198
|
+
onPressCell,
|
|
199
|
+
onLongPressCell,
|
|
200
|
+
onPressDateHeader,
|
|
201
|
+
onChangeDate,
|
|
202
|
+
renderHeader
|
|
203
|
+
}: TimeGridProps<T>): import("react").JSX.Element;
|
|
204
|
+
declare const TimeGrid: typeof TimeGridInner;
|
|
205
|
+
//#endregion
|
|
95
206
|
//#region src/components/Calendar.d.ts
|
|
96
207
|
type CalendarProps<T> = {
|
|
97
208
|
events: CalendarEvent<T>[];
|
|
98
209
|
mode: CalendarMode;
|
|
99
210
|
date: Date;
|
|
100
|
-
onChangeDate: (date: Date) => void;
|
|
101
|
-
|
|
102
|
-
|
|
211
|
+
onChangeDate: (date: Date) => void; /** Fired alongside `onChangeDate` with the `[start, end]` of the newly-visible range. */
|
|
212
|
+
onChangeDateRange?: (range: [Date, Date]) => void;
|
|
213
|
+
onPressEvent: (event: CalendarEvent<T>) => void; /** Long-press an event (month/week/day). */
|
|
214
|
+
onLongPressEvent?: (event: CalendarEvent<T>) => void; /** Tap a day cell (month mode) β e.g. drill into the day view. */
|
|
215
|
+
onPressDay?: (date: Date) => void; /** Long-press a day cell (month mode). */
|
|
216
|
+
onLongPressDay?: (date: Date) => void; /** Tap the "+N more" overflow label in a month cell. */
|
|
103
217
|
onPressMore?: (events: CalendarEvent<T>[], date: Date) => void; /** Tap empty space on the week/day grid; receives the date+time pressed. */
|
|
104
|
-
onPressCell?: (date: Date) => void; /**
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
218
|
+
onPressCell?: (date: Date) => void; /** After an empty-cell press, snap the pager back to the active page. Default false. */
|
|
219
|
+
resetPageOnPressCell?: boolean; /** Long-press empty space on the week/day grid; receives the date+time. */
|
|
220
|
+
onLongPressCell?: (date: Date) => void; /** Tap a day's column header on the week/day grid (default header only). */
|
|
221
|
+
onPressDateHeader?: (date: Date) => void; /** Max events shown per month cell before they collapse into "+N more". */
|
|
222
|
+
maxVisibleEventCount?: number; /** Sort each month day's events by start. Default true. */
|
|
223
|
+
sortedMonthView?: boolean; /** Month overflow label template; `{moreCount}` is replaced. Default "{moreCount} More". */
|
|
224
|
+
moreLabel?: string; /** Show dimmed adjacent-month days in the month grid. Default true. */
|
|
225
|
+
showAdjacentMonths?: boolean; /** Ignore taps on month-cell events (day taps still fire). Default false. */
|
|
226
|
+
disableMonthEventCellPress?: boolean; /** First day of the week. Sunday = 0 (default) β¦ Saturday = 6. */
|
|
227
|
+
weekStartsOn?: WeekStartsOn; /** Number of day columns when `mode="custom"`. Ignored by other modes. Default 1. */
|
|
228
|
+
numberOfDays?: number;
|
|
229
|
+
/**
|
|
230
|
+
* Last weekday of a `custom` partial-week view (0β6). When set, `custom` shows
|
|
231
|
+
* `weekStartsOn`β¦`weekEndsOn` of the visible week and pages by week, taking
|
|
232
|
+
* precedence over `numberOfDays`. Ignored by other modes.
|
|
233
|
+
*/
|
|
234
|
+
weekEndsOn?: WeekStartsOn; /** Replace the built-in event box. Return a `flex: 1` element. */
|
|
235
|
+
renderEvent?: RenderEvent<T>; /** Per-event style merged onto the built-in event box (static or a function of the event). */
|
|
236
|
+
eventCellStyle?: StyleProp<ViewStyle> | ((event: CalendarEvent<T>) => StyleProp<ViewStyle>); /** Per-date style for month cells and week/day columns (e.g. shade specific dates). */
|
|
237
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>; /** Stable key per event. Defaults to start-time + index. */
|
|
108
238
|
keyExtractor?: EventKeyExtractor<T>; /** Partial theme merged over the defaults. */
|
|
109
239
|
theme?: PartialCalendarTheme; /** Externally-owned per-hour row height (week/day). Created internally if omitted. */
|
|
110
240
|
cellHeight?: ReturnType<typeof useSharedValue<number>>; /** Initial per-hour row height in px (week/day). Default 64. */
|
|
111
241
|
hourHeight?: number;
|
|
112
242
|
minHourHeight?: number;
|
|
113
243
|
maxHourHeight?: number;
|
|
114
|
-
hourColumnWidth?: number; /**
|
|
244
|
+
hourColumnWidth?: number; /** Hide the left hour-axis column on the week/day grid. Default false. */
|
|
245
|
+
hideHours?: boolean; /** Sub-hour divider lines per hour on the week/day grid (e.g. 2 = half-hours). Default 1. */
|
|
246
|
+
timeslots?: number; /** Show the ISO week number in the week/day header gutter. Default false. */
|
|
247
|
+
showWeekNumber?: boolean; /** Prefix for the week-number label (e.g. "W"). Default "W". */
|
|
248
|
+
weekNumberPrefix?: string; /** Replace the hour-axis label on the week/day grid. Receives the hour (0β23) and `ampm`. */
|
|
249
|
+
hourComponent?: HourRenderer; /** Always render six week rows in month view, for a fixed-height grid. Default false. */
|
|
250
|
+
showSixWeeks?: boolean; /** Allow swiping between pages (all modes). Default true. */
|
|
251
|
+
swipeEnabled?: boolean; /** Show the vertical scroll indicator on the week/day grid. Default true. */
|
|
252
|
+
showVerticalScrollIndicator?: boolean; /** Allow vertical scrolling of the week/day grid. Default true. */
|
|
253
|
+
verticalScrollEnabled?: boolean; /** Element rendered between the day header and the week/day grid. */
|
|
254
|
+
headerComponent?: React.ReactNode; /** First hour shown on the week/day grid (0β23). Default 0. */
|
|
115
255
|
minHour?: number; /** Last hour shown on the week/day grid, exclusive (1β24). Default 24. */
|
|
116
|
-
maxHour?: number; /** Show hour labels in 12-hour AM/PM form. Default false (24h). */
|
|
117
|
-
ampm?: boolean; /**
|
|
256
|
+
maxHour?: number; /** Show hour labels (and built-in event times) in 12-hour AM/PM form. Default false (24h). */
|
|
257
|
+
ampm?: boolean; /** Show the time range in the built-in event renderer (day/week/schedule). Default true. */
|
|
258
|
+
showTime?: boolean; /** Initial vertical scroll, in minutes from midnight (week/day). */
|
|
118
259
|
scrollOffsetMinutes?: number; /** Show the current-time line on the week/day grid. Default true. */
|
|
119
|
-
showNowIndicator?: boolean; /**
|
|
120
|
-
locale?:
|
|
260
|
+
showNowIndicator?: boolean; /** A date-fns `Locale` for weekday/date labels. Defaults to English. */
|
|
261
|
+
locale?: Locale; /** Highlight this date (header/cell/agenda) instead of the real "today". */
|
|
262
|
+
activeDate?: Date;
|
|
263
|
+
/**
|
|
264
|
+
* Lay the day columns out right-to-left (month, week/day grid and all-day lane).
|
|
265
|
+
* Cosmetic only: the hour gutter stays on the left and paging still advances
|
|
266
|
+
* with the system scroll direction. Default false. For full RTL (including
|
|
267
|
+
* scroll direction), also enable React Native's `I18nManager`.
|
|
268
|
+
*/
|
|
269
|
+
isRTL?: boolean;
|
|
121
270
|
/**
|
|
122
271
|
* Allow a fling to carry across several pages before snapping. Default false:
|
|
123
272
|
* one day/week/month per swipe.
|
|
124
273
|
*/
|
|
125
274
|
freeSwipe?: boolean; /** Custom header above the week/day grid. Receives the visible days. */
|
|
126
|
-
renderTimeGridHeader?: (days: Date[]) => React.ReactNode;
|
|
275
|
+
renderTimeGridHeader?: (days: Date[]) => React.ReactNode; /** Replace the weekday-label header above the month grid. Return `null` to hide it. */
|
|
276
|
+
renderHeaderForMonthView?: (weekDays: Date[]) => React.ReactNode; /** Drawn between rows of the `schedule` (agenda) list. */
|
|
277
|
+
itemSeparatorComponent?: React.ComponentType<unknown> | null;
|
|
127
278
|
};
|
|
128
279
|
declare function Calendar<T>({
|
|
129
280
|
events,
|
|
130
281
|
mode,
|
|
131
282
|
date,
|
|
132
283
|
onChangeDate,
|
|
284
|
+
onChangeDateRange,
|
|
133
285
|
onPressEvent,
|
|
286
|
+
onLongPressEvent,
|
|
134
287
|
onPressDay,
|
|
288
|
+
onLongPressDay,
|
|
135
289
|
onPressMore,
|
|
136
290
|
onPressCell,
|
|
291
|
+
resetPageOnPressCell,
|
|
292
|
+
onLongPressCell,
|
|
293
|
+
onPressDateHeader,
|
|
137
294
|
maxVisibleEventCount,
|
|
295
|
+
sortedMonthView,
|
|
296
|
+
moreLabel,
|
|
297
|
+
showAdjacentMonths,
|
|
298
|
+
disableMonthEventCellPress,
|
|
138
299
|
weekStartsOn,
|
|
300
|
+
numberOfDays,
|
|
301
|
+
weekEndsOn,
|
|
139
302
|
renderEvent,
|
|
303
|
+
eventCellStyle,
|
|
304
|
+
calendarCellStyle,
|
|
140
305
|
keyExtractor,
|
|
141
306
|
theme,
|
|
142
307
|
cellHeight: cellHeightProp,
|
|
@@ -144,26 +309,81 @@ declare function Calendar<T>({
|
|
|
144
309
|
minHourHeight,
|
|
145
310
|
maxHourHeight,
|
|
146
311
|
hourColumnWidth,
|
|
312
|
+
hideHours,
|
|
313
|
+
timeslots,
|
|
314
|
+
showWeekNumber,
|
|
315
|
+
weekNumberPrefix,
|
|
316
|
+
hourComponent,
|
|
317
|
+
showSixWeeks,
|
|
318
|
+
swipeEnabled,
|
|
319
|
+
showVerticalScrollIndicator,
|
|
320
|
+
verticalScrollEnabled,
|
|
321
|
+
headerComponent,
|
|
147
322
|
minHour,
|
|
148
323
|
maxHour,
|
|
149
324
|
ampm,
|
|
325
|
+
showTime,
|
|
150
326
|
scrollOffsetMinutes,
|
|
151
327
|
showNowIndicator,
|
|
152
328
|
locale,
|
|
329
|
+
activeDate,
|
|
330
|
+
isRTL,
|
|
153
331
|
freeSwipe,
|
|
154
|
-
renderTimeGridHeader
|
|
332
|
+
renderTimeGridHeader,
|
|
333
|
+
renderHeaderForMonthView,
|
|
334
|
+
itemSeparatorComponent
|
|
155
335
|
}: CalendarProps<T>): import("react").JSX.Element;
|
|
156
336
|
//#endregion
|
|
337
|
+
//#region src/components/Agenda.d.ts
|
|
338
|
+
type AgendaProps<T> = {
|
|
339
|
+
events: CalendarEvent<T>[];
|
|
340
|
+
locale?: Locale;
|
|
341
|
+
renderEvent: RenderEvent<T>;
|
|
342
|
+
keyExtractor: EventKeyExtractor<T>;
|
|
343
|
+
onPressEvent: (event: CalendarEvent<T>) => void;
|
|
344
|
+
onLongPressEvent?: (event: CalendarEvent<T>) => void;
|
|
345
|
+
onPressDay?: (date: Date) => void; /** Highlight this date's header instead of the real "today". */
|
|
346
|
+
activeDate?: Date; /** Drawn between rows of the agenda list. */
|
|
347
|
+
itemSeparatorComponent?: ComponentType<unknown> | null;
|
|
348
|
+
};
|
|
349
|
+
/**
|
|
350
|
+
* A vertical, day-grouped list of events (no time grid). Events are sorted by
|
|
351
|
+
* start, grouped under a date header per day. The consumer controls which
|
|
352
|
+
* events (and therefore which date range) are shown.
|
|
353
|
+
*/
|
|
354
|
+
declare function Agenda<T>({
|
|
355
|
+
events,
|
|
356
|
+
locale,
|
|
357
|
+
renderEvent,
|
|
358
|
+
keyExtractor,
|
|
359
|
+
onPressEvent,
|
|
360
|
+
onLongPressEvent,
|
|
361
|
+
onPressDay,
|
|
362
|
+
activeDate,
|
|
363
|
+
itemSeparatorComponent
|
|
364
|
+
}: AgendaProps<T>): import("react").JSX.Element;
|
|
365
|
+
//#endregion
|
|
157
366
|
//#region src/components/MonthView.d.ts
|
|
158
367
|
type MonthViewProps<T> = {
|
|
159
368
|
date: Date;
|
|
160
369
|
events: CalendarEvent<T>[];
|
|
161
370
|
maxVisibleEventCount: number;
|
|
162
371
|
weekStartsOn: WeekStartsOn;
|
|
372
|
+
locale?: Locale; /** Sort each day's events by start time before slicing. Default true. */
|
|
373
|
+
sortedMonthView?: boolean; /** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
|
|
374
|
+
moreLabel?: string; /** Show dimmed days from adjacent months in the grid. Default true. */
|
|
375
|
+
showAdjacentMonths?: boolean; /** Ignore taps on month-cell events (day-cell taps still fire). Default false. */
|
|
376
|
+
disableMonthEventCellPress?: boolean; /** Reverse the day order within each week (right-to-left). Default false. */
|
|
377
|
+
isRTL?: boolean; /** Always render six week rows, for a fixed-height grid. Default false. */
|
|
378
|
+
showSixWeeks?: boolean; /** Highlight this date instead of the real "today". */
|
|
379
|
+
activeDate?: Date; /** Per-date style merged onto the day cell. */
|
|
380
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
163
381
|
renderEvent: RenderEvent<T>;
|
|
164
382
|
keyExtractor: EventKeyExtractor<T>;
|
|
165
383
|
onPressDay?: (date: Date) => void;
|
|
384
|
+
onLongPressDay?: (date: Date) => void;
|
|
166
385
|
onPressEvent: (event: CalendarEvent<T>) => void;
|
|
386
|
+
onLongPressEvent?: (event: CalendarEvent<T>) => void;
|
|
167
387
|
onPressMore?: (events: CalendarEvent<T>[], date: Date) => void;
|
|
168
388
|
};
|
|
169
389
|
declare function MonthViewInner<T>({
|
|
@@ -171,10 +391,21 @@ declare function MonthViewInner<T>({
|
|
|
171
391
|
events,
|
|
172
392
|
maxVisibleEventCount,
|
|
173
393
|
weekStartsOn,
|
|
394
|
+
locale,
|
|
395
|
+
sortedMonthView,
|
|
396
|
+
moreLabel,
|
|
397
|
+
showAdjacentMonths,
|
|
398
|
+
disableMonthEventCellPress,
|
|
399
|
+
isRTL,
|
|
400
|
+
showSixWeeks,
|
|
401
|
+
activeDate,
|
|
402
|
+
calendarCellStyle,
|
|
174
403
|
renderEvent,
|
|
175
404
|
keyExtractor,
|
|
176
405
|
onPressDay,
|
|
406
|
+
onLongPressDay,
|
|
177
407
|
onPressEvent,
|
|
408
|
+
onLongPressEvent,
|
|
178
409
|
onPressMore
|
|
179
410
|
}: MonthViewProps<T>): import("react").JSX.Element;
|
|
180
411
|
declare const MonthView: typeof MonthViewInner;
|
|
@@ -185,81 +416,55 @@ type MonthPagerProps<T> = {
|
|
|
185
416
|
events: CalendarEvent<T>[];
|
|
186
417
|
maxVisibleEventCount: number;
|
|
187
418
|
weekStartsOn: WeekStartsOn;
|
|
419
|
+
locale?: Locale;
|
|
420
|
+
sortedMonthView?: boolean;
|
|
421
|
+
moreLabel?: string;
|
|
422
|
+
showAdjacentMonths?: boolean;
|
|
423
|
+
disableMonthEventCellPress?: boolean;
|
|
424
|
+
isRTL?: boolean;
|
|
425
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
188
426
|
renderEvent: RenderEvent<T>;
|
|
189
427
|
keyExtractor: EventKeyExtractor<T>;
|
|
190
428
|
onPressDay?: (date: Date) => void;
|
|
429
|
+
onLongPressDay?: (date: Date) => void;
|
|
191
430
|
onPressEvent: (event: CalendarEvent<T>) => void;
|
|
431
|
+
onLongPressEvent?: (event: CalendarEvent<T>) => void;
|
|
192
432
|
onPressMore?: (events: CalendarEvent<T>[], date: Date) => void;
|
|
193
433
|
onChangeDate: (date: Date) => void;
|
|
194
434
|
freeSwipe?: boolean;
|
|
435
|
+
swipeEnabled?: boolean;
|
|
436
|
+
showSixWeeks?: boolean;
|
|
437
|
+
activeDate?: Date; /** Replace the weekday-label header above the month grid. Receives the week's days. */
|
|
438
|
+
renderHeaderForMonthView?: (weekDays: Date[]) => React.ReactNode;
|
|
195
439
|
};
|
|
196
440
|
declare function MonthPagerInner<T>({
|
|
197
441
|
date,
|
|
198
442
|
events,
|
|
199
443
|
maxVisibleEventCount,
|
|
200
444
|
weekStartsOn,
|
|
445
|
+
locale,
|
|
446
|
+
sortedMonthView,
|
|
447
|
+
moreLabel,
|
|
448
|
+
showAdjacentMonths,
|
|
449
|
+
disableMonthEventCellPress,
|
|
450
|
+
isRTL,
|
|
451
|
+
calendarCellStyle,
|
|
201
452
|
renderEvent,
|
|
202
453
|
keyExtractor,
|
|
203
454
|
onPressDay,
|
|
455
|
+
onLongPressDay,
|
|
204
456
|
onPressEvent,
|
|
457
|
+
onLongPressEvent,
|
|
205
458
|
onPressMore,
|
|
206
459
|
onChangeDate,
|
|
207
|
-
freeSwipe
|
|
460
|
+
freeSwipe,
|
|
461
|
+
swipeEnabled,
|
|
462
|
+
showSixWeeks,
|
|
463
|
+
activeDate,
|
|
464
|
+
renderHeaderForMonthView
|
|
208
465
|
}: MonthPagerProps<T>): import("react").JSX.Element;
|
|
209
466
|
declare const MonthPager: typeof MonthPagerInner;
|
|
210
467
|
//#endregion
|
|
211
|
-
//#region src/components/TimeGrid.d.ts
|
|
212
|
-
declare const DEFAULT_HOUR_HEIGHT = 64;
|
|
213
|
-
type TimeGridProps<T> = {
|
|
214
|
-
mode: 'day' | 'week';
|
|
215
|
-
date: Date;
|
|
216
|
-
events: CalendarEvent<T>[];
|
|
217
|
-
cellHeight: SharedValue<number>; /** Initial per-hour row height in px; seeds scroll/zoom without reading the shared value during render. */
|
|
218
|
-
hourHeight?: number;
|
|
219
|
-
weekStartsOn: WeekStartsOn;
|
|
220
|
-
renderEvent: RenderEvent<T>;
|
|
221
|
-
keyExtractor: EventKeyExtractor<T>;
|
|
222
|
-
scrollOffsetMinutes?: number;
|
|
223
|
-
hourColumnWidth?: number; /** First hour shown (0β23). Default 0. */
|
|
224
|
-
minHour?: number; /** Last hour shown, exclusive (1β24). Default 24. */
|
|
225
|
-
maxHour?: number; /** Show hour labels in 12-hour AM/PM form. Default false (24h). */
|
|
226
|
-
ampm?: boolean;
|
|
227
|
-
minHourHeight?: number;
|
|
228
|
-
maxHourHeight?: number;
|
|
229
|
-
showNowIndicator?: boolean;
|
|
230
|
-
locale?: string;
|
|
231
|
-
freeSwipe?: boolean;
|
|
232
|
-
onPressEvent: (event: CalendarEvent<T>) => void;
|
|
233
|
-
onPressCell?: (date: Date) => void;
|
|
234
|
-
onChangeDate: (date: Date) => void; /** Optional header above the grid (e.g. weekday labels). Rendered full-width. */
|
|
235
|
-
renderHeader?: (days: Date[]) => React.ReactNode;
|
|
236
|
-
};
|
|
237
|
-
declare function TimeGridInner<T>({
|
|
238
|
-
mode,
|
|
239
|
-
date,
|
|
240
|
-
events,
|
|
241
|
-
cellHeight,
|
|
242
|
-
hourHeight,
|
|
243
|
-
weekStartsOn,
|
|
244
|
-
renderEvent,
|
|
245
|
-
keyExtractor,
|
|
246
|
-
scrollOffsetMinutes,
|
|
247
|
-
hourColumnWidth,
|
|
248
|
-
minHour,
|
|
249
|
-
maxHour,
|
|
250
|
-
ampm,
|
|
251
|
-
minHourHeight,
|
|
252
|
-
maxHourHeight,
|
|
253
|
-
showNowIndicator,
|
|
254
|
-
locale,
|
|
255
|
-
freeSwipe,
|
|
256
|
-
onPressEvent,
|
|
257
|
-
onPressCell,
|
|
258
|
-
onChangeDate,
|
|
259
|
-
renderHeader
|
|
260
|
-
}: TimeGridProps<T>): import("react").JSX.Element;
|
|
261
|
-
declare const TimeGrid: typeof TimeGridInner;
|
|
262
|
-
//#endregion
|
|
263
468
|
//#region src/components/DefaultEvent.d.ts
|
|
264
469
|
/**
|
|
265
470
|
* The built-in event renderer: a filled, rounded box showing the event title
|
|
@@ -269,7 +474,12 @@ declare const TimeGrid: typeof TimeGridInner;
|
|
|
269
474
|
declare function DefaultEvent<T>({
|
|
270
475
|
event,
|
|
271
476
|
mode,
|
|
272
|
-
|
|
477
|
+
isAllDay,
|
|
478
|
+
ampm,
|
|
479
|
+
showTime,
|
|
480
|
+
cellStyle,
|
|
481
|
+
onPress,
|
|
482
|
+
onLongPress
|
|
273
483
|
}: RenderEventArgs<T>): import("react").JSX.Element;
|
|
274
484
|
//#endregion
|
|
275
485
|
//#region src/utils/dates.d.ts
|
|
@@ -298,5 +508,11 @@ type PositionedEvent<T> = {
|
|
|
298
508
|
* 00:00β01:00 on the next). Pure β safe to call per render, never per frame.
|
|
299
509
|
*/
|
|
300
510
|
declare function layoutDayEvents<T>(events: CalendarEvent<T>[], day: Date): PositionedEvent<T>[];
|
|
511
|
+
/**
|
|
512
|
+
* Whether an event belongs in the all-day lane. An explicit `allDay` flag wins;
|
|
513
|
+
* otherwise it's inferred when the event spans whole days (both `start` and
|
|
514
|
+
* `end` land on midnight, e.g. an iCal-style all-day event). Pure.
|
|
515
|
+
*/
|
|
516
|
+
declare function isAllDayEvent<T>(event: CalendarEvent<T>): boolean;
|
|
301
517
|
//#endregion
|
|
302
|
-
export { Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarTheme, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, DefaultEvent, type EventKeyExtractor, type ICalendarEvent, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type PositionedEvent, type RenderEvent, type RenderEventArgs, TimeGrid, type TimeGridProps, type WeekStartsOn, defaultTheme, getIsToday, getWeekDays, isSameCalendarDay, isWeekend, layoutDayEvents, mergeTheme, minutesIntoDay, useCalendarTheme };
|
|
518
|
+
export { Agenda, type AgendaProps, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarTheme, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, DefaultEvent, type EventKeyExtractor, type HourRenderer, type ICalendarEvent, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type PositionedEvent, type RenderEvent, type RenderEventArgs, TimeGrid, type TimeGridMode, type TimeGridProps, type WeekStartsOn, defaultTheme, getIsToday, getWeekDays, isAllDayEvent, isSameCalendarDay, isWeekend, layoutDayEvents, mergeTheme, minutesIntoDay, useCalendarTheme };
|