进口：
import { Component } from 'react';
import { Text, View, StyleSheet, Image, NetInfo }
from 'react-native'; import { Agenda } from
'react-native-calendars';
import moment from 'moment';
我的变量：
let url = '';
let eventText = '';
let isevent = false;
let eventDate = '';
let finalLength = 0;
let currentdate = new Date().getDate();
let currentmonth = new Date().getMonth() + 1; //Current Month. let
currentyear = new Date().getFullYear(); //Current Year. let
formatCurrentData = '';
let timeMax = '2019-09-23T10:00:00-07:00';
let timeMin ='2019-09-21T10:00:00-07:00';
let timeZone = 'GMT+5:30';
let date;
类组件：
export default class EventCalendar extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
currentMonth: '',
localArray: [],
olderArr: [],
finalLength: 0,
selectedDateShow: '',
currentdate: ''
}; } componentDidMount() {
formatCurrentData = currentyear + "-" + currentmonth + "-" + currentdate;
NetInfo.isConnected.fetch().done(isConnected => {
if (isConnected == true) {
axios
.get(url)
.then(res => {
return res.data;
})
.then(data => {
this.onDayPress({
dateString: "2019-09-28",
day: 28,
month: 9,
timestamp: 1569651352,
year: 2018
}, "2019-09-28");
});
} else {
}
});
}
onDayPress函数：
onDayPress(day, lastdate) {
let selectedDate = day.year + "-" + day.month + "-" + day.day;
date = day.dateString;
this.setState({ currentdate: day.dateString })
let PreviousDate = parseFloat(day.day) - 1;
timeMax = selectedDate + "T10:00:00-07:00";
timeMin = day.year + "-" + day.month + "-" + PreviousDate + "T10:00:00-07:00";
NetInfo.isConnected.fetch().done(isConnected => {
if (isConnected == true) {
let url =
url;
axios
.get(url)
.then(res => {
return res.data;
})
.then(data => {
let lenghtArray = data.items.length;
setTimeout(() => {
let DateArrlength = this.state.items[date].length;
if (DateArrlength == 1) {
for (let i = 0; i < lenghtArray; i++) {
this.state.items[date].push({
eventName: data.items[i].summary,
isAdd: "true"
});
if (i == lenghtArray - 1) {
let finalLength = this.state.items[date].length;
console.warn('Array of items before', this.state.items[date])
this.state.items[lastdate] = [];
console.warn('Array of items', this.state.items[date])
for (i = 0; i < finalLength - 1; i++) {
delete this.state.items[lastdate]
} }}}}, 1000);});}); } render() {
return (
<View style={{ backgroundColor: '#FFFFFF', flex: 1 }}>
<Agenda
items={this.state.items}
loadItemsForMonth={this.loadItems.bind(this)}
selected={formatCurrentData}
renderItem={this.renderItem.bind(this)}
renderEmptyDate={this.renderEmptyDate.bind(this)}
rowHasChanged={this.rowHasChanged.bind(this)}
onDayPress={(day) => this.onDayPress(day, this.state.currentdate)}
theme={{
agendaKnobColor: '#BD10E0', selectedDayBackgroundColor: '#BD10E0',
dotColor: '#FFFFFF', monthTextColor: '#BD10E0', indicatorColor: '#BD10E0',
agendaDayTextColor: '#BD10E0', agendaDayNumColor: '#BD10E0',
agendaTodayColor: '#BD10E0', todayTextColor: '#BD10E0',
selectedDotColor: '#BD10E0',
}}
/>
</View>
);}
loadItems函数：
loadItems(day) {
setTimeout(() => {
for (let i = -15; i < 85; i++) {
const time = day.timestamp + i * 24 * 60 * 60 * 1000;
const strTime = this.timeToString(time);
if (!this.state.items[strTime]) {
this.state.items[strTime] = [];
const numItems = Math.floor(Math.random() * 5);
this.state.items[strTime].push({
name: "Item for " + strTime,
height: Math.max(90, Math.floor(Math.random() * 130))
});
for (let j = 0; j < numItems; j++) {
}
}}
const newItems = {};
Object.keys(this.state.items).forEach(key => {
newItems[key] = this.state.items[key];
});
this.setState({
items: newItems
});
}, 1000);} renderItem(items, index) {
if (items.isAdd == "true") {
return (
<View style={{ flexDirection: 'row' }}>
<View style={[styles.item, { height: items.height }]}>
<Text style={{ color: "#473F4E", fontSize: 15 }}>
{items.eventName}
</Text>
<View
style={{ flexDirection: "row", alignItems: "center", marginTop: 4 }}
>
<Text style={{ color: "#BD10E0", fontSize: 12, marginLeft: 6 }}>4 pm</Text>
</View>
<Text style={{ marginTop: 4, color: "#959595", fontSize: 12 }}>Kuwait city</Text>
</View>
</View>
);}}
renderEmptyDate() {
return (
null
);} rowHasChanged(r1, r2) {
return r1.name !== r2.name; } timeToString(time) {
const date = new Date(time);
return date.toISOString().split('T')[0]; }}
样式：
const styles = StyleSheet.create({ item: {
backgroundColor: '#FFFFFF',
flex: 1,
borderRadius: 5,
padding: 10,
marginRight: 10,
marginTop: 17, }, emptyDate: {
height: 15,
flex: 1,
paddingTop: 30 }});