From c594fe950ea099f9bd199f8451cd71477ac5977d Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Thu, 7 Dec 2023 15:15:42 +0900
Subject: [PATCH] =?UTF-8?q?[EDIT]=20=EC=9B=94=20=EB=8B=AC=EB=A0=A5=20?=
=?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/CalendarMonth.jsx | 90 +++++++------------
1 file changed, 34 insertions(+), 56 deletions(-)
diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx
index de2b104..ef9529b 100644
--- a/react-whenMeet/src/components/CalendarMonth.jsx
+++ b/react-whenMeet/src/components/CalendarMonth.jsx
@@ -30,7 +30,6 @@ function MakeCell({
const [dragEndDay, setDragEndDay] = useState();
const [finish, setFinish] = useState(false);
- // 여기 달력 날짜 수정해야함
const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - 0;
const eDay =
new Date(nowYear, nowMonth - 1, lastDate + 6 - lastDay.getDay()) - 0;
@@ -38,7 +37,7 @@ function MakeCell({
const handleDragStart = (newDate, idx, comp) => {
setIsDragging(!isDragging);
setDragStartDay(newDate);
- setFinish(false);
+ setFinish(true);
for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) {
const elm = document.getElementById(day);
elm.classList.remove("dragging");
@@ -48,7 +47,7 @@ function MakeCell({
const handleDragWhile = (newDate, idx, comp) => {
if (!isDragging) return;
setDragEndDay(newDate);
- setFinish(false);
+ setFinish(true);
let sd = dragStartDay - 0;
let ed = newDate - 0;
@@ -62,7 +61,6 @@ function MakeCell({
elm.classList.remove("dragging");
}
const elm2 = document.getElementById(comp);
- // console.log(comp);
if (elm2.classList.contains("dragging")) {
for (let day = ed; day >= comp; day -= 60 * 60 * 24 * 1000) {
const elm = document.getElementById(day);
@@ -76,15 +74,10 @@ function MakeCell({
}
};
- // let startDate="";
- // let endDate="";
-
const handleDragEnd = (newDate, idx) => {
setIsDragging(false);
// setDragging("nope");
if (dragStartDay - 0 < dragEndDay - 0) {
- // startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
- // endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
setStartDate(
dragStartDay.getFullYear() +
"-" +
@@ -114,8 +107,6 @@ function MakeCell({
String(dragEndDay.getDate()).padStart(2, "0"),
});
} else {
- // endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
- // startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
setStartDate(
dragEndDay.getFullYear() +
"-" +
@@ -145,14 +136,11 @@ function MakeCell({
String(dragStartDay.getDate()).padStart(2, "0"),
});
}
- // console.log(startDate);
- // console.log(endDate);
setFinish(true);
};
const handleClick = (newDate, idx, comp) => {
if (startDate && !finish) {
- // endDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate();
setEndDate(
newDate.getFullYear() +
"-" +
@@ -160,32 +148,14 @@ function MakeCell({
"-" +
String(newDate.getDate()).padStart(2, "0")
);
- // console.log("e", endDate);
let sd = new Date(startDate + "T00:00:00") - 0;
let ed = new Date(newDate) - 0;
- // let sd = new Date(startDate) - 0;
- // let ed = new Date(newDate) - 0;
- // console.log(new Date(sd), new Date(ed), comp);
if (sd > ed) {
let tmp = sd;
sd = ed;
ed = tmp;
}
- console.log(
- new Date(sd).getFullYear() +
- "-" +
- String(new Date(sd).getMonth() + 1).padStart(2, "0") +
- "-" +
- String(new Date(sd).getDate()).padStart(2, "0")
- );
- console.log(
- new Date(ed).getFullYear() +
- "-" +
- String(new Date(ed).getMonth() + 1).padStart(2, "0") +
- "-" +
- String(new Date(ed).getDate()).padStart(2, "0")
- );
setStartDate(
new Date(sd).getFullYear() +
@@ -218,7 +188,6 @@ function MakeCell({
} else {
for (let day = sd; day <= ed; day += 60 * 60 * 24 * 1000) {
const elm = document.getElementById(day);
- // console.log(elm, day);
elm.classList.add("dragging");
}
}
@@ -238,12 +207,11 @@ function MakeCell({
});
setFinish(true);
} else {
- console.log(fDay, eDay, new Date(fDay), new Date(eDay));
+ setFinish(false);
for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) {
const elm = document.getElementById(day);
elm.classList.remove("dragging");
}
- // startDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate();
setStartDate(
newDate.getFullYear() +
"-" +
@@ -253,8 +221,6 @@ function MakeCell({
);
const elm = document.getElementById(newDate - 0);
elm.classList.add("dragging");
- // console.log("s", startDate);
- setFinish(false);
}
};
@@ -263,9 +229,6 @@ function MakeCell({
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) {
@@ -274,9 +237,8 @@ function MakeCell({
let cn = "cella";
const newDate = new Date(day);
if (newDate.getMonth() + 1 !== nowMonth) cn = "cellb";
- // console.log(startDate, endDate);
- // console.log(new Date(day), new Date(startDate+'T00:00:00'), new Date(endDate+'T00:00:00'))
if (
+ finish &&
day >= new Date(startDate + "T00:00:00") - 0 &&
day <= new Date(endDate + "T00:00:00") - 0
) {
@@ -294,6 +256,21 @@ function MakeCell({
value={newDate.getDate()}
/>
);
+ } else if (day === new Date(startDate + "T00:00:00") - 0) {
+ cn += " dragging";
+ tmpArr.push(
+ <TableCell
+ k={day}
+ cn={cn}
+ handleClick={handleClick}
+ newDate={newDate}
+ hds={handleDragStart}
+ hdw={handleDragWhile}
+ hde={handleDragEnd}
+ i={i}
+ value={newDate.getDate()}
+ />
+ );
} else {
tmpArr.push(
<TableCell
@@ -352,7 +329,6 @@ function CalendarMonth({ usingDate, setUsingDate }) {
return (
<div className="calendar">
- {/* <h1>달력</h1> */}
<div className="cc">
<MakeHeader
nowMonth={nowMonth}
@@ -361,19 +337,21 @@ function CalendarMonth({ usingDate, setUsingDate }) {
nowYear={nowYear}
></MakeHeader>
</div>
- <table className="calendarTable">
- <MakeDay />
- <MakeCell
- nowYear={nowYear}
- nowMonth={nowMonth}
- usingDate={usingDate}
- setUsingDate={setUsingDate}
- startDate={startDate}
- endDate={endDate}
- setStartDate={setStartDate}
- setEndDate={setEndDate}
- ></MakeCell>
- </table>
+ <div className="calendarTable">
+ <table>
+ <MakeDay />
+ <MakeCell
+ nowYear={nowYear}
+ nowMonth={nowMonth}
+ usingDate={usingDate}
+ setUsingDate={setUsingDate}
+ startDate={startDate}
+ endDate={endDate}
+ setStartDate={setStartDate}
+ setEndDate={setEndDate}
+ ></MakeCell>
+ </table>
+ </div>
</div>
);
}
--
GitLab