縦型カレンダー スクロールで日付計算

Question

カレンダーの日付が取れなくて困っています。

$(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;	// うるう年だったら...
  // ２月を２９日とする
var myMonth = myDate.getMonth();	// 月を取得(0月～11月)
myDate.setDate(1);	// 日付を'１日'に変えて、
var myWeek = myDate.getDay();	// '１日'の曜日を取得
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 + '月');

 <div id="cale-date">
 <div id="calendar">
   <div class="div-day">31</div>
 </div>
 <script src="./js/jquery.inview.min.js"></script>

#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ここの日付の部分です。

ご助力いただけると幸いです。
どうかお願いいたします。

こちらが画像になります。

■カレンダーの仕様
・当月の6月前からカレンダーを生成（現在は2018年のはじめから生成）、2028年まで生成。
・月と月の間の日にちは開けず、詰めて縦に日にちを表示。
・下にスクロールして次の月を表示させて行く。
・ヘッダー部分に現在表示されている年月を表示させる。
・該当付きに1日がヘッダー部分に隣接したらヘッダー部分の日付が該当月の表示になる。該当月の1日がヘッダー部分から下に離れたら、前月の年月が表示される。
・ページを読み込んだら、現在の日付にリンクさせる
。
※コード参考元サイト：https://www.frontendmemo.xyz/entry/2017/02/04/044306
※目標アプリ：https://lifebear.com/

Comments

[退会済みユーザー]

閏年に対応しないでいいんですか？

[somatech0428]

年を取得のところでとれてませんでしょうか？間違っていたらすみません・・・

[somatech0428]

ちなみにスマホのみの仕様です。

[退会済みユーザー]

なるほどわざわざそこで計算していたのね。失礼しました。

[退会済みユーザー]

コードをざっと眺めただけではイメージつかないので、スクリーンショットとか貼ってもらえます？

[somatech0428]

shibuya様、投稿を編集しました。

[somatech0428]

やはり自動生成でカレンダーの日付取得は難しいでしょうか…

[退会済みユーザー]

難しいというより、質問文からやりたいことが読み取りにくいのです。

[somatech0428]

申し訳ありません。実現したいことなのですが、画像は今年の1月のカレンダーが出ていて画像したの1日が2月1日のカレンダーの日付になります。この2月1日の日付がヘッダー部分に隣接したら、ヘッダー部分の日付が「2018年2月」に変化するというような作りがしたいです。それ以降の月も同じです。年をまたぐ場合も変化をさせたいです。が、すべてjsで同じクラスが生成されているのでクラスをトリガーにすると、すべてのクラスが処理されてしまって一つづつ月が進むというようなことができない状況になっています。

[somatech0428]

なので、スクロール量かなにかに応じて日付を操作しなければならないと感じていて・・・。何かお知恵をかしていただけたらと・・・

[退会済みユーザー]

「この2月1日の日付がヘッダー部分に隣接したら、ヘッダー部分の日付が「2018年2月」に変化するというような作りがしたいです。」これは上方向にスクロールした時の話ですよね？下のときどうするの？とか細かな仕様が不明なのです。

[somatech0428]

すみません。下にスクロールした場合は前月の表示に戻る仕様にしたいです。

[退会済みユーザー]

どのタイミングで戻すの？

[somatech0428]

2月1日がヘッダーから下に離れたら前月（1月の表示）にしたいです・・・。動きのイメージはこのアプリのようにしたいです。　https://lifebear.com/

[退会済みユーザー]

仕様を簡潔にまとめて質問本文に反映してください。

[somatech0428]

申し訳ありません。まだコーダー初心者なので、まとめられるかわかりませんが・・・追記してみます。

[退会済みユーザー]

この欄は、「質問への追記・修正の依頼」とタイトルにあるように、要件を追記する場所ではないのです。
プログラミングの初心者でも、「質問することの初心者」ではないと思います。

Answer 1

まだまだプロダクトレベルの品質ではないと思うけど、参考程度に。

