spring Calendar로 달력만들기 2 jsp부분

     
     //페이지에 접속하면 달력이 만들어지고 이전달, 다음달을 누르면 변한 시켜주는 부분
     $(function () {

        fnSelectDateList();

        $("#searchCondition4, #searchCondition5").on('change', function () {
            fnPageSearch();
        });
    });
    
    
    /**
     *현재 년도 월이 선택되게 하는 부분
     */
    function fnSelectDateList() {

        $('#searchCondition4').empty();
        for (var i = 2000; i < 2030; i++) {
            if ('${vacationVO.searchCondition4}' == i) {
                $("#searchCondition4").append('<option value="' + i + '"selected = selected>' + i + '년</option>');

            } else {
                $('#searchCondition4').append('<option value="' + i + '">' + i + '년</option>');

            }
        }

        $('#searchCondition5').empty();
        for (var i = 1; i < 13; i++) {
            if ('${vacationVO.searchCondition5}' == i) {
                $('#searchCondition5').append('<option value="' + i + '"selected = selected>' + i + '월</option>');
            } else {
                $('#searchCondition5').append('<option value="' + i + '">' + i + '월</option>');
            }
        }
    }
    
     /**
     *이전달, 다음달로 넘어가는 함수
     * @param str
     */
    function fnprevNextMonth(str) {

        if (str == 'pre') {
            $('#pre_mon').val('Y');
        } else {
            $('#next_mon').val('Y');
        }
        fnPageSearch();
    }

     /**
     *달력을 다시 불러오는 함수
     */
    function fnPageSearch() {

        var frm = document.getElementById("vacationVO");
        frm.action = "/index.do?menu_id=${param.menu_id}&menu_link=front/vacation/listViewVacationCalendar.do";
        frm.submit();
    }

css같은 경우는 직접 만들어서 사용해보시길

<form:form commandName="vacationVO" name="vacationVO" method="post">
    <form:hidden path="pre_mon"/>
    <form:hidden path="next_mon"/>
    <div class="cont_head" align="center" style="margin: 10px">
        <span class="button large large3 strong" onclick="fnprevNextMonth('pre'); return false;"><a>< 이전달</a></span>
        &nbsp;<select id="searchCondition4" name="searchCondition4">
    </select>
        <select id="searchCondition5" name="searchCondition5">
        </select>
        <span class="button large large3 strong" onclick="fnprevNextMonth('next'); return false;"><a>다음달 ></a></span>
    </div>
    <div class="cont_body">
        <table class="tac">
            <caption>휴일현황 - 일, 월, 화, 수, 목, 금, 토</caption>
            <colgroup>
                <col style="width:10%;">
                <col style="width:10%;">
                <col style="width:10%;">
                <col style="width:10%;">
                <col style="width:10%;">
                <col style="width:10%;">
                <col style="width:10%;">
            </colgroup>
            <thead>
            <tr>
                <th style="color: red">일</th>
                <th>월</th>
                <th>화</th>
                <th>수</th>
                <th>목</th>
                <th>금</th>
                <th style="color: blue">토</th>
            </tr>
            </thead>

            <tbody>
            <tr>
                <!-- 해당 월의 첫째줄 공백부분 생성 -->
                <c:forEach var="i" begin="1" end="${firstDayOfWeek-1}">
                    <td style="height: 150px;"></td>
                </c:forEach>
                <!-- 해당 월 달력 출력 -->
                <c:forEach begin="0" end="${lastDayOfMonth -1}" varStatus="status">
               
                <td style="height: 150px; vertical-align: top; text-align: right; padding: 0">
                    <c:choose>
                    //토요일을 나오게 하는 부분
                        <c:when test="${(((status.index + 1)-(8-firstDayOfWeek)) % 7) == 0}">
                          
                            <span style="color: blue"><c:out value="${status.index + 1}"/>
                        </c:when>
                        //일요일이 나오는 부분
                        <c:when test="${(((status.index + 1)-(8-firstDayOfWeek)) % 7) == 1 || ((status.index + 1)-(8-firstDayOfWeek)) == -6}">
                            <span style="color: red"><c:out value="${status.index + 1}"/>
                        </c:when>
                        //평일이 나오는 부분
                        <c:otherwise>
                            <span style="color: black"><c:out value="${status.index + 1}"/>
                        </c:otherwise>
                    </c:choose>
                </td>
                //토요일 마다 주를 만들어 주는 부분 이게 없으면 그냥 일자로 나온다.
                <c:if test="${(((status.index + 1)-(8-firstDayOfWeek)) % 7) == 0}">
            </tr>
            <tr>
                </c:if>
                </c:forEach>
            </tr>
            </tbody>
        </table>
    </div>
</form:form>

 

여기서 공휴일과 특정날짜 이벤트 등록은 다음에 올리겠습니다.