[calendar] 달력을 이용하여 식권 사용/등록/발급하기(2) : 사용자화면 구현

📢

저번 포스팅에서 설계, 디자인했던 것을 토대로 플러그인을 가져와 사용자가 사용할 화면을 구현해보았습니다.
저는 아직 백엔드개발까지는 부족함이 많기 때문에 서버와 연동은 하지 않고
스크립트와 제이쿼리로 할 수 있는 만큼 진행해볼 예정입니다.

이전 포스팅 👀

https://yeonzzy.tistory.com/15

[calendar] 달력을 이용하여 식권 사용/등록/발급하기(1) : 설계 및 디자인

✅기획의도 - 종이식권으로 발급되어져 아날로그한 방식으로 카운트 - 외부인에게 제공될 수 있음 - 관리자입장에서 어느 팀이, 어느 사원이 얼마나 사용했는지 확인하기 어려움 ✅목적 - monthly

yeonzzy.tistory.com

step.1 플러그인 다운로드

https://www.jqueryscript.net/time-clock/Responsive-Event-Calendar-Date-Picker-jQuery-Plugin-Monthly.html

Responsive Event Calendar & Date Picker jQuery Plugin - Monthly

Monthly is a jQuery plugin that provides responsive and easy-to-customize event calendar and date picker for your web application.

www.jqueryscript.net

다운로드 한 폴더를 가져와 vsCode 또는 자주 사용하는 에디터툴로 불러온다.

index.html을 열어보면 사용하지 않을 이미지와 버튼 등을 지워주고 달력만 남겨놓은 상태로 시작.

step.2 캘린더(달력) 로드

달력을 로드시키기 위해 ☝상단에 해당 css연결

** 이때 reset.css는 기본으로 들어가는 부분을 추가적으로 만들어 연결.

<head>
<link rel="stylesheet" href="css/monthly.css">
<link rel="stylesheet" href="css/reset.css">
</head>

/* reset.css */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif !important;
}

html, body{
    width: 100%;
    height: 100%;
}

ol, ul, li{
    list-style: none;
}

a{
    text-decoration: none;
}

header, nav, article, aside, main, section, footer{
    display: block;
}

img{
    display: block;
}

✌캘린더(달력)을 로드하고자 하는 부분을 body에 기술

** body 안쪽에 page부터 넣어준다. id="myCalendar" 부분에 calendar가 그려진다.

<div class="page">
	<div style="display:inline-block;">
		<div class="monthly" id="mycalendar" style="width: 100%; height: 50px;"></div>
	</div>
</div>

🤟스크립트 연결 및 작성

** body가 끝나기 전 script를 연결해준다.

** 여기서 주석처리의 이유는 자바스크립트는 로컬 xml을 불러올 때 보안상 CORS ERROR가 발생하기 때문.

** 서버와 연결하여 사용하는 경우 mode / jsonUrl / dataType 이 필요하다.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/monthly.js"></script> 
<script type="text/javascript">
	$(window).load( function() {
		$('#mycalendar').monthly({
			//mode: 'event',
			//jsonUrl: 'https://cors-anywhere.herokuapp.com/events.json',
			//dataType: 'json',
			//xmlUrl: 'events.xml'
			// weekStart: 'Sun',
			// setWidth: '80%'
		});
	});
</script>

step3. 화면에 필요한 부분을 추가적으로 넣어준다.

** 오른쪽에 필터(범주)와 [식권사용] 버튼이 들어가야하므로 추가적인 작업이 이뤄짐

<div id="right">
	<div class="right-container">
		<div class="r-new-schedule">
			<button id="new-schedule-btn">식권사용</button>
		</div>
		<div class="r-calendars">
			<div class="r-calendars-item">
				<label>
					<input type="checkbox" id="item-check-square" value="all" checked>
					<span class="viewAll">View all</span>
				</label>
			</div>
			<!-- 회사 근무지가 여러개 일 경우 -->
			<div class="calendarList u-calendarList">
				<label>
					<input type="checkbox" value="1" name="listChk" class="filter-location" checked>
					<span class="list-round list-round-doksan"></span>
					<span class="list-title">독산 본사</span>
				</label>
				<label>
					<input type="checkbox" value="2" name="listChk" class="filter-location" checked>
					<span class="list-round list-round-uiwang"></span>
					<span class="list-title">의왕</span>
				</label>
			</div>
		</div>
	</div>
