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

[ADD] 주차 달력 추가 (Todos: 개인투표 정보 반영, 날짜 받아와서 초기 화면 구성)

parent 311547f6
No related branches found
No related tags found
No related merge requests found
import React, { useState } from "react"
import './Calendar.css'
import MakeDay2 from "./MakeDay2";
import TableCell from "./TableCell";
function CaculateWeek(props){
const startDay = new Date(props.nowYear, props.nowMonth - 1, 1);
const lastDay = new Date(props.nowYear, props.nowMonth, 0);
function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain }){
const startDay = new Date(nowYear, nowMonth - 1, 1);
const lastDay = new Date(nowYear, nowMonth, 0);
const firstDay = startDay.getDay();
const lastDate = lastDay.getDate();
const [dragging, setDragging] = useState();
const [isDragging, setIsDragging] = useState(false); //드래그 여부
// 여기 달력 날짜 수정해야함
const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - (0);
const eDay = fDay + (60*60*24*1000)*6;
const handleDragStart = () => {
setIsDragging(!isDragging);
};
const handleDragWhile = (newDate, idx, comp) => {
if(!isDragging)return;
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));
}
else {
const elm = document.getElementById(newDate-0+idx);
elm.classList.add("dragging")
setAvailableTimes([...availableTimes, newDate-0+idx]);
}
};
const handleDragEnd = () => {
setIsDragging(false);
setDragging();
};
const handleClick = () => {
for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
for(let indx = 0; indx < 10; indx++){
const elm = document.getElementById(day + indx);
elm.classList.remove("dragging")
}
}
setAvailableTimes([])
}
const weekArr = [];
const selectArr = [];
......@@ -19,8 +62,8 @@ function CaculateWeek(props){
const time = (String(Math.floor(minute/60)).padStart(2,"0"))+":"+(String(minute%60).padStart(2,"0"));
for(let j = 0; j < 7; j++){
const d = (props.week - 1) * 7 + j - firstDay+1;
const newDate = new Date(props.nowYear, props.nowMonth-1, d);
const d = (week - 1) * 7 + j - firstDay+1;
const newDate = new Date(nowYear, nowMonth-1, d);
if(i===0){
let cn = "cella";
......@@ -29,8 +72,17 @@ function CaculateWeek(props){
weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
}
forSelect.push(<td className="ttt" onClick={()=>console.log(newDate.toDateString(),i)}></td>);
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}/>
);
}
}
selectArr.push(
......@@ -46,7 +98,7 @@ function CaculateWeek(props){
);
}
function CalendarWeek2(){
function CalendarWeek2({ availableTimes, setAvailableTimes, isContain }){
const [currentDay, setCurrentDay] = useState(new Date());
// 일요일 0 시작
......@@ -114,7 +166,7 @@ function CalendarWeek2(){
<h1>{nowYear}</h1>
<table className="calendarTable">
<MakeDay2/>
<CaculateWeek week={nowWeek} currentDay={currentDay} nowYear={nowYear} nowMonth={nowMonth} />
<CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth}availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
</table>
</div>
);
......
......@@ -5,17 +5,15 @@ export default function MakeHeader({ prevMonth, nextMonth, nowMonth }) {
<div>
<h2>
<span className="header">
<Button
<button
type="button"
text="prev"
onClick={prevMonth}
/>
>prev</button>
{nowMonth}
<Button
<button
type="button"
text="next"
onClick={nextMonth}
/>
>next</button>
</span>
</h2>
</div>
......
import { useEffect } from "react";
export default function TableCell({k, cn, newDate, hds, hdw, hde, i, value}){
// useEffect(() => { console.log(k)}, []);
export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i, value }){
return(
<td className={cn}
key={k}
......@@ -10,7 +9,7 @@ export default function TableCell({k, cn, newDate, hds, hdw, hde, i, value}){
onDragStart={()=>hds(newDate, i, k)}
onDragEnter={()=>hdw(newDate, i, k)}
onDragEnd={()=>hde(newDate, i)}
onClick={()=>console.log(newDate.getMonth() + 1)}>
onClick={()=>handleClick(newDate)}>
{value} </td>
);
}
\ No newline at end of file
import { useState } from "react";
import Button from "../components/Button";
import Calendar from "../components/Calendar"
import CalendarWeek2 from "../components/CalendarWeek2"
import "../styles/HomeMake.css"
function UserTimeInfo() {
const [state, setState] = useState(true);
const [availableSchedules, setAvailableSchedules] = useState([]);
const [availableTimes, setAvailableTimes] = useState([]);
const handleState = () => {
setState((state) => !state);
......@@ -12,6 +14,49 @@ function UserTimeInfo() {
const handleCalendar = (value) => {
console.log('Selected Date:', value);
};
const handleAlert = () => {
let sat = [...availableTimes].sort();
const aa = [];
let t = [];
let l = availableTimes[0];
sat.forEach((em) => {
if(parseInt(l/10)!==parseInt(em/10)){
t=[];
}
l = em;
const newDate = new Date(parseInt(em));
const availableDate = newDate.getFullYear() + '-' + newDate.getMonth() + '-' + newDate.getDate();
t.push(em%10);
aa.push({availableDate: availableDate, availableTimes: t})
});
const groupedData = aa.reduce((acc, item) => {
if (!acc[item.availableDate]) {
acc[item.availableDate] = { availableDate: item.availableDate, availableTimes: new Set(item.availableTimes) };
} else {
item.availableTimes.forEach(time => acc[item.availableDate].availableTimes.add(time));
}
return acc;
}, {});
const compressedData = Object.values(groupedData).map(item => {
return { availableDate: item.availableDate, availableTimes: [...item.availableTimes] };
});
setAvailableSchedules(compressedData);
console.log(availableSchedules);
console.log(state);
}
const isContain = (value) => {
return availableTimes.includes(value);
}
return (
<div className="center-container">
<Button
......@@ -24,13 +69,19 @@ function UserTimeInfo() {
text="불가능한 시간"
onClick={handleState}
/>
{state ? <Calendar
{/* {state ? <Calendar
onChange={handleCalendar}
/> :
<Calendar
onChange={handleCalendar}
/>
}
} */}
<CalendarWeek2 state={state} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
<Button
type="submit"
text="시작하기"
onClick={handleAlert}
/>
</div>
);
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment