WebProgram/Tistory
[ Tstory ] 글쓴 날자를 캘린더 형식으로 만들기
Total Fix!
2018. 6. 15. 03:57
블로그 날짜를 캘린더 형식으로 표시하기 위한 소스입니다.
HTML 부분
월요일251월 '18
2018. 6. 15. 03:57는 티스토리 글쓴 날자 치환자 입니다. (지우면 오늘 날짜를 불러옵니다.)
CSS 설정 부분
.date-tile{
display: inline-block;
border-radius: 10px;
font-family: sans-serif;
color: #555; /* DAY 색깔 */
box-shadow: 0 2px 6px rgba(0,0,0,.4)
}
.due-label {
border: 2px solid #D52B1E;
padding: 5px 10px 4px;
text-align: center;
font-size: 16px;
line-height: 18px;
background: pink; /* 요일 배경색 */
color: #D52B1E; /* 요일 글자색 */
font-weight: 700;
border-radius: 6px 6px 0px 0px;
}
.date-info {
border: 2px solid #D52B1E;
margin-top: -2px;
border-radius: 0px 0px 6px 6px;
}
.due-day {
text-align: center;
font-size: 50px;
line-height: 50px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 10px;
font-weight: 600;
}
.due-month-year {
padding: 10px 10px;
font-size: 16px;
line-height: 11px;
margin-top: 0px;
font-weight: 700;
}
글꼴에 따라서 글자 크기를 조절해야 할 수도 있습니다.
자바스크립트 부분
$month = new Array();
$month = ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"];
$day = new Array();
$day = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
//연도 두자리 표시
$(".due-year").html("'" + ($date.getFullYear()+"").slice(-2));
//월 뒤에 한칸 띄어쓰기
$(".due-month").html($month[$date.getMonth()]+" ");
$(".due-day").html($date.getDate());
//요일 설정
$(".due-label").html($day[$date.getDay()]);
