Newer
Older
import TableCell from "./TableCell";
function CaculateWeek({ nowYear, nowMonth, week, availableSchedules, 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();
const lastDate = lastDay.getDate();
const [dragging, setDragging] = useState();
const [isDragging, setIsDragging] = useState(false); //드래그 여부
// 여기 달력 날짜 수정해야함
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);
};
let doCheck=availableTimes;
doCheck.sort();
const handleDragWhile = (newDate, idx, comp) => {
if(!isDragging)return;
const elm2 = document.getElementById(comp);
if(isContain(newDate-0+idx) || elm2.classList.contains("dragging")){
const elm = document.getElementById(newDate-0+idx);
elm.classList.remove("dragging")
doCheck = doCheck.filter((key)=>key!==(newDate-0+idx));
}
else {
const elm = document.getElementById(newDate-0+idx);
elm.classList.add("dragging")
doCheck.push(newDate-0+idx);
}
};
const handleDragEnd = () => {
setIsDragging(false);
setAvailableTimes(doCheck)
const handleClick = (newDate, idx, comp) => {
// for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
// for(let indx = startTime; indx <= endTime; indx++){
// const elm = document.getElementById(day + indx);
// elm.classList.remove("dragging")
// }
// }
// setAvailableTimes([])
const elm2 = document.getElementById(comp);
// console.log(comp, elm2);
if(isContain(newDate-0+idx) || elm2.classList.contains("dragging")){
const elm = document.getElementById(newDate-0+idx);
elm.classList.remove("dragging")
doCheck = doCheck.filter((key)=>key!==(newDate-0+idx));
else {
const elm = document.getElementById(newDate-0+idx);
elm.classList.add("dragging")
doCheck.push(newDate-0+idx);
}
setAvailableTimes(doCheck)
const weekArr = [];
const selectArr = [];
weekArr.push(<td></td>);
// 시작 끝 값을 수정해서 일정 변경
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"));
for(let j = 0; j < 7; j++){
const d = (week - 1) * 7 + j - firstDay+1;
let cn = "cella";
if(d < 1)cn = "cellb"
else if(d > lastDate)cn = "cellb"
weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
}
if(newDate < startDate || newDate > endDate){
<TableCell k={newDate - 0 + i} cn={"noDate"} newDate={newDate} 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}/>
);
}
}
selectArr.push(
<tr key={i}>{time} {forSelect}</tr>
);
}
return(
<tbody>
<tr>{weekArr}</tr>
{selectArr}
</tbody>
);
}
function CalendarWeek2({ state, availableSchedules, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){
const [currentDay, setCurrentDay] = useState(today);
const nowDay = startDate.getDay();
const nowDate = startDate.getDate();
const [nowMonth, setNowMonth] = useState(startDate.getMonth() + 1); // zero-base
const [nowYear, setNowYear] = useState(startDate.getFullYear());
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(currentDay));
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
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>
{
state ?
<span>가능한 시간</span> :
<span>불가능한 시간</span>
}
<table className="calendarTable">
<MakeDay2/>
<CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} availableSchedules={availableSchedules} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />