Calendar.js 5.09 KB
Newer Older
Choi Ga Young's avatar
Choi Ga Young committed
1
2
import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native';
Choi Ga Young's avatar
Choi Ga Young committed
3
import { Button } from 'react-native-elements';
Choi Ga Young's avatar
Choi Ga Young committed
4
import Ionicons from 'react-native-vector-icons/Ionicons';
5
import { getDateStr } from '../utils/dateFunction';
Choi Ga Young's avatar
Choi Ga Young committed
6
7

const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => {
Choi Ga Young's avatar
Choi Ga Young committed
8
  return (
Choi Ga Young's avatar
Choi Ga Young committed
9
    <TouchableOpacity onPress={onPress}
Choi Ga Young's avatar
Choi Ga Young committed
10
      style={[style.dateContainer, { height: flatListHeight }]}>
Choi Ga Young's avatar
Choi Ga Young committed
11
      <Text style={textColor}>{dateitem.date.getDate()}</Text>
Choi Ga Young's avatar
Choi Ga Young committed
12
13
14
15
16
17
18
      {
        dateitem.type &&
        <View>
          <Text style={{ color: '#1E90FF' }}>{dateitem.type.input ? dateitem.type.input : null}</Text>
          <Text style={{ color: '#DC143C' }}>{dateitem.type.output ? dateitem.type.output : null}</Text>
        </View>
      }
Choi Ga Young's avatar
Choi Ga Young committed
19
20
21
22
    </TouchableOpacity>
  );
};

23
24
25
26
27
28
29
30
31
32
function Calendar({
  navigation,
  MData,
  year,
  setYear,
  month,
  setMonth,
  todayM,
  todayY,
}) {
Choi Ga Young's avatar
Choi Ga Young committed
33
  const date = new Date();
Choi Ga Young's avatar
Choi Ga Young committed
34
  const [flatListHeight, setFlatListHeight] = useState(400)
Choi Ga Young's avatar
Choi Ga Young committed
35

Choi Ga Young's avatar
Choi Ga Young committed
36
37
38
  const prevLast = new Date(year, month, 0);
  const thisFirst = new Date(year, month, 1); 
  const thisLast = new Date(year, month + 1, 0); 
Choi Ga Young's avatar
Choi Ga Young committed
39

Choi Ga Young's avatar
Choi Ga Young committed
40
41
42
43
  const thisFirstDay = thisFirst.getDay();
  const prevLastDate = prevLast.getDate(); 
  const thisLastDate = thisLast.getDate(); 
  const thisLastDay = thisLast.getDay(); 
Choi Ga Young's avatar
Choi Ga Young committed
44

Choi Ga Young's avatar
Choi Ga Young committed
45
46
  const Dates = [];
  const DBDates = [];
Choi Ga Young's avatar
Choi Ga Young committed
47
  if (thisFirstDay !== 0) { 
Choi Ga Young's avatar
Choi Ga Young committed
48
    for (let i = 0; i < thisFirstDay; i++) {
Choi Ga Young's avatar
Choi Ga Young committed
49
      Dates.unshift({ date: new Date(year, month - 1, prevLastDate - i) })
Choi Ga Young's avatar
Choi Ga Young committed
50
    }
Choi Ga Young's avatar
Choi Ga Young committed
51
  }
Choi Ga Young's avatar
Choi Ga Young committed
52
  for (let i = 1; i <= thisLastDate; i++) {
Choi Ga Young's avatar
Choi Ga Young committed
53
    Dates.push({ date: new Date(year, month, i) })
Choi Ga Young's avatar
Choi Ga Young committed
54
55
  }
  for (let i = 1; i <= 6 - thisLastDay; i++) {
Choi Ga Young's avatar
Choi Ga Young committed
56
    Dates.push({ date: new Date(year, month + 1, i) })
Choi Ga Young's avatar
Choi Ga Young committed
57
  }
Choi Ga Young's avatar
Choi Ga Young committed
58

Choi Ga Young's avatar
Choi Ga Young committed
59
  //DB 데이터와 날짜 비교
Choi Ga Young's avatar
Choi Ga Young committed
60
61
62
  for (let i = 0; i < MData.length; i++) {
    const str = MData[i].date
    DBDates.push({ date: new Date(Number(str.slice(0, 4)), Number(str.slice(5, 7)) - 1, Number(str.slice(8, 10))), type: MData[i].type })
Choi Ga Young's avatar
Choi Ga Young committed
63
64
  }

Choi Ga Young's avatar
Choi Ga Young committed
65
  for (let i = 0; i < Dates.length; i++) {
Choi Ga Young's avatar
Choi Ga Young committed
66
    const idx = DBDates.findIndex(obj => obj.date.getTime() === Dates[i].date.getTime())
Choi Ga Young's avatar
Choi Ga Young committed
67
68
69
70
    if (idx !== -1) {
      Dates[i] = DBDates[idx]
    }
  }
Choi Ga Young's avatar
Choi Ga Young committed
71
72
73
74
75

  let istoday = false;

  const renderDate = ({ item }) => {
    let color = '#000000';
Choi Ga Young's avatar
Choi Ga Young committed
76
    if (item.date.getDate() === date.getDate() && month === todayM && year === todayY) {
Choi Ga Young's avatar
Choi Ga Young committed
77
78
79
80
81
82
      istoday = true;
    }
    if (istoday) {
      color = '#6495ed'
      istoday = false;
    }
Choi Ga Young's avatar
Choi Ga Young committed
83
    if (!(item.date.getMonth() === month)) {
Choi Ga Young's avatar
Choi Ga Young committed
84
85
      color = '#a9a9a9'
    }
Choi Ga Young's avatar
Choi Ga Young committed
86

Choi Ga Young's avatar
Choi Ga Young committed
87
    return (
88
      <DateItem dateitem={item} textColor={{ color }} onPress={() => navigation.navigate('CalDetail', getDateStr(item.date))} flatListHeight={flatListHeight / (Dates.length / 7)} />
Choi Ga Young's avatar
Choi Ga Young committed
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
    )
  }
  const prevBtn = () => {
    if (month < 1) {
      setYear(year - 1)
      setMonth(11)
    } else {
      setMonth(month - 1)
    }
  };
  const nextBtn = () => {
    if (month > 10) {
      setYear(year + 1)
      setMonth(0)
    } else {
      setMonth(month + 1)
    }
  }
  useEffect(() => {
    setMonth(todayM)
    setYear(todayY)
  }, [])

Choi Ga Young's avatar
Choi Ga Young committed
112
113
  const onLayout = (event) => {
    const { x, y, height, width } = event.nativeEvent.layout;
Choi Ga Young's avatar
Choi Ga Young committed
114
115
    setFlatListHeight(height)
  }
Choi Ga Young's avatar
Choi Ga Young committed
116
117
  return (
    <>
Choi Ga Young's avatar
Choi Ga Young committed
118
      <SafeAreaView style={style.EntContainer}>
Choi Ga Young's avatar
Choi Ga Young committed
119
120
121
122
123
124
125
126
127
128
129
130
        <View style={style.Container}>
          <Text style={style.Head}>{year}  {month + 1} </Text>
          <View style={style.Buttons}>
            <Button icon={
              <Ionicons name='chevron-back-sharp' onPress={prevBtn} size={15} color='black' />
            } type='clear' />
            <Button title='Today' onPress={() => { setMonth(todayM); setYear(todayY) }} type='clear' />
            <Button icon={
              <Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={15} color='black' />
            } type='clear' />
          </View>
        </View>
Choi Ga Young's avatar
Choi Ga Young committed
131
132
133
134
135
136
137
138
139
        <View style={style.Days}>
          <Text style={style.DayText}></Text>
          <Text style={style.DayText}></Text>
          <Text style={style.DayText}></Text>
          <Text style={style.DayText}></Text>
          <Text style={style.DayText}></Text>
          <Text style={style.DayText}></Text>
          <Text style={style.DayText}></Text>
        </View>
Choi Ga Young's avatar
Choi Ga Young committed
140
        <FlatList
Choi Ga Young's avatar
Choi Ga Young committed
141
          style={{ backgroundColor: "#FFFFFF" }}
Choi Ga Young's avatar
Choi Ga Young committed
142
          onLayout={onLayout}
Choi Ga Young's avatar
Choi Ga Young committed
143
          data={Dates}
Choi Ga Young's avatar
Choi Ga Young committed
144
145
          numColumns={7}
          renderItem={renderDate}
Choi Ga Young's avatar
Choi Ga Young committed
146
          keyExtractor={item => item.date}
Choi Ga Young's avatar
Choi Ga Young committed
147
        />
Choi Ga Young's avatar
Choi Ga Young committed
148
149
150
      </SafeAreaView>
    </>
  )
Choi Ga Young's avatar
Choi Ga Young committed
151
};
Choi Ga Young's avatar
Choi Ga Young committed
152
153

