Commit 360b9ce8 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

캘린더 틀 완성

parent 717409d1
...@@ -3,10 +3,12 @@ import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from ...@@ -3,10 +3,12 @@ import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from
import { Button } from 'react-native-elements'; import { Button } from 'react-native-elements';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
const DateItem = ({ dateitem, onPress, backgroundColor, textColor }) => { const DateItem = ({ dateitem, onPress, backgroundColor, textColor, flatListHeight }) => {
return ( return (
<TouchableOpacity onPress={onPress} style={[style.dateContainer, backgroundColor]}> <TouchableOpacity onPress={onPress}
style={[style.dateContainer, backgroundColor, {height: flatListHeight}]}>
<Text style={textColor}>{dateitem}</Text> <Text style={textColor}>{dateitem}</Text>
<Text style={{color:'blue'}}>100,000</Text>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
...@@ -17,6 +19,7 @@ function Calendar() { ...@@ -17,6 +19,7 @@ function Calendar() {
const [month, setMonth] = useState(date.getMonth()); const [month, setMonth] = useState(date.getMonth());
const todayM = date.getMonth(); const todayM = date.getMonth();
const todayY = date.getFullYear(); const todayY = date.getFullYear();
const [flatListHeight, setFlatListHeight] = useState(400)
const prevLast = new Date(year, month, 0); //이전 달의 마지막 날 const prevLast = new Date(year, month, 0); //이전 달의 마지막 날
const thisFirst = new Date(year, month, 1); //이번 달의 첫째 날 const thisFirst = new Date(year, month, 1); //이번 달의 첫째 날
...@@ -50,7 +53,7 @@ function Calendar() { ...@@ -50,7 +53,7 @@ function Calendar() {
const [selectedKey, setSelectedKey] = useState(null); const [selectedKey, setSelectedKey] = useState(null);
const renderDate = ({ item }) => { const renderDate = ({ item }) => {
const backgroundColor = item.key === selectedKey ? '#87ceeb' : '#ffffff'; const backgroundColor = item.key === selectedKey ? '#87ceeb' : '#FFFAFA';
let color = '#000000'; let color = '#000000';
if (item.idates === date.getDate() && month === todayM && year === todayY) { if (item.idates === date.getDate() && month === todayM && year === todayY) {
istoday = true; istoday = true;
...@@ -63,11 +66,12 @@ function Calendar() { ...@@ -63,11 +66,12 @@ function Calendar() {
color = '#a9a9a9' color = '#a9a9a9'
} }
return ( return (
<DateItem dateitem={item.idates} onPress={() => setSelectedKey(item.key)} backgroundColor={{ backgroundColor }} textColor={{ color }} /> <DateItem dateitem={item.idates} onPress={() => setSelectedKey(item.key)} backgroundColor={{ backgroundColor }} textColor={{ color }} flatListHeight={flatListHeight / 5} />
) )
} }
const prevBtn = () => { const prevBtn = () => {
setSelectedKey(null)
if (month < 1) { if (month < 1) {
setYear(year - 1) setYear(year - 1)
setMonth(11) setMonth(11)
...@@ -77,6 +81,7 @@ function Calendar() { ...@@ -77,6 +81,7 @@ function Calendar() {
}; };
const nextBtn = () => { const nextBtn = () => {
setSelectedKey(null)
if (month > 10) { if (month > 10) {
setYear(year + 1) setYear(year + 1)
setMonth(0) setMonth(0)
...@@ -91,9 +96,13 @@ function Calendar() { ...@@ -91,9 +96,13 @@ function Calendar() {
setSelectedKey(null) setSelectedKey(null)
}, []) }, [])
const onLayout=(event)=> {
const {x, y, height, width} = event.nativeEvent.layout;
setFlatListHeight(height)
}
return ( return (
<> <>
<SafeAreaView> <SafeAreaView style={style.EntContainer}>
<View style={style.Container}> <View style={style.Container}>
<Text style={style.Head}>{year} {month + 1} </Text> <Text style={style.Head}>{year} {month + 1} </Text>
<View style={style.Buttons}> <View style={style.Buttons}>
...@@ -106,34 +115,47 @@ function Calendar() { ...@@ -106,34 +115,47 @@ function Calendar() {
} type='clear' /> } type='clear' />
</View> </View>
</View> </View>
<FlatList ListHeaderComponent={
<View style={style.Days}> <View style={style.Days}>
<Text></Text> <Text style={style.DayText}></Text>
<Text></Text> <Text style={style.DayText}></Text>
<Text></Text> <Text style={style.DayText}></Text>
<Text></Text> <Text style={style.DayText}></Text>
<Text></Text> <Text style={style.DayText}></Text>
<Text></Text> <Text style={style.DayText}></Text>
<Text></Text> <Text style={style.DayText}></Text>
</View> </View>
} data={dates} renderItem={renderDate} numColumns={7} extraData={selectedKey} /> <FlatList style={style.ListContainer}
onLayout={onLayout}
contentContainerStyle={style.wrapper}
data={dates}
numColumns={7}
renderItem={renderDate}
extraData={selectedKey} />
</SafeAreaView> </SafeAreaView>
</> </>
) )
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
Head: { wrapper: {
alignItems: 'stretch',
alignContent: 'stretch'
},
EntContainer: { //전체 (SafeAreaView)
flex: 1,
padding: 20
},
Head: { //00년00월
fontSize: 24, fontSize: 24,
}, },
Container: { Container: { //년월, 버튼 뷰에 적용
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
dateContainer: { dateContainer: { //각 date에 적용 (Text 태그), DateItem 컴포넌트에 적용
//height:300, flex: 1,
//backgroundColor: '#FFFFFF', borderWidth: 0.8,
margin: 10 borderColor: '#DCDCDC'
}, },
Buttons: { Buttons: {
flexDirection: 'row', flexDirection: 'row',
...@@ -142,6 +164,10 @@ const style = StyleSheet.create({ ...@@ -142,6 +164,10 @@ const style = StyleSheet.create({
Days: { Days: {
flexDirection: 'row' flexDirection: 'row'
}, },
DayText: {
flex: 1,
textAlign: 'center'
},
}); });
export default Calendar; export default Calendar;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment