diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx index 6f02017453cc74020b459ebf55eee6ce0fa35339..9208333dd8e0a514c6c8cd7c8e3c588a13412020 100644 --- a/react-whenMeet/src/components/CalendarMonth.jsx +++ b/react-whenMeet/src/components/CalendarMonth.jsx @@ -3,7 +3,7 @@ import MakeDay from "./MakeDay"; import MakeHeader from "./MakeHeader"; import TableCell from "./TableCell"; -function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데이터를 담을 공간 +function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate, startDate, endDate, setStartDate, setEndDate }){//주차 데이터를 담을 공간 const calendarArr = []; const startDay = new Date(nowYear, nowMonth - 1, 1); @@ -13,22 +13,21 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데 let nowDate = startDay.getDate(); const lastDate = lastDay.getDate(); - const [dragging, setDragging] = useState("nope"); + const [dragging, setDragging] = useState(); const [selectedDays, setSelectedDays] = useState([]); //선택된 날짜 const [isDragging, setIsDragging] = useState(false); //드래그 여부 const [dragStartDay, setDragStartDay] = useState(null); //드래그 시작 날짜 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); - let startDate=""; - let endDate=""; - const handleDragStart = (newDate, idx, comp) => { setIsDragging(!isDragging); setDragStartDay(newDate); + setFinish(false); for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ const elm = document.getElementById(day); elm.classList.remove("dragging") @@ -38,6 +37,7 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데 const handleDragWhile = (newDate, idx, comp) => { if(!isDragging)return; setDragEndDay(newDate); + setFinish(false); let sd = dragStartDay - 0; let ed = newDate - 0; @@ -51,6 +51,7 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데 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); @@ -66,42 +67,124 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데 }; + // let startDate=""; + // let endDate=""; + + const handleDragEnd = (newDate, idx) => { setIsDragging(false); - setDragging("nope"); + // setDragging("nope"); if(dragStartDay - 0 < dragEndDay - 0){ - startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); - endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); + // startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); + // endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); + setStartDate(dragStartDay.getFullYear() + '-' + String(dragStartDay.getMonth()+1).padStart(2,"0") + '-' + String(dragStartDay.getDate()).padStart(2,"0")) + setEndDate(dragEndDay.getFullYear() + '-' + String(dragEndDay.getMonth()+1).padStart(2,"0") + '-' + String(dragEndDay.getDate()).padStart(2,"0")) } else{ - endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); - startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); + // endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); + // startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); + setStartDate(dragEndDay.getFullYear() + '-' + String(dragEndDay.getMonth()+1).padStart(2,"0") + '-' + String(dragEndDay.getDate()).padStart(2,"0")) + setEndDate(dragStartDay.getFullYear() + '-' + String(dragStartDay.getMonth()+1).padStart(2,"0") + '-' + String(dragStartDay.getDate()).padStart(2,"0")) } // console.log(startDate); // console.log(endDate); setUsingDate({startDate:startDate, endDate:endDate}) + setFinish(true); }; - const handleClick = (newDate) => { + const handleClick = (newDate, idx, comp) => { + if(startDate && !finish){ + // endDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate(); + setEndDate(newDate.getFullYear() + '-' + String(newDate.getMonth()+1).padStart(2,"0") + '-' + 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() + '-' + String(new Date(sd).getMonth()+1).padStart(2,"0") + '-' + String(new Date(sd).getDate()).padStart(2,"0")) + setEndDate(new Date(ed).getFullYear() + '-' + String(new Date(ed).getMonth()+1).padStart(2,"0") + '-' + String(new Date(ed).getDate()).padStart(2,"0")) + + if(sd < fDay)sd = fDay; + if(ed > eDay)ed = eDay; + + 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); + elm.classList.remove("dragging") + } + } + 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") + } + } + setUsingDate({ + startDate: new Date(sd).getFullYear() + '-' + String(new Date(sd).getMonth()+1).padStart(2,"0") + '-' + String(new Date(sd).getDate()).padStart(2,"0"), + endDate: new Date(ed).getFullYear() + '-' + String(new Date(ed).getMonth()+1).padStart(2,"0") + '-' + String(new Date(ed).getDate()).padStart(2,"0") + }) + setFinish(true); + } + else{ + console.log(fDay, eDay, new Date(fDay), new Date(eDay)) + 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() + '-' + String(newDate.getMonth()+1).padStart(2,"0") + '-' + String(newDate.getDate()).padStart(2,"0")); + const elm = document.getElementById(newDate - 0); + elm.classList.add("dragging") + // console.log("s", startDate); + setFinish(false); + } + } + + const removeDrag = (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()}`) + // 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 !== nowMonth) cn = "cellb"; - tmpArr.push( - <TableCell k={day} cn={[cn, dragging].join(" ")} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/> - ); + // console.log(startDate, endDate); + // console.log(new Date(day), new Date(startDate+'T00:00:00'), new Date(endDate+'T00:00:00')) + if(day >= new Date(startDate+'T00:00:00')-0 && day <= new Date(endDate+'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 k={day} cn={cn} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/> + ); + } day+=(60*60*24*1000) } calendarArr.push( @@ -128,6 +211,9 @@ function CalendarMonth({ usingDate, setUsingDate }){ const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base const [nowYear, setNowYear] = useState(currentDay.getFullYear()); + const [startDate, setStartDate] = useState(); + const [endDate, setEndDate] = useState(); + const prevMonth = () => { let newMonth = nowMonth - 1; if(newMonth < 1){ @@ -154,7 +240,7 @@ function CalendarMonth({ usingDate, setUsingDate }){ <h1>{nowYear}</h1> <table className="calendarTable"> <MakeDay/> - <MakeCell nowYear={nowYear} nowMonth={nowMonth} usingDate={usingDate} setUsingDate={setUsingDate}></MakeCell> + <MakeCell nowYear={nowYear} nowMonth={nowMonth} usingDate={usingDate} setUsingDate={setUsingDate} startDate={startDate} endDate={endDate} setStartDate={setStartDate} setEndDate={setEndDate}></MakeCell> </table> </div> ); diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js index f2acf797ff1a159dcd41d52b836cde0b9a75208f..58446ddd5055ecfb836bddfbc24458cdb0984f3a 100644 --- a/react-whenMeet/src/components/MeetingInfoForm.js +++ b/react-whenMeet/src/components/MeetingInfoForm.js @@ -67,6 +67,7 @@ function MeetingInfoForm() { try { console.log(startTime); console.log(endTime); + console.log(usingDate); const response = await axios.post("http://localhost:3000/meetings", { title: title, adminPassword: password,