coderbear's log

# 현재 달 달력 출력

- html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Calendar.css" type="text/css">
    <title>Document</title>
</head>
<body>
    <div id="cal"></div>
    <script src="Calendar.js"></script>    
</body>
</html>

- css

div{
    color: #1c140d;
}

h2{
    text-align: center;
}

table{
    margin : 0 auto;
}

th{
    font-size: 2em;
    padding-bottom: 15px;
}

td{
    width: 80px;
    height : 40px;
    text-align: center;
}

td:nth-of-type(1){
    color: tomato;
}

td:nth-of-type(7){
    color: #0054FF;
}

.dayOfWeek{
    text-align: center;
    background-color: #1c140d;
    color : #f2e9e1;
    font-size: 17px;
}

#dayDay{
    background-color: #cbe86b;
}

#before{
    float: left;
    text-decoration: none;
    color: #cbe86b;
}

#after{
    float: right;
    text-decoration: none;
    color: #cbe86b;
}

- js

var today = new Date();
var thisYear = today.getFullYear();
var thisMonth = today.getMonth();
var lastDay = getLastDayOfMonth();
var text = "";
var date = 1;
var firstDayOfWeekInst = new Date(thisYear, thisMonth, 1);
var firstDayOfWeek = firstDayOfWeekInst.getDay();
var cell = 0;
var dayOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

function getLastDayOfMonth() {
    var lastDayOfMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var monthFeb;

    if ((thisYear % 4 == 0) && (thisYear % 100 != 0))
        monthFeb = true;
    else if (thisYear % 400 == 0)
        monthFeb = true;
    else
        monthFeb = false;
    lastDayOfMonth[1] = (monthFeb) ? 29 : 28;
    return lastDayOfMonth[thisMonth];
}

function showCalendar() {
    text += "<table>";
    text += "<th colspan=7>";
    text += "<a href='#' onclick='document.getElementById('cal').innerHTML = nextMonth(-1)' id='before'>&#10094;</a>";
    text += thisYear + " . " + (thisMonth + 1);
    text += "<a href='#' onclick='document.getElementById('cal').innerHTML =nextMonth(1)' id='after'>&#10095;</a>";
    text += "</th>"

    text += "<tr>"
    for (var i = 0; i < 7; i++)
        text += "<td class='dayOfWeek'>" + dayOfWeek[i] + "</td>";
    text += "</tr>"

    for (var i = 0; i <= 5; i++) {
        text += "<tr>";
        for (var j = 0; j < 7; j++) {
            if (cell < firstDayOfWeek)
                text += "<td>&nbsp;</td>";
            else if (date <= lastDay) {
                if (date == today.getDate()) {
                    text += "<td id='dayDay'>" + date++ + "</td>";
                }
                else text += "<td>" + date++ + "</td>";
            }
            else
                text += "<td>&nbsp;</td>";
            cell++;
        }
        text += "</tr>";
    }
    text += "</table>";
    document.getElementById("cal").innerHTML = text;
}
showCalendar();

# 이전 달, 다음 달 표시되는 달력 (최종완성본)

- html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="css/Calendar.css" type="text/css">
    <title>CoderBear's Calendar</title>
    <script type="text/javascript" src="Calendar.js"></script>
</head>
	
<body>
    <table id="calendar">
        <tr>
            <td><label onclick="preMonth()" id="preMonth"><</label></td>
            <td id="tbCalendarYM" colspan="5">yyyy.m</td>
            <td><label onclick="nextMonth()" id="nextMonth">></label></td>
        </tr>
        <tr id="dayOfWeek">
            <td>
                <font color="tomato">Sun
            </td>
            <td>Mon</td>
            <td>Tue</td>
            <td>Wed</td>
            <td>Thu</td>
            <td>Fri</td>
            <td><font color="#0054FF">Sat</td>
        </tr>
    </table>
    <script type="text/javascript">
        curMonth();
    </script>
    </body>
</html>

- CSS

h2{
    text-align: center;
    color: #1c140d;
    margin-top: 60px;
}

#calendar {
    margin: 0 auto;
    margin-bottom: 60px;
}

#tbCalendarYM{
    font-size: 22px;
    margin-top: 40px;
}

td > #preMonth, td> #nextMonth{
    color: #1c140d;
}

td {
    width: 80px;
    height: 40px;
    text-align: center;
}

.sun {
    color: tomato;
}

.sat {
    color: #0054FF;
}

#dayOfWeek {
    text-align: center;
    background-color: #1c140d;
    color: #f2e9e1;
    font-size: 17px;
    padding-bottom: 15px;
}

#preMonth {
    float: left;
    text-decoration: none;
    color: #cbe86b;
}

#nextMonth {
    float: right;
    text-decoration: none;
    color: #cbe86b;
}
}

- JavaScript

var today = new Date();
var date = new Date();

function preMonth() {
    today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
    curMonth();
}

function nextMonth() {
    today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
    curMonth();
}

function curMonth() {
    var firstDate = new Date(today.getFullYear(), today.getMonth(), 1);
    var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    var tbl = document.getElementById("calendar");
    var todayYM = document.getElementById("tbCalendarYM");
    var todayM = today.getMonth()+1;
    if (today.getMonth() < 9) {
        todayM = '0' + todayM;
    }
    todayYM.innerHTML = today.getFullYear() + '.' + todayM;

    while (tbl.rows.length > 2) {
        tbl.deleteRow(tbl.rows.length - 1);
    }

    var row = null;
    row = tbl.insertRow();
    var cnt = 0;
    var cell = '';
    for (var i = 0; i < firstDate.getDay(); i++) {
        cell = row.insertCell();
        cnt++;
    }

    for (var i = 1; i <= lastDate.getDate(); i++) {
        cell = row.insertCell();
        cell.innerHTML = i;
        cnt++;

        if (cnt % 7 == 1) {
            cell.innerHTML = "<span class='sun'>" + i + "</span>";
        }
        if (cnt % 7 == 0) {
            cell.innerHTML = "<span class='sat'>" + i + "</span>";
            row = tbl.insertRow();
        }
        if (today.getFullYear() == date.getFullYear() && today.getMonth() == date.getMonth() && i == date.getDate()) {
            cell.bgColor = "#cbe86b";
        }
    }
}

728x90

저작자표시

'Web > javascript' 카테고리의 다른 글

[필기정리]Day51-1 - 자바스크립트의 역사, use strict 등 (0)	2020.09.03
[필기정리] Day50-2 - 자바스크립트 예시 및 문제 (0)	2020.09.03
[필기정리] Day50-1 - array sort, 유효성체크 (0)	2020.08.31
[필기정리] Day48 - 단계별 달력 만들기 문제 등 (0)	2020.08.19
[필기정리] Day47 - JavaScript, function, typeof 등 (0)	2020.08.18

coderbear

[실습문제] JavaScript로 달력 만들기

'Web > javascript' 카테고리의 다른 글

티스토리툴바