웹프로그래밍

Global It Leader!!


jQuery


 
 

Calendar 달력 생성하고 제어하기

페이지 정보

작성자 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 2,125회 작성일 21-06-25 11:13

본문

특정 영역을 지정하여 해당 영역에 달력을 생성하고 클릭에 따라 선택 이벤트, 이전달, 다음달로 이동되는 달력 code를 작성해보겠습니다.

아래는 동작 달력입니다.

 

 

 

<

2021년 6

>
12345
6789101112
13141516171819
20212223242526
27282930



달력만들기

calendar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>달력 만들기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="calendarForm"></div>
</body>
</html>

 

calendar.css

* {
    margin: 0;
    padding: 0
}

.custom_calendar_table td {
    text-align: center;
}

.custom_calendar_table thead.cal_date th {
    font-size: 1.5rem;
}

.custom_calendar_table thead.cal_date th button {
    font-size: 1.5rem;
    background: none;
    border: none;
}

.custom_calendar_table thead.cal_week th {
    background-color: #288CFF;
    color: #fff;
}

.custom_calendar_table tbody td {
    cursor: pointer;
}

.custom_calendar_table tbody td:nth-child(1) {
    color: red;
}

.custom_calendar_table tbody td:nth-child(7) {
    color: #288CFF;
}

.custom_calendar_table tbody td.select_day {
    background-color: #288CFF;
    color: #fff;
}

 

calendar.js

(function () {
    calendarMaker($("#calendarForm"), new Date());
})();

var nowDate = new Date();
function calendarMaker(target, date) {
    if (date == null || date == undefined) {
        date = new Date();
    }
    nowDate = date;
    if ($(target).length > 0) {
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1;
        $(target).empty().append(assembly(year, month));
    } else {
        console.error("custom_calendar Target is empty!!!");
        return;
    }

    var thisMonth = new Date(nowDate.getFullYear(), nowDate.getMonth(), 1);
    var thisLastDay = new Date(nowDate.getFullYear(), nowDate.getMonth() + 1, 0);


    var tag = "<tr>";
    var cnt = 0;
    //빈 공백 만들어주기
    for (i = 0; i < thisMonth.getDay(); i++) {
        tag += "<td></td>";
        cnt++;
    }

    //날짜 채우기
    for (i = 1; i <= thisLastDay.getDate(); i++) {
        if (cnt % 7 == 0) { tag += "<tr>"; }

        tag += "<td>" + i + "</td>";
        cnt++;
        if (cnt % 7 == 0) {
            tag += "</tr>";
        }
    }
    $(target).find("#custom_set_date").append(tag);
    calMoveEvtFn();

    function assembly(year, month) {
        var calendar_html_code =
            "<table class='custom_calendar_table'>" +
            "<colgroup>" +
            "<col style='width:81px'/>" +
            "<col style='width:81px'/>" +
            "<col style='width:81px'/>" +
            "<col style='width:81px'/>" +
            "<col style='width:81px'/>" +
            "<col style='width:81px'/>" +
            "<col style='width:81px'/>" +
            "</colgroup>" +
            "<thead class='cal_date'>" +
            "<th><button type='button' class='prev'><</button></th>" +
            "<th colspan='5'><p><span>" + year + "</span>년 <span>" + month + "</span>월</p></th>" +
            "<th><button type='button' class='next'>></button></th>" +
            "</thead>" +
            "<thead  class='cal_week'>" +
            "<th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th>" +
            "</thead>" +
            "<tbody id='custom_set_date'>" +
            "</tbody>" +
            "</table>";
        return calendar_html_code;
    }

    function calMoveEvtFn() {
        //전달 클릭
        $(".custom_calendar_table").on("click", ".prev", function () {
            nowDate = new Date(nowDate.getFullYear(), nowDate.getMonth() - 1, nowDate.getDate());
            calendarMaker($(target), nowDate);
        });
        //다음날 클릭
        $(".custom_calendar_table").on("click", ".next", function () {
            nowDate = new Date(nowDate.getFullYear(), nowDate.getMonth() + 1, nowDate.getDate());
            calendarMaker($(target), nowDate);
        });
        //일자 선택 클릭
        $(".custom_calendar_table").on("click", "td", function () {
            $(".custom_calendar_table .select_day").removeClass("select_day");
            $(this).removeClass("select_day").addClass("select_day");
        });
    }
}

댓글목록

등록된 댓글이 없습니다.

전체 142
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
122 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1847 08-04
열람중 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2126 06-25
120 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1870 05-28
119 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3036 03-06
118 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2849 03-02
117 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2634 11-06
116 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3212 11-03
115 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2597 10-28
114 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2731 10-06
113 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2581 09-11
112 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2792 01-20
111 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2708 08-18
110 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2723 01-30
109 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3010 09-23
108 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2916 02-04
107 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2986 02-04
106 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3160 09-05
105 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3233 02-23
104 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3210 12-27
103 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3287 12-21