242 lines
11 KiB
Plaintext
242 lines
11 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
|
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<script src="${pageContext.request.contextPath}/js/jquery/jquery-1.10.2.min.js"></script>
|
|
<script src="${pageContext.request.contextPath}/js/admins/user.js"></script>
|
|
<script src="${pageContext.request.contextPath}/js/admins/common.js"></script>
|
|
<link rel="stylesheet" HREF="${pageContext.request.contextPath}/css/admins/style.css" type="text/css">
|
|
|
|
<script>
|
|
var context = "${pageContext.request.contextPath}";
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const daysCells = document.querySelectorAll('.Day'); // 각 날짜 셀을 가져옴
|
|
const yyyyMmElement = document.querySelector('.yyyy-mm');
|
|
const prevMonthBtn = document.getElementById('prevMonth');
|
|
const nextMonthBtn = document.getElementById('nextMonth');
|
|
|
|
var currentYear = new Date().getFullYear();
|
|
var currentMonth = new Date().getMonth(); // 0 = January, 11 = December
|
|
|
|
// 달력을 렌더링하는 함수
|
|
function renderCalendar() {
|
|
const monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
|
|
const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay(); // 해당 월의 첫 번째 날의 요일
|
|
const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); // 해당 월의 마지막 날짜
|
|
const today = new Date();
|
|
|
|
// 이전 달의 마지막 날짜 계산
|
|
const lastDateOfPrevMonth = new Date(currentYear, currentMonth, 0).getDate(); // 지난달의 마지막 날짜
|
|
|
|
// 달의 헤더 업데이트
|
|
yyyyMmElement.textContent = currentYear + '.' + monthNames[currentMonth];
|
|
|
|
// 모든 날짜 셀 초기화 (빈칸으로 채우기)
|
|
daysCells.forEach(cell => {
|
|
cell.textContent = ''; // 셀을 비운다
|
|
cell.classList.remove('today', 'Su', 'Sa', 'inactive'); // 추가된 클래스를 초기화
|
|
});
|
|
|
|
// 지난달 날짜를 첫 주에 채우기
|
|
let dayCounter = 1;
|
|
for (let i = firstDayOfMonth - 1; i >= 0; i--) {
|
|
const cell = daysCells[i];
|
|
cell.textContent = lastDateOfPrevMonth - (firstDayOfMonth - 1 - i); // 지난달의 마지막 며칠 표시
|
|
cell.classList.add('inactive'); // 지난달 날짜에 비활성화 클래스 추가
|
|
}
|
|
|
|
// 이번 달 날짜 채우기
|
|
for (let i = firstDayOfMonth; i < firstDayOfMonth + lastDateOfMonth; i++) {
|
|
const cell = daysCells[i];
|
|
cell.textContent = dayCounter; // 날짜 숫자 추가
|
|
|
|
// 오늘 날짜 강조
|
|
if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && dayCounter === today.getDate()) {
|
|
cell.classList.add('today');
|
|
}
|
|
|
|
// 일요일은 빨간색, 토요일은 파란색
|
|
if (i % 7 === 0) {
|
|
cell.classList.add('Su'); // 일요일
|
|
} else if (i % 7 === 6) {
|
|
cell.classList.add('Sa'); // 토요일
|
|
}
|
|
|
|
dayCounter++;
|
|
}
|
|
|
|
// 다음 달 날짜를 마지막 주에 채우기
|
|
let nextMonthCounter = 1;
|
|
for (let i = firstDayOfMonth + lastDateOfMonth; i < daysCells.length; i++) {
|
|
const cell = daysCells[i];
|
|
cell.textContent = nextMonthCounter; // 다음 달의 첫 며칠 표시
|
|
cell.classList.add('inactive'); // 다음 달 날짜에 비활성화 클래스 추가
|
|
nextMonthCounter++;
|
|
}
|
|
}
|
|
|
|
// 이전 달로 이동
|
|
prevMonthBtn.addEventListener('click', () => {
|
|
currentMonth--;
|
|
if (currentMonth < 0) {
|
|
currentMonth = 11;
|
|
currentYear--;
|
|
}
|
|
renderCalendar();
|
|
});
|
|
|
|
// 다음 달로 이동
|
|
nextMonthBtn.addEventListener('click', () => {
|
|
currentMonth++;
|
|
if (currentMonth > 11) {
|
|
currentMonth = 0;
|
|
currentYear++;
|
|
}
|
|
renderCalendar();
|
|
});
|
|
|
|
// 초기 달력 렌더링
|
|
renderCalendar();
|
|
});
|
|
|
|
|
|
// 관리자화면
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
const rows = document.querySelectorAll('#Table_contents tbody tr td:nth-child(7)');
|
|
|
|
rows.forEach(function (cell) {
|
|
|
|
const text = cell.textContent;
|
|
const number = parseInt(text.match(/\d+/));
|
|
|
|
if (number >= 100) {
|
|
cell.style.color = 'red';
|
|
} else {
|
|
cell.style.color = 'blue';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1><span class="main-title">방문교육 - </span><span class="sub-title">방문가능 일자 지정</span></h1>
|
|
|
|
<div class="visit-trainning">
|
|
<div class="page-content-wrapper">
|
|
<div class="page-content">
|
|
<div class="content-bg">
|
|
<div class="CalendarOverlay">
|
|
<div class="Calendar">
|
|
<div class="Header">
|
|
<!-- 관리자화면 버튼 -->
|
|
<div>
|
|
<button class="possible">당해 일괄불가</button>
|
|
<button class="possible">당월 일괄불가</button>
|
|
</div>
|
|
<div class="Frame9">
|
|
<div class="Chevron">
|
|
<div class="Frame10">
|
|
<img src="${pageContext.request.contextPath}/images/renew/chevron.svg" alt="chevron-prev" class="page-prev" id="prevMonth">
|
|
</div>
|
|
</div>
|
|
<div class="yyyy-mm">
|
|
2024.08
|
|
</div>
|
|
<div class="Chevron">
|
|
<div class="Frame10">
|
|
<img src="${pageContext.request.contextPath}/images/renew/chevron.svg" alt="chevron-next" class="page-next" id="nextMonth">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button class="impossibility">당월 일괄가능</button>
|
|
<button class="impossibility">당해 일괄가능</button>
|
|
</div>
|
|
</div>
|
|
<div class="month">
|
|
<div class="Days">
|
|
<div class="Row">
|
|
<div class="Cell">
|
|
<div class="Week">일</div>
|
|
</div>
|
|
<div class="Cell">
|
|
<div class="Week">월</div>
|
|
</div>
|
|
<div class="Cell">
|
|
<div class="Week">화</div>
|
|
</div>
|
|
<div class="Cell">
|
|
<div class="Week">수</div>
|
|
</div>
|
|
<div class="Cell">
|
|
<div class="Week">목</div>
|
|
</div>
|
|
<div class="Cell">
|
|
<div class="Week">금</div>
|
|
</div>
|
|
<div class="Cell">
|
|
<div class="Week">토</div>
|
|
</div>
|
|
</div>
|
|
<div class="Row">
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
</div>
|
|
<div class="Row">
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
</div>
|
|
<div class="Row">
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
</div>
|
|
<div class="Row">
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
</div>
|
|
<div class="Row">
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
<div class="Cell Day"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|