활용예제 가이드

이 화면은 사용자 정의 달력을 개발하기 위한 샘플화면이다.
템플릿 위치: /HTML5/UTIL/CALENDAR/calendar_tableview_cell
템플릿 파일
var CALENDAR_UTIL = {
	objSelectDay: null,						 // 현재 선택된 날짜 버튼
	nSelectDay: "01",						   // 현재 선택된 일

	arrSaturDayForeColor: [0, 142, 185],		// 토요일 전경색
	arrHolidayDayForeColor: [206, 0, 0],		// 일요일, 공유일의 전경색
	arrWorkDayForeColor: [120, 120, 120],   	// 토요일, 일요일, 공휴일을 제외한 날짜의 전경색
	arrInvalidDayForeColor: [195, 195, 195],    // 현재달이 아닌 날짜의 전경색
	arrSelectDayForeColor: [255, 255, 255],	 // 선택일 전경색
	arrSelectDayBackColor: [96, 154, 185],	  // 선택일 배경색
	bShowOnlyThisMonth: false,				  // 선택월 날짜만 보여줄지 여부
	strFontName: "맑은 고딕",

	// 요일에 따라 스타일 적용
	setDayStyle: function(objBtnDay, strYYYYMMDD, nDayOfWeek) {
		var objUserData;

		if (nDayOfWeek === undefined) {
			objUserData = objBtnDay.getuserdata();
			nDayOfWeek = objUserData.nDayOfWeek;
		}

		switch (nDayOfWeek) {
			case 0: this.setHolidayDayStyle(objBtnDay); break;
			case 6: this.setSaturDayStyle(objBtnDay); break;
			default: this.setWorkDayStyle(objBtnDay); break;
		}

		if (strYYYYMMDD !== undefined) {
			objBtnDay.setuserdata({ strMonthType: "THIS_MONTH", strYYYYMMDD: strYYYYMMDD, nDayOfWeek: nDayOfWeek });
		}
	},

	// 토요일 스타일 적용
	setSaturDayStyle: function(objBtnDay) {
		objBtnDay.setforecolor(this.arrSaturDayForeColor[0], this.arrSaturDayForeColor[1], this.arrSaturDayForeColor[2]);
		objBtnDay.setbackcolor(255,255,255);
		objBtnDay.setfont(this.strFontName, 8, false, false, false);
		objBtnDay.settooltiptext("");
		objBtnDay.setvisible(true);
		objBtnDay.setenable(true);
	},

	// 일요일/휴일 스타일 적용
	setHolidayDayStyle: function(objBtnDay, strTooltip) {
		objBtnDay.setforecolor(this.arrHolidayDayForeColor[0], this.arrHolidayDayForeColor[1], this.arrHolidayDayForeColor[2]);
		objBtnDay.setbackcolor(255,255,255);
		objBtnDay.setfont(this.strFontName, 8, false, false, false);
		if (strTooltip === undefined) { objBtnDay.settooltiptext(""); }
		else { objBtnDay.settooltiptext(strTooltip); }
		objBtnDay.setvisible(true);
		objBtnDay.setenable(true);
	},

	// 주중 스타일 적용
	setWorkDayStyle: function(objBtnDay) {
		objBtnDay.setforecolor(this.arrWorkDayForeColor[0], this.arrWorkDayForeColor[1], this.arrWorkDayForeColor[2]);
		objBtnDay.setbackcolor(255,255,255);
		objBtnDay.setfont(this.strFontName, 8, false, false, false);
		objBtnDay.settooltiptext("");
		objBtnDay.setvisible(true);
		objBtnDay.setenable(true);
	},

	// 이전달/다음달 스타일 적용
	setInvalidDayStyle: function(objBtnDay, strYYYYMMDD, strMonthType) {
		objBtnDay.setforecolor(this.arrInvalidDayForeColor[0], this.arrInvalidDayForeColor[1], this.arrInvalidDayForeColor[2]);
		objBtnDay.setbackcolor(255,255,255);
		objBtnDay.setfont(this.strFontName, 8, false, false, false);
		objBtnDay.settooltiptext("");
		objBtnDay.setvisible(true);
		objBtnDay.setenable(true);

		objBtnDay.setuserdata({ strMonthType: strMonthType, strYYYYMMDD: strYYYYMMDD });
	},

	// 선택한 날짜 스타일 적용
	setSelectDayStyle: function(objBtnDay, strYYYYMMDD, nDayOfWeek) {
		// 현재 선택되어 있는 일자에 대한 칼라를 원상태로 복귀
		if (this.objSelectDay) { this.setDayStyle(this.objSelectDay); }

		objBtnDay.setforecolor(this.arrSelectDayForeColor[0], this.arrSelectDayForeColor[1], this.arrSelectDayForeColor[2]);
		objBtnDay.setbackcolor(this.arrSelectDayBackColor[0], this.arrSelectDayBackColor[1], this.arrSelectDayBackColor[2]);
		objBtnDay.setfont(this.strFontName, 8, true, false, true);
		objBtnDay.settooltiptext("선택일");
		objBtnDay.setvisible(true);
		objBtnDay.setenable(true);

		if (strYYYYMMDD !== undefined) {
			objBtnDay.setuserdata({ strMonthType: "THIS_MONTH", strYYYYMMDD: strYYYYMMDD, nDayOfWeek: nDayOfWeek });
		}

		this.objSelectDay = objBtnDay;
	}
};

