JavaScript カスタムカレンダー効果

この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

実装のアイデア:各月の最初の日に曜日を取得し、前の日を空白として入力し、各月の日数を取得し、ループに入力し、現在の時間を判断して別のスタイルを追加し、前の月と次の月をクリックしたときに月を変更します。

現在の月の最初の日を取得します。戻り値は 0 (日曜日) から 6 (土曜日) までの整数です。

var date = 新しい Date();
var y = date.getFullYear();
var m = date.getMonth();
新しい Date(y,m,1).getDay();

現在の月の日数を取得します

var date = 新しい Date();
var y = date.getFullYear();
var m = date.getMonth();
新しい日付(y,m+1,-1)。getDate()+1;

最後に、前の月または次の月をクリックして 1 を加算または減算し、カプセル化されたカレンダー機能を実行します。

完全なコード:

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

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }

        体 {
            背景: #2c3e50;
        }

        .カレンダー{
            幅: 400ピクセル;
            マージン: 50px 自動;
        }

        .カレンダーヒント{
            フォントサイズ: 16px;
            テキスト配置: 中央;
            色: #fff;
        }

        .前へ {
            フロート: 左;
            カーソル: ポインタ;
        }

        。次 {
            フロート: 右;
            カーソル: ポインタ;
        }

        .calendar-month {
            テキスト配置: 中央;
            マージン: 10px 0;
            色: #fff;
        }

        ul {
            リストスタイル: なし;
            ディスプレイ: フレックス;
        }

        li {
            幅: 57px;
            テキスト配置: 中央;
            高さ: 55px;
            行の高さ: 55px;
            フォントサイズ: 16px;
            色: #fff;
        }

        .カレンダー日{
            ディスプレイ: フレックス;
        }

        .calendar-day の範囲 {
            フレックス: 1;
            色: #fff;
            テキスト配置: 中央;
            高さ: 40px;
            行の高さ: 40px;

        }

        .カレンダーデータ{
            ディスプレイ: フレックス;
            flex-wrap: ラップ;
        }

        li {
            幅: 57px;
            カーソル: ポインタ;
        }

        li:ホバー{
            背景: #2d3436;
        }

        .カレンダーデータ.on {
            色: #d63031;
        }
    </スタイル>
</head>

<本文>
    <div class="カレンダー">
        <div class="カレンダーヒント">
            <span class="prev">前月</span>
            2022年
            <span class="next">来月</span>
        </div>
        <div class="calendar-month">5月</div>
        <div class="カレンダー日">
            <span>日</span>
            <span>一</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
        <ul class="カレンダーデータ">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    <スクリプト>
        var date = 新しい Date();
        var year = document.querySelector("#year");
        var 月 = document.querySelector(".calendar-month");
        var カレンダーデータ = document.querySelector(".カレンダーデータ");
        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");
        var monthArr = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
        var y,m,day,d,html,今日;
        カレンダー（）;

        関数カレンダー() {
            y = date.getFullYear();
            year.innerHTML = y + "年";

            m = date.getMonth();
            month.innerHTML = monthArr[m];
            day = new Date(y, m, 1).getDay(); //各月の最初の日を取得します d = new Date(y, m + 1, -1).getDate() + 1; //日数を取得します html = "";

            //各月の初日より前の時間を空に入力します for (var i = 0; i < day; i++) {
                html += "<li> </li>";
            }

            (var j = 1; j <= d; j++) の場合 {
                if (y==新しい日付().getFullYear() && m==新しい日付().getMonth() && j==日付.getDate()) {
                    html += "<li class='on'>" + j + "</li>";
                } それ以外 {
                    html += "<li>" + j + "</li>";
                }

            }
            カレンダーデータ.innerHTML = html;
        }

        prev.onclick = 関数（）{
            date.setMonth(date.getMonth() - 1);
            カレンダー（）;
        }

        next.onclick = 関数（）{
            date.setMonth(date.getMonth() + 1);
            カレンダー（）;
        }
    </スクリプト>
</本文>

</html>

効果：