質問編集履歴

2 カレンダーの仕様

somatech0428

somatech0428 score 12

2018/07/14 17:17  投稿

縦型カレンダー スクロールで日付計算
カレンダーの日付が取れなくて困っています。
```lang-javascript
$(function(){
'use strict';
var $calendar = $('#calendar');
var myWeekTbl = new Array('日','月','火','水','木','金','土');   // 曜日テーブル定義
var myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);   // 月テーブル定義
var myDate = new Date();
var myToday = myDate.getDate();   // 今日の'日'を退避
var todayMyMonth = myDate.getMonth();   // 月を取得(0月~11月)
function setCalender(l){
myDate = new Date(2018,l);   // 今日の日付データ取得
var myYear = myDate.getFullYear();   // 年を取得
((myYear % 4)===0 && (myYear % 100) !==0) || (myYear % 400)===0 ? myMonthTbl[1] = 29: 28;   // うるう年だったら...
 // 2月を29日とする
var myMonth = myDate.getMonth();   // 月を取得(0月~11月)
myDate.setDate(1);   // 日付を'1日'に変えて、
var myWeek = myDate.getDay();   // '1日'の曜日を取得
var myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);   // カレンダーの行数
var myTable = new Array(7*myTblLine);   // 表のセル数を用意
for(var i=0; i<7*myTblLine; i++){
 myTable[i]='';   // セルを全て空にする
}
for(i=0; i<myMonthTbl[myMonth]; i++){
myTable[i+myWeek]=i+1;   // 日付を埋め込む
}
var source = '';
var td = '<div class="div-day">';
var tdC = '</div>';
for(i=0; i<myTblLine; i++){   // 表の「行」のループ
 for (var j = 0; j < 7; j++) {
   var mydat = myTable[j+(i*7)];
   if(todayMyMonth === myMonth && mydat === myToday){
     source += '<div class="today" id="today">' + mydat + tdC;
   }else if(j === 0){
     source += '<div class="div-day">' + mydat + tdC;
   }else if(j === 6){
     source += '<div class="div-day sat">' + mydat + tdC;
   }else{
     source += td + mydat + tdC;
   }
 }
}
var weekTr;
var tableSource = '<span class="flag"></span><table class="getid">' + '<tr><td colspan="7">' + myYear + '年' + (myMonth+1) + '月' + '</td></tr>' + source +'</table>';
 $calendar.append(tableSource);   // 表の作成開始
}
for(var l=0; l<99; l++){
 setCalender(l);
}
});
// 空の要素削除
$(function() {
    $("div.div-day:empty").remove();
    $("div.sat-d:empty").remove();
    $("div.sun-d:empty").remove();
});
  //今日の日付データを変数hidukeに格納
  var hiduke=new Date();
  var cale_date = document.getElementById('cale-date');
  //年・月・日・曜日を取得する
  var year = hiduke.getFullYear();
  var month = hiduke.getMonth()-5;
  var week = hiduke.getDay();
  var day = hiduke.getDate();
  $('#cale-date p').text(year + '年' + month + '月');
```
```lang-html
 <div id="cale-date">
 <div id="calendar">
   <div class="div-day">31</div>
 </div>
 <script src="./js/jquery.inview.min.js"></script>
```
```lang-css
#calendar div{
   width: 14.28%;
   height: 16vh;
   border-top:1px solid #CCC;
   /* border-left:1px solid #CCC; */
   border-right:1px solid #CCC;
   float: left;
   color: #7b7b7b;
   font-size: 14px;
   padding-top: 8px;
}
#cale-date p{
   position: fixed;
   top: 18px;
   left: 50%;
   font-size: 20px;
   color: #fff;
   transform: translateX(-50%);
   z-index: 9999;
}
```
レイアウトが崩れていて申し訳ありません。
なんとかこの縦型カレンダーをスクロールしたら日付を計算して、その当月がきたら一ヶ月進む、前月に行ったら一ヶ月戻るというようなものが作りたいです。
#cale-dateここの日付の部分です。
ご助力いただけると幸いです。
どうかお願いいたします。
こちらが画像になります。
![イメージ説明](c0bb073a9d14b607aa166095e1ec6469.png)
![イメージ説明](c0bb073a9d14b607aa166095e1ec6469.png)
■カレンダーの仕様
・当月の6月前からカレンダーを生成(現在は2018年のはじめから生成)、2028年まで生成。
・月と月の間の日にちは開けず、詰めて縦に日にちを表示。
・下にスクロールして次の月を表示させて行く。
・ヘッダー部分に現在表示されている年月を表示させる。
・該当付きに1日がヘッダー部分に隣接したらヘッダー部分の日付が該当月の表示になる。該当月の1日がヘッダー部分から下に離れたら、前月の年月が表示される。
・ページを読み込んだら、現在の日付にリンクさせる
 ※コード参考元サイト:https://www.frontendmemo.xyz/entry/2017/02/04/044306
 ※目標アプリ:https://lifebear.com/
  • JavaScript

    36498 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    16697 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    9931 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1 イメージ画像を掲載しました。多少デザインを変更しています。

