활용예제 가이드

이 화면은 사용자 정의 달력을 개발하기 위한 샘플화면이다.
템플릿 위치: /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);
}

            

        
      
커스텀 일자 달력 가이드

예시

화면 스크립트
