diff --git a/docsRNC/docs/Agenda.md b/docsRNC/docs/Agenda.md new file mode 100644 index 0000000000..8d48c9bcdb --- /dev/null +++ b/docsRNC/docs/Agenda.md @@ -0,0 +1,50 @@ +Agenda component +[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agenda.tsx) +:::info +This component extends **[CalendarList, FlatList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx,https://reactnative.dev/docs/flatlist)** props. +::: +
+ +
+ +## API +### items +the list of items that have to be displayed in agenda. If you want to render item as empty date the value of date key has to be an empty array []. If there exists no value for date key it is considered that the date in question is not yet loaded +AgendaSchedule + +### loadItemsForMonth +Handler which gets executed when items for a certain month should be loaded (month became visible) +(data: DateData) => void + +### onDayChange +Handler which gets executed when day changes while scrolling agenda list +(data: DateData) => void + +### onCalendarToggled +Handler which gets executed when the calendar is opened or closed +(enabled: boolean) => void + +### selected +initially selected day +string + +### renderKnob +Replace default agenda's knob with a custom one +() => JSX.Element + +### hideKnob +Whether to hide the knob +boolean + +### showClosingKnob +Whether the knob should always be visible (when hideKnob = false) +boolean + +### showOnlySelectedDayItems +Whether to show items only for the selected date +boolean + +### renderEmptyData +Replace default ActivityIndicator with a custom one +() => JSX.Element + diff --git a/docsRNC/docs/AgendaList.md b/docsRNC/docs/AgendaList.md new file mode 100644 index 0000000000..b9f2e649f1 --- /dev/null +++ b/docsRNC/docs/AgendaList.md @@ -0,0 +1,47 @@ +Agenda list component for the `ExpandableCalendar` component. +[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.tsx) +:::info +This component extends **[FlatList](https://reactnative.dev/docs/flatlist)** props. +::: +**NOTE: This component should be wrapped with `CalendarProvider` component.** +
+ +
+ +## API +### theme +Specify theme properties to override specific styles for calendar parts +Theme + +### dayFormat +Day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting +string + +### dayFormatter +A function to custom format the section header's title +(arg0: string) => string + +### useMoment +Whether to use moment.js for date string formatting +boolean + +### markToday +Whether to mark today's title with the 'Today, ...' string +boolean + +### avoidDateUpdates +Whether to block the date change in calendar (and calendar context provider) when agenda scrolls +boolean + +### scrollToNextEvent +Whether to enable scrolling the agenda list to the next date with content when pressing a day without content +boolean + +### viewOffset +Offset scroll to the section +number + +### sectionStyle +The style passed to the section view +ViewStyle + diff --git a/docsRNC/docs/Calendar.md b/docsRNC/docs/Calendar.md new file mode 100644 index 0000000000..6b9a66e7e4 --- /dev/null +++ b/docsRNC/docs/Calendar.md @@ -0,0 +1,162 @@ +Calendar component +[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx) +:::info +This component extends **[CalendarHeader, BasicDay](https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/index.tsx,https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/basic/index.tsx)** props. +::: +
+ +
+ +## API +### testID +Test ID +string + +### theme +Specify theme properties to override specific styles for calendar parts +Theme + +### style +Specify style for calendar container element +ViewStyle + +### headerStyle +Specify style for calendar header +ViewStyle + +### customHeader +Allow rendering a totally custom header +any + +### initialDate +Initially visible month +string + +### minDate +Minimum date that can be selected, dates before minDate will be grayed out +string + +### maxDate +Maximum date that can be selected, dates after maxDate will be grayed out +string + +### allowSelectionOutOfRange +Whether to allow selection of dates before minDate or after maxDate +boolean + +### firstDay +If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday +number + +### markedDates +Collection of dates that have to be marked +MarkedDatesType + +### displayLoadingIndicator +Whether to display loading indicator +boolean + +### showWeekNumbers +Whether to show weeks numbers +boolean + +### hideExtraDays +Whether to hide days of other months in the month page +boolean + +### showSixWeeks +Whether to always show six weeks on each month (when hideExtraDays = false) +boolean + +### disableMonthChange +Whether to disable changing month when click on days of other months (when hideExtraDays = false) +boolean + +### enableSwipeMonths +Whether to enable the option to swipe between months +boolean + +### disabledByDefault +Whether to disable days by default +boolean + +### disabledByWeekDays +Disable dates by days of the week (Sunday=0) +number[] + +### onDayPress +Handler which gets executed on day press +(date: DateData) => void + +### onDayLongPress +Handler which gets executed on day long press +(date: DateData) => void + +### onMonthChange +Handler which gets executed when month changes in calendar +(date: DateData) => void + +### onVisibleMonthsChange +Handler which gets executed when visible month changes in calendar +(months: DateData[]) => void + +### monthFormat +Month format for the header's title. Formatting values: http://arshaw.com/xdate/#Formatting +string + +### hideDayNames +Whether to hide the days names +boolean + +### hideArrows +Whether to hide the arrows +boolean + +### arrowsHitSlop +undefined +null | Insets | number + +### disableArrowLeft +Whether to disable the left arrow +boolean + +### disableArrowRight +Whether to disable the right arrow +boolean + +### renderArrow +Replace default arrows with custom ones (direction: 'left' | 'right') +(direction: Direction) => ReactNode + +### onPressArrowLeft +Handler which gets executed when press left arrow. It receive a callback to go to the previous month +(method: () => void, month?: string) => void + +### onPressArrowRight +Handler which gets executed when press right arrow. It receive a callback to go to the next month +(method: () => void, month?: string) => void + +### disabledDaysIndexes +Whether to apply custom disable color to selected day names indexes +number[] + +### renderHeader +Replace default title with custom one +(date?: string) => ReactNode + +### customHeaderTitle +Replace default title with custom element +JSX.Element + +### dayComponent +Replace default day with custom day rendering component +JSX.Element + +### disableAllTouchEventsForDisabledDays +Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates') +boolean + +### disableAllTouchEventsForInactiveDays +Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates') +boolean + diff --git a/docsRNC/docs/CalendarList.md b/docsRNC/docs/CalendarList.md new file mode 100644 index 0000000000..bc6e1564d8 --- /dev/null +++ b/docsRNC/docs/CalendarList.md @@ -0,0 +1,38 @@ +Calendar list component +[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendarsList.tsx) +:::info +This component extends **[Calendar, FlatList](https://github.com/wix/react-native-calendars/blob/master/src/calendar/index.tsx,https://reactnative.dev/docs/flatlist)** props. +::: +
+ +
+ +## API +### pastScrollRange +Max amount of months allowed to scroll to the past +number + +### futureScrollRange +Max amount of months allowed to scroll to the future +number + +### calendarStyle +Specify style for calendar container element +ViewStyle + +### calendarHeight +Dynamic calendar height +number + +### calendarWidth +Used when calendar scroll is horizontal, (when pagingEnabled = false) +number + +### staticHeader +Whether to use a fixed header that doesn't scroll (when horizontal = true) +boolean + +### showScrollIndicator +Whether to enable or disable vertical / horizontal scroll indicator +boolean + diff --git a/docsRNC/docs/CalendarProvider.md b/docsRNC/docs/CalendarProvider.md new file mode 100644 index 0000000000..d3afc45e5a --- /dev/null +++ b/docsRNC/docs/CalendarProvider.md @@ -0,0 +1,56 @@ +Calendar context provider component +[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.tsx) +:::info +This component extends **[Context](https://reactjs.org/docs/context.html)** props. +::: +
+ +## API +### theme +Specify theme properties to override specific styles for calendar parts +Theme + +### style +Specify style for calendar container element +ViewStyle + +### date +Initial date in 'yyyy-MM-dd' format +string + +### onDateChanged +Handler which gets executed when the date changes +(date: string, updateSource: UpdateSource) => void + +### onMonthChange +Handler which gets executed when the month changes +(date: DateData, updateSource: UpdateSource) => void + +### disableAutoDaySelection +The calendar navigation type in which to disable the auto day selection (get options from ExpandableCalendar.navigationTypes) +CalendarNavigationTypes[] + +### showTodayButton +Whether to show the today button +boolean + +### todayButtonStyle +Today button's style +ViewStyle + +### todayBottomMargin +Today button's top position +number + +### disabledOpacity +The opacity for the disabled today button (0-1) +number + +### numberOfDays +The number of days to present in the timeline calendar (1-7) +number + +### timelineLeftInset +The left inset of the timeline calendar (sidebar width) +number + diff --git a/docsRNC/docs/ExpandableCalendar.md b/docsRNC/docs/ExpandableCalendar.md new file mode 100644 index 0000000000..213034b28e --- /dev/null +++ b/docsRNC/docs/ExpandableCalendar.md @@ -0,0 +1,55 @@ +Expandable calendar component +[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.tsx) +:::info +This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx)** props. +::: +**NOTE: This component should be wrapped with `CalendarProvider` component.** +
+ +
+ +## API +### initialPosition +The initial position of the calendar ('open' | 'closed') +Positions + +### onCalendarToggled +Handler which gets executed when the calendar is opened or closed +(isOpen: boolean) => void + +### disablePan +Whether to disable the pan gesture and disable the opening and closing of the calendar (initialPosition will persist) +boolean + +### hideKnob +Whether to hide the knob +boolean + +### leftArrowImageSource +The source for the left arrow image +ImageSourcePropType + +### rightArrowImageSource +The source for the right arrow image +ImageSourcePropType + +### allowShadow +Whether to have shadow/elevation for the calendar +boolean + +### disableWeekScroll +Whether to disable the week scroll in closed position +boolean + +### openThreshold +The threshold for opening the calendar with the pan gesture +number + +### closeThreshold +The threshold for closing the calendar with the pan gesture +number + +### closeOnDayPress +Whether to close the calendar on day press +boolean + diff --git a/docsRNC/docs/Timeline.md b/docsRNC/docs/Timeline.md new file mode 100644 index 0000000000..019eacbb66 --- /dev/null +++ b/docsRNC/docs/Timeline.md @@ -0,0 +1,58 @@ +Timeline component +[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/timelineCalendar.tsx) +:::info +This component extends **[ScrollView](https://reactnative.dev/docs/scrollview)** props. +::: +
+ +
+ +## API +### theme +Specify theme properties to override specific styles for calendar parts +Theme + +### events +List of events to render on the timeline +Event[] + +### start +The timeline day start time +number + +### end +The timeline day end time +number + +### onEventPress +Handler which gets executed when event is pressed +(event: Event) => void + +### onBackgroundLongPress +Handler which gets executed when background is long pressed. Pass to handle creation of a new event +(timeString: string, time: NewEventTime) => void + +### onBackgroundLongPressOut +Handler which gets executed when background's long pressed released. Pass to handle creation of a new event +(timeString: string, time: NewEventTime) => void + +### renderEvent +Specify a custom event block +(event: PackedEvent) => JSX.Element + +### scrollToFirst +Whether to scroll to the first event +boolean + +### format24h +Whether to use 24 hours format for the timeline hours +boolean + +### overlapEventsSpacing +Spacing between overlapping events +number + +### rightEdgeSpacing +Spacing to keep at the right edge (for background press) +number + diff --git a/docsRNC/docs/WeekCalendar.md b/docsRNC/docs/WeekCalendar.md new file mode 100644 index 0000000000..2f370db3cf --- /dev/null +++ b/docsRNC/docs/WeekCalendar.md @@ -0,0 +1,14 @@ +Week calendar component +[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.tsx) +:::info +This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx)** props. +::: +
+ +
+ +## API +### allowShadow +Whether to have shadow/elevation for the calendar +boolean + diff --git a/example/src/mocks/AgendaItem.d.ts b/example/src/mocks/AgendaItem.d.ts new file mode 100644 index 0000000000..f9dd904cce --- /dev/null +++ b/example/src/mocks/AgendaItem.d.ts @@ -0,0 +1,6 @@ +import React from 'react'; +interface ItemProps { + item: any; +} +declare const _default: React.MemoExoticComponent<(props: ItemProps) => React.JSX.Element>; +export default _default; diff --git a/example/src/mocks/AgendaItem.js b/example/src/mocks/AgendaItem.js new file mode 100644 index 0000000000..118570aab1 --- /dev/null +++ b/example/src/mocks/AgendaItem.js @@ -0,0 +1,68 @@ +import isEmpty from 'lodash/isEmpty'; +import React, { useCallback } from 'react'; +import { StyleSheet, Alert, View, Text, TouchableOpacity, Button } from 'react-native'; +import testIDs from '../testIDs'; +const AgendaItem = (props) => { + const { item } = props; + const buttonPressed = useCallback(() => { + Alert.alert('Show me more'); + }, []); + const itemPressed = useCallback(() => { + Alert.alert(item.title); + }, [item]); + if (isEmpty(item)) { + return ( + No Events Planned Today + ); + } + return ( + + {item.hour} + {item.duration} + + {item.title} + +