// 달력 날짜 표시
function showCalendarButton(nYear, nMonth, nDay)
{
	var i, j, strBtnIndex, objBtnDay, nTempDay, nDayOfWeekTemp;
	var strCurrYYYYMMDD, strCurrYYYYMM, strPrevYYYYMMDD, strPrevYYYYMM, strNextYYYYMMDD, strNextYYYYMM;

	nYear = parseInt(nYear, 10);
	nMonth = parseInt(nMonth, 10);

	// 년도 콤보 및 월 콤보에 값 설정
	this.fldYear.settext(nYear.toString(10));
	this.fldMonth.settext(nMonth.toString(10));

	strCurrYYYYMMDD = strSelectDate = factory.fillstring(this.fldYear.gettext(), "0", 4, true) +
		factory.fillstring(this.fldMonth.gettext(), "0", 2, true) + "01";
	strCurrYYYYMM = strCurrYYYYMMDD.substring(0, 6);

    // 달력 표시 년월의 마지막 일을 구함(28/29/30/31)
    nCurrLastDay = parseInt(factory.datelastdayofmonth(strCurrYYYYMMDD).substring(6), 10);

	// 달력 표시 년월의 한달전/한달후 날짜 오브젝트를 구함
	strPrevYYYYMMDD = factory.datefrom("month", -1, strCurrYYYYMMDD);
	strPrevYYYYMM = strPrevYYYYMMDD.substring(0, 6);
	strNextYYYYMMDD = factory.datefrom("month", 1, strCurrYYYYMMDD)
	strNextYYYYMM = strNextYYYYMMDD.substring(0, 6);

    // 달력 표시 년월의 이전달 마지막 일을 구함(28/29/30/31)
    nPrevLastDay = parseInt(factory.datelastdayofmonth(strPrevYYYYMMDD).substring(6), 10);

    nDayOfWeek = new Date(nYear, nMonth - 1, 1).getDay();

	// 이전월 날짜 표시
    for (i = 0; i < nDayOfWeek; i++) {
		// 버튼 인덱스를 기준으로 버튼 오브젝트를 구함
		strBtnIndex = factory.fillstring(i, "0", 2, true);
		objBtnDay = screen.getinstancebyname("btnDay" + strBtnIndex);

		nTempDay = (nPrevLastDay - nDayOfWeek) + (i + 1);

		if (CALENDAR_UTIL.bShowOnlyThisMonth) { objBtnDay.settext(""); }
		else { objBtnDay.settext(nTempDay); }

		// 이전월 또는 다음월의 날짜 버튼에 대한
		CALENDAR_UTIL.setInvalidDayStyle(objBtnDay, strPrevYYYYMM + factory.fillstring(nTempDay, "0", 2, true), "PREV_MONTH");
    }

	nTempDay = 1;
	for (i = nDayOfWeek; i < 42; i++) {
		// 버튼 인덱스를 기준으로 버튼 오브젝트를 구함
		strBtnIndex = factory.fillstring(i, "0", 2, true);
		objBtnDay = screen.getinstancebyname("btnDay" + strBtnIndex);

        // 선택한 달 정보
        if (nTempDay <= nCurrLastDay) {
			nDayOfWeekTemp = i % 7;
			objBtnDay.settext(nTempDay);

			// 버튼 텍스트가 현재 날짜와 동일한 경우, 폰트 설정
			if (nDay == nTempDay) {
				CALENDAR_UTIL.setSelectDayStyle(objBtnDay, strCurrYYYYMM +  + factory.fillstring(nTempDay, "0", 2, true), nDayOfWeekTemp);
			}
			else {
				CALENDAR_UTIL.setDayStyle(objBtnDay, strCurrYYYYMM +  + factory.fillstring(nTempDay, "0", 2, true), nDayOfWeekTemp);
			}
		}
        // 다음달 날짜 표시 정보 생성
        else {
			if (CALENDAR_UTIL.bShowOnlyThisMonth) { objBtnDay.settext(""); }
			else { objBtnDay.settext(nTempDay - nCurrLastDay); }

			CALENDAR_UTIL.setInvalidDayStyle(objBtnDay, strNextYYYYMM + factory.fillstring((nTempDay - nCurrLastDay), "0", 2, true), "NEXT_MONTH");
		}

		nTempDay++;
	}

	return;
}

