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

[EDIT] 주차달력 투표 선택지가 아닌 날짜 드래그 금지, 초기화면 구성 준비, 개인 투표 정보 반영

parent 97f1b760
No related branches found
No related tags found
No related merge requests found
......@@ -3,7 +3,7 @@ import '../styles/Calendar.css'
import MakeDay2 from "./MakeDay2";
import TableCell from "./TableCell";
function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain }){
function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime}){
const startDay = new Date(nowYear, nowMonth - 1, 1);
const lastDay = new Date(nowYear, nowMonth, 0);
const firstDay = startDay.getDay();
......@@ -13,31 +13,35 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
const [isDragging, setIsDragging] = useState(false); //드래그 여부
// 여기 달력 날짜 수정해야함
const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - (0);
const fDay = new Date(nowYear, nowMonth-1, (week-1)*7-firstDay+1) - (0);
const eDay = fDay + (60*60*24*1000)*6;
const handleDragStart = () => {
setIsDragging(!isDragging);
};
const doCheck=[...availableTimes];
const handleDragWhile = (newDate, idx, comp) => {
if(!isDragging)return;
console.log(newDate-0+idx);
const elm2 = document.getElementById(comp);
if(elm2.classList.contains("dragging")){
const elm = document.getElementById(newDate-0+idx);
elm.classList.remove("dragging")
setAvailableTimes(availableTimes.filter(key=>key!==newDate-0+idx));
doCheck.filter(key=>key!==newDate-0+idx);
}
else {
const elm = document.getElementById(newDate-0+idx);
elm.classList.add("dragging")
setAvailableTimes([...availableTimes, newDate-0+idx]);
doCheck.push(newDate-0+idx);
}
};
const handleDragEnd = () => {
setIsDragging(false);
setAvailableTimes(doCheck)
setDragging();
};
......@@ -56,7 +60,7 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
weekArr.push(<td></td>);
// 시작 끝 값을 수정해서 일정 변경
for(let i = 0; i < 10; i++){
for(let i = startTime; i < endTime; i++){
const forSelect = [];
const minute = i*30;
const time = (String(Math.floor(minute/60)).padStart(2,"0"))+":"+(String(minute%60).padStart(2,"0"));
......@@ -72,7 +76,13 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
}
// console.log(newDate, startDate, endDate);
if(newDate < startDate || newDate > endDate){
forSelect.push(
<TableCell k={newDate - 0 + i} cn={"noDate"} newDate={newDate} i={i}/>
);
}
else{
if(isContain(newDate-0+i)){
forSelect.push(
<TableCell k={newDate - 0 + i} cn={"dragging"} newDate={newDate} handleClick={handleClick} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i}/>
......@@ -84,6 +94,7 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
);
}
}
}
selectArr.push(
<tr key={i}>{time} {forSelect}</tr>
......@@ -98,15 +109,23 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
);
}
function CalendarWeek2({ availableTimes, setAvailableTimes, isContain }){
const [currentDay, setCurrentDay] = useState(new Date());
function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){
const [currentDay, setCurrentDay] = useState(today);
// 일요일 0 시작
const nowDay = currentDay.getDay();
const nowDate = currentDay.getDate();
const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base
const [nowYear, setNowYear] = useState(currentDay.getFullYear());
const [nowWeek, setNowWeek] = useState(1);
const getWeek = (date) => {
const currentDate = date.getDate();
const firstDay = new Date(date.setDate(1)).getDay();
return Math.ceil((currentDate + firstDay) / 7);
};
const [nowWeek, setNowWeek] = useState(getWeek(today));
const firstDay = (new Date(nowYear, nowMonth - 1, 1)).getDay();
const lastDay = (new Date(nowYear, nowMonth, 0)).getDay();
......@@ -166,7 +185,7 @@ function CalendarWeek2({ availableTimes, setAvailableTimes, isContain }){
<h1>{nowYear}</h1>
<table className="calendarTable">
<MakeDay2/>
<CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth}availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
<CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
</table>
</div>
);
......
import { useEffect } from "react";
export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i, value }){
if(cn==="noDate"){
return(
<td className={cn}
key={k}
id={k} >
{value} </td>
);
}
else{
return(
<td className={cn}
key={k}
......@@ -13,3 +22,4 @@ export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i
{value} </td>
);
}
}
\ No newline at end of file
......@@ -11,6 +11,13 @@ function UserTimeInfo() {
const [availableTimes, setAvailableTimes] = useState([]);
const {id} = useParams();
const [startTime, setStartTime] = useState(0);
const [endTime, setEndTiem] = useState(48);
const [today, setToday] = useState(new Date());
const [startDate, setStartDate] = useState(new Date(2023,10,30));
const [endDate, setEndDate] = useState(new Date(2023,11,4));
const handleState = () => {
setState((state) => !state);
}
......@@ -29,21 +36,22 @@ function UserTimeInfo() {
};
fetchData();
}, [id]);
const handleAlert = () => {
let sat = [...availableTimes].sort();
console.log(availableTimes);
const aa = [];
let t = [];
let l = availableTimes[0];
sat.forEach((em) => {
if(parseInt(l/10)!==parseInt(em/10)){
if(parseInt(l/100)!==parseInt(em/100)){
t=[];
}
l = em;
const newDate = new Date(parseInt(em));
const availableDate = newDate.getFullYear() + '-' + newDate.getMonth() + '-' + newDate.getDate();
t.push(em%10);
const availableDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate();
t.push(em%100);
aa.push({availableDate: availableDate, availableTimes: t})
});
......@@ -82,14 +90,7 @@ function UserTimeInfo() {
text="불가능한 시간"
onClick={handleState}
/>
{/* {state ? <Calendar
onChange={handleCalendar}
/> :
<Calendar
onChange={handleCalendar}
/>
} */}
<CalendarWeek2 state={state} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
<CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
<Button
type="submit"
text="시작하기"
......
......@@ -92,6 +92,10 @@ button:hover {
background-color: red;
}
.calendarTable .noDate {
background-color: gray;
}
.title-box {
text-align: center;
border-width: 1px;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment