WebProgram/Tistory
[ Tistory ] 사이드바용 달력 위젯
Total Fix!
2016. 4. 4. 10:38
티스토리 사이드바용 달력 위젯입니다.
준비 사항
jQuery - 모양을 내기 위한 약간의 jQuery가 포함되어 있습니다. 날짜 형식을 바꿀때도 사용합니다.
Bootstrap - 여기서는 단순히 rem 단위를 설정해 주는 용도 정도만 사용합니다.
만일 사용하고 싶지 않다면 단위만 px로 설정하면 되겠습니다.(1rem = 10px)
특징
오늘 - 오늘의 표시는 푸른색으로 표시 됩니다.
포스트 작성일 - 포스트를 작성한 날의 경우 우측 상단에 오랜지 색의 삼각형 모양의 표식이 생깁니다.
년월 표시 - 년월을 한글 형식으로 표시합니다.
HTML
css
/* calender */
.calender {
border:0;
margin: 0 auto 2rem;
}
.calender.panel > .panel-body {
position: relative;
padding: .4rem;
font-weight: bold;
background: #bebfc0;
background: rgba(0, 0, 0, 0.1);
border-radius: .4rem;
display: block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
}
.calender > .panel-body a { text-decoration: none; }
.calender > .panel-body tr:first-child td { border-top: 0; }
.calender > .panel-body td:first-child { border-left: 0; }
.calender > .panel-body tr:first-child a {
border-top: 0;
margin-top: 0;
}
.calender > .panel-body tr:last-child a {
border-bottom: 0;
margin-bottom: 0;
}
.calender > .panel-body td:first-child a {
border-left: 0;
margin-left: 0;
color: Tomato;
}
.calender > .panel-body td:last-child a {
border-right: 0;
margin-right: 0;
}
.calender > .panel-body tr:last-child td:first-child a { border-radius: 0 0 0 .4rem; }
.calender > .panel-body tr:last-child td:last-child a { border-radius: 0 0 .4rem 0; }
.calender > .panel-body > table {
position: relative;
margin: 0 0 1px;
border-collapse: separate;
border-left: 1px solid #979797;
border-right: 1px solid #979797;
border-bottom: 1px solid #bbbbbb;
border-radius: 0 0 .4rem .4rem;
-webkit-box-shadow: 1px 0 rgba(0, 0, 0, 0.1), -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 rgba(0, 0, 0, 0.1), -1px 0 rgba(0, 0, 0, 0.1);
}
.calender > .panel-body > table > caption {
width: 100%;
height: 4rem;
padding: 0;
padding-bottom: 1px;
color: white;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
background: #629c2e;
border-radius: .4rem .4rem 0 0;
background-image: -webkit-linear-gradient(top, #89c84d 0%, #629c2e 75%, #548d20);
background-image: -moz-linear-gradient(top, #89c84d 0%, #629c2e 75%, #548d20);
background-image: -o-linear-gradient(top, #89c84d 0%, #629c2e 75%, #548d20);
background-image: linear-gradient(to bottom, #89c84d 0%, #629c2e 75%, #548d20);
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.1), inset 0 2px rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.1), inset 0 2px rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.calender > .panel-body > table > caption > a {
line-height: 4rem;
padding: 0 1.5rem;
font-size: 1.8rem;
font-weight: bolder;
color: white;
}
.calender > .panel-body > table > caption > a[title^="1개월 앞"] { float: left; }
.calender > .panel-body > table > caption > a[title^="1개월 뒤"] { float: right; }
.calender > .panel-body > table > thead { display: none; }
.calender > .panel-body > table > tbody td {
font-size: 1.6rem;
text-align: center;
line-height: 4rem;
background: white;
border-top: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.calender > .panel-body > table > tbody a {
display: block;
position: relative;
line-height: 4rem;
color: #555;
text-align: center;
background: white;
cursor: pointer;
}
.calender > .panel-body > table > tbody a:hover { background: rgba(178,73,77,0.1); }
.calender > .panel-body > table > tbody a {
color: black;
background: #f5f5f5;
background-image: -webkit-linear-gradient(top, whitesmoke 0%, white 70%);
background-image: -moz-linear-gradient(top, whitesmoke 0%, white 70%);
background-image: -o-linear-gradient(top, whitesmoke 0%, white 70%);
background-image: linear-gradient(to bottom, whitesmoke 0%, white 70%);
}
.calender > .panel-body > table > tbody td.cal_day4 a,
.calender > .panel-body > table > tbody td a:active {
margin: -1px;
color: rgba(65,105,225, 1);
background: rgba(65,105,225, 0.1);
border: 1px solid rgba(65,105,225, 0.5);
}
.calender > .panel-body > table > tbody td a.cal_click {
color: #f79901;
overflow: hidden;
}
.calender > .panel-body > table > tbody td a.cal_click:before {
content: '';
position: absolute;
top: -1.4rem;
right: -.7rem;
width: 2rem;
height: 3rem;
background: #ffb83b;
background-image: -webkit-linear-gradient(top, #ffb83b, #ff6c00);
background-image: -moz-linear-gradient(top, #ffb83b, #ff6c00);
background-image: -o-linear-gradient(top, #ffb83b, #ff6c00);
background-image: linear-gradient(to bottom, #ffb83b, #ff6c00);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
jQuery (javascript)
// 사이드바 캘린더 설정
//날짜를 태그로 감싼다
$('.calender > .panel-body > table > tbody td.cal_day').each(function() {
if($(this).children('a').length == false) {
var cal_num=$(this).text();
cal_num = "" + cal_num + "";
$(this).html(cal_num);
}
});
// 오늘 날짜에는 title="TODAY" 설정을 추가한다.
$('.calender > .panel-body > table > tbody td.cal_day4').attr('title','TODAY');
// 현재 년/월 행식을 XXXX년 X월 형식으로 바꾼다.
$('.calender > .panel-body > table > caption > a[title^="현재 달"]').html($('.calender > .panel-body > table > caption > a[title^="현재 달"]').text().split('/')[0] + '년 ' + $('.calender > .panel-body > table > caption > a[title^="현재 달"]').text().split('/')[1]*1 + '월');