カレンダーの日付が取れなくて困っています。
lang
1$(function(){ 2'use strict'; 3var $calendar = $('#calendar'); 4var myWeekTbl = new Array('日','月','火','水','木','金','土'); // 曜日テーブル定義 5var myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31); // 月テーブル定義 6var myDate = new Date(); 7var myToday = myDate.getDate(); // 今日の'日'を退避 8var todayMyMonth = myDate.getMonth(); // 月を取得(0月~11月) 9 10function setCalender(l){ 11myDate = new Date(2018,l); // 今日の日付データ取得 12var myYear = myDate.getFullYear(); // 年を取得 13((myYear % 4)===0 && (myYear % 100) !==0) || (myYear % 400)===0 ? myMonthTbl[1] = 29: 28; // うるう年だったら... 14 // 2月を29日とする 15var myMonth = myDate.getMonth(); // 月を取得(0月~11月) 16myDate.setDate(1); // 日付を'1日'に変えて、 17var myWeek = myDate.getDay(); // '1日'の曜日を取得 18var myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7); // カレンダーの行数 19var myTable = new Array(7*myTblLine); // 表のセル数を用意 20for(var i=0; i<7*myTblLine; i++){ 21 myTable[i]=''; // セルを全て空にする 22} 23for(i=0; i<myMonthTbl[myMonth]; i++){ 24myTable[i+myWeek]=i+1; // 日付を埋め込む 25} 26 27var source = ''; 28var td = '<div class="div-day">'; 29var tdC = '</div>'; 30 31for(i=0; i<myTblLine; i++){ // 表の「行」のループ 32 for (var j = 0; j < 7; j++) { 33 var mydat = myTable[j+(i*7)]; 34 if(todayMyMonth === myMonth && mydat === myToday){ 35 source += '<div class="today" id="today">' + mydat + tdC; 36 }else if(j === 0){ 37 source += '<div class="div-day">' + mydat + tdC; 38 }else if(j === 6){ 39 source += '<div class="div-day sat">' + mydat + tdC; 40 }else{ 41 source += td + mydat + tdC; 42 } 43 } 44} 45var weekTr; 46var tableSource = '<span class="flag"></span><table class="getid">' + '<tr><td colspan="7">' + myYear + '年' + (myMonth+1) + '月' + '</td></tr>' + source +'</table>'; 47 48 $calendar.append(tableSource); // 表の作成開始 49} 50for(var l=0; l<99; l++){ 51 setCalender(l); 52} 53 54}); 55 56// 空の要素削除 57$(function() { 58 $("div.div-day:empty").remove(); 59 $("div.sat-d:empty").remove(); 60 $("div.sun-d:empty").remove(); 61}); 62 63 //今日の日付データを変数hidukeに格納 64 var hiduke=new Date(); 65 var cale_date = document.getElementById('cale-date'); 66 67 68 //年・月・日・曜日を取得する 69 var year = hiduke.getFullYear(); 70 var month = hiduke.getMonth()-5; 71 var week = hiduke.getDay(); 72 var day = hiduke.getDate(); 73 74 75 $('#cale-date p').text(year + '年' + month + '月'); 76 77 78
lang
1 2 <div id="cale-date"> 3 <div id="calendar"> 4 <div class="div-day">31</div> 5 </div> 6 <script src="./js/jquery.inview.min.js"></script>
lang
1 2#calendar div{ 3 width: 14.28%; 4 height: 16vh; 5 border-top:1px solid #CCC; 6 /* border-left:1px solid #CCC; */ 7 border-right:1px solid #CCC; 8 float: left; 9 color: #7b7b7b; 10 font-size: 14px; 11 padding-top: 8px; 12} 13 14#cale-date p{ 15 position: fixed; 16 top: 18px; 17 left: 50%; 18 font-size: 20px; 19 color: #fff; 20 transform: translateX(-50%); 21 z-index: 9999; 22}
レイアウトが崩れていて申し訳ありません。
なんとかこの縦型カレンダーをスクロールしたら日付を計算して、その当月がきたら一ヶ月進む、前月に行ったら一ヶ月戻るというようなものが作りたいです。
#cale-dateここの日付の部分です。
ご助力いただけると幸いです。
どうかお願いいたします。
■カレンダーの仕様
・当月の6月前からカレンダーを生成(現在は2018年のはじめから生成)、2028年まで生成。
・月と月の間の日にちは開けず、詰めて縦に日にちを表示。
・下にスクロールして次の月を表示させて行く。
・ヘッダー部分に現在表示されている年月を表示させる。
・該当付きに1日がヘッダー部分に隣接したらヘッダー部分の日付が該当月の表示になる。該当月の1日がヘッダー部分から下に離れたら、前月の年月が表示される。
・ページを読み込んだら、現在の日付にリンクさせる
。
※コード参考元サイト:https://www.frontendmemo.xyz/entry/2017/02/04/044306
※目標アプリ:https://lifebear.com/
回答1件
あなたの回答
tips
プレビュー