-
Notifications
You must be signed in to change notification settings - Fork 0
/
AgendaScreen.js
105 lines (97 loc) · 2.94 KB
/
AgendaScreen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import {Agenda} from 'react-native-calendars';
export default class AgendaScreen extends Component {
constructor(props) {
super(props);
this.state = {
items: {}
};
}
render() {
return (
<Agenda
items={this.state.items}
loadItemsForMonth={this.loadItems.bind(this)}
// selected={'2017-05-16'}
renderItem={this.renderItem.bind(this)}
renderEmptyDate={this.renderEmptyDate.bind(this)}
rowHasChanged={this.rowHasChanged.bind(this)}
// markingType={'period'}
// markedDates={{
// '2017-05-08': {textColor: '#666'},
// '2017-05-09': {textColor: '#666'},
// '2017-05-14': {startingDay: true, endingDay: true, color: 'blue'},
// '2017-05-21': {startingDay: true, color: 'blue'},
// '2017-05-22': {endingDay: true, color: 'gray'},
// '2017-05-24': {startingDay: true, color: 'gray'},
// '2017-05-25': {color: 'gray'},
// '2017-05-26': {endingDay: true, color: 'gray'}}}
// monthFormat={'yyyy'}
// theme={{calendarBackground: 'red', agendaKnobColor: 'green'}}
//renderDay={(day, item) => (<Text>{day ? day.day: 'item'}</Text>)}
/>
);
}
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);
for (let j = 0; j < numItems; j++) {
this.state.items[strTime].push({
name: 'Item for ' + strTime,
height: Math.max(50, Math.floor(Math.random() * 150))
});
}
}
}
//console.log(this.state.items);
const newItems = {};
Object.keys(this.state.items).forEach(key => {newItems[key] = this.state.items[key];});
this.setState({
items: newItems
});
}, 200);
// console.log(`Load Items for ${day.year}-${day.month}`);
}
renderItem(item) {
return (
<View style={[styles.item, {height: item.height}]}><Text>{item.name}</Text></View>
);
}
renderEmptyDate() {
return (
<View style={styles.emptyDate}><Text>This is empty date!</Text></View>
);
}
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: 'white',
flex: 1,
borderRadius: 5,
padding: 10,
marginRight: 10,
marginTop: 17
},
emptyDate: {
height: 15,
flex:1,
paddingTop: 30
}
});