Skip to content
Snippets Groups Projects
Commit b6d43bbb authored by 이권민's avatar 이권민
Browse files

[EDIT] 달력 로직 수정

parent b926cf44
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
react-whenMeet/src/components/CalendarMonth.jsx
+ 355
− 225
View file @ b6d43bbb
import React, { useState } from "react" import React, { useState } from "react";
import MakeDay from "./MakeDay"; import MakeDay from "./MakeDay";
import MakeHeader from "./MakeHeader"; import MakeHeader from "./MakeHeader";
import TableCell from "./TableCell"; import TableCell from "./TableCell";
function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate, startDate, endDate, setStartDate, setEndDate }){//주차 데이터를 담을 공간 function MakeCell({
const calendarArr = []; nowYear,
nowMonth,
const startDay = new Date(nowYear, nowMonth - 1, 1); usingDate,
const lastDay = new Date(nowYear, nowMonth, 0); setUsingDate,
const lastMonthDate = new Date(nowYear, nowMonth - 1, 0).getDate(); startDate,
endDate,
let nowDate = startDay.getDate(); setStartDate,
const lastDate = lastDay.getDate(); setEndDate,
}) {
const [dragging, setDragging] = useState(); //주차 데이터를 담을 공간
const [selectedDays, setSelectedDays] = useState([]); //선택된 날짜 const calendarArr = [];
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);
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")
}
};
const handleDragWhile = (newDate, idx, comp) => {
if(!isDragging)return;
setDragEndDay(newDate);
setFinish(false);
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);
// console.log(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);
elm.classList.add("dragging")
}
}
}; 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 startDate=""; let nowDate = startDay.getDate();
// let endDate=""; const lastDate = lastDay.getDate();
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 handleDragEnd = (newDate, idx) => { // 여기 달력 날짜 수정해야함
setIsDragging(false); const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - 0;
// setDragging("nope"); const eDay =
if(dragStartDay - 0 < dragEndDay - 0){ new Date(nowYear, nowMonth - 1, lastDate + 6 - lastDay.getDay()) - 0;
// startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
// endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); const handleDragStart = (newDate, idx, comp) => {
setStartDate(dragStartDay.getFullYear() + '-' + String(dragStartDay.getMonth()+1).padStart(2,"0") + '-' + String(dragStartDay.getDate()).padStart(2,"0")) setIsDragging(!isDragging);
setEndDate(dragEndDay.getFullYear() + '-' + String(dragEndDay.getMonth()+1).padStart(2,"0") + '-' + String(dragEndDay.getDate()).padStart(2,"0")) setDragStartDay(newDate);
} setFinish(false);
else{ for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) {
// endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); const elm = document.getElementById(day);
// startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); elm.classList.remove("dragging");
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); const handleDragWhile = (newDate, idx, comp) => {
// console.log(endDate); if (!isDragging) return;
setUsingDate({startDate:startDate, endDate:endDate}) setDragEndDay(newDate);
setFinish(true); setFinish(false);
};
let sd = dragStartDay - 0;
const handleClick = (newDate, idx, comp) => { let ed = newDate - 0;
if(startDate && !finish){ if (sd > ed) {
// endDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate(); let tmp = sd;
setEndDate(newDate.getFullYear() + '-' + String(newDate.getMonth()+1).padStart(2,"0") + '-' + String(newDate.getDate()).padStart(2,"0")); sd = ed;
// console.log("e", endDate); ed = tmp;
}
let sd = new Date(startDate+'T00:00:00') - 0; for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) {
let ed = new Date(newDate) - 0; const elm = document.getElementById(day);
// let sd = new Date(startDate) - 0; elm.classList.remove("dragging");
// let ed = new Date(newDate) - 0; }
// console.log(new Date(sd), new Date(ed), comp); const elm2 = document.getElementById(comp);
if(sd > ed){ // console.log(comp);
let tmp = sd; if (elm2.classList.contains("dragging")) {
sd = ed; for (let day = ed; day >= comp; day -= 60 * 60 * 24 * 1000) {
ed = tmp; const elm = document.getElementById(day);
} elm.classList.remove("dragging");
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")) } else {
for (let day = sd; day <= ed; day += 60 * 60 * 24 * 1000) {
setStartDate(new Date(sd).getFullYear() + '-' + String(new Date(sd).getMonth()+1).padStart(2,"0") + '-' + String(new Date(sd).getDate()).padStart(2,"0")) const elm = document.getElementById(day);
setEndDate(new Date(ed).getFullYear() + '-' + String(new Date(ed).getMonth()+1).padStart(2,"0") + '-' + String(new Date(ed).getDate()).padStart(2,"0")) elm.classList.add("dragging");
}
if(sd < fDay)sd = fDay; }
if(ed > eDay)ed = eDay; };
for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ // let startDate="";
const elm = document.getElementById(day); // let endDate="";
elm.classList.remove("dragging")
} const handleDragEnd = (newDate, idx) => {
const elm2 = document.getElementById(comp); setIsDragging(false);
if(elm2.classList.contains("dragging")){ // setDragging("nope");
for(let day = ed; day >= comp; day -= (60*60*24*1000)){ if (dragStartDay - 0 < dragEndDay - 0) {
const elm = document.getElementById(day); // startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
elm.classList.remove("dragging") // endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
} setStartDate(
} dragStartDay.getFullYear() +
else { "-" +
for(let day = sd; day <= ed; day += (60*60*24*1000)){ String(dragStartDay.getMonth() + 1).padStart(2, "0") +
const elm = document.getElementById(day); "-" +
// console.log(elm, day); String(dragStartDay.getDate()).padStart(2, "0")
elm.classList.add("dragging") );
} setEndDate(
} dragEndDay.getFullYear() +
setUsingDate({ "-" +
startDate: new Date(sd).getFullYear() + '-' + String(new Date(sd).getMonth()+1).padStart(2,"0") + '-' + String(new Date(sd).getDate()).padStart(2,"0"), String(dragEndDay.getMonth() + 1).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") "-" +
}) String(dragEndDay.getDate()).padStart(2, "0")
setFinish(true); );
setUsingDate({
startDate:
dragStartDay.getFullYear() +
"-" +
String(dragStartDay.getMonth() + 1).padStart(2, "0") +
"-" +
String(dragStartDay.getDate()).padStart(2, "0"),
endDate:
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();
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")
);
setUsingDate({
startDate:
dragEndDay.getFullYear() +
"-" +
String(dragEndDay.getMonth() + 1).padStart(2, "0") +
"-" +
String(dragEndDay.getDate()).padStart(2, "0"),
endDate:
dragStartDay.getFullYear() +
"-" +
String(dragStartDay.getMonth() + 1).padStart(2, "0") +
"-" +
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() +
"-" +
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{ } else {
console.log(fDay, eDay, new Date(fDay), new Date(eDay)) for (let day = sd; day <= ed; day += 60 * 60 * 24 * 1000) {
for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ const elm = document.getElementById(day);
const elm = document.getElementById(day); // console.log(elm, day);
elm.classList.remove("dragging") elm.classList.add("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);
} }
}
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) => { const removeDrag = (newDate) => {
for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) {
const elm = document.getElementById(day); const elm = document.getElementById(day);
elm.classList.remove("dragging") 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)){ for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) {
const tmpArr = []; const tmpArr = [];
for(let i = 0; i < 7; i++){ for (let i = 0; i < 7; i++) {
let cn = "cella"; let cn = "cella";
const newDate = new Date(day); const newDate = new Date(day);
if(newDate.getMonth() + 1 !== nowMonth) cn = "cellb"; if (newDate.getMonth() + 1 !== nowMonth) cn = "cellb";
// console.log(startDate, endDate); // console.log(startDate, endDate);
// console.log(new Date(day), new Date(startDate+'T00:00:00'), new Date(endDate+'T00:00:00')) // 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){ if (
cn+=" dragging"; day >= new Date(startDate + "T00:00:00") - 0 &&
tmpArr.push( day <= new Date(endDate + "T00:00:00") - 0
<TableCell k={day} cn={cn} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/> ) {
); cn += " dragging";
} tmpArr.push(
else{ <TableCell
tmpArr.push( k={day}
<TableCell k={day} cn={cn} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/> cn={cn}
); handleClick={handleClick}
} newDate={newDate}
day+=(60*60*24*1000) hds={handleDragStart}
} hdw={handleDragWhile}
calendarArr.push( hde={handleDragEnd}
<tr>{tmpArr}</tr> i={i}
value={newDate.getDate()}
/>
); );
} else {
day-=(60*60*24*1000) 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(<tr>{tmpArr}</tr>);
day -= 60 * 60 * 24 * 1000;
return( }
<tbody>
{calendarArr} return <tbody>{calendarArr}</tbody>;
</tbody>
);
} }
function CalendarMonth({ usingDate, setUsingDate }){ function CalendarMonth({ usingDate, setUsingDate }) {
const [currentDay, setCurrentDay] = useState(new Date()); const [currentDay, setCurrentDay] = useState(new Date());
// 일요일 0 시작 // 일요일 0 시작
const nowDay = currentDay.getDay(); const nowDay = currentDay.getDay();
const [nowDate, setNowDate] = useState(currentDay.getDate()); const [nowDate, setNowDate] = useState(currentDay.getDate());
const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base
const [nowYear, setNowYear] = useState(currentDay.getFullYear()); const [nowYear, setNowYear] = useState(currentDay.getFullYear());
const [startDate, setStartDate] = useState(); const [startDate, setStartDate] = useState();
const [endDate, setEndDate] = useState(); const [endDate, setEndDate] = useState();
const prevMonth = () => { const prevMonth = () => {
let newMonth = nowMonth - 1; let newMonth = nowMonth - 1;
if(newMonth < 1){ if (newMonth < 1) {
newMonth = nowMonth + 11; newMonth = nowMonth + 11;
setNowYear(nowYear - 1); setNowYear(nowYear - 1);
}
setNowMonth(newMonth);
setCurrentDay(new Date(nowYear, nowMonth, nowDate));
} }
const nextMonth = () => { setNowMonth(newMonth);
let newMonth = nowMonth + 1; setCurrentDay(new Date(nowYear, nowMonth, nowDate));
if(newMonth > 12){ };
newMonth = nowMonth - 11; const nextMonth = () => {
setNowYear(nowYear + 1); let newMonth = nowMonth + 1;
} if (newMonth > 12) {
setNowMonth(newMonth); newMonth = nowMonth - 11;
setCurrentDay(new Date(nowYear, nowMonth, nowDate)); setNowYear(nowYear + 1);
} }
setNowMonth(newMonth);
setCurrentDay(new Date(nowYear, nowMonth, nowDate));
};
return( return (
<div className="calendar"> <div className="calendar">
<h1>달력</h1> <h1>달력</h1>
<MakeHeader nowMonth={nowMonth} prevMonth={prevMonth} nextMonth={nextMonth}></MakeHeader> <MakeHeader
<h1>{nowYear}</h1> nowMonth={nowMonth}
<table className="calendarTable"> prevMonth={prevMonth}
<MakeDay/> nextMonth={nextMonth}
<MakeCell nowYear={nowYear} nowMonth={nowMonth} usingDate={usingDate} setUsingDate={setUsingDate} startDate={startDate} endDate={endDate} setStartDate={setStartDate} setEndDate={setEndDate}></MakeCell> ></MakeHeader>
</table> <h1>{nowYear}</h1>
</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>
);
} }
export default CalendarMonth; export default CalendarMonth;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr