사이드바에 캘린더 위젯 달기

안녕하세요, 아리무라입니다.
이번에는 사이드바에 캘린더 위젯을 달았던 과정을 정리해보려고 합니다.

배경

사이드바에 Stats와 Links 사이에 캘린더를 하나 넣고 싶었습니다.
티스토리에 캘린더용 치환자가 있는지부터 찾아봤습니다.

비공식 치환자를 찾다

 

아래 치환자에서 대괄호 안쪽 공백을 지우면 캘린더가 렌더링됩니다.

[ ##_calendar_## ]  <-- 대괄호 안쪽 공백은 지워야 합니다.

문제는 이게 공식 문서에는 안 나온다는 것입니다.

skin.html에는 아래 <div> 안에 치환자 한 줄만 넣으면 렌더링됩니다.
물론 대괄호 안쪽 공백을 지워야 합니다.

<div class="calendarBox">
<h3>Calendar</h3>
[ ##_calendar_## ] <-- 대괄호 안쪽 공백은 지워야 합니다.
</div>

클래스명은 직접 찍어봐야 합니다

더 큰 문제는 이 치환자가 어떤 클래스명으로 렌더링되는지도 공식 문서에 없다는 것입니다.
스킨 편집기 미리보기에 실제로 넣어보고, 브라우저 개발자도구로 DOM을 직접 확인했습니다.
그렇게 알아낸 게 cal_click(날짜 링크), cal_day_sunday(일요일), cal_day4(오늘)입니다.
이 이름들은 스킨 제작자가 정한 게 아니라 티스토리 서버가 고정으로 내려주는 값이라 바꿀 수 없습니다.

상단 "« 2026/08 »" 정렬 맞추기

기본 마크업은 화살표와 월 텍스트가 한 줄에 나란히 있어서, 폭이 좁아지면 미묘하게 안 맞았습니다.
화살표 두 개를 캡션 기준으로 좌우 절대배치하고, 월 텍스트는 진짜 가운데 정렬로 바꿨습니다.

.calendarBox caption{
	caption-side: top;
    	position: relative;
        	text-align: center;
            }
            .calendarBox caption a:first-child,
            .calendarBox caption a:last-child{
            	position: absolute;
                	top: 50%;
                    	transform: translateY(-50%);
                        }
                        .calendarBox caption a:first-child{ left: 0; }
                        .calendarBox caption a:last-child{ right: 0; }

caption-side: top을 명시한 이유는, 이걸 안 넣으면 브라우저에 따라 요일 줄이 캡션 위로 올라가는 경우가 있어서입니다.

연도/월 선택 팝업

기본 캘린더는 화살표로 한 달씩만 이동할 수 있습니다.
"2026/08" 텍스트를 클릭하면 팝업이 뜨도록 만들었습니다.
처음엔 12개월 그리드만 있었는데, 연도까지 바로 고를 수 있으면 좋겠다는 생각이 들어서 2단계로 늘렸습니다.
연도 라벨을 다시 누르면 12개년 그리드로 전환되고, 연도를 고르면 그 해의 월 그리드로 돌아옵니다.

var pickerView = 'month';

$picYear.find('.calPickerYearLabel').click(function(){
	if (pickerView === 'month') showYearGrid();
    	else showMonthView();
        });
        
        $picGrid.find('.calPickerMonth').click(function(){
        	var mm = $(this).attr('data-month');
            	if (mm.length < 2) mm = '0' + mm;
                	location.href = '/archive/' + pickYear + mm;
                    });
                    
                    $yearGrid.on('click', '.calPickerMonth', function(){
                    	pickYear = parseInt($(this).attr('data-year'), 10);
                        	showMonthView();
                            });

월을 클릭하면 /archive/YYYYMM으로 이동합니다.
이 URL 패턴도 문서에 없어서 실제로 클릭해보고 확인했습니다.

오늘 날짜가 아무 데나 찍히는 버그

배포하고 나서 다른 달로 넘겨봐도 17일 자리에 계속 점이 찍히는 걸 발견했습니다.
확인해보니 cal_day4 클래스가 "실제 오늘"이 아니라 "오늘의 일(day) 숫자"와 같은 칸에 무조건 붙는, 티스토리 캘린더 위젯 자체의 결함이었습니다.
즉 8월이든 9월이든 17일 칸에는 무조건 cal_day4가 붙습니다.
화면에 표시된 연/월을 실제 오늘 날짜와 비교해서, 다르면 클래스를 강제로 떼어내는 방식으로 우회했습니다.

var curYear = parseInt(curDigits.substring(0, 4), 10);
var curMonth = parseInt(curDigits.substring(4, 6), 10);

var todayNow = new Date();
if (curYear !== todayNow.getFullYear() || curMonth !== todayNow.getMonth() + 1) {
	$('.calendarBox td.cal_day4').removeClass('cal_day4');
    }

치환자, 게시글 본문에 써도 그대로 작동한다

티스토리에서 특정 위젯을 나타내는 명령어를 치환자라고 하는데, 이것이 스킨뿐만 아니라 게시글에 적용해도 렌더링됩니다.
이 문제를 티스토리가 공식적으로 지원하지 않기 때문에, 표준적인 방법으로는 이스케이프가 안 되고 별도의 우회 방법을 써야 합니다.

정리

• 캘린더는 [ ##_calendar_## ] 치환자로 넣지만, 클래스명은 문서에 없으니 직접 찍어봐야 합니다.
• 오늘 표시(cal_day4)는 실제 날짜가 아니라 숫자 매칭이라 버그가 납니다. 보고 있는 달과 오늘을 비교해서 직접 걸러줘야 합니다.