import React, { useState } from "react" import './Calendar.css' import MakeDay2 from "./MakeDay2"; import TableCell from "./TableCell"; 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 = []; weekArr.push(<td></td>); // 시작 끝 값을 수정해서 일정 변경 for(let i = 0; i < 10; i++){ const forSelect = []; const minute = i*30; 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 = (week - 1) * 7 + j - firstDay+1; const newDate = new Date(nowYear, nowMonth-1, d); if(i===0){ let cn = "cella"; if(d < 1)cn = "cellb" else if(d > lastDate)cn = "cellb" weekArr.push(<td className={cn}>{newDate.getDate()}</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( <tr key={i}>{time} {forSelect}</tr> ); } return( <tbody> <tr>{weekArr}</tr> {selectArr} </tbody> ); } function CalendarWeek2({ availableTimes, setAvailableTimes, isContain }){ const [currentDay, setCurrentDay] = useState(new Date()); // 일요일 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 firstDay = (new Date(nowYear, nowMonth - 1, 1)).getDay(); const lastDay = (new Date(nowYear, nowMonth, 0)).getDay(); let maxWeek = 5; if(firstDay > lastDay)maxWeek=6; const prevWeek = () => { let newWeek = nowWeek - 1; let newMonth = nowMonth; let newYear = nowYear; if(newWeek < 1){ newWeek = maxWeek; newMonth = nowMonth - 1; if(newMonth < 1){ newMonth = 12; newYear = nowYear - 1; } } const fd = (new Date(newYear, newMonth - 1, 1)).getDay(); const ld = (new Date(newYear, newMonth, 0)).getDay(); if(maxWeek === 6 && fd < ld)newWeek-=1; else if(maxWeek === 5 && fd > ld)newWeek+=1; setNowWeek(newWeek); setNowMonth(newMonth); setNowYear(newYear); setCurrentDay(new Date(nowYear, nowMonth - 1, 1*(nowWeek-1) + nowDay)); } const nextWeek = () => { let newWeek = nowWeek + 1; let newMonth = nowMonth; let newYear = nowYear; if(newWeek > maxWeek){ newWeek = 1; newMonth = nowMonth + 1; if(newMonth > 12){ newMonth = 1; newYear = nowYear + 1; } } setNowWeek(newWeek); setNowMonth(newMonth); setNowYear(newYear); setCurrentDay(new Date(nowYear, nowMonth - 1, nowDate)); } return( <div className="calendar"> <div className="header"> <h1>{nowMonth}월 {nowWeek}주차</h1> <button onClick={prevWeek}>prev</button> <button onClick={nextWeek}>next</button> </div> <h1>{nowYear}</h1> <table className="calendarTable"> <MakeDay2/> <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth}availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} /> </table> </div> ); } export default CalendarWeek2;