From 98a7d00702b8039ee5b645f8e65c9b60a6ef0ca2 Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Mon, 13 Nov 2023 23:12:00 +0900
Subject: [PATCH] [ADD]component for month calendar
---
react-whenMeet/src/components/Calendar.js | 6 +-
.../src/components/CalendarMonth.jsx | 100 ++++++++++++++++++
react-whenMeet/src/components/MakeDay.jsx | 18 ++++
react-whenMeet/src/components/MakeHeader.jsx | 9 ++
react-whenMeet/src/styles/HomeMake.css | 13 +++
5 files changed, 143 insertions(+), 3 deletions(-)
create mode 100644 react-whenMeet/src/components/CalendarMonth.jsx
create mode 100644 react-whenMeet/src/components/MakeDay.jsx
create mode 100644 react-whenMeet/src/components/MakeHeader.jsx
diff --git a/react-whenMeet/src/components/Calendar.js b/react-whenMeet/src/components/Calendar.js
index f1ef3ff..634214c 100644
--- a/react-whenMeet/src/components/Calendar.js
+++ b/react-whenMeet/src/components/Calendar.js
@@ -1,14 +1,14 @@
import React from 'react';
import { useState } from 'react';
-import ReactCalendar from 'react-calendar';
-import 'react-calendar/dist/Calendar.css';
import Input from './Input';
+import CalendarMonth from './CalendarMonth';
+import CalendarWeek from './CalendarWeek';
function Calendar({onChange}){
return(
<div>
<h2>달력</h2>
- <ReactCalendar onChange={onChange} />
+ <CalendarMonth/>
</div>
);
}
diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx
new file mode 100644
index 0000000..6d28111
--- /dev/null
+++ b/react-whenMeet/src/components/CalendarMonth.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react"
+import MakeDay from "./MakeDay";
+import MakeHeader from "./MakeHeader";
+
+function MakeCell(props){//주차 데이터를 담을 공간
+ const calendarArr = [];
+
+ const startDay = new Date(props.nowYear, props.nowMonth - 1, 1);
+ const lastDay = new Date(props.nowYear, props.nowMonth, 0);
+ const lastMonthDate = new Date(props.nowYear, props.nowMonth - 1, 0).getDate();
+
+ let nowDate = startDay.getDate();
+ const lastDate = lastDay.getDate();
+
+ // cellb는 이전 달이나 다음 달이라서 색을 연하게 칠하게 할 거고
+ // cella는 이번 달이라서 진하게 색을 칠할 거임
+ if(startDay.getDay() > 0){
+ const tmpArr = [];
+ for(let i = startDay.getDay(); i > 0; i--)tmpArr.push(
+ <td className="cellb" onClick={()=>{alert("dd");}}>{lastMonthDate - i + 1}</td>
+ );
+ for(let i = startDay.getDay(); i < 7; i++){
+ tmpArr.push(
+ <td className="cella" onClick={()=>{alert("dd");}}>{nowDate}</td>
+ )
+ nowDate+=1;
+ }
+ calendarArr.push(
+ <tr>{tmpArr}</tr>
+ );
+ }
+
+ while(nowDate <= lastDate){
+ const tmpArr = [];
+ for(let i = 0; i < 7; i++){
+ let tmp = nowDate;
+ let cn = "cella";
+ if(tmp > lastDate){
+ cn = "cellb";
+ tmp-=lastDate;
+ }
+ tmpArr.push(
+ <td className={cn} onClick={()=>{alert("dd");}}>{tmp}</td>
+ )
+ nowDate+=1;
+ }
+ calendarArr.push(
+ <tr>{tmpArr}</tr>
+ );
+ }
+
+
+ return(
+ <tbody>
+ {calendarArr}
+ </tbody>
+ );
+}
+
+function CalendarMonth(){
+ const [currentDay, setCurrentDay] = useState(new Date());
+
+ // 일요일 0 시작
+ const nowDay = currentDay.getDay();
+ const [nowDate, setNowDate] = useState(currentDay.getDate());
+ const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base
+ const [nowYear, setNowYear] = useState(currentDay.getFullYear());
+
+ const prevMonth = () => {
+ let newMonth = nowMonth - 1;
+ if(newMonth < 1){
+ newMonth = nowMonth + 11;
+ setNowYear(nowYear - 1);
+ }
+ setNowMonth(newMonth);
+ setCurrentDay(new Date(nowYear, nowMonth, nowDate));
+ }
+ const nextMonth = () => {
+ let newMonth = nowMonth + 1;
+ if(newMonth > 12){
+ newMonth = nowMonth - 11;
+ setNowYear(nowYear + 1);
+ }
+ setNowMonth(newMonth);
+ setCurrentDay(new Date(nowYear, nowMonth, nowDate));
+ }
+
+ return(
+ <div className="calendar">
+ <MakeHeader nowMonth={nowMonth} prevMonth={prevMonth} nextMonth={nextMonth}></MakeHeader>
+ <h1>{nowYear}</h1>
+ <table className="calendarTable">
+ <MakeDay/>
+ <MakeCell nowYear={nowYear} nowMonth={nowMonth}></MakeCell>
+ </table>
+ </div>
+ );
+}
+
+export default CalendarMonth;
\ No newline at end of file
diff --git a/react-whenMeet/src/components/MakeDay.jsx b/react-whenMeet/src/components/MakeDay.jsx
new file mode 100644
index 0000000..8da2381
--- /dev/null
+++ b/react-whenMeet/src/components/MakeDay.jsx
@@ -0,0 +1,18 @@
+export default function MakeDay(){
+ const days = [];
+ const date = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+ for(let i = 0; i < 7; i++){
+ days.push(
+ <th className="table_head">{date[i]}</th>
+ )
+ }
+
+ return(
+ <thead>
+ <tr>
+ {days}
+ </tr>
+ </thead>
+ );
+}
\ No newline at end of file
diff --git a/react-whenMeet/src/components/MakeHeader.jsx b/react-whenMeet/src/components/MakeHeader.jsx
new file mode 100644
index 0000000..dfb51d8
--- /dev/null
+++ b/react-whenMeet/src/components/MakeHeader.jsx
@@ -0,0 +1,9 @@
+export default function MakeHeader(props){
+ return(
+ <div className="header">
+ <h1>{props.nowMonth}월</h1>
+ <button onClick={props.prevMonth}>prev</button>
+ <button onClick={props.nextMonth}>next</button>
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
index 1ad938c..64c92f4 100644
--- a/react-whenMeet/src/styles/HomeMake.css
+++ b/react-whenMeet/src/styles/HomeMake.css
@@ -51,6 +51,19 @@ button:hover {
background-color: #2980b9;
}
+.calendarTable {
+ margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
+}
+
+.calendarTable .cellb {
+ color: gray; /* 회색으로 글자색 지정 */
+}
+
+/* cella 클래스에 대한 스타일 */
+.calendarTable .cella {
+ color: black; /* 검정색으로 글자색 지정 */
+}
+
/* Media queries for responsiveness */
@media (max-width: 768px) {
form {
--
GitLab