@shou0205 (shou)posted at 2022-03-07

Javascriptでカレンダーの日にちをクリックしたときに日付を別ページに表示させたい

Q&A

解決したいこと

カレンダーの日にちをクリックしたときに日付を別ページに表示させたいです。

HTML、CSS、Javascriptを用いてカレンダー型のスケジュール管理帳アプリをつくっています。
カレンダーの日にちをfor文で追加しているのですが、この値をそれぞれの日付毎に表示したいと考えています。
ですが、その方法がいまいちわかりません。
やりたいことの完成形としては、カレンダーの予定を追加したい日をクリックすると別HTMLファイルに移動し、その際に移動した先のファイルにクリックした場所が何月何日何曜日なのかを表示させたいと考えております。

大前提として難しいなと感じているのは、このソースコードの場合、カレンダーに表示している日にちは、for文によってiを1から順に表示しているだけなので、カレンダーの任意の日にちをクリックした際にどうやったら正しい日にちが表示できるようになるのか考え方がわかりません。
何卒よろしくお願いします。

現在使っているソースコード

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = 'stylesheet' href ='style.css'>
    <title>スケジュール管理帳</title>
    <!--↓はfont-awesome cdnjsからとってきたもの-->
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" 
    integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" 
    crossorigin="anonymous" 
    referrerpolicy="no-referrer" />

    <!--↓はGoogle FontsのQuicksandからとってきたもの-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">

</head>
<body>
    <header>
        
    </header>

    <div class ="container">
        <div class="calendar">
            <div class="month">
                <i class="fas fa-angle-left prev"></i>
                <div class="date">
                    <h1></h1>
                    <p></p>
                    
                </div>
                <i class="fas fa-angle-right next"></i>
            </div>
            <div class="weekdays">
                <div>日</div>
                <div>月</div>
                <div>火</div>
                <div>水</div>
                <div>木</div>
                <div>金</div>
                <div>土</div>
            </div>
            <div id='border-bottom'></div>

            <div class="days" id="days">
                <a href="#" class="btn-square">追加</a>
            </div>
        </div>
    </div>
    
    <script src ="script.js"></script>
    <script src ="in-Schedule.js"></script>
</body>
</html>

CSSソースコード
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

html{
    font-size: 62.5%;
}

.btn-square{
  display: inline-block;
  padding: 0.2em 0.5em;
  text-decoration: none;
  background: #0a0d14;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
  position:under,left;
  
}
/*1rem=16px*/
.btn-square:active {
    /*ボタンを押したとき*/
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
  }

.container {
    width:100%;
    height:100vh;
    background-color: #12121f;
    color:#eee;
    display:flex;
    justify-content: center;
    align-items: center;
}

.calendar{
    width:60rem;
    height:70rem;
    background-color: #222227;
    box-shadow: 0 0.5rem 3rem rgba(0,0,0,0,4);
}

.month{
    width: 100%;
    height: 12rem;
    background-color: rgb(221, 109, 5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 2rem;
    text-align: center;
    text-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.5);
}

.month i{
    font-size: 2.5rem;
    cursor: pointer;
}

.month h1{
    font-size: 3rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 1rem;

}

.month p{
    font-size: 1.6rem;
}

.weekdays{
    width:100%;
    height: 5rem;
    padding: 1rem 3rem;
    gap: 15px;
    display: flex;
    align-items: center;
    
}

#border-bottom{
    height: 10px;
    width: 91%;
    margin-left: 25px;
    border-bottom:2px solid #777;
}

.weekdays div{
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    width: calc(44.2rem/7);
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0,5);
}

.days{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
}

.days div{
    font-size: 1.4rem;
    margin:0.6rem;/*1日1日のマスとマスの間の幅*/
    width: calc(40.2rem/6);/*1日1日のマスの大きさ*/
    height: 6.5rem;/*1日1日のマスの高さ*/
    display: flex;
    justify-content: left;
    align-items: top;
    border-bottom: solid 4px ;/*ボタンの奥行き*/
    text-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0,5);
    transition: background-color 0.2s;
}

