[ Tstory ] 글쓴 날자를 캘린더 형식으로 만들기

블로그 날짜를 캘린더 형식으로 표시하기 위한 소스입니다.

HTML 부분

	
월요일
	

		
25
		

			1월
			'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()]);

연도는 '18 형식으로 2자리만 사용합니다.

결과 모양 (이미지)

보관용으로 작성합니다.