@super-calendar/native 2.1.4 → 2.2.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 +1 -1
- package/dist/{DefaultMonthEvent-D2s0x2Bn.d.mts → DefaultMonthEvent-BlfDkmF5.d.mts} +61 -9
- package/dist/{DefaultMonthEvent-DaTEIcRs.d.ts → DefaultMonthEvent-Cagj4aBo.d.ts} +61 -9
- package/dist/{MonthList-oXiArmbu.js → MonthList-DWAjW5R7.js} +98 -31
- package/dist/{MonthList-DXvjxiyu.mjs → MonthList-DZx8rPle.mjs} +94 -33
- package/dist/index.d.mts +112 -8
- package/dist/index.d.ts +112 -8
- package/dist/index.js +476 -107
- package/dist/index.mjs +472 -110
- 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 +2 -2
- package/src/components/AllDayLane.tsx +11 -2
- package/src/components/Calendar.tsx +38 -4
- package/src/components/DefaultEvent.tsx +68 -47
- package/src/components/DefaultMonthEvent.tsx +11 -8
- package/src/components/MonthList.tsx +16 -3
- package/src/components/MonthPager.tsx +19 -11
- package/src/components/MonthView.tsx +40 -11
- package/src/components/ResourceTimeline.tsx +441 -0
- package/src/components/TimeGrid.tsx +44 -7
- package/src/index.tsx +10 -0
- package/src/theme.ts +62 -1
- package/src/types.ts +9 -0
- package/src/utils/withEventAccessibilityLabel.tsx +30 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@super-calendar/native) [](https://jsr.io/@super-calendar/native) [](https://npmx.dev/package/@super-calendar/native)
|
|
4
4
|
|
|
5
|
-
The React Native renderer for [super-calendar](https://github.com/afonsojramos/
|
|
5
|
+
The React Native renderer for [super-calendar](https://github.com/afonsojramos/super-calendar): a gesture-driven, virtualized **month / week / day** calendar and date picker. Runs on iOS, Android, and web (web via [react-native-web](https://necolas.github.io/react-native-web/)).
|
|
6
6
|
|
|
7
7
|
- 📆 Month grid plus day / 3-day / week / custom-N time grids and an agenda
|
|
8
8
|
- 🤏 Pinch-to-zoom week/day grid (UI thread, no re-renders)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Locale } from "date-fns";
|
|
2
2
|
import { ComponentType, ReactElement } from "react";
|
|
3
3
|
import { SharedValue } from "react-native-reanimated";
|
|
4
|
-
import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn } from "@super-calendar/core";
|
|
4
|
+
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";
|
|
5
5
|
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
6
6
|
|
|
7
7
|
//#region src/theme.d.ts
|
|
@@ -16,12 +16,36 @@ interface CalendarTheme {
|
|
|
16
16
|
/** Text styles for the calendar's labels and the built-in event box. */
|
|
17
17
|
text: {
|
|
18
18
|
/** Large day number in the week/day header. */dayNumber: TextStyle; /** Short weekday label ("Mon") in headers. */
|
|
19
|
-
weekday: TextStyle; /**
|
|
19
|
+
weekday: TextStyle; /** The "MMMM yyyy" month title above the month grid. */
|
|
20
|
+
monthTitle: TextStyle; /** Date number inside a month cell. */
|
|
20
21
|
dateCell: TextStyle; /** Hour labels down the left of the time grid. */
|
|
21
22
|
hourLabel: TextStyle; /** The "+N more" overflow label in month cells. */
|
|
22
23
|
more: TextStyle; /** Title inside the built-in default event box. */
|
|
23
24
|
eventTitle: TextStyle;
|
|
24
25
|
};
|
|
26
|
+
/**
|
|
27
|
+
* Per-part `ViewStyle` overrides for the renderer's container elements, the
|
|
28
|
+
* React Native counterpart of the web renderer's per-slot classes. Each is
|
|
29
|
+
* merged onto the built-in style, so you override only what you set. (Rolling
|
|
30
|
+
* out across the views; more slots as they land.)
|
|
31
|
+
*/
|
|
32
|
+
containers: {
|
|
33
|
+
/** The month view's outer container (title + weekday header + grid). */monthContainer: ViewStyle; /** The weekday-label header row above a month grid. */
|
|
34
|
+
weekdayHeader: ViewStyle; /** Each week (row of 7 day cells) in the month grid. */
|
|
35
|
+
weekRow: ViewStyle; /** Each day cell in the month grid. */
|
|
36
|
+
dayCell: ViewStyle; /** The date badge (the circle) inside a month day cell. */
|
|
37
|
+
dayBadge: ViewStyle; /** An event chip inside a month day cell. */
|
|
38
|
+
monthEvent: ViewStyle; /** Each day's column header in the time grid. */
|
|
39
|
+
columnHeader: ViewStyle; /** A timed event's positioned box in the time grid (and resource timeline). */
|
|
40
|
+
timeGridEvent: ViewStyle; /** The current-time indicator line. */
|
|
41
|
+
nowIndicator: ViewStyle; /** Each resource row in the resource timeline. */
|
|
42
|
+
resourceRow: ViewStyle; /** The left-hand resource-label cell in the resource timeline. */
|
|
43
|
+
resourceLabel: ViewStyle; /** The schedule/agenda list's outer container. */
|
|
44
|
+
agendaList: ViewStyle; /** Each event row in the agenda list. */
|
|
45
|
+
agendaRow: ViewStyle; /** The all-day lane above the time grid. */
|
|
46
|
+
allDayLane: ViewStyle; /** Each day's column within the all-day lane. */
|
|
47
|
+
allDayColumn: ViewStyle;
|
|
48
|
+
};
|
|
25
49
|
/** Corner radius of the today badge. Use a large value for a circle. */
|
|
26
50
|
todayBadgeRadius: number;
|
|
27
51
|
/**
|
|
@@ -48,6 +72,7 @@ declare function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme;
|
|
|
48
72
|
type PartialCalendarTheme = {
|
|
49
73
|
colors?: Partial<CalendarTheme["colors"]>;
|
|
50
74
|
text?: Partial<CalendarTheme["text"]>;
|
|
75
|
+
containers?: Partial<CalendarTheme["containers"]>;
|
|
51
76
|
todayBadgeRadius?: number;
|
|
52
77
|
rangeBandHeight?: number;
|
|
53
78
|
};
|
|
@@ -88,6 +113,12 @@ type RenderEventArgs<T = unknown> = {
|
|
|
88
113
|
ellipsizeTitle?: boolean; /** Label shown for an all-day event in the schedule (and its screen-reader text). Default "All day". */
|
|
89
114
|
allDayLabel?: string; /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
|
|
90
115
|
cellStyle?: StyleProp<ViewStyle>;
|
|
116
|
+
/**
|
|
117
|
+
* Screen-reader label to announce for the event, injected by a consumer's
|
|
118
|
+
* `eventAccessibilityLabel` override. The built-in renderers use it in place of
|
|
119
|
+
* their default label; `undefined` falls back to that default.
|
|
120
|
+
*/
|
|
121
|
+
accessibilityLabel?: string;
|
|
91
122
|
onPress: () => void; /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
|
|
92
123
|
onLongPress?: () => void;
|
|
93
124
|
};
|
|
@@ -111,7 +142,8 @@ type MonthViewProps<T> = {
|
|
|
111
142
|
* explicit value when using a custom `renderEvent`.
|
|
112
143
|
*/
|
|
113
144
|
maxVisibleEventCount?: number;
|
|
114
|
-
weekStartsOn: WeekStartsOn;
|
|
145
|
+
weekStartsOn: WeekStartsOn; /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
|
|
146
|
+
weekdayFormat?: WeekdayFormat;
|
|
115
147
|
locale?: Locale; /** Sort each day's events by start time before slicing. Default true. */
|
|
116
148
|
sortedMonthView?: boolean; /** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
|
|
117
149
|
moreLabel?: string; /** Show dimmed days from adjacent months in the grid. Default true. */
|
|
@@ -136,6 +168,12 @@ type MonthViewProps<T> = {
|
|
|
136
168
|
onDayPointerEnter?: (date: Date) => void; /** Per-date style merged onto the day cell. */
|
|
137
169
|
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
138
170
|
renderEvent: RenderEvent<T>;
|
|
171
|
+
/**
|
|
172
|
+
* Override the screen-reader label for each event chip. Receives the event and a
|
|
173
|
+
* `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
|
|
174
|
+
* announce. Defaults to the built-in title-and-time label.
|
|
175
|
+
*/
|
|
176
|
+
eventAccessibilityLabel?: EventAccessibilityLabeler<T>;
|
|
139
177
|
keyExtractor: EventKeyExtractor<T>;
|
|
140
178
|
onPressDay?: (date: Date) => void;
|
|
141
179
|
onLongPressDay?: (date: Date) => void;
|
|
@@ -153,6 +191,7 @@ declare function MonthViewInner<T>({
|
|
|
153
191
|
events,
|
|
154
192
|
maxVisibleEventCount,
|
|
155
193
|
weekStartsOn,
|
|
194
|
+
weekdayFormat,
|
|
156
195
|
locale,
|
|
157
196
|
sortedMonthView,
|
|
158
197
|
moreLabel,
|
|
@@ -171,6 +210,7 @@ declare function MonthViewInner<T>({
|
|
|
171
210
|
isDateDisabled: isDateDisabledProp,
|
|
172
211
|
calendarCellStyle,
|
|
173
212
|
renderEvent,
|
|
213
|
+
eventAccessibilityLabel,
|
|
174
214
|
keyExtractor,
|
|
175
215
|
onPressDay,
|
|
176
216
|
onLongPressDay,
|
|
@@ -188,7 +228,7 @@ declare function MonthViewInner<T>({
|
|
|
188
228
|
*
|
|
189
229
|
* @example
|
|
190
230
|
* ```tsx
|
|
191
|
-
* import { MonthView, type CalendarEvent } from "
|
|
231
|
+
* import { MonthView, type CalendarEvent } from "@super-calendar/native";
|
|
192
232
|
*
|
|
193
233
|
* <MonthView
|
|
194
234
|
* date={new Date()}
|
|
@@ -206,6 +246,7 @@ type MonthPagerProps<T> = {
|
|
|
206
246
|
events: CalendarEvent$1<T>[];
|
|
207
247
|
maxVisibleEventCount?: number;
|
|
208
248
|
weekStartsOn: WeekStartsOn;
|
|
249
|
+
weekdayFormat?: WeekdayFormat;
|
|
209
250
|
locale?: Locale;
|
|
210
251
|
sortedMonthView?: boolean;
|
|
211
252
|
moreLabel?: string;
|
|
@@ -233,6 +274,7 @@ declare function MonthPagerInner<T>({
|
|
|
233
274
|
events,
|
|
234
275
|
maxVisibleEventCount,
|
|
235
276
|
weekStartsOn,
|
|
277
|
+
weekdayFormat,
|
|
236
278
|
locale,
|
|
237
279
|
sortedMonthView,
|
|
238
280
|
moreLabel,
|
|
@@ -262,7 +304,7 @@ declare function MonthPagerInner<T>({
|
|
|
262
304
|
*
|
|
263
305
|
* @example
|
|
264
306
|
* ```tsx
|
|
265
|
-
* import { MonthPager } from "
|
|
307
|
+
* import { MonthPager } from "@super-calendar/native";
|
|
266
308
|
*
|
|
267
309
|
* <MonthPager
|
|
268
310
|
* date={date}
|
|
@@ -280,7 +322,8 @@ declare const MonthPager: typeof MonthPagerInner;
|
|
|
280
322
|
type MonthListProps<T> = {
|
|
281
323
|
/** The month scrolled to on mount. */date: Date; /** Events to render in the grids. Omit for an events-free date picker. */
|
|
282
324
|
events?: CalendarEvent$1<T>[];
|
|
283
|
-
weekStartsOn: WeekStartsOn;
|
|
325
|
+
weekStartsOn: WeekStartsOn; /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
|
|
326
|
+
weekdayFormat?: WeekdayFormat;
|
|
284
327
|
/**
|
|
285
328
|
* Height of each week row (px). The month block sizes to its row count. Defaults
|
|
286
329
|
* to a taller row when `events` are shown (so a day fits ~3 chips) and a compact
|
|
@@ -307,7 +350,13 @@ type MonthListProps<T> = {
|
|
|
307
350
|
maxDate?: Date;
|
|
308
351
|
isDateDisabled?: (date: Date) => boolean;
|
|
309
352
|
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>; /** Replace the built-in event box. Defaults to `DefaultEvent`. */
|
|
310
|
-
renderEvent?: RenderEvent<T>;
|
|
353
|
+
renderEvent?: RenderEvent<T>;
|
|
354
|
+
/**
|
|
355
|
+
* Override the screen-reader label for each event chip. Receives the event and a
|
|
356
|
+
* `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
|
|
357
|
+
* announce. Defaults to the built-in title-and-time label.
|
|
358
|
+
*/
|
|
359
|
+
eventAccessibilityLabel?: EventAccessibilityLabeler<T>; /** Stable key per event. Defaults to start-time + index. */
|
|
311
360
|
keyExtractor?: EventKeyExtractor<T>;
|
|
312
361
|
onPressDay?: (date: Date) => void;
|
|
313
362
|
onLongPressDay?: (date: Date) => void;
|
|
@@ -327,6 +376,7 @@ declare function MonthListInner<T>({
|
|
|
327
376
|
date,
|
|
328
377
|
events,
|
|
329
378
|
weekStartsOn,
|
|
379
|
+
weekdayFormat,
|
|
330
380
|
weekRowHeight: weekRowHeightProp,
|
|
331
381
|
monthHeaderHeight,
|
|
332
382
|
maxVisibleEventCount,
|
|
@@ -345,6 +395,7 @@ declare function MonthListInner<T>({
|
|
|
345
395
|
isDateDisabled,
|
|
346
396
|
calendarCellStyle,
|
|
347
397
|
renderEvent,
|
|
398
|
+
eventAccessibilityLabel,
|
|
348
399
|
keyExtractor,
|
|
349
400
|
onPressDay,
|
|
350
401
|
onLongPressDay,
|
|
@@ -363,7 +414,7 @@ declare function MonthListInner<T>({
|
|
|
363
414
|
*
|
|
364
415
|
* @example
|
|
365
416
|
* ```tsx
|
|
366
|
-
* import { MonthList } from "
|
|
417
|
+
* import { MonthList } from "@super-calendar/native/picker";
|
|
367
418
|
*
|
|
368
419
|
* <MonthList
|
|
369
420
|
* date={new Date()}
|
|
@@ -391,9 +442,10 @@ declare function DefaultMonthEvent<T>({
|
|
|
391
442
|
showTime,
|
|
392
443
|
ellipsizeTitle,
|
|
393
444
|
allDayLabel,
|
|
445
|
+
accessibilityLabel: accessibilityLabelProp,
|
|
394
446
|
cellStyle,
|
|
395
447
|
onPress,
|
|
396
448
|
onLongPress
|
|
397
449
|
}: RenderEventArgs<T>): ReactElement;
|
|
398
450
|
//#endregion
|
|
399
|
-
export {
|
|
451
|
+
export { CalendarThemeProvider as C, mergeTheme as D, defaultTheme as E, useCalendarTheme as O, CalendarTheme as S, darkTheme as T, RenderEvent as _, MonthPagerProps as a, WeekStartsOn as b, BusinessHours as c, EventAccessibilityLabelContext as d, EventAccessibilityLabeler$1 as f, RecurrenceRule as g, RecurrenceFrequency as h, MonthPager as i, CalendarEvent$1 as l, ICalendarEvent as m, MonthList as n, MonthView as o, EventKeyExtractor as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, RenderEventArgs as v, PartialCalendarTheme as w, WeekdayFormat$1 as x, TimeGridMode as y };
|
|
@@ -2,7 +2,7 @@ import { Locale } from "date-fns";
|
|
|
2
2
|
import { ComponentType, ReactElement } from "react";
|
|
3
3
|
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
4
4
|
import { SharedValue } from "react-native-reanimated";
|
|
5
|
-
import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn } from "@super-calendar/core";
|
|
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
6
|
|
|
7
7
|
//#region src/theme.d.ts
|
|
8
8
|
/**
|
|
@@ -16,12 +16,36 @@ interface CalendarTheme {
|
|
|
16
16
|
/** Text styles for the calendar's labels and the built-in event box. */
|
|
17
17
|
text: {
|
|
18
18
|
/** Large day number in the week/day header. */dayNumber: TextStyle; /** Short weekday label ("Mon") in headers. */
|
|
19
|
-
weekday: TextStyle; /**
|
|
19
|
+
weekday: TextStyle; /** The "MMMM yyyy" month title above the month grid. */
|
|
20
|
+
monthTitle: TextStyle; /** Date number inside a month cell. */
|
|
20
21
|
dateCell: TextStyle; /** Hour labels down the left of the time grid. */
|
|
21
22
|
hourLabel: TextStyle; /** The "+N more" overflow label in month cells. */
|
|
22
23
|
more: TextStyle; /** Title inside the built-in default event box. */
|
|
23
24
|
eventTitle: TextStyle;
|
|
24
25
|
};
|
|
26
|
+
/**
|
|
27
|
+
* Per-part `ViewStyle` overrides for the renderer's container elements, the
|
|
28
|
+
* React Native counterpart of the web renderer's per-slot classes. Each is
|
|
29
|
+
* merged onto the built-in style, so you override only what you set. (Rolling
|
|
30
|
+
* out across the views; more slots as they land.)
|
|
31
|
+
*/
|
|
32
|
+
containers: {
|
|
33
|
+
/** The month view's outer container (title + weekday header + grid). */monthContainer: ViewStyle; /** The weekday-label header row above a month grid. */
|
|
34
|
+
weekdayHeader: ViewStyle; /** Each week (row of 7 day cells) in the month grid. */
|
|
35
|
+
weekRow: ViewStyle; /** Each day cell in the month grid. */
|
|
36
|
+
dayCell: ViewStyle; /** The date badge (the circle) inside a month day cell. */
|
|
37
|
+
dayBadge: ViewStyle; /** An event chip inside a month day cell. */
|
|
38
|
+
monthEvent: ViewStyle; /** Each day's column header in the time grid. */
|
|
39
|
+
columnHeader: ViewStyle; /** A timed event's positioned box in the time grid (and resource timeline). */
|
|
40
|
+
timeGridEvent: ViewStyle; /** The current-time indicator line. */
|
|
41
|
+
nowIndicator: ViewStyle; /** Each resource row in the resource timeline. */
|
|
42
|
+
resourceRow: ViewStyle; /** The left-hand resource-label cell in the resource timeline. */
|
|
43
|
+
resourceLabel: ViewStyle; /** The schedule/agenda list's outer container. */
|
|
44
|
+
agendaList: ViewStyle; /** Each event row in the agenda list. */
|
|
45
|
+
agendaRow: ViewStyle; /** The all-day lane above the time grid. */
|
|
46
|
+
allDayLane: ViewStyle; /** Each day's column within the all-day lane. */
|
|
47
|
+
allDayColumn: ViewStyle;
|
|
48
|
+
};
|
|
25
49
|
/** Corner radius of the today badge. Use a large value for a circle. */
|
|
26
50
|
todayBadgeRadius: number;
|
|
27
51
|
/**
|
|
@@ -48,6 +72,7 @@ declare function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme;
|
|
|
48
72
|
type PartialCalendarTheme = {
|
|
49
73
|
colors?: Partial<CalendarTheme["colors"]>;
|
|
50
74
|
text?: Partial<CalendarTheme["text"]>;
|
|
75
|
+
containers?: Partial<CalendarTheme["containers"]>;
|
|
51
76
|
todayBadgeRadius?: number;
|
|
52
77
|
rangeBandHeight?: number;
|
|
53
78
|
};
|
|
@@ -88,6 +113,12 @@ type RenderEventArgs<T = unknown> = {
|
|
|
88
113
|
ellipsizeTitle?: boolean; /** Label shown for an all-day event in the schedule (and its screen-reader text). Default "All day". */
|
|
89
114
|
allDayLabel?: string; /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
|
|
90
115
|
cellStyle?: StyleProp<ViewStyle>;
|
|
116
|
+
/**
|
|
117
|
+
* Screen-reader label to announce for the event, injected by a consumer's
|
|
118
|
+
* `eventAccessibilityLabel` override. The built-in renderers use it in place of
|
|
119
|
+
* their default label; `undefined` falls back to that default.
|
|
120
|
+
*/
|
|
121
|
+
accessibilityLabel?: string;
|
|
91
122
|
onPress: () => void; /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
|
|
92
123
|
onLongPress?: () => void;
|
|
93
124
|
};
|
|
@@ -111,7 +142,8 @@ type MonthViewProps<T> = {
|
|
|
111
142
|
* explicit value when using a custom `renderEvent`.
|
|
112
143
|
*/
|
|
113
144
|
maxVisibleEventCount?: number;
|
|
114
|
-
weekStartsOn: WeekStartsOn;
|
|
145
|
+
weekStartsOn: WeekStartsOn; /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
|
|
146
|
+
weekdayFormat?: WeekdayFormat;
|
|
115
147
|
locale?: Locale; /** Sort each day's events by start time before slicing. Default true. */
|
|
116
148
|
sortedMonthView?: boolean; /** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
|
|
117
149
|
moreLabel?: string; /** Show dimmed days from adjacent months in the grid. Default true. */
|
|
@@ -136,6 +168,12 @@ type MonthViewProps<T> = {
|
|
|
136
168
|
onDayPointerEnter?: (date: Date) => void; /** Per-date style merged onto the day cell. */
|
|
137
169
|
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
|
|
138
170
|
renderEvent: RenderEvent<T>;
|
|
171
|
+
/**
|
|
172
|
+
* Override the screen-reader label for each event chip. Receives the event and a
|
|
173
|
+
* `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
|
|
174
|
+
* announce. Defaults to the built-in title-and-time label.
|
|
175
|
+
*/
|
|
176
|
+
eventAccessibilityLabel?: EventAccessibilityLabeler<T>;
|
|
139
177
|
keyExtractor: EventKeyExtractor<T>;
|
|
140
178
|
onPressDay?: (date: Date) => void;
|
|
141
179
|
onLongPressDay?: (date: Date) => void;
|
|
@@ -153,6 +191,7 @@ declare function MonthViewInner<T>({
|
|
|
153
191
|
events,
|
|
154
192
|
maxVisibleEventCount,
|
|
155
193
|
weekStartsOn,
|
|
194
|
+
weekdayFormat,
|
|
156
195
|
locale,
|
|
157
196
|
sortedMonthView,
|
|
158
197
|
moreLabel,
|
|
@@ -171,6 +210,7 @@ declare function MonthViewInner<T>({
|
|
|
171
210
|
isDateDisabled: isDateDisabledProp,
|
|
172
211
|
calendarCellStyle,
|
|
173
212
|
renderEvent,
|
|
213
|
+
eventAccessibilityLabel,
|
|
174
214
|
keyExtractor,
|
|
175
215
|
onPressDay,
|
|
176
216
|
onLongPressDay,
|
|
@@ -188,7 +228,7 @@ declare function MonthViewInner<T>({
|
|
|
188
228
|
*
|
|
189
229
|
* @example
|
|
190
230
|
* ```tsx
|
|
191
|
-
* import { MonthView, type CalendarEvent } from "
|
|
231
|
+
* import { MonthView, type CalendarEvent } from "@super-calendar/native";
|
|
192
232
|
*
|
|
193
233
|
* <MonthView
|
|
194
234
|
* date={new Date()}
|
|
@@ -206,6 +246,7 @@ type MonthPagerProps<T> = {
|
|
|
206
246
|
events: CalendarEvent$1<T>[];
|
|
207
247
|
maxVisibleEventCount?: number;
|
|
208
248
|
weekStartsOn: WeekStartsOn;
|
|
249
|
+
weekdayFormat?: WeekdayFormat;
|
|
209
250
|
locale?: Locale;
|
|
210
251
|
sortedMonthView?: boolean;
|
|
211
252
|
moreLabel?: string;
|
|
@@ -233,6 +274,7 @@ declare function MonthPagerInner<T>({
|
|
|
233
274
|
events,
|
|
234
275
|
maxVisibleEventCount,
|
|
235
276
|
weekStartsOn,
|
|
277
|
+
weekdayFormat,
|
|
236
278
|
locale,
|
|
237
279
|
sortedMonthView,
|
|
238
280
|
moreLabel,
|
|
@@ -262,7 +304,7 @@ declare function MonthPagerInner<T>({
|
|
|
262
304
|
*
|
|
263
305
|
* @example
|
|
264
306
|
* ```tsx
|
|
265
|
-
* import { MonthPager } from "
|
|
307
|
+
* import { MonthPager } from "@super-calendar/native";
|
|
266
308
|
*
|
|
267
309
|
* <MonthPager
|
|
268
310
|
* date={date}
|
|
@@ -280,7 +322,8 @@ declare const MonthPager: typeof MonthPagerInner;
|
|
|
280
322
|
type MonthListProps<T> = {
|
|
281
323
|
/** The month scrolled to on mount. */date: Date; /** Events to render in the grids. Omit for an events-free date picker. */
|
|
282
324
|
events?: CalendarEvent$1<T>[];
|
|
283
|
-
weekStartsOn: WeekStartsOn;
|
|
325
|
+
weekStartsOn: WeekStartsOn; /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
|
|
326
|
+
weekdayFormat?: WeekdayFormat;
|
|
284
327
|
/**
|
|
285
328
|
* Height of each week row (px). The month block sizes to its row count. Defaults
|
|
286
329
|
* to a taller row when `events` are shown (so a day fits ~3 chips) and a compact
|
|
@@ -307,7 +350,13 @@ type MonthListProps<T> = {
|
|
|
307
350
|
maxDate?: Date;
|
|
308
351
|
isDateDisabled?: (date: Date) => boolean;
|
|
309
352
|
calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>; /** Replace the built-in event box. Defaults to `DefaultEvent`. */
|
|
310
|
-
renderEvent?: RenderEvent<T>;
|
|
353
|
+
renderEvent?: RenderEvent<T>;
|
|
354
|
+
/**
|
|
355
|
+
* Override the screen-reader label for each event chip. Receives the event and a
|
|
356
|
+
* `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
|
|
357
|
+
* announce. Defaults to the built-in title-and-time label.
|
|
358
|
+
*/
|
|
359
|
+
eventAccessibilityLabel?: EventAccessibilityLabeler<T>; /** Stable key per event. Defaults to start-time + index. */
|
|
311
360
|
keyExtractor?: EventKeyExtractor<T>;
|
|
312
361
|
onPressDay?: (date: Date) => void;
|
|
313
362
|
onLongPressDay?: (date: Date) => void;
|
|
@@ -327,6 +376,7 @@ declare function MonthListInner<T>({
|
|
|
327
376
|
date,
|
|
328
377
|
events,
|
|
329
378
|
weekStartsOn,
|
|
379
|
+
weekdayFormat,
|
|
330
380
|
weekRowHeight: weekRowHeightProp,
|
|
331
381
|
monthHeaderHeight,
|
|
332
382
|
maxVisibleEventCount,
|
|
@@ -345,6 +395,7 @@ declare function MonthListInner<T>({
|
|
|
345
395
|
isDateDisabled,
|
|
346
396
|
calendarCellStyle,
|
|
347
397
|
renderEvent,
|
|
398
|
+
eventAccessibilityLabel,
|
|
348
399
|
keyExtractor,
|
|
349
400
|
onPressDay,
|
|
350
401
|
onLongPressDay,
|
|
@@ -363,7 +414,7 @@ declare function MonthListInner<T>({
|
|
|
363
414
|
*
|
|
364
415
|
* @example
|
|
365
416
|
* ```tsx
|
|
366
|
-
* import { MonthList } from "
|
|
417
|
+
* import { MonthList } from "@super-calendar/native/picker";
|
|
367
418
|
*
|
|
368
419
|
* <MonthList
|
|
369
420
|
* date={new Date()}
|
|
@@ -391,9 +442,10 @@ declare function DefaultMonthEvent<T>({
|
|
|
391
442
|
showTime,
|
|
392
443
|
ellipsizeTitle,
|
|
393
444
|
allDayLabel,
|
|
445
|
+
accessibilityLabel: accessibilityLabelProp,
|
|
394
446
|
cellStyle,
|
|
395
447
|
onPress,
|
|
396
448
|
onLongPress
|
|
397
449
|
}: RenderEventArgs<T>): ReactElement;
|
|
398
450
|
//#endregion
|
|
399
|
-
export {
|
|
451
|
+
export { CalendarThemeProvider as C, mergeTheme as D, defaultTheme as E, useCalendarTheme as O, CalendarTheme as S, darkTheme as T, RenderEvent as _, MonthPagerProps as a, WeekStartsOn as b, BusinessHours as c, EventAccessibilityLabelContext as d, EventAccessibilityLabeler$1 as f, RecurrenceRule as g, RecurrenceFrequency as h, MonthPager as i, CalendarEvent$1 as l, ICalendarEvent as m, MonthList as n, MonthView as o, EventKeyExtractor as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, RenderEventArgs as v, PartialCalendarTheme as w, WeekdayFormat$1 as x, TimeGridMode as y };
|