@super-calendar/native 2.3.2 → 2.5.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.
- package/README.md +21 -0
- package/dist/{DefaultMonthEvent-BW6qy50X.d.ts → DefaultMonthEvent-BSvuJUFk.d.ts} +174 -173
- package/dist/{DefaultMonthEvent-BbCMc60z.d.mts → DefaultMonthEvent-zDj9dHEv.d.mts} +174 -173
- package/dist/{MonthList-CFXm7BK_.js → MonthList-Aczb2RSY.js} +219 -108
- package/dist/{MonthList-BidXJMfm.mjs → MonthList-zPLklHAY.mjs} +203 -110
- package/dist/index.d.mts +247 -263
- package/dist/index.d.ts +247 -263
- package/dist/index.js +793 -259
- package/dist/index.mjs +786 -264
- package/dist/picker.d.mts +1 -1
- package/dist/picker.d.ts +1 -1
- package/dist/picker.js +1 -1
- package/dist/picker.mjs +1 -1
- package/package.json +2 -2
- package/src/components/Agenda.tsx +52 -11
- package/src/components/AllDayLane.tsx +22 -8
- package/src/components/Calendar.tsx +84 -5
- package/src/components/DefaultEvent.tsx +4 -0
- package/src/components/MonthList.tsx +52 -10
- package/src/components/MonthPager.tsx +45 -6
- package/src/components/MonthView.tsx +133 -74
- package/src/components/ResourceTimeline.tsx +581 -35
- package/src/components/TimeGrid.tsx +282 -162
- package/src/index.tsx +12 -4
- package/src/types.ts +16 -1
- package/src/utils/slots.ts +83 -0
package/README.md
CHANGED
|
@@ -62,6 +62,27 @@ export function MyCalendar() {
|
|
|
62
62
|
}
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
+
## Styling with Tailwind
|
|
66
|
+
|
|
67
|
+
Every styleable part is a named slot that accepts a class (resolved by a Tailwind runtime such as [uniwind](https://docs.uniwind.dev) or NativeWind) and/or a style override. A classed slot drops its built-in themed styles, so your classes own the look:
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<Calendar
|
|
71
|
+
mode="month"
|
|
72
|
+
date={date}
|
|
73
|
+
events={events}
|
|
74
|
+
classNames={{
|
|
75
|
+
title: "text-center text-xl font-bold text-indigo-900",
|
|
76
|
+
weekday: "uppercase tracking-wider text-indigo-400",
|
|
77
|
+
}}
|
|
78
|
+
styles={{ more: { color: "#6366F1" } }}
|
|
79
|
+
onChangeDate={setDate}
|
|
80
|
+
onPressEvent={(event) => console.log(event.id)}
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
See the [styling guide](https://super-calendar.afonsojramos.me/guides/styling) for the slot list and the uniwind setup.
|
|
85
|
+
|
|
65
86
|
## Documentation
|
|
66
87
|
|
|
67
88
|
See the [full documentation](https://super-calendar.afonsojramos.me) and the [quickstart](https://super-calendar.afonsojramos.me/quickstart), including theming, recurring events, time zones, and the headless picker.
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { Locale } from "date-fns";
|
|
2
2
|
import { ComponentType, ReactElement } from "react";
|
|
3
|
-
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
+
import { AccessibilityActionEvent, AccessibilityActionInfo, StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
4
4
|
import { SharedValue } from "react-native-reanimated";
|
|
5
5
|
import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventAccessibilityLabelContext, EventAccessibilityLabeler, EventAccessibilityLabeler as EventAccessibilityLabeler$1, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn, WeekdayFormat, WeekdayFormat as WeekdayFormat$1 } from "@super-calendar/core";
|
|
6
|
-
|
|
7
6
|
//#region src/theme.d.ts
|
|
8
7
|
/**
|
|
9
8
|
* The full set of colours, text styles and metrics the calendar paints with.
|
|
@@ -15,13 +14,21 @@ interface CalendarTheme {
|
|
|
15
14
|
colors: CalendarColors;
|
|
16
15
|
/** Text styles for the calendar's labels and the built-in event box. */
|
|
17
16
|
text: {
|
|
18
|
-
/** The day number in a time-grid (week/day) column header. */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
17
|
+
/** The day number in a time-grid (week/day) column header. */
|
|
18
|
+
dayNumber: TextStyle;
|
|
19
|
+
/** The weekday label ("Mon") in a time-grid column header. */
|
|
20
|
+
columnHeaderWeekday: TextStyle;
|
|
21
|
+
/** Short weekday label ("Mon") in the month grid's header row. */
|
|
22
|
+
weekday: TextStyle;
|
|
23
|
+
/** The "MMMM yyyy" month title above the month grid. */
|
|
24
|
+
monthTitle: TextStyle;
|
|
25
|
+
/** Date number inside a month cell. */
|
|
26
|
+
dateCell: TextStyle;
|
|
27
|
+
/** Hour labels down the left of the time grid. */
|
|
28
|
+
hourLabel: TextStyle;
|
|
29
|
+
/** The "+N more" overflow label in month cells. */
|
|
30
|
+
more: TextStyle;
|
|
31
|
+
/** Title inside the built-in default event box. */
|
|
25
32
|
eventTitle: TextStyle;
|
|
26
33
|
};
|
|
27
34
|
/**
|
|
@@ -31,21 +38,37 @@ interface CalendarTheme {
|
|
|
31
38
|
* out across the views; more slots as they land.)
|
|
32
39
|
*/
|
|
33
40
|
containers: {
|
|
34
|
-
/** The month view's outer container (title + weekday header + grid). */
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
41
|
+
/** The month view's outer container (title + weekday header + grid). */
|
|
42
|
+
monthContainer: ViewStyle;
|
|
43
|
+
/** The weekday-label header row above a month grid. */
|
|
44
|
+
weekdayHeader: ViewStyle;
|
|
45
|
+
/** Each week (row of 7 day cells) in the month grid. */
|
|
46
|
+
weekRow: ViewStyle;
|
|
47
|
+
/** Each day cell in the month grid. */
|
|
48
|
+
dayCell: ViewStyle;
|
|
49
|
+
/** The date badge (the circle) inside a month day cell. */
|
|
50
|
+
dayBadge: ViewStyle;
|
|
51
|
+
/** An event chip inside a month day cell. */
|
|
52
|
+
monthEvent: ViewStyle;
|
|
53
|
+
/** Each day's column header in the time grid. */
|
|
54
|
+
columnHeader: ViewStyle;
|
|
55
|
+
/** The day-number badge (the circle) inside a time-grid column header. */
|
|
56
|
+
columnHeaderBadge: ViewStyle;
|
|
57
|
+
/** A timed event's positioned box in the time grid (and resource timeline). */
|
|
58
|
+
timeGridEvent: ViewStyle;
|
|
59
|
+
/** The current-time indicator line. */
|
|
60
|
+
nowIndicator: ViewStyle;
|
|
61
|
+
/** Each resource row in the resource timeline. */
|
|
62
|
+
resourceRow: ViewStyle;
|
|
63
|
+
/** The left-hand resource-label cell in the resource timeline. */
|
|
64
|
+
resourceLabel: ViewStyle;
|
|
65
|
+
/** The schedule/agenda list's outer container. */
|
|
66
|
+
agendaList: ViewStyle;
|
|
67
|
+
/** Each event row in the agenda list. */
|
|
68
|
+
agendaRow: ViewStyle;
|
|
69
|
+
/** The all-day lane above the time grid. */
|
|
70
|
+
allDayLane: ViewStyle;
|
|
71
|
+
/** Each day's column within the all-day lane. */
|
|
49
72
|
allDayColumn: ViewStyle;
|
|
50
73
|
};
|
|
51
74
|
/** Corner radius of the today badge. Use a large value for a circle. */
|
|
@@ -108,12 +131,18 @@ type RenderEventArgs<T = unknown> = {
|
|
|
108
131
|
* renderer draw "continues" affordances. `undefined` in month mode.
|
|
109
132
|
*/
|
|
110
133
|
continuesBefore?: boolean;
|
|
111
|
-
continuesAfter?: boolean;
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
134
|
+
continuesAfter?: boolean;
|
|
135
|
+
/** True when this event is rendered in the all-day lane (week/day) or is an all-day event in month view. */
|
|
136
|
+
isAllDay?: boolean;
|
|
137
|
+
/** Format the built-in renderer's time range in 12-hour AM/PM. Default false (24h). */
|
|
138
|
+
ampm?: boolean;
|
|
139
|
+
/** Show the time range in the built-in renderer (day/week/schedule). Default true. */
|
|
140
|
+
showTime?: boolean;
|
|
141
|
+
/** Add a trailing ellipsis (…) when a clipped title overflows in the built-in renderer; otherwise the text is hard-clipped. Default false. */
|
|
142
|
+
ellipsizeTitle?: boolean;
|
|
143
|
+
/** Label shown for an all-day event in the schedule (and its screen-reader text). Default "All day". */
|
|
144
|
+
allDayLabel?: string;
|
|
145
|
+
/** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
|
|
117
146
|
cellStyle?: StyleProp<ViewStyle>;
|
|
118
147
|
/**
|
|
119
148
|
* Screen-reader label to announce for the event, injected by a consumer's
|
|
@@ -121,7 +150,18 @@ type RenderEventArgs<T = unknown> = {
|
|
|
121
150
|
* their default label; `undefined` falls back to that default.
|
|
122
151
|
*/
|
|
123
152
|
accessibilityLabel?: string;
|
|
124
|
-
|
|
153
|
+
/**
|
|
154
|
+
* Screen-reader actions the built-in renderer places on the event, so
|
|
155
|
+
* VoiceOver/TalkBack users can act on it without a gesture. On a draggable
|
|
156
|
+
* time-grid event these are move / resize steps; wired to the same commit path
|
|
157
|
+
* as dragging. A custom renderer should spread these (plus `onAccessibilityAction`)
|
|
158
|
+
* onto its pressable to keep the event operable by assistive tech.
|
|
159
|
+
*/
|
|
160
|
+
accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>;
|
|
161
|
+
/** Handles an `accessibilityActions` invocation; pair it with `accessibilityActions`. */
|
|
162
|
+
onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
|
|
163
|
+
onPress: () => void;
|
|
164
|
+
/** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
|
|
125
165
|
onLongPress?: () => void;
|
|
126
166
|
};
|
|
127
167
|
/**
|
|
@@ -132,9 +172,45 @@ type RenderEventArgs<T = unknown> = {
|
|
|
132
172
|
*/
|
|
133
173
|
type RenderEvent<T = unknown> = ComponentType<RenderEventArgs<T>>;
|
|
134
174
|
//#endregion
|
|
175
|
+
//#region src/utils/slots.d.ts
|
|
176
|
+
/**
|
|
177
|
+
* Per-slot styling overrides. Give a slot a Tailwind class (uniwind/NativeWind)
|
|
178
|
+
* and/or a style override; missing slots keep the built-in look.
|
|
179
|
+
*/
|
|
180
|
+
interface SlotStyleProps<Slot extends string> {
|
|
181
|
+
/**
|
|
182
|
+
* Class names per slot. Supplying a class for a slot drops the built-in
|
|
183
|
+
* *themed* styles for that slot so the class fully controls its look; the
|
|
184
|
+
* *structural* styles the layout depends on are kept. Requires a Tailwind
|
|
185
|
+
* runtime (uniwind, NativeWind) in the consuming app.
|
|
186
|
+
*/
|
|
187
|
+
classNames?: Partial<Record<Slot, string>>;
|
|
188
|
+
/** Style overrides per slot, merged last (win over defaults and classes). */
|
|
189
|
+
styles?: Partial<Record<Slot, StyleProp<TextStyle>>>;
|
|
190
|
+
}
|
|
191
|
+
/** A slot's built-in styling, split so classes can replace the look but not the layout. */
|
|
192
|
+
interface SlotDefault {
|
|
193
|
+
/** Structural styles kept even when a class is supplied. */
|
|
194
|
+
base?: StyleProp<TextStyle>;
|
|
195
|
+
/** Themed styles (colour, type, spacing) dropped when a class is supplied. */
|
|
196
|
+
themed?: StyleProp<TextStyle>;
|
|
197
|
+
}
|
|
198
|
+
/** The props a resolved slot spreads onto an element. */
|
|
199
|
+
interface ResolvedSlot {
|
|
200
|
+
style: StyleProp<TextStyle>;
|
|
201
|
+
className?: string;
|
|
202
|
+
}
|
|
203
|
+
//#endregion
|
|
135
204
|
//#region src/components/MonthView.d.ts
|
|
205
|
+
/**
|
|
206
|
+
* The styleable parts of {@link MonthView}. Mirrors the dom renderer's slot
|
|
207
|
+
* names where the structure matches; `dayBadgeText` is native-only (React
|
|
208
|
+
* Native text colour doesn't inherit from the badge). Event chips are styled
|
|
209
|
+
* by `renderEvent` (or the theme), not a slot.
|
|
210
|
+
*/
|
|
211
|
+
type MonthViewSlot = "title" | "weekdays" | "weekday" | "grid" | "week" | "day" | "dayBadge" | "dayBadgeText" | "rangeBand" | "more";
|
|
136
212
|
/** Props for {@link MonthView}, the single-month grid. */
|
|
137
|
-
type MonthViewProps<T> = {
|
|
213
|
+
type MonthViewProps<T> = SlotStyleProps<MonthViewSlot> & {
|
|
138
214
|
date: Date;
|
|
139
215
|
events: CalendarEvent$1<T>[];
|
|
140
216
|
/**
|
|
@@ -144,30 +220,48 @@ type MonthViewProps<T> = {
|
|
|
144
220
|
* explicit value when using a custom `renderEvent`.
|
|
145
221
|
*/
|
|
146
222
|
maxVisibleEventCount?: number;
|
|
147
|
-
weekStartsOn: WeekStartsOn;
|
|
223
|
+
weekStartsOn: WeekStartsOn;
|
|
224
|
+
/** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
|
|
148
225
|
weekdayFormat?: WeekdayFormat;
|
|
149
|
-
locale?: Locale;
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
226
|
+
locale?: Locale;
|
|
227
|
+
/** Sort each day's events by start time before slicing. Default true. */
|
|
228
|
+
sortedMonthView?: boolean;
|
|
229
|
+
/** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
|
|
230
|
+
moreLabel?: string;
|
|
231
|
+
/** Show dimmed days from adjacent months in the grid. Default true. */
|
|
232
|
+
showAdjacentMonths?: boolean;
|
|
233
|
+
/** Ignore taps on month-cell events (day-cell taps still fire). Default false. */
|
|
234
|
+
disableMonthEventCellPress?: boolean;
|
|
235
|
+
/** Reverse the day order within each week (right-to-left). Default false. */
|
|
236
|
+
isRTL?: boolean;
|
|
237
|
+
/** Always render six week rows, for a fixed-height grid. Default false. */
|
|
238
|
+
showSixWeeks?: boolean;
|
|
239
|
+
/** Render the "MMMM yyyy" title above the grid. Default true. */
|
|
240
|
+
showTitle?: boolean;
|
|
241
|
+
/** Render the weekday-label header row above the grid. Default true. */
|
|
242
|
+
showWeekdays?: boolean;
|
|
243
|
+
/** Highlight this date instead of the real "today". */
|
|
244
|
+
activeDate?: Date;
|
|
245
|
+
/** Days drawn as selected (a filled badge), in the month grid. */
|
|
246
|
+
selectedDates?: Date[];
|
|
247
|
+
/** A selected span: endpoints get a filled badge, the span gets the range band. */
|
|
160
248
|
selectedRange?: DateRange;
|
|
161
249
|
/**
|
|
162
250
|
* Fill the whole cell with the range band instead of the default centered
|
|
163
251
|
* rounded "pill" strip. Default false.
|
|
164
252
|
*/
|
|
165
|
-
fillCellOnSelection?: boolean;
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
253
|
+
fillCellOnSelection?: boolean;
|
|
254
|
+
/** Earliest selectable day (inclusive); earlier days render disabled. */
|
|
255
|
+
minDate?: Date;
|
|
256
|
+
/** Latest selectable day (inclusive); later days render disabled. */
|
|
257
|
+
maxDate?: Date;
|
|
258
|
+
/** Return true to render a specific day disabled (dimmed, taps ignored). */
|
|
259
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
260
|
+
/** Web drag-to-select relay: a pointer pressed down on this day's cell. */
|
|
261
|
+
onDayPointerDown?: (date: Date) => void;
|
|
262
|
+
/** Web drag-to-select relay: a pressed pointer entered this day's cell. */
|
|
263
|
+
onDayPointerEnter?: (date: Date) => void;
|
|
264
|
+
/** Per-date style merged onto the day cell. */
|
|
171
265
|
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
172
266
|
renderEvent: RenderEvent<T>;
|
|
173
267
|
/**
|
|
@@ -188,41 +282,7 @@ type MonthViewProps<T> = {
|
|
|
188
282
|
*/
|
|
189
283
|
renderCustomDateForMonth?: (date: Date) => React.ReactNode;
|
|
190
284
|
};
|
|
191
|
-
declare function MonthViewInner<T>({
|
|
192
|
-
date,
|
|
193
|
-
events,
|
|
194
|
-
maxVisibleEventCount,
|
|
195
|
-
weekStartsOn,
|
|
196
|
-
weekdayFormat,
|
|
197
|
-
locale,
|
|
198
|
-
sortedMonthView,
|
|
199
|
-
moreLabel,
|
|
200
|
-
showAdjacentMonths,
|
|
201
|
-
disableMonthEventCellPress,
|
|
202
|
-
isRTL,
|
|
203
|
-
showSixWeeks,
|
|
204
|
-
showTitle,
|
|
205
|
-
showWeekdays,
|
|
206
|
-
activeDate,
|
|
207
|
-
selectedDates: selectedDatesProp,
|
|
208
|
-
selectedRange: selectedRangeProp,
|
|
209
|
-
fillCellOnSelection,
|
|
210
|
-
minDate: minDateProp,
|
|
211
|
-
maxDate: maxDateProp,
|
|
212
|
-
isDateDisabled: isDateDisabledProp,
|
|
213
|
-
calendarCellStyle,
|
|
214
|
-
renderEvent,
|
|
215
|
-
eventAccessibilityLabel,
|
|
216
|
-
keyExtractor,
|
|
217
|
-
onPressDay,
|
|
218
|
-
onLongPressDay,
|
|
219
|
-
onPressEvent,
|
|
220
|
-
onLongPressEvent,
|
|
221
|
-
onPressMore,
|
|
222
|
-
renderCustomDateForMonth,
|
|
223
|
-
onDayPointerDown,
|
|
224
|
-
onDayPointerEnter
|
|
225
|
-
}: MonthViewProps<T>): ReactElement;
|
|
285
|
+
declare function MonthViewInner<T>({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat, locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, showSixWeeks, showTitle, showWeekdays, activeDate, selectedDates: selectedDatesProp, selectedRange: selectedRangeProp, fillCellOnSelection, minDate: minDateProp, maxDate: maxDateProp, isDateDisabled: isDateDisabledProp, calendarCellStyle, renderEvent, eventAccessibilityLabel, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, renderCustomDateForMonth, onDayPointerDown, onDayPointerEnter, classNames, styles: styleOverrides }: MonthViewProps<T>): ReactElement;
|
|
226
286
|
/**
|
|
227
287
|
* A single month rendered as a 7-column grid of day cells, each showing its
|
|
228
288
|
* event chips with a "+N more" overflow. Render it on its own for a static
|
|
@@ -267,38 +327,13 @@ type MonthPagerProps<T> = {
|
|
|
267
327
|
freeSwipe?: boolean;
|
|
268
328
|
swipeEnabled?: boolean;
|
|
269
329
|
showSixWeeks?: boolean;
|
|
270
|
-
activeDate?: Date;
|
|
271
|
-
|
|
330
|
+
activeDate?: Date;
|
|
331
|
+
/** Replace the weekday-label header above the month grid. Receives the week's days. */
|
|
332
|
+
renderHeaderForMonthView?: (weekDays: Date[]) => React.ReactNode;
|
|
333
|
+
/** Replace the default date badge in each day cell. Receives the day. */
|
|
272
334
|
renderCustomDateForMonth?: (date: Date) => React.ReactNode;
|
|
273
|
-
}
|
|
274
|
-
declare function MonthPagerInner<T>({
|
|
275
|
-
date,
|
|
276
|
-
events,
|
|
277
|
-
maxVisibleEventCount,
|
|
278
|
-
weekStartsOn,
|
|
279
|
-
weekdayFormat,
|
|
280
|
-
locale,
|
|
281
|
-
sortedMonthView,
|
|
282
|
-
moreLabel,
|
|
283
|
-
showAdjacentMonths,
|
|
284
|
-
disableMonthEventCellPress,
|
|
285
|
-
isRTL,
|
|
286
|
-
calendarCellStyle,
|
|
287
|
-
renderEvent,
|
|
288
|
-
keyExtractor,
|
|
289
|
-
onPressDay,
|
|
290
|
-
onLongPressDay,
|
|
291
|
-
onPressEvent,
|
|
292
|
-
onLongPressEvent,
|
|
293
|
-
onPressMore,
|
|
294
|
-
onChangeDate,
|
|
295
|
-
freeSwipe,
|
|
296
|
-
swipeEnabled,
|
|
297
|
-
showSixWeeks,
|
|
298
|
-
activeDate,
|
|
299
|
-
renderHeaderForMonthView,
|
|
300
|
-
renderCustomDateForMonth
|
|
301
|
-
}: MonthPagerProps<T>): ReactElement;
|
|
335
|
+
} & SlotStyleProps<MonthViewSlot>;
|
|
336
|
+
declare function MonthPagerInner<T>({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat, locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe, swipeEnabled, showSixWeeks, activeDate, renderHeaderForMonthView, renderCustomDateForMonth, classNames, styles: styleOverrides }: MonthPagerProps<T>): ReactElement;
|
|
302
337
|
/**
|
|
303
338
|
* A horizontally swipeable month carousel. Swipe left/right to page between
|
|
304
339
|
* months; the committed month is reported through `onChangeDate`. It is the
|
|
@@ -320,11 +355,16 @@ declare function MonthPagerInner<T>({
|
|
|
320
355
|
declare const MonthPager: typeof MonthPagerInner;
|
|
321
356
|
//#endregion
|
|
322
357
|
//#region src/components/MonthList.d.ts
|
|
358
|
+
/** The styleable parts of {@link MonthList}: the same slots as {@link MonthView}. */
|
|
359
|
+
type MonthListSlot = MonthViewSlot;
|
|
323
360
|
/** Props for {@link MonthList}, the vertically scrolling list of months. */
|
|
324
361
|
type MonthListProps<T> = {
|
|
325
|
-
/** The month scrolled to on mount. */
|
|
362
|
+
/** The month scrolled to on mount. */
|
|
363
|
+
date: Date;
|
|
364
|
+
/** Events to render in the grids. Omit for an events-free date picker. */
|
|
326
365
|
events?: CalendarEvent$1<T>[];
|
|
327
|
-
weekStartsOn: WeekStartsOn;
|
|
366
|
+
weekStartsOn: WeekStartsOn;
|
|
367
|
+
/** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
|
|
328
368
|
weekdayFormat?: WeekdayFormat;
|
|
329
369
|
/**
|
|
330
370
|
* Height of each week row (px). The month block sizes to its row count. Defaults
|
|
@@ -340,25 +380,29 @@ type MonthListProps<T> = {
|
|
|
340
380
|
maxVisibleEventCount?: number;
|
|
341
381
|
locale?: Locale;
|
|
342
382
|
sortedMonthView?: boolean;
|
|
343
|
-
moreLabel?: string;
|
|
383
|
+
moreLabel?: string;
|
|
384
|
+
/** Show dimmed adjacent-month days. Default false (each month shows only its own days). */
|
|
344
385
|
showAdjacentMonths?: boolean;
|
|
345
386
|
disableMonthEventCellPress?: boolean;
|
|
346
387
|
isRTL?: boolean;
|
|
347
388
|
activeDate?: Date;
|
|
348
389
|
selectedDates?: Date[];
|
|
349
|
-
selectedRange?: DateRange;
|
|
390
|
+
selectedRange?: DateRange;
|
|
391
|
+
/** Fill the whole cell on selection instead of the default rounded pill band. */
|
|
350
392
|
fillCellOnSelection?: boolean;
|
|
351
393
|
minDate?: Date;
|
|
352
394
|
maxDate?: Date;
|
|
353
395
|
isDateDisabled?: (date: Date) => boolean;
|
|
354
|
-
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
396
|
+
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
397
|
+
/** Replace the built-in event box. Defaults to `DefaultEvent`. */
|
|
355
398
|
renderEvent?: RenderEvent<T>;
|
|
356
399
|
/**
|
|
357
400
|
* Override the screen-reader label for each event chip. Receives the event and a
|
|
358
401
|
* `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
|
|
359
402
|
* announce. Defaults to the built-in title-and-time label.
|
|
360
403
|
*/
|
|
361
|
-
eventAccessibilityLabel?: EventAccessibilityLabeler<T>;
|
|
404
|
+
eventAccessibilityLabel?: EventAccessibilityLabeler<T>;
|
|
405
|
+
/** Stable key per event. Defaults to start-time + index. */
|
|
362
406
|
keyExtractor?: EventKeyExtractor<T>;
|
|
363
407
|
onPressDay?: (date: Date) => void;
|
|
364
408
|
onLongPressDay?: (date: Date) => void;
|
|
@@ -370,44 +414,13 @@ type MonthListProps<T> = {
|
|
|
370
414
|
* continuing across months (the list auto-scrolls at the edges). Fired with
|
|
371
415
|
* the ordered `[start, end]`; pair with `useDateRange`'s `selectRange`.
|
|
372
416
|
*/
|
|
373
|
-
onSelectDrag?: (start: Date, end: Date) => void;
|
|
374
|
-
|
|
417
|
+
onSelectDrag?: (start: Date, end: Date) => void;
|
|
418
|
+
/** Fired with the month that scrolls into view. */
|
|
419
|
+
onChangeVisibleMonth?: (month: Date) => void;
|
|
420
|
+
/** Replace the per-month title (default "LLLL yyyy"). */
|
|
375
421
|
renderMonthHeader?: (month: Date) => React.ReactNode;
|
|
376
|
-
}
|
|
377
|
-
declare function MonthListInner<T>({
|
|
378
|
-
date,
|
|
379
|
-
events,
|
|
380
|
-
weekStartsOn,
|
|
381
|
-
weekdayFormat,
|
|
382
|
-
weekRowHeight: weekRowHeightProp,
|
|
383
|
-
monthHeaderHeight,
|
|
384
|
-
maxVisibleEventCount,
|
|
385
|
-
locale,
|
|
386
|
-
sortedMonthView,
|
|
387
|
-
moreLabel,
|
|
388
|
-
showAdjacentMonths,
|
|
389
|
-
disableMonthEventCellPress,
|
|
390
|
-
isRTL,
|
|
391
|
-
activeDate,
|
|
392
|
-
selectedDates,
|
|
393
|
-
selectedRange,
|
|
394
|
-
fillCellOnSelection,
|
|
395
|
-
minDate,
|
|
396
|
-
maxDate,
|
|
397
|
-
isDateDisabled,
|
|
398
|
-
calendarCellStyle,
|
|
399
|
-
renderEvent,
|
|
400
|
-
eventAccessibilityLabel,
|
|
401
|
-
keyExtractor,
|
|
402
|
-
onPressDay,
|
|
403
|
-
onLongPressDay,
|
|
404
|
-
onPressEvent,
|
|
405
|
-
onLongPressEvent,
|
|
406
|
-
onPressMore,
|
|
407
|
-
onSelectDrag,
|
|
408
|
-
onChangeVisibleMonth,
|
|
409
|
-
renderMonthHeader
|
|
410
|
-
}: MonthListProps<T>): ReactElement;
|
|
422
|
+
} & SlotStyleProps<MonthListSlot>;
|
|
423
|
+
declare function MonthListInner<T>({ date, events, weekStartsOn, weekdayFormat, weekRowHeight: weekRowHeightProp, monthHeaderHeight, maxVisibleEventCount, locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, activeDate, selectedDates, selectedRange, fillCellOnSelection, minDate, maxDate, isDateDisabled, calendarCellStyle, renderEvent, eventAccessibilityLabel, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onSelectDrag, onChangeVisibleMonth, renderMonthHeader, classNames, styles: styleOverrides }: MonthListProps<T>): ReactElement;
|
|
411
424
|
/**
|
|
412
425
|
* A vertically scrolling, virtualized list of month grids. It doubles as the
|
|
413
426
|
* date picker: pass `selectedRange`/`selectedDates` and selection handlers to
|
|
@@ -436,18 +449,6 @@ declare const MonthList: typeof MonthListInner;
|
|
|
436
449
|
* default renderer for `MonthList`, so the `/picker` entry point stays free of
|
|
437
450
|
* Reanimated.
|
|
438
451
|
*/
|
|
439
|
-
declare function DefaultMonthEvent<T>({
|
|
440
|
-
event,
|
|
441
|
-
mode,
|
|
442
|
-
isAllDay,
|
|
443
|
-
ampm,
|
|
444
|
-
showTime,
|
|
445
|
-
ellipsizeTitle,
|
|
446
|
-
allDayLabel,
|
|
447
|
-
accessibilityLabel: accessibilityLabelProp,
|
|
448
|
-
cellStyle,
|
|
449
|
-
onPress,
|
|
450
|
-
onLongPress
|
|
451
|
-
}: RenderEventArgs<T>): ReactElement;
|
|
452
|
+
declare function DefaultMonthEvent<T>({ event, mode, isAllDay, ampm, showTime, ellipsizeTitle, allDayLabel, accessibilityLabel: accessibilityLabelProp, cellStyle, onPress, onLongPress }: RenderEventArgs<T>): ReactElement;
|
|
452
453
|
//#endregion
|
|
453
|
-
export {
|
|
454
|
+
export { darkTheme as A, RenderEventArgs as C, CalendarTheme as D, WeekdayFormat$1 as E, mergeTheme as M, useCalendarTheme as N, CalendarThemeProvider as O, RenderEvent as S, WeekStartsOn as T, EventAccessibilityLabeler$1 as _, MonthPager as a, RecurrenceFrequency as b, MonthViewProps as c, SlotDefault as d, SlotStyleProps as f, EventAccessibilityLabelContext as g, CalendarMode$1 as h, MonthListSlot as i, defaultTheme as j, PartialCalendarTheme as k, MonthViewSlot as l, CalendarEvent$1 as m, MonthList as n, MonthPagerProps as o, BusinessHours as p, MonthListProps as r, MonthView as s, DefaultMonthEvent as t, ResolvedSlot as u, EventKeyExtractor as v, TimeGridMode as w, RecurrenceRule as x, ICalendarEvent as y };
|