function btnShowCalendar_on_mouseup(objInst)
{
	this.updateCalendar();
}

function updateCalendar()
{
	var nYear, nMonth;

	// 변경된 콤보 박스의 년도 및 월을 구함
	nYear = parseInt(this.fldYear.gettext(), 10);
	nMonth = parseInt(this.fldMonth.gettext(), 10);

	this.showCalendarButton(nYear, nMonth, CALENDAR_UTIL.nSelectDay);
}

// 년도 및 월 이전, 이후 버튼 클릭 이벤트 처리
function handleYearMonthPrevNextButton(isYear, isNext)
{
	var nYear, nMonth;

	// 변경된 콤보 박스의 년도 및 월을 구함
	nYear = parseInt(this.fldYear.gettext(), 10);
	nMonth = parseInt(this.fldMonth.gettext(), 10);

	if (isYear) {
		if (isNext) { nYear = nYear + 1; }
		else { nYear = nYear - 1; }
	}
	else {
		if (isNext) {
			nMonth = nMonth + 1;
			if (nMonth > 12) {
				nMonth = 1;
				nYear += 1;
			}
		}
		else {
			nMonth = nMonth - 1;
			if (nMonth < 1) {
				nMonth = 12;
				nYear -= 1;
			}
		}
	}

	this.fldYear.settext(nYear);
	this.fldMonth.settext(nMonth);

	this.showCalendarButton(nYear, nMonth, CALENDAR_UTIL.nSelectDay);
}

/**
 * Event 처리 함수 시작
 */
function screen_on_load()
{
	var i, strCurrYYYYMMDD, nCurrentYear, nCurrentMonth, nCurrentDay;

	strCurrYYYYMMDD = factory.datetoday();

	// 변경된 콤보 박스의 년도 및 월을 구함
	nCurrentYear = parseInt(strCurrYYYYMMDD.substring(0, 4), 10);
	nCurrentMonth = parseInt(strCurrYYYYMMDD.substring(4, 6), 10);
	nCurrentDay = parseInt(strCurrYYYYMMDD.substring(6), 10);

	// 달력 표시
	this.showCalendarButton(nCurrentYear, nCurrentMonth, nCurrentDay);
}

// 다음달 버튼 클릭
function btnMonthNext_on_mouseup()
{
	this.handleYearMonthPrevNextButton(false, true);
}

// 이전달 버튼 클릭
function btnMonthBefore_on_mouseup()
{
	this.handleYearMonthPrevNextButton(false, false);
}

// 다음년도 버튼 클릭
function btnYearNext_on_mouseup()
{
	this.handleYearMonthPrevNextButton(true, true);
}

// 이전년도 버튼 클릭
function btnYearBefore_on_mouseup()
{
	this.handleYearMonthPrevNextButton(true, false);
}

// 날짜 버튼 클릭 이벤트
function btnDay_on_mouseup(objInst)
{
	var strSelectDate, strDay, objUserData;

	// 클릭된 버튼의 일자 및 정보를 구함
	strDay = objInst.gettext();
	if (strDay == "") { return; }

	objUserData = objInst.getuserdata();

	CALENDAR_UTIL.nSelectDay = strDay;

	// 이전달이거나, 다음달인 경우
	if (objUserData) {
		if (objUserData.strMonthType == "NEXT_MONTH") {
			this.btnMonthNext_on_mouseup();
			return;
		}
		else if (objUserData.strMonthType == "PREV_MONTH") {
			this.btnMonthBefore_on_mouseup();
			return;
		}
	}

	factory.consoleprint("strSelectDate = [" + objUserData.strYYYYMMDD + "]");

	CALENDAR_UTIL.setSelectDayStyle(objInst);
}
커스텀 일자 달력 가이드

예시

화면 스크립트
