From 84bd807591f420bae41d71f58831d840143b9127 Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Tue, 21 Nov 2023 12:02:55 +0900
Subject: [PATCH] [ADD] drag for monthly calendar
---
react-whenMeet/src/components/Calendar.js | 2 +-
.../src/components/CalendarMonth.jsx | 102 +++++++++++++-----
react-whenMeet/src/components/TableCell.jsx | 16 +++
react-whenMeet/src/styles/HomeMake.css | 3 +
4 files changed, 97 insertions(+), 26 deletions(-)
create mode 100644 react-whenMeet/src/components/TableCell.jsx
diff --git a/react-whenMeet/src/components/Calendar.js b/react-whenMeet/src/components/Calendar.js
index d95a42d..565c7bb 100644
--- a/react-whenMeet/src/components/Calendar.js
+++ b/react-whenMeet/src/components/Calendar.js
@@ -2,7 +2,7 @@ import React from "react";
import { useState } from "react";
import Input from "./Input";
import CalendarMonth from "./CalendarMonth";
-//import CalendarWeek from './CalendarWeek';
+// import CalendarWeek2 from './CalendarWeek2';
function Calendar({ onChange }) {
return (
diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx
index 4c15c1b..5b6e4bc 100644
--- a/react-whenMeet/src/components/CalendarMonth.jsx
+++ b/react-whenMeet/src/components/CalendarMonth.jsx
@@ -1,6 +1,7 @@
import React, { useState } from "react"
import MakeDay from "./MakeDay";
import MakeHeader from "./MakeHeader";
+import TableCell from "./TableCell";
function MakeCell(props){//二쇱감 �곗씠�곕� �댁쓣 怨듦컙
const calendarArr = [];
@@ -12,41 +13,92 @@ function MakeCell(props){//二쇱감 �곗씠�곕� �댁쓣 怨듦컙
let nowDate = startDay.getDate();
const lastDate = lastDay.getDate();
- // cellb�� �댁쟾 �ъ씠�� �ㅼ쓬 �ъ씠�쇱꽌 �됱쓣 �고븯寃� 移좏븯寃� �� 嫄곌퀬
- // cella�� �대쾲 �ъ씠�쇱꽌 吏꾪븯寃� �됱쓣 移좏븷 嫄곗엫
- if(startDay.getDay() > 0){
- const tmpArr = [];
- for(let i = startDay.getDay(); i > 0; i--)tmpArr.push(
- <td className="cellb" onClick={()=>{alert("dd");}}>{lastMonthDate - i + 1}</td>
- );
- for(let i = startDay.getDay(); i < 7; i++){
- tmpArr.push(
- <td className="cella" onClick={()=>{alert("dd");}}>{nowDate}</td>
- )
- nowDate+=1;
+ const [dragging, setDragging] = useState("nope");
+ const [selectedDays, setSelectedDays] = useState([]); //�좏깮�� �좎쭨
+ const [isDragging, setIsDragging] = useState(false); //�쒕옒洹� �щ�
+ const [dragStartDay, setDragStartDay] = useState(null); //�쒕옒洹� �쒖옉 �좎쭨
+ 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 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")
}
- calendarArr.push(
- <tr>{tmpArr}</tr>
- );
- }
+ console.log(comp);
+ };
+ const handleDragWhile = (newDate, idx, comp) => {
+ if(!isDragging)return;
+ // setDragging("dragging");
+ // dragging = "dragging";
+ console.log(newDate.toDateString(), idx, dragging);
+
+ setDragEndDay(newDate);
- while(nowDate <= lastDate){
+ let sd = dragStartDay - 0;
+ let ed = newDate - 0;
+ if(sd > ed){
+ let tmp = sd;
+ sd = ed;
+ ed = tmp;
+ }
+ for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
+ const elm = document.getElementById(day);
+ elm.classList.remove("dragging")
+ }
+ const elm2 = document.getElementById(comp);
+ 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));
+ };
+
+
+ for(let day = fDay; day <= eDay; day += (60*60*24*1000)){
const tmpArr = [];
for(let i = 0; i < 7; i++){
- let tmp = nowDate;
let cn = "cella";
- if(tmp > lastDate){
- cn = "cellb";
- tmp-=lastDate;
- }
+ const newDate = new Date(day);
+ if(newDate.getMonth() + 1 !== props.nowMonth) cn = "cellb";
tmpArr.push(
- <td className={cn} onClick={()=>{alert("dd");}}>{tmp}</td>
- )
- nowDate+=1;
+ <TableCell k={day} cn={[cn, dragging].join(" ")} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/>
+ );
+ day+=(60*60*24*1000)
}
calendarArr.push(
<tr>{tmpArr}</tr>
);
+
+ day-=(60*60*24*1000)
}
diff --git a/react-whenMeet/src/components/TableCell.jsx b/react-whenMeet/src/components/TableCell.jsx
new file mode 100644
index 0000000..3976a42
--- /dev/null
+++ b/react-whenMeet/src/components/TableCell.jsx
@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+export default function TableCell({k, cn, newDate, hds, hdw, hde, i, value}){
+ // useEffect(() => { console.log(k)}, []);
+ return(
+ <td className={cn}
+ key={k}
+ id={k}
+ draggable
+ onDragStart={()=>hds(newDate, i, k)}
+ onDragEnter={()=>hdw(newDate, i, k)}
+ onDragEnd={()=>hde(newDate, i)}
+ onClick={()=>console.log(newDate.getMonth() + 1)}>
+ {value} </td>
+ );
+}
\ No newline at end of file
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
index 5ea58f7..83bc830 100644
--- a/react-whenMeet/src/styles/HomeMake.css
+++ b/react-whenMeet/src/styles/HomeMake.css
@@ -88,6 +88,9 @@ button:hover {
color: black; /* 寃��뺤깋�쇰줈 湲��먯깋 吏��� */
}
+.calendarTable .dragging{
+ background-color: red;
+}
.mostTime {
position: absolute;
margin-top: 200px;
--
GitLab