본문 바로가기
Spring/study

Spring project01 - 3. 달력 구현

by avvin 2019. 8. 14.


1. 단순 달력 (날짜별 기록 볼 수 있도록)


2. 기간 선택 제이쿼리 datapicker 달력 위젯 (특정 기간의 기록을 검색할 수 있도록) 








1. 단순 달력 (날짜별 기록 볼 수 있도록)


 작고 깔끔한 달력 소스 (js)

출처 : http://phpnz.blogspot.com/2013/09/blog-post_7388.html



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<script language='JavaScript'>
document.write('<st'+'yle>');
document.write('td {font-size:12px; font-family:굴림; text-decoration:none; }');
document.write('A:link,A:active,A:visited{text-decoration:none;font-size:12PX;color:#333333;}');
document.write('A:hover {text-decoration:none; color:ff9900}');
document.write('font { font-size: 9pt; }');
document.write('.cnj_input {position:relative;}');
document.write('.cnj_input2 {border-width:1; border-color:rgb(204,204,204); border-style:solid;}');
document.write('.cnj_input3 { border-width:1; border-style:solid; border-color:#000000; color:#0084D4; background-color:white;text-align:right;}');
document.write('.cnj_input4 { scrollbar-face-color: #FFCC33;scrollbar-shadow-color: #ffffff;scrollbar-highlight-color: #F3f3f3;scrollbar-3dlight-color: #ffffff;scrollbar-darkshadow-color: #F3f3f3;scrollbar-track-color: #ffffff;scrollbar-arrow-color: #f9f9f9; }');
document.write('</st'+'yle>');
 
var monthName=new Array("1월","2월","3월","4월","5월","6월","7월",
"8월","9월","10월","11월","12월")
/*
var monthName=new Array("January","February","March","April","May","June","July",
"August","September","October","November","December")
*/
var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31)
var now=new Date
var nowd=now.getDate()
var nowm=now.getMonth()
var nowy=now.getYear()
function showCalendar(day,month,year) {
if ((year%4==0||year%100==0)&&(year%400==0)) monthDays[1]=29; else monthDays[1]=28 //leap year test
var firstDay=new Date(year,month,1).getDay()
var cnj_str="<table border=0 cellpadding=5 cellspacing=1 align=center bgcolor=#CCCCCC>"
 
cnj_str+="<tr bgcolor=white><td colspan=7>"
cnj_str+="<table border=0 cellpadding=0 cellspacing=0 align=center width=100%>"
cnj_str+="<td><a href='javascript:;' onClick='nowm--; if (nowm<0) { nowy--; nowm=11; } showCalendar(nowd,nowm,nowy)' title='이전 월'> <<</a></td>"
cnj_str+="<td align=center>"+monthName[month].toUpperCase()+" "+year+"년</td>"
cnj_str+="<td align=right><a href='javascript:;' onClick='nowm++; if (nowm>11) { nowy++; nowm=0; } showCalendar(nowd,nowm,nowy)' title='다음 월'> >></a></td>"
cnj_str+="</tr></table>"
cnj_str+="</td></tr>"
cnj_str+="<tr align=center bgcolor='#FFFFB9'>"
cnj_str+="<th><font color='red'>일</font></th>"
cnj_str+="<th><font color='black'>월</font></th>"
cnj_str+="<th><font color='black'>화</font></th>"
cnj_str+="<th><font color='black'>수</font></th>"
cnj_str+="<th><font color='black'>목</font></th>"
cnj_str+="<th><font color='black'>금</font></th>"
cnj_str+="<th><font color='blue'>토</font></th>" 
cnj_str+="</tr>"
 
var dayCount=1
 
cnj_str+="<tr bgcolor=white>" //각 날짜별 기록을 보여주는 페이지 링크 추가하기
 
for (var i=0;i<firstDay;i++) cnj_str+="<td> " //공백
for (var i=0;i<monthDays[month];i++) {
if(dayCount==nowd) {
cnj_str+="<td align=center bgcolor='#FFFFB9'><b>" // 오늘 날짜일때 배경색 지정,글자 진하게
} else {
cnj_str+="<td align=center>" // 오늘 날짜가 아닐때 배경색 지정
}
 
cnj_str+="<a href=http://www.홈페이지.com/link"+dayCount+".html target=_blank>" // 링크설정
cnj_str+=dayCount++ // 날짜
cnj_str+="</a>"
 
if(dayCount==nowd) {
cnj_str+="</b>" // 오늘 날짜일때 글자 진하게
} else {
cnj_str+="" // 오늘 날짜가 글자 진하게 안함
}
 
if ((i+firstDay+1)%7==0&&(dayCount<monthDays[month]+1)) cnj_str+="<tr bgcolor=white>"
}
var totCells=firstDay+monthDays[month]
for (var i=0;i<(totCells>28?(totCells>35?42:35):28)-totCells;i++) cnj_str+="<td> "
cnj_str+="</table><BR>"
calendar.innerHTML=cnj_str
}
</script>
 
<body onLoad="showCalendar(nowd,nowm,nowy)">
<span id="calendar" class="cnj_input"></span>r

c








+

java 간단달력 만들기 (프론트 없을 경우 기능 로직 참고)

https://woochan-dev.tistory.com/27








2. 기간 선택 제이쿼리 datapicker 달력 위젯 (특정 기간의 기록을 검색할 수 있도록) 



검색기능에 제이쿼리 datapicker 사용하기


한 번 구현해놓으면 여기저기 쓸 데 많을 것!



저작자표시

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

스프링 시큐리티 사용자 정보 가져오기  (0) 2019.08.13
Spring 프로젝트에 Mysql DB 연동하는 방법  (0) 2019.07.23
spring 30강 Spring Security  (0) 2019.07.16
Spring Security CSRF  (0) 2019.07.15
spring 28강 Spring Boot와 MongboDB 연동 실습(방명록)  (0) 2019.07.12

관련글

티스토리툴바