Skip to content

GitLab

Commit aebef277 authored by Lee Jin Ju's avatar Lee Jin Ju
Browse files

캘린더 삽입

parent cff2fffd
Show whitespace changes
Inline Side-by-side
server/client/package-lock.json
View file @ aebef277
......@@ -7798,14 +7798,11 @@
}
}
},
<<<<<<< HEAD
"jquery": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
},
=======
>>>>>>> origin/rkyoung7
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
......@@ -8545,6 +8542,11 @@
"minimist": "^1.2.5"
}
},
"moment": {
"version": "2.29.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz",
"integrity": "sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA=="
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
......@@ -9440,14 +9442,11 @@
"ts-pnp": "^1.1.6"
}
},
<<<<<<< HEAD
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
=======
>>>>>>> origin/rkyoung7
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
......@@ -12967,6 +12966,44 @@
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
"integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
},
"tui-calendar": {
"version": "1.12.14",
"resolved": "https://registry.npmjs.org/tui-calendar/-/tui-calendar-1.12.14.tgz",
"integrity": "sha512-wJuRBxw+1Yq1NG1Fb1fs2beDlFFmnObaBusXcRTyIH+j3ICzo+g7ic/KI+4mQ3WBgEuBRNkwSUejmaua6qFPTg==",
"requires": {
"tui-code-snippet": "^1.5.0",
"tui-date-picker": "^4.0.2",
"tui-time-picker": "^2.0.1"
}
},
"tui-code-snippet": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-1.5.2.tgz",
"integrity": "sha512-6UqTlQaaC1KLcmC0HAoq5dtl1G4Fib+R+NC7pmaV7kiIlZ7JqKhUmnOoGRcreAyzd81UTK/vCvhrw9QJskpCFQ=="
},
"tui-date-picker": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/tui-date-picker/-/tui-date-picker-4.1.0.tgz",
"integrity": "sha512-ls/8yGuWe9MPa9SzL5iQiuyVpmDCdcJgyfg5O73U0sw+ba6Y1NLOuyRDrSFaT4tKg5jm3zeLD98I9jhYCT7P/g==",
"requires": {
"tui-time-picker": "^2.0.3"
}
},
"tui-time-picker": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tui-time-picker/-/tui-time-picker-2.0.3.tgz",
"integrity": "sha512-S9pkPyAhixYMYsWIA/acaLBuoFBJGohWl9sQyWzSupqEYY4s+QNStl3kJ76Q29VkTl51+LrXm+0SJ1inP0Sheg==",
"requires": {
"tui-code-snippet": "^2.2.0"
},
"dependencies": {
"tui-code-snippet": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-2.3.2.tgz",
"integrity": "sha512-6jGbM/m7A2L59lJSripwMVp87awrWgJXezlLV8GuAha3s0k01E4+MndoU5WlXd4dauVRgzHhKguTVslx/jMehw=="
}
}
},
"tunnel-agent": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
......
server/client/package.json
View file @ aebef277
......@@ -10,12 +10,14 @@
"bootstrap": "^4.5.2",
"formik": "^2.1.5",
"jquery": "^3.5.1",
"moment": "^2.29.0",
"popper.js": "^1.16.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"styled-components": "^5.2.0",
"tui-calendar": "^1.12.14",
"yup": "^0.29.3"
},
"scripts": {
......
server/client/src/Components/Calendar.js 0 → 100644
View file @ aebef277
import React, { useState, useEffect } from 'react';
import Calendar from 'tui-calendar';
import "tui-calendar/dist/tui-calendar.css";
const calendar = new Calendar('#calendar', {
defaultView: 'week',
// useCreationPopup: true,
// useDetailPopup: true
});
calendar.createSchedules([
{
id: '1',
calendarId: 'Major Lecture',
title: '자료 구조',
category: 'time',
start: '2018-11-20T10:30:00',
end: '2018-11-20T12:30:00'
},
{
id: '2',
calendarId: 'General Lecture',
title: '건강과 영양',
category: 'time',
dueDateClass: '',
start: '2018-11-20T14:30:00',
end: '2018-11-20T16:30:00',
isReadOnly: true // schedule is read-only
}
]);
calendar.render();
export default Calendar
\ No newline at end of file
server/client/src/Pages/HomePage.js
View file @ aebef277
import React, { useState, useEffect } from 'react';
import Menu from '../Components/Menu';
import Calendar from '../Components/Calendar';
import styled from 'styled-components';
const Drop = styled.div`
& button {
border solid 1px;
}
`
const Schedule = styled.div`
& ul {
list-style-type: none;
......@@ -36,13 +43,14 @@ const Schedule = styled.div`
`
function Home() {
const [click, setState] = useState();
return (
<div>
<Menu />
<div className="container">
<div className="container mt-3">
<h2>대관 현황</h2>
<p>
<strong>대관 가능 시간</strong>
<ul>
......@@ -51,144 +59,43 @@ function Home() {
</ul>
</p>
<ul className="nav nav-tabs float-right" id="myTab" role="tablist">
<Drop className="row dropdown mt-1 mb-2">
<button className="btn btn-lg dropdown-toggle mx-auto col-5" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
기간을 선택해주십시오.
</button>
<div className="dropdown-menu col-5" aria-labelledby="dropdownMenuButton">
<a className="dropdown-item" href="#">10 / 5 ~ 10 / 9</a>
<a className="dropdown-item" href="#">10 / 12 ~ 10 / 16</a>
<a className="dropdown-item" href="#">10 / 19 ~ 10 / 23</a>
</div>
</Drop>
<ul className="nav nav-tabs nav-justified mt-4" id="myTab" role="tablist">
<li className="nav-item">
<a className="nav-link active" id="7-tab" data-toggle="tab" href="#7"> 7-223 </a>
<a className="nav-link active" id="7-tab" data-toggle="tab" href="#7" role="tab"> 7-223 </a>
</li>
<li className="nav-item">
<a className="nav-link" id="9-tab" data-toggle="tab" href="#9"> 9-116 </a>
<a className="nav-link" id="9-tab" data-toggle="tab" href="#9" role="tab"> 9-116 </a>
</li>
<li className="nav-item">
<a className="nav-link" id="25-tab" data-toggle="tab" href="#25"> 25-307 </a>
<a className="nav-link" id="25-tab" data-toggle="tab" href="#25" role="tab"> 25-307 </a>
</li>
</ul>
<div className="tab-content" id="myTabContent">
<div className="tab-pane fade show active" id="7" role="tabpanel" aria-labelledby="7-tab">123</div>
<div className="tab-pane fade" id="9" role="tabpanel" aria-labelledby="9-tab">...</div>
<div className="tab-pane fade" id="25" role="tabpanel" aria-labelledby="252-tab">...</div>
<div className="tab-pane fade show active" id="7" role="tabpanel">
<Schedule className="row cd-schedule cd-schedule--loading margin-top-lg margin-bottom-lg js-cd-schedule">
<div className="col-12 cd-schedule__events">
<ul>
<li className="cd-schedule__group">
<div className="cd-schedule__top-info"><span> 시간\요일</span></div>
</li>
<li className="cd-schedule__group">
<div className="cd-schedule__top-info"><span>월</span></div>
<ul>
<li className="cd-schedule__event">
<a data-start="10:00" data-end="12:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">확률론</em>
</a>
</li>
<li className="cd-schedule__event">
<a data-start="17:00" data-end="18:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">수치해석학</em>
</a>
</li>
</ul>
</li>
<li className="cd-schedule__group">
<div className="cd-schedule__top-info"><span>화</span></div>
<ul>
<li className="cd-schedule__event">
<a data-start="11:00" data-end="12:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">해석학</em>
</a>
</li>
<li className="cd-schedule__event">
<a data-start="16:00" data-end="18:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">수치해석학</em>
</a>
</li>
</ul>
</li>
<li className="cd-schedule__group">
<div className="cd-schedule__top-info"><span>수</span></div>
<ul>
<li className="cd-schedule__event">
<a data-start="9:00" data-end="10:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">산업수학</em>
</a>
</li>
<li className="cd-schedule__event">
<a data-start="18:00" data-end="19:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">해석학</em>
</a>
</li>
</ul>
</li>
<li className="cd-schedule__group">
<div className="cd-schedule__top-info"><span>목</span></div>
<ul>
<li className="cd-schedule__event">
<a data-start="9:00" data-end="11:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">해석학</em>
</a>
</li>
<li className="cd-schedule__event">
<a data-start="11:00" data-end="12:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">확률론</em>
</a>
</li>
<li className="cd-schedule__event">
<a data-start="16:00" data-end="17:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">수치해석학</em>
</a>
</li>
</ul>
</li>
<li className="cd-schedule__group">
<div className="cd-schedule__top-info"><span>금</span></div>
<ul>
<li className="cd-schedule__event">
<a data-start="13:00" data-end="15:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
<em className="cd-schedule__name">산업수학</em>
</a>
</li>
</ul>
</li>
</ul>
</div>
{/* <Calendar />
<div className="container mt-1 mb-2"></div> */}
<div className="col-12 cd-schedule__timeline">
<ul>
<li><span>09:00</span></li>
<li><span>10:00</span></li>
<li><span>11:00</span></li>
<li><span>12:00</span></li>
<li><span>13:00</span></li>
<li><span>14:00</span></li>
<li><span>15:00</span></li>
<li><span>16:00</span></li>
<li><span>17:00</span></li>
<li><span>18:00</span></li>
<li><span>19:00</span></li>
<li><span>20:00</span></li>
<li><span>21:00</span></li>
<li><span>22:00</span></li>
</ul>
</div>
{/* <div class="cd-schedule-modal">
<header class="cd-schedule-modal__header">
<div class="cd-schedule-modal__content">
<span class="cd-schedule-modal__date"></span>
<h3 class="cd-schedule-modal__name"></h3>
<div className="tab-pane fade" id="9" role="tabpanel" aria-labelledby="9-tab">
</div>
<div class="cd-schedule-modal__header-bg"></div>
</header>
<div class="cd-schedule-modal__body">
<div class="cd-schedule-modal__event-info"></div>
<div class="cd-schedule-modal__body-bg"></div>
<div className="tab-pane fade" id="25" role="tabpanel" aria-labelledby="25-tab">
</div>
<a href="#0" class="cd-schedule-modal__close text-replace">Close</a>
</div> */}
</Schedule>
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment