From 311547f6fd5706db66565a184f1e85438c58f3f7 Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Fri, 24 Nov 2023 16:20:15 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20CalendarMonth=EC=9D=98=20=EB=82=A0?=
=?UTF-8?q?=EC=A7=9C=20=EC=A0=95=EB=B3=B4=EB=A5=BC=20MeetingInfoForm?=
=?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=A0=84=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
react-whenMeet/src/components/Calendar.js | 4 +-
.../src/components/CalendarMonth.jsx | 62 +++++++++++--------
.../src/components/MeetingInfoForm.js | 5 +-
3 files changed, 42 insertions(+), 29 deletions(-)
diff --git a/react-whenMeet/src/components/Calendar.js b/react-whenMeet/src/components/Calendar.js
index 565c7bb..dc67dd7 100644
--- a/react-whenMeet/src/components/Calendar.js
+++ b/react-whenMeet/src/components/Calendar.js
@@ -4,10 +4,10 @@ import Input from "./Input";
import CalendarMonth from "./CalendarMonth";
// import CalendarWeek2 from './CalendarWeek2';
-function Calendar({ onChange }) {
+function Calendar({ onChange, usingDate, setUsingDate }) {
return (
<div>
- <CalendarMonth />
+ <CalendarMonth usingDate={usingDate} setUsingDate={setUsingDate} />
</div>
);
}
diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx
index 5b6e4bc..2cb81d8 100644
--- a/react-whenMeet/src/components/CalendarMonth.jsx
+++ b/react-whenMeet/src/components/CalendarMonth.jsx
@@ -3,12 +3,12 @@ import MakeDay from "./MakeDay";
import MakeHeader from "./MakeHeader";
import TableCell from "./TableCell";
-function MakeCell(props){//주차 데이터를 담을 공간
+function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데이터를 담을 공간
const calendarArr = [];
- const startDay = new Date(props.nowYear, props.nowMonth - 1, 1);
- const lastDay = new Date(props.nowYear, props.nowMonth, 0);
- const lastMonthDate = new Date(props.nowYear, props.nowMonth - 1, 0).getDate();
+ const startDay = new Date(nowYear, nowMonth - 1, 1);
+ const lastDay = new Date(nowYear, nowMonth, 0);
+ const lastMonthDate = new Date(nowYear, nowMonth - 1, 0).getDate();
let nowDate = startDay.getDate();
const lastDate = lastDay.getDate();
@@ -20,25 +20,23 @@ function MakeCell(props){//주차 데이터를 담을 공간
const [dragEndDay, setDragEndDay] = useState();
// 여기 달력 날짜 수정해야함
- const fDay = new Date(props.nowYear, props.nowMonth - 1, 1 - startDay.getDay()) - (0);
- const eDay = new Date(props.nowYear, props.nowMonth - 1, lastDate + 6 - lastDay.getDay()) - (0);
+ const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - (0);
+ const eDay = new Date(nowYear, nowMonth - 1, lastDate + 6 - lastDay.getDay()) - (0);
+
+ let startDate="";
+ let endDate="";
const handleDragStart = (newDate, idx, comp) => {
setIsDragging(!isDragging);
- // console.log(newDate.toDateString(), idx);
setDragStartDay(newDate);
for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
const elm = document.getElementById(day);
elm.classList.remove("dragging")
}
- console.log(comp);
};
+
const handleDragWhile = (newDate, idx, comp) => {
if(!isDragging)return;
- // setDragging("dragging");
- // dragging = "dragging";
- console.log(newDate.toDateString(), idx, dragging);
-
setDragEndDay(newDate);
let sd = dragStartDay - 0;
@@ -56,41 +54,53 @@ function MakeCell(props){//주차 데이터를 담을 공간
if(elm2.classList.contains("dragging")){
for(let day = ed; day >= comp; day -= (60*60*24*1000)){
const elm = document.getElementById(day);
- // if(elm.classList.contains("dragging"))elm.classList.remove("dragging");
- // else elm.classList.add("dragging")
elm.classList.remove("dragging")
}
}
else {
for(let day = sd; day <= ed; day += (60*60*24*1000)){
const elm = document.getElementById(day);
- // if(elm.classList.contains("dragging"))elm.classList.remove("dragging");
- // else elm.classList.add("dragging")
elm.classList.add("dragging")
}
}
};
+
const handleDragEnd = (newDate, idx) => {
setIsDragging(false);
setDragging("nope");
- // dragging ="";
- // console.log(newDate.toDateString(), idx, dragging);
-
- console.log(dragStartDay);
- console.log(dragEndDay);
- console.log(Math.abs(dragEndDay - dragStartDay)/(60*60*24*1000));
+ if(dragStartDay - 0 < dragEndDay - 0){
+ startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
+ endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
+ }
+ else{
+ endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
+ startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
+ }
+ // console.log(startDate);
+ // console.log(endDate);
+ setUsingDate([{startDate:startDate, endDate:endDate}])
};
+ const handleClick = (newDate) => {
+ for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
+ const elm = document.getElementById(day);
+ elm.classList.remove("dragging")
+ }
+ const elm = document.getElementById(newDate - 0);
+ elm.classList.add("dragging")
+ console.log(`${newDate.getFullYear()}-${newDate.getMonth()+1}-${newDate.getDate()}`)
+ }
+
for(let day = fDay; day <= eDay; day += (60*60*24*1000)){
const tmpArr = [];
for(let i = 0; i < 7; i++){
let cn = "cella";
const newDate = new Date(day);
- if(newDate.getMonth() + 1 !== props.nowMonth) cn = "cellb";
+ if(newDate.getMonth() + 1 !== nowMonth) cn = "cellb";
tmpArr.push(
- <TableCell k={day} cn={[cn, dragging].join(" ")} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/>
+ <TableCell k={day} cn={[cn, dragging].join(" ")} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/>
);
day+=(60*60*24*1000)
}
@@ -109,7 +119,7 @@ function MakeCell(props){//주차 데이터를 담을 공간
);
}
-function CalendarMonth(){
+function CalendarMonth({ usingDate, setUsingDate }){
const [currentDay, setCurrentDay] = useState(new Date());
// 일요일 0 시작
@@ -144,7 +154,7 @@ function CalendarMonth(){
<h1>{nowYear}</h1>
<table className="calendarTable">
<MakeDay/>
- <MakeCell nowYear={nowYear} nowMonth={nowMonth}></MakeCell>
+ <MakeCell nowYear={nowYear} nowMonth={nowMonth} usingDate={usingDate} setUsingDate={setUsingDate}></MakeCell>
</table>
</div>
);
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index 47bbb35..38fcec8 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -19,6 +19,8 @@ function MeetingInfoForm() {
];
const navigate = useNavigate();
+ const [usingDate, setUsingDate] = useState([]);
+
const handleOnChange = (event) => {
setMeetingPurpose(event.target.value);
}
@@ -45,6 +47,7 @@ function MeetingInfoForm() {
const handleSubmit = (event) => {
event.preventDefault();
+ console.log(usingDate);
(meetingPurpose === "" || meetingPurpose === "선택") ? alert("목적을 선택하세요") : navigate("LinkPage");
}
@@ -63,7 +66,7 @@ function MeetingInfoForm() {
</label>
</div>
- <Calendar onChange={handleCalendar} />
+ <Calendar onChange={handleCalendar} usingDate={usingDate} setUsingDate={setUsingDate}/>
<div className="timeStartEnd">
시작:
<Input
--
GitLab