WeekView props
events
Events to display, in Event Item format. See details in EventItem docs.
| type | array of EventItem |
selectedDate
Date to show the week-view in the first render.
| type | Date |
Changing this prop after the first render will not have any effect in the week-view.
To actually move the week-view, use the goToDate() method, for details see navigating guide.
numberOfDays
Number of days to show in one page.
| type | 1 | 3 | 5 | 7 |
Styles and formats
headerStyle
Custom styles for header container. Example: { backgroundColor: '#4286f4', color: '#fff', borderColor: '#fff' }
| type | object |
| default | null |
headerTextStyle
Custom styles for text inside header. Applied to day names and month name (i.e. title).
| type | object |
| default | { fontSize: 12, color: 'black' } |
hourTextStyle
Custom styles for text displaying hours at the left.
| type | object |
| default | { fontSize: 12, color: 'black' } |
hourContainerStyle
Custom styles for the container showing hours at the left.
| type | object |
| default | null |
eventContainerStyle
Custom styles for each event item container. Note: the background color and (absolute) positioning are already set.
| type | object |
| default | { alignItems: 'center', borderRadius: 0 } |
eventTextStyle
Custom styles for the event text. Ignored if EventComponent is provided.
| type | object |
| default | { color: '#fff', textAlign: 'center', fontSize: 15, marginVertical: 8, marginHorizontal: 2 } |
allDayEventContainerStyle
Custom styles for each all-day event container. Note: the background color and (absolute) positioning are already set.
| type | object |
| default | null |
gridRowStyle
Prop to customize width and color of horizontal lines.
| type | { borderTopWidth: <width>, borderColor: <color> } |
| default | { borderTopWidth: 1, color: '#E9EDF0' } |
gridColumnStyle
Prop to customize width and color of vertical lines.
| type | { borderLeftWidth: <width>, borderColor: <color> } |
| default | { borderLeftWidth: 1, color: '#E9EDF0' } |
formatDateHeader
Formatter for dates in the header. See all formatters in momentjs.
| type | string |
| default | 'MMM D' (e.g. 'Apr 3') |
formatTimeLabel
Formatter for the time labels at the left. Other examples, AM/PM: "h:mm A" or "h:mm a" for lowercase. See all formatters in momentjs.
| type | string |
| default | H:mm (24h) |
Custom components
EventComponent
Custom component rendered inside an event. By default, is a Text with the event.description. See custom component guide for an example.
| type | ReactComponent |
| default | Text |
AllDayEventComponent
Custom component rendered inside an all-day event. By default, is a Text with the event.description.
| type | ReactComponent |
| default | <Text numberOfLines={1} ellipsizeMode='tail'/> |
TodayHeaderComponent
Custom component to highlight today in the header (by default, today looks the same than every day). See custom component guide for an example.
| type | ReactComponent |
| default | null |
DayHeaderComponent
Custom component to show each day in the header. If provided, overrides TodayHeaderComponent. See custom component guide for an example.
| type | ReactComponent |
| default | null |
RefreshComponent
Custom component used when isRefreshing is true. See custom component guide for an example
| type | ReactComponent |
| default | ActivityIndicator |
Day pages configuration
pageStartAt
Indicates what date to show in the top-left corner.
If left: value provided, the selectedDate will appear at value days from the left. If weekday: value (e.g. tuesday = 2) is provided, the latest tuesday will appear in the left.
| type | {left: number, weekday: number} |
| default | {left:0} |
allowScrollByDay
When true, the component can scroll horizontally one day at the time. When false, the horizontal scroll can only be done one page at the time (i.e. numberOfDays at the time).
| type | bool |
| default | false |
Time of day configurations
startHour
Vertical position of the week-view in the first render (vertically in the agenda).
| type | number (hours) |
| default | 8 am |
hoursInDisplay
Amount of hours to display vertically in the agenda. Increasing this number will make the events look smaller.
| type | number (hours) |
| default | 6 |
beginAgendaAt
Time of day to start the agenda at the top (grid above is left out). For example, for 8 am set beginAgendaAt={8*60}.
| type | number (minutes) |
| default | 0 |
endAgendaAt
Time of day to end the agenda at the bottom (anything past that time is left out). For example, set engAgendaAt={22*60} for 10pm.
| type | number (minutes) |
| default | 24*60 |
timeStep
Number of minutes to use as step in the time labels at the left. Increasing this number will increase the vertical space between grid lines.
| type | number (minutes) |
| default | 60 |
More configurations
enableVerticalPinch
Whether or not to enable vertical pinch gesture.
| type | boolean |
| default | false |
showNowLine
If true, displays a line indicating the time right now.
| type | boolean |
| default | false |
nowLineColor
Color used for the now-line.
| type | string |
| default | #E53935 (red) |
showTitle
Show or hide the selected month and year in the top-left corner (a.k.a the title).
| type | bool |
| default | true |
timesColumnWidth
Customize the width of the times column at the left. If the value is in range 0..1 indicates a percentage of the screen width (e.g. 0.18 --> 18%). Otherwise is the amount of pixels (e.g. 40 pixels).
| type | number |
| default | 0.18 (18% of screen-width) |
locale
Locale for the dates (e.g. header). There's an addLocale() function to add your own locale, see details in the localization guide.
| type | string |
| default | en |
fixedHorizontally
If true, the component cannot scroll horizontally.
| type | boolean |
| default | false |
isRefreshing
When true, the week-view will show an <ActivityIndicator /> in the middle of the grid.
| type | boolean |
| default | false |
rightToLeft
If true, render older days to the right and more recent days to the left.
| type | boolean |
| default | false |
Press callbacks
onEventPress
Callback when an event item is pressed, receives the event-item pressed: (event) => {}.
| type | function |
onEventLongPress
Callback when an event item is long pressed, same signature as onEventPress. Signature: (event) => {}
| type | function |
| default | null |
onGridClick
Callback when the grid view is pressed. Arguments: pressEvent: object passed by the react-native-gesture-handler touch events (not an event item); startHour: Number, hour pressed; date Date, date object indicating day and time pressed with precision up to seconds. Note: startHour is redundant (can be extracted from date), but is kept for backward-compatibility. Signature: (pressEvent, startHour, date) => {}
| type | function |
| default | null |
onGridLongPress
Callback when the grid view is long-pressed. Same signature as onGridClick Signature: (pressEvent, startHour, date) => {}
| type | function |
| default | null |
onDayPress
Callback when a day from the header is pressed. Signature: (date, formattedDate) => {}
| type | function |
| default | null |
onMonthPress
Callback when the month at the top left (title) is pressed. Signature: (date, formattedDate) => {}
| type | function |
| default | null |
Scroll callbacks
onSwipeNext
Callback when week-view is swiped to next week/days, receives new date shown. Signature: (date) => {}
| type | function |
| default | null |
onSwipePrev
Callback when week-view is swiped to previous week/days, same signature as onSwipeNext. Signature: (date) => {}
| type | function |
| default | null |
onTimeScrolled
Callback when the agenda is scrolled vertically. Signature: (dateWithTime) => {}
| type | function |
| default | null |
Drag props
onDragEvent
Callback when an event item is dragged to another position. Arguments: event: event-item moved, and the newStartDate and newEndDate are Date objects with day and hour of the new position (precision up to minutes). With this callback you must trigger an update on the events prop (i.e. update your DB), with the updated information from the event. Signature: (event, newStartDate, newEndDate) => update DB
| type | function |
| default | null |
dragEventConfig
If provided, events are only draggable after being long pressed for some time. Requires rn-gesture-handler v2.6.0 or higher. Disables the onLongPress callback.
| type | {afterLongPressDuration: milliseconds} |
| default | {afterLongPressDuration: 0} |
Edit props
onEditEvent
Callback when an event item is edited by dragging its borders. Signature: (event, newStartDate, newEndDate) => update DB.
| type | function |
| default | null |
editingEvent
Event id indicating the event currently being edited.
| type | number | string |
| default | null |
editEventConfig
Sides allowed to be edited.
| type | { bottom: bool, top: bool, left: bool, right: bool } |
| default | { bottom: true } |
Horizontal list optimizations
windowSize
Number of pages to render at the same time. One page is composed by numberOfDays days. See in optimizing FlatList docs
| type | number |
| default | 5 |
initialNumToRender
Initial number of pages to render. See in optimizing FlatList docs
| type | number |
| default | 5 |
maxToRenderPerBatch
See in optimizing FlatList docs.
| type | number |
| default | 2 |
updateCellsBatchingPeriod
See in optimizing FlatList docs
| type | number |
| default | 50 |
Patch props
prependMostRecent
If true, the horizontal prepending is done in the most recent dates when scrolling. See known issues.
| type | bool |
| default | false |
runOnJS
Passed to react-native-gesture-handler. Might be needed to prevent an ANR bug in android, see details in [this issue](this issue)
| type | bool |
| default | false |