@3ddie/react-native-calendars 中文文档教程
React Native Calendars ✨ ????️ ????
分叉版本
该模块包括各种可自定义的 React 本机日历组件。
该软件包与 Android 和 iOS 兼容。
Try it out
您可以通过执行以下步骤来运行示例模块:
$ git clone git@github.com:wix/react-native-calendars.git
$ cd react-native-calendars/example
$ npm install
$ react-native run-ios
该项目与 Expo/CRNA 兼容(无需弹出),示例已在 在 Expo 上发布
Installation
$ npm install --save react-native-calendars
该解决方案是用 JavaScript 实现的,因此不需要本机模块链接。
Usage
导入{
日历, 日历列表, 议程< /a> } from 'react-native-calendars';
组件的所有参数都是可选的。 默认情况下,将显示当前本地日期的月份。
使用 日历对象
调用事件处理程序回调,如下所示:
{
day: 1, // day of month (1-31)
month: 1, // month of year (1-12)
year: 2017, // year
timestamp, // UTC timestamp representing 00:00 AM of this date
dateString: '2016-05-13' // date formatted as 'YYYY-MM-DD' string
}
需要日期类型的参数接受 YYYY-MM-DD 格式的日期字符串、JavaScript 日期对象、日历对象
和 UTC 时间戳。
可以通过将自定义区域设置添加到 LocaleConfig
对象来本地化日历:
import {LocaleConfig} from 'react-native-calendars';
LocaleConfig.locales['fr'] = {
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.']
};
LocaleConfig.defaultLocale = 'fr';
Calendar
Basic parameters
<Calendar
// Initially visible month. Default = Date()
current={'2012-03-01'}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={'2012-05-10'}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={'2012-05-30'}
// Handler which gets executed on day press. Default = undefined
onDayPress={(day) => {console.log('selected day', day)}}
// Handler which gets executed on day long press. Default = undefined
onDayLongPress={(day) => {console.log('selected day', day)}}
// Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
monthFormat={'yyyy MM'}
// Handler which gets executed when visible month changes in calendar. Default = undefined
onMonthChange={(month) => {console.log('month changed', month)}}
// Hide month navigation arrows. Default = false
hideArrows={true}
// Replace default arrows with custom ones (direction can be 'left' or 'right')
renderArrow={(direction) => (<Arrow />)}
// Do not show days of other months in month page. Default = false
hideExtraDays={true}
// If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
// day from another month that is visible in calendar page. Default = false
disableMonthChange={true}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={1}
// Hide day names. Default = false
hideDayNames={true}
// Show week numbers to the left. Default = false
showWeekNumbers={true}
// Handler which gets executed when press arrow icon left. It receive a callback can go back month
onPressArrowLeft={substractMonth => substractMonth()}
// Handler which gets executed when press arrow icon left. It receive a callback can go next month
onPressArrowRight={addMonth => addMonth()}
/>
Date marking
!免责声明!确保markedDates
参数是不可变的。 如果您更改 markedDates
对象内容但对它的引用未更改,则不会触发日历更新。
点标记
<Calendar
// Collection of dates that have to be marked. Default = {}
markedDates={{
'2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
'2012-05-17': {marked: true},
'2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
'2012-05-19': {disabled: true, disableTouchEvent: true}
}}
/>
您可以为每一天单独自定义一个圆点颜色。
多点标记
如果要显示多个点,请使用 markingType = 'multi-dot'。 Calendar 和 CalendarList 控件都通过在 markedDates 中使用“点”数组来支持多个点。 属性“color”是必需的,而“key”和“selectedColor”是可选的。 如果省略键,则数组索引用作键。 如果省略 selectedColor,则“颜色”将用于选定日期。
const vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};
const massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};
const workout = {key:'workout', color: 'green'};
<Calendar
markedDates={{
'2017-10-25': {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'},
'2017-10-26': {dots: [massage, workout], disabled: true},
}},
markingType={'multi-dot'}
/>
句点标记
<Calendar
// Collection of dates that have to be colored in a special way. Default = {}
markedDates={
{'2012-05-20': {textColor: 'green'},
'2012-05-22': {startingDay: true, color: 'green'},
'2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
'2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
}}
// Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
markingType={'period'}
/>
多周期标记
注意:只有
组件完全支持此标记,因为它会扩展其高度。 与
一起使用可能会导致溢出问题。
<Calendar
markedDates={{
'2017-12-14': {
periods: [
{ startingDay: false, endingDay: true, color: '#5f9ea0' },
{ startingDay: false, endingDay: true, color: '#ffa500' },
{ startingDay: true, endingDay: false, color: '#f0e68c' },
]
},
'2017-12-15': {
periods: [
{ startingDay: true, endingDay: false, color: '#ffa500' },
{ color: 'transparent' },
{ startingDay: false, endingDay: false, color: '#f0e68c' },
]
},
}}
// Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
markingType='multi-period'
/>
自定义标记允许您使用自定义样式自定义每个标记。
<知识库>
<Calendar
// Date marking style [simple/period/multi-dot/single]. Default = 'simple'
markingType={'custom'}
markedDates={{
'2018-03-28': {
customStyles: {
container: {
backgroundColor: 'green',
},
text: {
color: 'black',
fontWeight: 'bold'
},
},
},
'2018-03-29': {
customStyles: {
container: {
backgroundColor: 'white',
elevation: 2
},
text: {
color: 'blue',
},
}
}}}
/>
请记住,不同的标记类型是不兼容的。 您只能为日历使用一种标记样式。
Displaying data loading indicator
<知识库>
如果
有 displayLoadingIndicator
属性,而 markedDays
集合没有,则月份名称旁边的加载指示器将显示对相关月份的每一天都有一个值。 当您加载几天的数据时,只需将 []
或特殊标记值设置为 markedDates
集合中的所有日期。
Customizing look & feel
<Calendar
// Specify style for calendar container element. Default = {}
style={{
borderWidth: 1,
borderColor: 'gray',
height: 350
}}
// Specify theme properties to override specific styles for calendar parts. Default = {}
theme={{
backgroundColor: '#ffffff',
calendarBackground: '#ffffff',
textSectionTitleColor: '#b6c1cd',
selectedDayBackgroundColor: '#00adf5',
selectedDayTextColor: '#ffffff',
todayTextColor: '#00adf5',
dayTextColor: '#2d4150',
textDisabledColor: '#d9e1e8',
dotColor: '#00adf5',
selectedDotColor: '#ffffff',
arrowColor: 'orange',
monthTextColor: 'blue',
textDayFontFamily: 'monospace',
textMonthFontFamily: 'monospace',
textDayHeaderFontFamily: 'monospace',
textMonthFontWeight: 'bold',
textDayFontSize: 16,
textMonthFontSize: 16,
textDayHeaderFontSize: 16
}}
/>
Advanced styling
如果你想完全控制日历样式,你可以通过覆盖默认的 style.js 文件来实现。 例如,如果您想首先覆盖日历标题样式,您必须找到此文件的样式表 ID:
https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style。 js#L4
在本例中为“stylesheet.calendar.header”。 接下来,您可以使用此 ID 将覆盖样式表添加到您的主题。
https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.js#L56
theme={{
arrowColor: 'white',
'stylesheet.calendar.header': {
week: {
marginTop: 5,
flexDirection: 'row',
justifyContent: 'space-between'
}
}
}}
免责声明:由于使用样式表覆盖后出现问题而出现的问题将不被支持。 使用此选项需要您自担风险。
Overriding day component
如果您需要当前组件实现不支持的自定义功能,您可以通过自己的自定义日期 日历的组成部分。
<Calendar
style={[styles.calendar, {height: 300}]}
dayComponent={({date, state}) => {
return (<View style={{flex: 1}}><Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>{date.day}</Text></View>);
}}
/>
dayComponent 道具必须接收接收道具的 RN 组件或函数。 日期组件将收到这样的道具:
- state - disabled if the day should be disabled (this is decided by base calendar component)
- marking - markedDates value for this day
- date - the date object representing this day
提示:不要忘记为您的自定义日期组件实现 shouldComponentUpdate 以使日历性能更好
如果您实现了一个很棒的日期组件,请进行 PR 以便其他人可以使用它 :)
CalendarList
是由
组件组成的可滚动的半无限日历。 目前可以向后滚动 4 年和向后滚动 4 年。
可用的所有参数也可用于此组件。 还有一些额外的参数可以使用:
<CalendarList
// Callback which gets executed when visible months change in scroll view. Default = undefined
onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={50}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={50}
// Enable or disable scrolling of calendar list
scrollEnabled={true}
// Enable or disable vertical scroll indicator. Default = false
showScrollIndicator={true}
...calendarParams
/>
Horizontal CalendarList
您还可以使 CalendarList
水平滚动。 为此,您需要将特定道具传递给 CalendarList
:
<CalendarList
// Enable horizontal scrolling, default = false
horizontal={true}
// Enable paging on horizontal, default = false
pagingEnabled={true}
// Set custom calendarWidth.
calendarWidth={320}
...calendarListParams
...calendarParams
/>
Agenda
一个高级议程组件,可以显示日历日项目的交互式列表。
<Agenda
// 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 kas 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
items={
{'2012-05-22': [{text: 'item 1 - any js object'}],
'2012-05-23': [{text: 'item 2 - any js object'}],
'2012-05-24': [],
'2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],
}}
// callback that gets called when items for a certain month should be loaded (month became visible)
loadItemsForMonth={(month) => {console.log('trigger items loading')}}
// callback that fires when the calendar is opened or closed
onCalendarToggled={(calendarOpened) => {console.log(calendarOpened)}}
// callback that gets called on day press
onDayPress={(day)=>{console.log('day pressed')}}
// callback that gets called when day changes while scrolling agenda list
onDayChange={(day)=>{console.log('day changed')}}
// initially selected day
selected={'2012-05-16'}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={'2012-05-10'}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={'2012-05-30'}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={50}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={50}
// specify how each item should be rendered in agenda
renderItem={(item, firstItemInDay) => {return (<View />);}}
// specify how each date should be rendered. day can be undefined if the item is not first in that day.
renderDay={(day, item) => {return (<View />);}}
// specify how empty date content with no items should be rendered
renderEmptyDate={() => {return (<View />);}}
// specify how agenda knob should look like
renderKnob={() => {return (<View />);}}
// specify what should be rendered instead of ActivityIndicator
renderEmptyData = {() => {return (<View />);}}
// specify your item comparison function for increased performance
rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
// Hide knob button. Default = false
hideKnob={true}
// By default, agenda dates are marked if they have at least one item, but you can override this if needed
markedDates={{
'2012-05-16': {selected: true, marked: true},
'2012-05-17': {marked: true},
'2012-05-18': {disabled: true}
}}
// If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
onRefresh={() => console.log('refreshing...')}
// Set this true while waiting for new data from a refresh
refreshing={false}
// Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView.
refreshControl={null}
// agenda theme
theme={{
...calendarTheme,
agendaDayTextColor: 'yellow',
agendaDayNumColor: 'green',
agendaTodayColor: 'red',
agendaKnobColor: 'blue'
}}
// agenda container style
style={{}}
/>
Authors
- Tautvilas Mecinskas - Initial code - @tautvilas
- Katrin Zotchev - Initial design - @katrin_zot
另请参阅参与此项目的贡献者列表。
Contributing
欢迎请求请求。 npm run test
和 npm run lint
推送前。
React Native Calendars ✨ ????️ ????
Forked version
This module includes various customizable react native calendar components.
The package is both Android and iOS compatible.
Try it out
You can run example module by performing these steps:
$ git clone git@github.com:wix/react-native-calendars.git
$ cd react-native-calendars/example
$ npm install
$ react-native run-ios
You can check example screens source code in example module screens
This project is compatible with Expo/CRNA (without ejecting), and the examples have been published on Expo
Installation
$ npm install --save react-native-calendars
The solution is implemented in JavaScript so no native module linking is required.
Usage
import {
Calendar, CalendarList, Agenda } from 'react-native-calendars';
All parameters for components are optional. By default the month of current local date will be displayed.
Event handler callbacks are called with calendar objects
like this:
{
day: 1, // day of month (1-31)
month: 1, // month of year (1-12)
year: 2017, // year
timestamp, // UTC timestamp representing 00:00 AM of this date
dateString: '2016-05-13' // date formatted as 'YYYY-MM-DD' string
}
Parameters that require date types accept YYYY-MM-DD formated datestrings, JavaScript date objects, calendar objects
and UTC timestamps.
Calendars can be localized by adding custom locales to LocaleConfig
object:
import {LocaleConfig} from 'react-native-calendars';
LocaleConfig.locales['fr'] = {
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.']
};
LocaleConfig.defaultLocale = 'fr';
Calendar
Basic parameters
<Calendar
// Initially visible month. Default = Date()
current={'2012-03-01'}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={'2012-05-10'}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={'2012-05-30'}
// Handler which gets executed on day press. Default = undefined
onDayPress={(day) => {console.log('selected day', day)}}
// Handler which gets executed on day long press. Default = undefined
onDayLongPress={(day) => {console.log('selected day', day)}}
// Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
monthFormat={'yyyy MM'}
// Handler which gets executed when visible month changes in calendar. Default = undefined
onMonthChange={(month) => {console.log('month changed', month)}}
// Hide month navigation arrows. Default = false
hideArrows={true}
// Replace default arrows with custom ones (direction can be 'left' or 'right')
renderArrow={(direction) => (<Arrow />)}
// Do not show days of other months in month page. Default = false
hideExtraDays={true}
// If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
// day from another month that is visible in calendar page. Default = false
disableMonthChange={true}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={1}
// Hide day names. Default = false
hideDayNames={true}
// Show week numbers to the left. Default = false
showWeekNumbers={true}
// Handler which gets executed when press arrow icon left. It receive a callback can go back month
onPressArrowLeft={substractMonth => substractMonth()}
// Handler which gets executed when press arrow icon left. It receive a callback can go next month
onPressArrowRight={addMonth => addMonth()}
/>
Date marking
!Disclaimer! Make sure that markedDates
param is immutable. If you change markedDates
object content but the reference to it does not change calendar update will not be triggered.
Dot marking
<Calendar
// Collection of dates that have to be marked. Default = {}
markedDates={{
'2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
'2012-05-17': {marked: true},
'2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
'2012-05-19': {disabled: true, disableTouchEvent: true}
}}
/>
You can customise a dot color for each day independently.
Multi-Dot marking
Use markingType = 'multi-dot' if you want to display more than one dot. Both the Calendar and CalendarList control support multiple dots by using 'dots' array in markedDates. The property 'color' is mandatory while 'key' and 'selectedColor' are optional. If key is omitted then the array index is used as key. If selectedColor is omitted then 'color' will be used for selected dates.
const vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};
const massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};
const workout = {key:'workout', color: 'green'};
<Calendar
markedDates={{
'2017-10-25': {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'},
'2017-10-26': {dots: [massage, workout], disabled: true},
}},
markingType={'multi-dot'}
/>
Period marking
<Calendar
// Collection of dates that have to be colored in a special way. Default = {}
markedDates={
{'2012-05-20': {textColor: 'green'},
'2012-05-22': {startingDay: true, color: 'green'},
'2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
'2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
}}
// Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
markingType={'period'}
/>
Multi-period marking
CAUTION: This marking is only fully supported by the <Calendar />
component because it expands its height. Usage with <CalendarList />
might lead to overflow issues.
<Calendar
markedDates={{
'2017-12-14': {
periods: [
{ startingDay: false, endingDay: true, color: '#5f9ea0' },
{ startingDay: false, endingDay: true, color: '#ffa500' },
{ startingDay: true, endingDay: false, color: '#f0e68c' },
]
},
'2017-12-15': {
periods: [
{ startingDay: true, endingDay: false, color: '#ffa500' },
{ color: 'transparent' },
{ startingDay: false, endingDay: false, color: '#f0e68c' },
]
},
}}
// Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
markingType='multi-period'
/>
Custom marking allows you to customize each marker with custom styles.
<Calendar
// Date marking style [simple/period/multi-dot/single]. Default = 'simple'
markingType={'custom'}
markedDates={{
'2018-03-28': {
customStyles: {
container: {
backgroundColor: 'green',
},
text: {
color: 'black',
fontWeight: 'bold'
},
},
},
'2018-03-29': {
customStyles: {
container: {
backgroundColor: 'white',
elevation: 2
},
text: {
color: 'blue',
},
}
}}}
/>
Keep in mind that different marking types are not compatible. You can use just one marking style for calendar.
Displaying data loading indicator
The loading indicator next to month name will be displayed if <Calendar />
has displayLoadingIndicator
property and markedDays
collection does not have a value for every day of the month in question. When you load data for days, just set []
or special marking value to all days in markedDates
collection.
Customizing look & feel
<Calendar
// Specify style for calendar container element. Default = {}
style={{
borderWidth: 1,
borderColor: 'gray',
height: 350
}}
// Specify theme properties to override specific styles for calendar parts. Default = {}
theme={{
backgroundColor: '#ffffff',
calendarBackground: '#ffffff',
textSectionTitleColor: '#b6c1cd',
selectedDayBackgroundColor: '#00adf5',
selectedDayTextColor: '#ffffff',
todayTextColor: '#00adf5',
dayTextColor: '#2d4150',
textDisabledColor: '#d9e1e8',
dotColor: '#00adf5',
selectedDotColor: '#ffffff',
arrowColor: 'orange',
monthTextColor: 'blue',
textDayFontFamily: 'monospace',
textMonthFontFamily: 'monospace',
textDayHeaderFontFamily: 'monospace',
textMonthFontWeight: 'bold',
textDayFontSize: 16,
textMonthFontSize: 16,
textDayHeaderFontSize: 16
}}
/>
Advanced styling
If you want to have complete control over calendar styles you can do it by overriding default style.js files. For example, if you want to override calendar header style first you have to find stylesheet id for this file:
https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.js#L4
In this case it is 'stylesheet.calendar.header'. Next you can add overriding stylesheet to your theme with this id.
https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.js#L56
theme={{
arrowColor: 'white',
'stylesheet.calendar.header': {
week: {
marginTop: 5,
flexDirection: 'row',
justifyContent: 'space-between'
}
}
}}
Disclaimer: issues that arise because something breaks after using stylesheet override will not be supported. Use this option at your own risk.
Overriding day component
If you need custom functionality not supported by current day component implementations you can pass your own custom day component to the calendar.
<Calendar
style={[styles.calendar, {height: 300}]}
dayComponent={({date, state}) => {
return (<View style={{flex: 1}}><Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>{date.day}</Text></View>);
}}
/>
The dayComponent prop has to receive a RN component or function that receive props. The day component will receive such props:
- state - disabled if the day should be disabled (this is decided by base calendar component)
- marking - markedDates value for this day
- date - the date object representing this day
Tip: Don't forget to implement shouldComponentUpdate for your custom day component to make calendar perform better
If you implement an awesome day component please make a PR so that other people could use it :)
CalendarList
<CalendarList />
is scrollable semi-infinite calendar composed of <Calendar />
components. Currently it is possible to scroll 4 years back and 4 years to the future. All paramters that are available for <Calendar />
are also available for this component. There are also some additional params that can be used:
<CalendarList
// Callback which gets executed when visible months change in scroll view. Default = undefined
onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={50}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={50}
// Enable or disable scrolling of calendar list
scrollEnabled={true}
// Enable or disable vertical scroll indicator. Default = false
showScrollIndicator={true}
...calendarParams
/>
Horizontal CalendarList
You can also make the CalendarList
scroll horizontally. To do that you need to pass specific props to the CalendarList
:
<CalendarList
// Enable horizontal scrolling, default = false
horizontal={true}
// Enable paging on horizontal, default = false
pagingEnabled={true}
// Set custom calendarWidth.
calendarWidth={320}
...calendarListParams
...calendarParams
/>
Agenda
An advanced agenda component that can display interactive listings for calendar day items.
<Agenda
// 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 kas 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
items={
{'2012-05-22': [{text: 'item 1 - any js object'}],
'2012-05-23': [{text: 'item 2 - any js object'}],
'2012-05-24': [],
'2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],
}}
// callback that gets called when items for a certain month should be loaded (month became visible)
loadItemsForMonth={(month) => {console.log('trigger items loading')}}
// callback that fires when the calendar is opened or closed
onCalendarToggled={(calendarOpened) => {console.log(calendarOpened)}}
// callback that gets called on day press
onDayPress={(day)=>{console.log('day pressed')}}
// callback that gets called when day changes while scrolling agenda list
onDayChange={(day)=>{console.log('day changed')}}
// initially selected day
selected={'2012-05-16'}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={'2012-05-10'}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={'2012-05-30'}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={50}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={50}
// specify how each item should be rendered in agenda
renderItem={(item, firstItemInDay) => {return (<View />);}}
// specify how each date should be rendered. day can be undefined if the item is not first in that day.
renderDay={(day, item) => {return (<View />);}}
// specify how empty date content with no items should be rendered
renderEmptyDate={() => {return (<View />);}}
// specify how agenda knob should look like
renderKnob={() => {return (<View />);}}
// specify what should be rendered instead of ActivityIndicator
renderEmptyData = {() => {return (<View />);}}
// specify your item comparison function for increased performance
rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
// Hide knob button. Default = false
hideKnob={true}
// By default, agenda dates are marked if they have at least one item, but you can override this if needed
markedDates={{
'2012-05-16': {selected: true, marked: true},
'2012-05-17': {marked: true},
'2012-05-18': {disabled: true}
}}
// If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
onRefresh={() => console.log('refreshing...')}
// Set this true while waiting for new data from a refresh
refreshing={false}
// Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView.
refreshControl={null}
// agenda theme
theme={{
...calendarTheme,
agendaDayTextColor: 'yellow',
agendaDayNumColor: 'green',
agendaTodayColor: 'red',
agendaKnobColor: 'blue'
}}
// agenda container style
style={{}}
/>
Authors
- Tautvilas Mecinskas - Initial code - @tautvilas
- Katrin Zotchev - Initial design - @katrin_zot
See also the list of contributors who participated in this project.
Contributing
Pull requests are welcome. npm run test
and npm run lint
before push.