const style = StyleSheet.create({
154
  EntContainer: {
Choi Ga Young's avatar
Choi Ga Young committed
155
156
157
    flex: 1,
    padding: 20
  },
158
  Head: {
Choi Ga Young's avatar
Choi Ga Young committed
159
    fontSize: 24,
Choi Ga Young's avatar
Choi Ga Young committed
160
    fontFamily: 'GowunDodum-Regular'
Choi Ga Young's avatar
Choi Ga Young committed
161
  },
162
  Container: {
Choi Ga Young's avatar
Choi Ga Young committed
163
164
165
    justifyContent: "center",
    alignItems: "center",
  },
166
  dateContainer: {
Choi Ga Young's avatar
Choi Ga Young committed
167
168
169
    flex: 1,
    borderWidth: 0.8,
    borderColor: '#DCDCDC'
Choi Ga Young's avatar
Choi Ga Young committed
170
171
172
173
174
175
  },
  Buttons: {
    flexDirection: 'row',
    margin: 10
  },
  Days: {
Choi Ga Young's avatar
Choi Ga Young committed
176
177
    flexDirection: 'row',
    backgroundColor: '#6495ED'
Choi Ga Young's avatar
Choi Ga Young committed
178
  },
Choi Ga Young's avatar
Choi Ga Young committed
179
180
  DayText: {
    flex: 1,
Choi Ga Young's avatar
Choi Ga Young committed
181
    textAlign: 'center',
Choi Ga Young's avatar
Choi Ga Young committed
182
183
184
    color: '#FFFFFF',
    fontFamily: 'GowunDodum-Regular',
    fontWeight: "bold"
Choi Ga Young's avatar
Choi Ga Young committed
185
  },
Choi Ga Young's avatar
Choi Ga Young committed
186
187
188
});

export default Calendar;