improved calendar pg

This commit is contained in:
Emily Liu 2020-12-07 01:07:48 -05:00
parent dae85bb30c
commit a7143f631b

View File

@ -38,16 +38,20 @@ const Event = ({item}) => {
<> <>
<Text style={{fontSize:20}}>{item.item.text}</Text> <Text style={{fontSize:20}}>{item.item.text}</Text>
<Text style={{fontSize:20}}>Location: {item.item.location}</Text> <Text style={{fontSize:20}}>Location: {item.item.location}</Text>
<Text style={{fontSize:20}}>Date: {`${date[1]}/${date[2]}/${date[0]}`}</Text>
</> </>
) )
if (itemDate >= today) { if (itemDate >= today) {
return ( return (
<TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}> <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row'}}> <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
<Image source ={require('./assets/calendar.png')} style = {{height: 40, width: 40, marginRight: 15}}/> <Image source ={require('./assets/calendar.png')} style = {{height: 40, width: 40, marginRight: 15}}/>
<Text style={styles.title3}>{item.item.title}</Text> <Text style={styles.title3}>{item.item.title}</Text>
</View> </View>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
<Text style = {{fontSize: 16, alignSelf: 'center'}}>{`${date[1]}/${date[2]}/${date[0]}`}</Text>
</View>
</View>
{visible?extra:<></>} {visible?extra:<></>}
</TouchableOpacity> </TouchableOpacity>
) )
@ -55,9 +59,14 @@ const Event = ({item}) => {
else { else {
return ( return (
<TouchableOpacity style={{backgroundColor: '#e3e3e3', padding: 15, borderBottomWidth: 1, borderColor: 'black', width: '100%',}} onPress={()=>setVisible(!visible)} activeOpacity={0.8}> <TouchableOpacity style={{backgroundColor: '#e3e3e3', padding: 15, borderBottomWidth: 1, borderColor: 'black', width: '100%',}} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}> <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
<Image source ={require('./assets/calendar.png')} style = {{height: 40, width: 40, marginRight: 15}}/> <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
<Text style={styles.title3}>{item.item.title}</Text> <Image source ={require('./assets/calendar.png')} style = {{height: 40, width: 40, marginRight: 15}}/>
<Text style={styles.title3}>{item.item.title}</Text>
</View>
<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
<Text style = {{fontSize: 16, alignSelf: 'center'}}>{`${date[1]}/${date[2]}/${date[0]}`}</Text>
</View>
</View> </View>
{visible?extra:<></>} {visible?extra:<></>}
</TouchableOpacity> </TouchableOpacity>
@ -109,7 +118,7 @@ class Calendar extends React.Component {
colors={['#f99', 'white']} colors={['#f99', 'white']}
style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}} style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}}
> >
<Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar</Text> <Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar Events</Text>
</LinearGradient> </LinearGradient>
</View> </View>