<!DOCTYPE HTML>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#wrap {
				width: 280px;
				margin: 0 auto;
			}
			#calendar {
				border: 1px solid #F88;
				height: 197px;
				overflow-y: scroll;
			}
			#calendar table {
				border-collapse: collapse;
			}
			#calendar table th,
			#calendar table td {
				border: 1px solid #CCC;
				text-align: center;
				width: 2em;
			}
			#calendar table tr > td:first-child,
			#calendar table thead tr:last-child > th:first-child {
				background-color: #EEF;
			}
			#calendar table tr > td:last-child,
			#calendar table thead tr:last-child > th:last-child {
				background-color: #FEE;
			}

		</style>
	</head>
	<body>
		<div id="wrap">
			<p>----/--</p>
			<div id="calendar">

			</div>
		</div>
		<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">

			var data = [];

			function displayYM(y, m) {
				$('#wrap p').text(y + '年' + (m + 1) + '月');
			}

			/**
			 * カレンダーを作る
			 * @param {int} y 年
			 * @param {int} m 月（0-11）
			 * @param {int} y_end 年
			 * @param {int} m_end 月（0-11）
			 */
			function getCalendar(y, m, y_end, m_end) {
				displayYM(y, m);

				var first_dt_current = new Date();
				first_dt_current.setFullYear(y);
				first_dt_current.setMonth(m);
				first_dt_current.setDate(1);
				var first_day_week = first_dt_current.getDay(); // ○月1日の曜日

				// 1日を含む週の日曜日を取得
				first_dt_current.setDate(first_dt_current.getDate() - first_day_week);

				var next_dt = new Date();
				next_dt.setFullYear(y_end);
				next_dt.setMonth(m_end + 1);
				next_dt.setDate(1 + (6 - next_dt.getDay()));

				var table = $('<table>');
				var tbody = $('<tbody>').appendTo(table);

				while (first_dt_current < next_dt) {

					// 日曜日なら行をたす
					if (first_dt_current.getDay() === 0) {
						var tbody_tr = $('<tr>').appendTo(tbody);
					}
					$('<td>').text(first_dt_current.getDate()).appendTo(tbody_tr);
					if (first_dt_current.getDate() === 1) {
						tbody_tr.addClass('has-first')
								.data({
									y: first_dt_current.getFullYear(),
									m: first_dt_current.getMonth()
								});
					}

					// 1日たす
					first_dt_current.setDate(first_dt_current.getDate() + 1);
				}
				$("#calendar").append(table).find('tr.has-first').each(function (i, obj) {
					data.push({
						position: $(this).position().top - $("#calendar").position().top - 2,
						y: $(this).data('y'),
						m: $(this).data('m')
					});
				});
			}

			$(function () {
				getCalendar(2017, 0, 2018, 11);

				$("#calendar").on('scroll', function (e) {
					var scrl = $(this).scrollTop(); // #calendar のTOP
					for (var i = 0; i < data.length; i++) {
						if (i > 0 && scrl < data[i].position) {
							var y = data[(i - 1)].y;
							var m = data[(i - 1)].m;
							displayYM(y, m);
							break;
						}
					}
				});
			});
		</script>
	</body>
</html>

---

				while (first_dt_current < next_dt) {

					// 日曜日なら行をたす
					if (first_dt_current.getDay() === 0) {
						var tbody_tr = $('<tr>').appendTo(tbody);
					}

					var td = $('<td>').text(first_dt_current.getDate()).appendTo(tbody_tr);
					var today = new Date();
					if (today.getFullYear() === first_dt_current.getFullYear() &&
							today.getMonth() === first_dt_current.getMonth() &&
							today.getDate() === first_dt_current.getDate()
							) {
						td.addClass('today');
					}

					if (first_dt_current.getDate() === 1) {
						tbody_tr.addClass('has-first')
								.data({
									y: first_dt_current.getFullYear(),
									m: first_dt_current.getMonth()
								});
					}

					// 1日たす
					first_dt_current.setDate(first_dt_current.getDate() + 1);
				}

Comments

[somatech0428]

大変ありがとうございます！！
さっそく当てはめさせていただきます！！

[退会済みユーザー]

プロダクトレベルじゃないって言ってるじゃないの。
コピペしてはるだけならこんなめんどくさいことしたくないんだわ。
コード書いてくれという依頼じゃん…

[somatech0428]

もちろん参考にさせていただくという意味です！
ありがとうございます！！

[somatech0428]

すみません・・・
図々しい発言かと思いますが、当日の日付はどうすれば判定できますでしょうか・・・

[somatech0428]

申し訳ありません・・・
作りがまだ良くわからなくて

[退会済みユーザー]

当日って実行している日付のこと？

[somatech0428]

そうです！
実行している日付にidを付与したいです！

[退会済みユーザー]

当日という意味合いならそこにidつけるのはおかしい。idってただ一つのものを特定するものだし、性質を表すものなら、classでしょう。
アクセスした日によって id が移動するのは不自然。

[退会済みユーザー]

while の中で、td に 'today' とでもつければOK。
似たような処理しているところあるので、そこを参考に。

[somatech0428]

繰り返し構文の中で条件式を作ろうと考えたのですが・・・

var myDate = new Date();
var myToday = myDate.getDate();
var todayMyMonth = myDate.getMonth(); // 月を取得(0月～11月)
var myMonth = myDate.getMonth(); // 月を取得(0月～11月)

if(todayMyMonth === myMonth && 7 === myToday){
$('td').addClass('today');

}

勉強不足で見つけられず、このようなものを追記したのですがうまくいきませんでした。

[退会済みユーザー]

検索して見つかったコードの処理内容を理解しようとしています？
それどう考えても条件おかしいでしょ。

年月日それぞれが一致していないといけないのに、条件が二つしかないし。
$('td') というセレクタじゃ、<td> 全てにclass が付与されてしまう。

[somatech0428]

すみません。
条件式は正直、理解できていませんでした。
セレクタは$('td')ではなく、<td class="today">を直接挿入するかたちになるのでしょうか。

[退会済みユーザー]

> セレクタは$('td')ではなく、<td class="today">を直接挿入するかたちになるのでしょうか。

「試しにやってみる」ことを繰り返しやることが理解の助けになると思います。どうせ人に聞いてさらっと終わらせてしまえばそれっきりですが、スクラップ＆ビルドを繰り返すことが一番身につく。

回答は追記しておいたけど、あえて見ないでやってみるのもいいんじゃない？

[somatech0428]

はい！あたって砕けて勉強いたします。
ありがとうございます！！