diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx
index d0b70290e927807bdc53261f580dfec3b45a634f..983aab5694bd67481b9cd44d6dc8d4787040ea95 100644
--- a/react-whenMeet/src/components/CalendarWeek2.jsx
+++ b/react-whenMeet/src/components/CalendarWeek2.jsx
@@ -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,16 +76,23 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
}
-
- if(isContain(newDate-0+i)){
+ // console.log(newDate, startDate, endDate);
+ if(newDate < startDate || newDate > endDate){
forSelect.push(
- <TableCell k={newDate - 0 + i} cn={"dragging"} newDate={newDate} handleClick={handleClick} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i}/>
+ <TableCell k={newDate - 0 + i} cn={"noDate"} newDate={newDate} i={i}/>
);
}
else{
- forSelect.push(
- <TableCell k={newDate - 0 + i} newDate={newDate} handleClick={handleClick} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i}/>
- );
+ 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}/>
+ );
+ }
+ else{
+ forSelect.push(
+ <TableCell k={newDate - 0 + i} newDate={newDate} handleClick={handleClick} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i}/>
+ );
+ }
}
}
@@ -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>
);
diff --git a/react-whenMeet/src/components/TableCell.jsx b/react-whenMeet/src/components/TableCell.jsx
index bce8c03750fa51ae237227f6fc786718c9cc15d7..7c7be2cb1c080420fc55705611ffded748129c0d 100644
--- a/react-whenMeet/src/components/TableCell.jsx
+++ b/react-whenMeet/src/components/TableCell.jsx
@@ -1,15 +1,25 @@
import { useEffect } from "react";
export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i, value }){
- return(
- <td className={cn}
- key={k}
- id={k}
- draggable
- onDragStart={()=>hds(newDate, i, k)}
- onDragEnter={()=>hdw(newDate, i, k)}
- onDragEnd={()=>hde(newDate, i)}
- onClick={()=>handleClick(newDate)}>
- {value} </td>
- );
+ if(cn==="noDate"){
+ return(
+ <td className={cn}
+ key={k}
+ id={k} >
+ {value} </td>
+ );
+ }
+ else{
+ return(
+ <td className={cn}
+ key={k}
+ id={k}
+ draggable
+ onDragStart={()=>hds(newDate, i, k)}
+ onDragEnter={()=>hdw(newDate, i, k)}
+ onDragEnd={()=>hde(newDate, i)}
+ onClick={()=>handleClick(newDate)}>
+ {value} </td>
+ );
+ }
}
\ No newline at end of file
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 0257ab5c4b320d72688864ee4ae51d0dbc2affef..c0fd680ea0bee4bb1281a9773b2dc8d756446cef 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -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);
}
@@ -28,22 +35,23 @@ function UserTimeInfo() {
}
};
fetchData();
- }, [id]);
+ }, [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="�쒖옉�섍린"
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
index 026405fce42d07bd65a5c414e21f3f328e7900f0..e85f64bb6d6a23fe2f53951fc48bc67b0d6d0dbc 100644
--- a/react-whenMeet/src/styles/HomeMake.css
+++ b/react-whenMeet/src/styles/HomeMake.css
@@ -92,6 +92,10 @@ button:hover {
background-color: red;
}
+.calendarTable .noDate {
+ background-color: gray;
+}
+
.title-box {
text-align: center;
border-width: 1px;