</div>

** 기존에 있던 monthly.css 에 추가적인 스타일을 입혀줌.

** 기존 플러그인의 캘린더(달력) 스타일을 수정하고 싶을 경우 monthly.css를 활용한다.

/* monthly.css */
@charset "utf-8";

/* right */
#right{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 200px;
	height: 100%;
	background-color: #fafafa;
	z-index: 9;
	font-size: 14px;
}

#right .right-container{
	width: 100%;
	height: 100%;
	padding: 12px 10px;
	box-sizing: border-box;
	margin: 0 auto;
}

.r-new-schedule{
	padding-bottom: 12px;
	border-bottom: 1px solid #e5e5e5;
}

/* 식권사용 버튼 */
button#new-schedule-btn{
	width: 180px;
	height: 40px;
	border-radius: 25px;
	background-color: #00a9ff;
	border: 0;
	padding: 10px 20px;
	color: #fff;
	cursor: pointer;
}

button#new-schedule-btn:focus{
	outline: none;
}

button#new-schedule-btn:hover{
	background-color: #008ee7;
    transition: all 1.0s;
}

.r-calendars-item{
	padding: 20px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 0.8rem;
}

.r-calendars-item > label{
	display: inline-block;
	font-weight: normal;
}

.r-calendars-item > label > span.viewAll{
	display: inline-block;
	padding-left: 25px;
}

input[type="checkBox"]#item-check-square{
	display: none;
}

input[type="checkBox"]#item-check-square + span.viewAll{
	display: inline-block;
	cursor: pointer;
	line-height: 14px;
	background: url(../images/checkBox-false.png) no-repeat;
}

input[type="checkBox"]#item-check-square:checked ~ span.viewAll{
	background: url(../images/checkBox-true.png) no-repeat;
}

.calendarList{
	width: 100%;
	height: auto;
	padding: 10px 20px;
	box-sizing: border-box;
	border-bottom: 1px solid #e5e5e5;
}

.calendarList>ul>li{
	/* border: 1px solid; */
	height: 30px;	
	line-height: 30px;
	font-size: 0.8rem;
	color: #333;
}

/* 사용자 일 때 "사용이력" 범주 색상 */
.u-calendarList>ul>li:nth-child(1) span.list-round{
	background-color: #BAD532;
}
.u-calendarList>ul>li:nth-child(2) span.list-round{
	background-color: #ff8f4e;
}

span.list-title{
	vertical-align: 2px;
}

/* filter : location */
.calendarList > label{
	display: inline-block;
	font-weight: normal;
	width: 100%;
}

.calendarList > label:nth-child(1){
	margin-bottom: 10px;
}

input[type="checkBox"].filter-location{
	display: none;
}

input[type="checkBox"].filter-location + span.list-round{
	display: inline-block;
	cursor: pointer;
	width: 10px;
	height: 10px;
	line-height: 12px;
	/* vertical-align: middle; */
	margin-right: 8px;
	border-radius: 8px;
	border:2px solid;
	background: transparent;
}

span.list-round-doksan{
	color: #BAD532;
}

span.list-round-uiwang{
	color: #ff8f4e;
}

input[type="checkBox"].filter-location:checked ~ span.list-round-doksan{
	background-color: #BAD532;
}

input[type="checkBox"].filter-location:checked ~ span.list-round-uiwang{
	background-color: #ff8f4e;
}

.calendarList > label > span.list-title{
	font-size: 0.8rem;
}

저작자표시 비영리

'study > calendar' 카테고리의 다른 글

[calendar] 달력을 이용하여 식권 사용/등록/발급하기(1) : 설계 및 디자인 (0)	2021.05.19

yeon_log

[calendar] 달력을 이용하여 식권 사용/등록/발급하기(2) : 사용자화면 구현

'study > calendar' 카테고리의 다른 글

티스토리툴바

[calendar] 달력을 이용하여 식권 사용/등록/발급하기(2) : 사용자화면 구현

'study > calendar' 카테고리의 다른 글

'study/calendar' Related Articles

티스토리툴바