Skip to content

Commit c988ead

Browse files
LUCETE012LUCETE012
committed
Update Calendar: Calendar 초기 세팅
1 parent 0360ef4 commit c988ead

File tree

4 files changed

+227
-0
lines changed

4 files changed

+227
-0
lines changed

‎frontend/src/calendar/Calendar.css

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
.react-calendar {
2+
width: 400px;
3+
max-width: 100%;
4+
height: 100%;
5+
background: white;
6+
/* border: 1px solid #a0a096; */
7+
display: flex;
8+
flex-direction: column;
9+
align-content: center;
10+
justify-content: space-around;
11+
font-family: Arial, Helvetica, sans-serif;
12+
line-height: 1.125em;
13+
padding: 30px;
14+
}
15+
16+
.react-calendar--doubleView {
17+
width: 700px;
18+
}
19+
20+
.react-calendar--doubleView .react-calendar__viewContainer {
21+
height: 100%;
22+
display: flex;
23+
margin: 0.5em;
24+
align-content: center;
25+
justify-content: center;
26+
}
27+
28+
.react-calendar--doubleView .react-calendar__viewContainer > * {
29+
height: 100%;
30+
width: 50%;
31+
margin: 0.5em;
32+
align-content: center;
33+
justify-content: center;
34+
}
35+
36+
.react-calendar,
37+
.react-calendar *,
38+
.react-calendar *:before,
39+
.react-calendar *:after {
40+
-moz-box-sizing: border-box;
41+
-webkit-box-sizing: border-box;
42+
box-sizing: border-box;
43+
}
44+
45+
.react-calendar button {
46+
margin: 0;
47+
border: 0;
48+
outline: none;
49+
}
50+
51+
.react-calendar button:enabled:hover {
52+
cursor: pointer;
53+
}
54+
55+
.react-calendar__navigation {
56+
display: flex;
57+
height: 44px;
58+
/* margin-bottom: 2em; */
59+
}
60+
61+
.react-calendar__navigation button {
62+
min-width: 44px;
63+
background: none;
64+
font-size: large;
65+
font-weight: 900;
66+
}
67+
68+
.react-calendar__navigation button:disabled {
69+
background-color: #f0f0f0;
70+
font-size: large;
71+
font-weight: 900;
72+
}
73+
74+
.react-calendar__navigation button:enabled:hover,
75+
.react-calendar__navigation button:enabled:focus {
76+
background-color: #e6e6e6;
77+
font-size: large;
78+
font-weight: 900;
79+
}
80+
81+
.react-calendar__month-view__weekdays {
82+
text-align: center;
83+
text-transform: uppercase;
84+
font: inherit;
85+
font-size: 0.75em;
86+
font-weight: bold;
87+
}
88+
89+
.react-calendar__month-view__weekdays__weekday {
90+
padding: 1rem;
91+
}
92+
93+
.react-calendar__month-view__weekNumbers .react-calendar__tile {
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
font: inherit;
98+
font-size: 0.75em;
99+
font-weight: bold;
100+
}
101+
102+
.react-calendar__month-view__days__day--weekend {
103+
color: #d10000;
104+
}
105+
106+
.react-calendar__month-view__days__day--neighboringMonth,
107+
.react-calendar__decade-view__years__year--neighboringDecade,
108+
.react-calendar__century-view__decades__decade--neighboringCentury {
109+
color: #757575;
110+
}
111+
112+
.react-calendar__year-view .react-calendar__tile,
113+
.react-calendar__decade-view .react-calendar__tile,
114+
.react-calendar__century-view .react-calendar__tile {
115+
padding: 3em 0.5em;
116+
}
117+
118+
.react-calendar__tile {
119+
max-width: 100%;
120+
padding: 16px 8px;
121+
background: none;
122+
text-align: center;
123+
line-height: 20px;
124+
font: inherit;
125+
font-size: 0.833em;
126+
margin: 2px;
127+
}
128+
129+
.react-calendar__tile:disabled {
130+
background-color: #f0f0f0;
131+
color: #ababab;
132+
border-radius: 50%;
133+
margin: 2px;
134+
}
135+
136+
.react-calendar__month-view__days__day--neighboringMonth:disabled,
137+
.react-calendar__decade-view__years__year--neighboringDecade:disabled,
138+
.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
139+
color: #cdcdcd;
140+
border-radius: 50%;
141+
}
142+
143+
.react-calendar__tile:enabled:hover,
144+
.react-calendar__tile:enabled:focus {
145+
background-color: #e6e6e6;
146+
border-radius: 50%;
147+
}
148+
149+
.react-calendar__tile--now {
150+
background: #ffff76;
151+
border-radius: 50%;
152+
}
153+
154+
.react-calendar__tile--now:enabled:hover,
155+
.react-calendar__tile--now:enabled:focus {
156+
background: #ffffa9;
157+
border-radius: 50%;
158+
}
159+
160+
.react-calendar__tile--hasActive {
161+
background: #76baff;
162+
border-radius: 50%;
163+
}
164+
165+
.react-calendar__tile--hasActive:enabled:hover,
166+
.react-calendar__tile--hasActive:enabled:focus {
167+
background: #a9d4ff;
168+
border-radius: 50%;
169+
}
170+
171+
.react-calendar__tile--active {
172+
background: #006edc;
173+
color: white;
174+
border-radius: 50%;
175+
}
176+
177+
.react-calendar__tile--active:enabled:hover,
178+
.react-calendar__tile--active:enabled:focus {
179+
background: #1087ff;
180+
border-radius: 50%;
181+
}
182+
183+
.react-calendar--selectRange .react-calendar__tile--hover {
184+
background-color: #e6e6e6;
185+
border-radius: 50%;
186+
}

‎frontend/src/calendar/CalendarPage.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { useState } from 'react';
2+
import Calendar from 'react-calendar';
3+
import moment from 'moment';
4+
import './Calendar.css';
5+
6+
function CalendarPage() {
7+
const [value, onChange] = useState(new Date()); // 초기값은 현재 날짜
8+
9+
return (
10+
<Calendar
11+
onChange={onChange}
12+
value={value}
13+
formatDay={(locale, date) => moment(date).format('D')} // 일 제거 숫자만 보이게
14+
formatYear={(locale, date) => moment(date).format('YYYY')}
15+
formatMonthYear={(locale, date) => moment(date).format('YYYY. MM')}
16+
next2Label={null}
17+
prev2Label={null}
18+
minDetail="year"
19+
calendarType="gregory"
20+
/>
21+
);
22+
}
23+
24+
export default CalendarPage;

‎frontend/src/tailwind.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎frontend/tailwind.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ['./src/**/*.{html,js}'],
4+
theme: {
5+
extend: {
6+
colors: {
7+
primary: {
8+
left_gray: '#22232c',
9+
},
10+
},
11+
},
12+
},
13+
plugins: [],
14+
};

0 commit comments

Comments
 (0)