.days div:active{
    /*ボタンを押したとき*/
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

.days div:hover:not(.today){
    background-color: #262626;
    border:0.2rem solid#777;
    cursor:pointer;
}

.prev-date,
.next-date{
    opacity: 0.5;
}

.today{
    background-color: rgb(90, 87, 84);
    border-bottom: solid 4px ;/*ボタンの奥行き*/
}

Javascriptのソースコード
'use strict'
const date =new Date();

const renderCalender = () =>{
    date.setDate(1);

    const monthDays = document.querySelector(".days");

    const lastDay = new Date(
        date.getFullYear(),
        date.getMonth() + 1, 0
        ).getDate();

    const prevLastDay =new Date(
        date.getFullYear(),
        date.getMonth(), 0)
        .getDate();

    const firstDayIndex = date.getDay();

    const lastDayIndex = new Date(
        date.getFullYear(),
        date.getMonth() + 1, 0)
        .getDay();

    const nextDays = 7 - lastDayIndex - 1;

    const months = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
    ];

    document.querySelector(".date h1").innerHTML
    =months[date.getMonth()];

    document.querySelector('.date p').innerHTML
    =new Date().toLocaleDateString();

    let days = "";

    for(let x = firstDayIndex; x > 0; x--){
        days += `<div class ="prev-date">${prevLastDay - x + 1}</div>`;
    }

    for(let i = 1; i <= lastDay; i++){
        if(i === new Date().getDate() && 
        date.getMonth() === new Date().getMonth()){
            days += `<div class = "today">${i}</div>`;
        }else{
            days += `<div>${i}</div>`;
        }
    
    } 

    for(let j = 1;j<=nextDays;j++){
       days += `<div class="next-date">${j}</div>`;
        monthDays.innerHTML = days;
    }
};



    document.querySelector('.prev').addEventListener("click",()=>{
        date.setMonth(date.getMonth() - 1);
        renderCalender();
    });

    document.querySelector('.next').addEventListener('click',()=>{
        date.setMonth(date.getMonth() + 1);
        renderCalender();
    });

    
    renderCalender();

//それぞれのカレンダー日にちをクリックするとin-Schedule.htmlに移動する。
    const days = document.getElementById("days");
    days.addEventListener("click",function(event){
        event.preventDefault();
        location.href = "./in-Schedule.html";
    })

わからなすぎて困っています。
見にくいかもしれませんが、何卒よろしくお願いします。
取得したカレンダーの日付は以下のHTMLファイルに表示されるようにしたいと考えています。

表示先のhtmlファイル

in-Schedule.htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = 'stylesheet' href ='in-Schedule.css'>
    <title>Schedule</title>
    <!--↓はfont-awesome cdnjsからとってきたもの-->
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" 
    integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" 
    crossorigin="anonymous" 
    referrerpolicy="no-referrer" />

    <!--↓はGoogle FontsのQuicksandからとってきたもの-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
    <div class="main">
        <div class="header">
            <input type="submit" class="close" id="close" value="✖️">
            <h2>新規作成</h2>
            <div id='border-bottom'></div>
        </div>

        <div class="weekday">
            <h2></h2>
        </div><!--選択した日の曜日を表す-->

        <div class="months-and-days" id="months-and-days">
            <h2>日付：</h2>
            <h3 id="month-day">3月7日</h3>
            <div id='border-bottom'></div>
        </div><!--選択した日にちを表す-->

        <div class="schedule-time">
        </div><!--予定時間の設定-->

        <div class="schedule">
            <input type="text" id="schedule-message" placeholder="予定を入力してください"></input>
        </div>

        <div class="importance"><!--重要度-->
            <!--優先度を選択-->
            重要度
            <select name="priority">
                <option value="高い" id='high'>高
                <option value="普通" id='middle'>中
                <option value="低い" id='low'>低
            </select>
            <div id='border-bottom'></div>
        </div>

        <div class="notification"><!--通知-->
        </div>
        <div class="note"><!--メモ-->
            <textarea name="message" id="message" placeholder="メモ"></textarea>
        </div>

        

        <div class="footer">
            <input type="submit" value="保存">
        </div>
    </div>

    <script src ="script.js"></script>
    <script src ="in-Schedule.js"></script>
</body>
</html>

何卒よろしくお願いします。

Are you sure you want to delete the question?

Javascriptでカレンダーの日にちをクリックしたときに日付を別ページに表示させたい

解決したいこと

現在使っているソースコード

表示先のhtmlファイル

1Answer

Comments

Your answer might help someone💌