somatech0428

somatech0428 score 12

2018/07/14 09:20  投稿

縦型カレンダー スクロールで日付計算
カレンダーの日付が取れなくて困っています。
```lang-javascript
$(function(){
'use strict';
var $calendar = $('#calendar');
var myWeekTbl = new Array('日','月','火','水','木','金','土');   // 曜日テーブル定義
var myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);   // 月テーブル定義
var myDate = new Date();
var myToday = myDate.getDate();   // 今日の'日'を退避
var todayMyMonth = myDate.getMonth();   // 月を取得(0月~11月)
function setCalender(l){
myDate = new Date(2018,l);   // 今日の日付データ取得
var myYear = myDate.getFullYear();   // 年を取得
((myYear % 4)===0 && (myYear % 100) !==0) || (myYear % 400)===0 ? myMonthTbl[1] = 29: 28;   // うるう年だったら...
 // 2月を29日とする
var myMonth = myDate.getMonth();   // 月を取得(0月~11月)
myDate.setDate(1);   // 日付を'1日'に変えて、
var myWeek = myDate.getDay();   // '1日'の曜日を取得
var myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);   // カレンダーの行数
var myTable = new Array(7*myTblLine);   // 表のセル数を用意
for(var i=0; i<7*myTblLine; i++){
 myTable[i]='';   // セルを全て空にする
}
for(i=0; i<myMonthTbl[myMonth]; i++){
myTable[i+myWeek]=i+1;   // 日付を埋め込む
}
var source = '';
var td = '<div class="div-day">';
var tdC = '</div>';
for(i=0; i<myTblLine; i++){   // 表の「行」のループ
 for (var j = 0; j < 7; j++) {
   var mydat = myTable[j+(i*7)];
   if(todayMyMonth === myMonth && mydat === myToday){
     source += '<div class="today" id="today">' + mydat + tdC;
   }else if(j === 0){
     source += '<div class="div-day">' + mydat + tdC;
   }else if(j === 6){
     source += '<div class="div-day sat">' + mydat + tdC;
   }else{
     source += td + mydat + tdC;
   }
 }
}
var weekTr;
var tableSource = '<span class="flag"></span><table class="getid">' + '<tr><td colspan="7">' + myYear + '年' + (myMonth+1) + '月' + '</td></tr>' + source +'</table>';
 $calendar.append(tableSource);   // 表の作成開始
}
for(var l=0; l<99; l++){
 setCalender(l);
}
});
// 空の要素削除
$(function() {
    $("div.div-day:empty").remove();
    $("div.sat-d:empty").remove();
    $("div.sun-d:empty").remove();
});
  //今日の日付データを変数hidukeに格納
  var hiduke=new Date();
  var cale_date = document.getElementById('cale-date');
  //年・月・日・曜日を取得する
  var year = hiduke.getFullYear();
  var month = hiduke.getMonth()-5;
  var week = hiduke.getDay();
  var day = hiduke.getDate();
  $('#cale-date p').text(year + '年' + month + '月');
```
```lang-html
 <div id="cale-date">
 <div id="calendar">
   <div class="div-day">31</div>
 </div>
 <script src="./js/jquery.inview.min.js"></script>
```
```lang-css
#calendar div{
   width: 14.28%;
   height: 16vh;
   border-top:1px solid #CCC;
   /* border-left:1px solid #CCC; */
   border-right:1px solid #CCC;
   float: left;
   color: #7b7b7b;
   font-size: 14px;
   padding-top: 8px;
}
#cale-date p{
   position: fixed;
   top: 18px;
   left: 50%;
   font-size: 20px;
   color: #fff;
   transform: translateX(-50%);
   z-index: 9999;
}
```
レイアウトが崩れていて申し訳ありません。
なんとかこの縦型カレンダーをスクロールしたら日付を計算して、その当月がきたら一ヶ月進む、前月に行ったら一ヶ月戻るというようなものが作りたいです。
#cale-dateここの日付の部分です。
ご助力いただけると幸いです。
どうかお願いいたします。
どうかお願いいたします。
こちらが画像になります。
![イメージ説明](c0bb073a9d14b607aa166095e1ec6469.png)
  • JavaScript

    36498 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    16697 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    9931 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る