- ベストアンサー
javaScriptでカレンダーを作成したい
- カレンダーをjavaScriptで作成しております。tableをflexして２段のカレンダーです。
- 次へや前へのボタンを押すと前のが削除されず下へ増えていってしまいます。矢印を２回押したら次の次の月を表示したいのができません。
- Java Scriptのコードを使用してカレンダーを作成しています。毎月の日付と曜日を表示し、特定の日にトピックスを表示する機能もあります。
- urasimataro055
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <h1 id="header">Test</h1> <table border="1"> <thead><tr><th>日<th>曜日<th>コメント <tbody id="calendarLeft" > </table> <table border="1"> <thead><tr><th>日<th>曜日<th>コメント <tbody id="calendarRight"> </table> <button onclick="prev()">Prev</button> <button onclick="next()">Next</button> <script> const weekjp = [..."日月火水木金土"]; const ary2tbody=(a,b=document.createElement('tbody'))=>a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b); const getYMD = D=>['FullYear','Month','Date','Day'].map(f=>D['get'+f]()); const addDate = (D,a=0)=>(D.setDate(D.getDate()+a),D); const addMonth = (D,a=0)=>(D.setMonth(D.getMonth()+a),D); const lastDate = (D,[y,m]=getYMD(D))=>new Date(y,m+1,0); const beginDate = (D,[y,m]=getYMD(D))=>new Date(y,m,1); function showProcess (date = new Date) { let current = beginDate (date), last = lastDate (date), [, month] = getYMD (date), ary = [ ]; do { let [,,d,w] = getYMD (current), [,c] = topicsData.find (([a, b])=> d == a) || ['','']; ary.push ([d, weekjp[w], c]); } while (addDate(current, 1) <= last) header.replaceChildren (month+1, "月"); calendarLeft.replaceChildren (); calendarRight.replaceChildren (); ary2tbody (ary.splice (0,15), calendarLeft); ary2tbody (ary, calendarRight); } //_________________ let topicsData = [ [1, "1日です"], [4, "4日です"], [9, "9日です"], [15, "15日です"], [27, "27日です"] ]; let curDate = new Date; showProcess (curDate); function prev () { showProcess(addMonth (curDate, -1)); } function next() { showProcess(addMonth (curDate, 1)); } </script>
その他の回答 (1)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
ざっとみただけですが、 >下へ増えていってしまいます。 https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild ソース内に一度もノードを削除する命令がないのですが。 原因はそこかと。 最初に可能な限りの、最大ノードを定義して中を書き換えるか？ または、ノードはその都度全消去させ、必要な数分、 その都度追加するか？←今やってるのはこっちではないかと思います。 なので、そこだけ直せば一応は治ると思いますが。 「消す」関係で一瞬レイアウトが崩れる可能性はあります。 裏で、全ノードを作り切ってから、根元で消す＆接続で 多少改善できるかと思います。
お礼
回答ありがとうございます！
お礼
回答いただきありがとうございます！ 無事解決できました！