カレンダー一覧表示

仕様と完成イメージ

画像のように更新日以降のみがカレンダーの一覧票として表示されます。また，土曜日と日曜日は色が変わります。

先月または来月のボタンを押すことで表示される月が変更されます。更新日より前の月は何も表示されなくなります。

HTML

main.html

<main>
   <h4>カレンダー</h4>
   <dl>
      <div class="innerDate">
      <button class="beforemonth" id="beforemonth" type="submit" onclick="beforemonth()">先月</button>
      <div class="sectionDate">
      <span id="year"></span>
      年
      <span id="month"></span>
      月
      </div>
      <button class="nextmonth" id="nextmonth" type="submit" onclick="nextmonth()">来月</button>
    </div>
       <dt id = "date0"></dt>
       <dt id = "date1"></dt>
       <dt id = "date2"></dt>
       <dt id = "date3"></dt>
       <dt id = "date4"></dt>
       <dt id = "date5"></dt>
       <dt id = "date6"></dt>
       <dt id = "date7"></dt>
       <dt id = "date8"></dt>
       <dt id = "date9"></dt>
       <dt id = "date10"></dt>
       <dt id = "date11"></dt>
       <dt id = "date12"></dt>
       <dt id = "date13"></dt>
       <dt id = "date14"></dt>
       <dt id = "date15"></dt>
       <dt id = "date16"></dt>
       <dt id = "date17"></dt>
       <dt id = "date18"></dt>
       <dt id = "date19"></dt>
       <dt id = "date20"></dt>
       <dt id = "date21"></dt>
       <dt id = "date22"></dt>
       <dt id = "date23"></dt>
       <dt id = "date24"></dt>
       <dt id = "date25"></dt>
       <dt id = "date26"></dt>
       <dt id = "date27"></dt>
       <dt id = "date28"></dt>
       <dt id = "date29"></dt>
       <dt id = "date30"></dt>
   </dl>
  <script>
    printDate();
    for(i = 0; i <= 30; i++){
        printDatenew(i);
    }
  </script>
</main>

CSS

sample.css

h4 {
    margin: 0;
    text-align: center;
}
dl {
    width: auto;
    height: auto;
    margin: 0;
    padding: 2px;
    background-color: white;
    border: 2px solid rgb(19, 141, 211);
}
dt {
    float:bottom;
    width: 100%;
    margin-top: 2px;
    background-color: rgb(223, 223, 223);
}
.innerDate {
    width: auto;
    margin-top: 0px;
    margin-right: 5%;
    margin-bottom: 0%;
    margin-left: 5%;
    text-align: center;
}
.beforemonth {
    width: 60px;
    height: auto;
}
.sectionDate {
    margin: 0, 10%, 0, 10%;
    width: 60%;
    height: auto;
    margin-left: 5%;
    margin-right: 5%;
    display: inline-block;
    display: inline;
    text-align: center;
}
.nextmonth {
    width: 60px;
    height: auto;
}

JavaScript

script.js

var today=new Date();
var mon = today.getMonth()+1;
var year= today.getFullYear();
var stateMonth;//現在表示されている月
var stateYear;//現在表示されている年
var setday = new Date(stateYear, stateMonth, 0);

/*今日の日付を表示*/
function printDate(){
  document.getElementById("month").innerHTML=mon;
  stateMonth = mon;
  document.getElementById("year").innerHTML=year;
  stateYear = year;
}

/*来月ボタンの定義*/
function nextmonth(){
    var nextMonth = stateMonth % 12 + 1;
    if(nextMonth == 1){
        var nextYear = stateYear + 1;
        document.getElementById("year").innerHTML = nextYear;
        stateYear = nextYear;
        document.getElementById("month").innerHTML = nextMonth;
        stateMonth = nextMonth;
    }else{
        document.getElementById("month").innerHTML = nextMonth;
        stateMonth = nextMonth;
    }

    for(i = 0; i <= 30; i++){
        printDatenew(i);
    }
}

/*先月ボタンの定義*/
function beforemonth(){
    var beforeMonth = stateMonth % 12 - 1;
    if(beforeMonth <= 0){
        beforeMonth = beforeMonth + 12;
    }
    if(beforeMonth == 12){
        var beforeYear = stateYear - 1;
        document.getElementById("year").innerHTML = beforeYear;
        stateYear = beforeYear;
    }
        document.getElementById("month").innerHTML = beforeMonth;
        stateMonth = beforeMonth;

        for(i = 0; i <= 30; i++){
            printDatenew(i);
        }
}
/*有効な日付と曜日を返す*/
function getDate(i) {
    var er3 = 999;
    var lastday1 = new Date(today.getFullYear(), today.getMonth()+1, 0);
    var lastday2 = new Date(stateYear, stateMonth, 0); 
    var day1 = new Date(today.getFullYear(), today.getMonth(), today.getDate()+i);
    var day2 = new Date(stateYear, stateMonth-1, i+1);
    var you1 = day1.getDay();
    var you2 = day2.getDay();
    var s = day1.getDate()
    var d = day2.getDate()

    if(stateYear < year){
        return [er3, 0];
    }else if(stateYear == year){
        if(stateMonth < mon){
            return [er3, 0];
        }else if(stateMonth == mon){
            if(day1 > lastday1){
                return [er3, 0];
            }else{

            return [s, you1];
            }
        }else{
            if(day2 > lastday2){
                return [er3, 0];
            }else{
            return [d, you2];
            }
        } 
    }else{
        if(day2 > lastday2){
            return [er3, 0];
        }else{
            return [d, you2];
        }
    }
}
/*日付を表示する*/
function printDatenew(i) {
    var youbi = new Array("日","月","火","水","木","金","土");
    var idlist = new Array("date0", "date1", "date2", "date3", "date4", "date5", "date6", "date7", "date8", "date9", "date10", "date11", "date12", "date13", "date14", "date15", "date16", "date17", "date18", "date19", "date20", "date21", "date22", "date23", "date24", "date25", "date26", "date27", "date28", "date29", "date30");
    var [date, you] = getDate(i);
    const dateset = document.getElementById(idlist[i]);
    if(date == 999){
        dateset.style.display = "none";
    }else{
        if(you == 0){
            dateset.style.backgroundColor = 'rgb(255, 163, 163)';
            dateset.innerHTML = date+"日("+youbi[you]+")";
            dateset.style.display = "";
        }else if(you == 6){
            dateset.style.backgroundColor = 'rgb(163, 221, 255)';
            dateset.innerHTML = date+"日("+youbi[you]+")";
            dateset.style.display = "";
        }else{
            dateset.innerHTML = date+"日("+youbi[you]+")";
            dateset.style.backgroundColor = 'rgb(223, 223, 223)';
            dateset.style.display = "";
        }
    }  
}