質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Q&A

解決済

1回答

689閲覧

2022年1月 カレンダー表示の不具合

退会済みユーザー

退会済みユーザー

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

0グッド

0クリップ

投稿2021/12/01 03:57

編集2021/12/01 05:06

以下のようなカレンダーがあります。
ヘッダ部分に「年と月とクリックボタン」があり、
今月と来月が表示できます。

今月のヘッダ例「2021年11月▶」
来月のヘッダ例「◀2021年12月」

イメージ説明

来月(2022年1月)を表示しようと矢印をクリックしたところ、
以下のように、ヘッダ部分が表示されない不具合を見つけました。
イメージ説明

今までは、2021年だったせいか、
問題ありませんでした。

改善方法が分からなく、
どうずれば、年度をまたいでもヘッダ部分が表示できるのか、
アドバイス頂ければ幸いです。

よろしくお願い致します。

javascript

1//カレンダー 2var nowDate; 3var year; 4var month; 5$(function(){ 6nowDate = new Date(); 7year = nowDate.getFullYear(); // 年 8month = nowDate.getMonth() + 1; // 月 9MakeCalendar(); 10}); 11function prev(){ 12if(month === 1){ 13month = 12; 14year--; 15}else{ 16month--; 17} 18MakeCalendar(); 19} 20function next(){ 21if(month === 12){ 22month = 1; 23year++; 24}else{ 25month++; 26} 27MakeCalendar(); 28} 29function MakeCalendar(){ 30$.ajax({ 31url: 'calendar.php?y='+year+'&m='+month, 32dataType: 'json', 33timeout: 10000, 34success: function(json) { 35var c = '<div class="cal"><div class="cal_header">'; 36if(nowDate.getFullYear() <= year && (nowDate.getMonth() + 1) < month ){ 37c += '<a href="" onClick="prev();return false;" class="cal_prev"></a>'; 38c += '<p>'+year+'年'+month+'月</p>'; 39}else{} 40if(nowDate.getFullYear() >= year && (nowDate.getMonth() + 2) > month ){ 41c += '<p>'+year+'年'+month+'月</p>'; 42c += '<a href="" onClick="next();return false;" class="cal_next"></a>' 43}else{} 44c += '</div>'; 45c += '<div class="cal_body">'; 46c += '<table class="table_cal">'; 47c += '<thead><tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr></thead>'; 48jQuery.each(json, function(i, date) { 49if(date.week === '0'){ 50c += '<tr>'; 51}else{} 52if(date.holiday === true){ 53c += '<td class="closed">'+date.day+'</td>'; 54}else{ 55c += '<td>'+date.day+'</td>'; 56} 57if(date.week === '6'){ 58c += '</tr>'; 59}else{} 60}); 61c += '</tbody></table></div></div>'; 62$('#calendar').html(c); 63}, 64error: function(xhr, textStatus, error) { 65alert('ERR'); 66} 67}); 68}

以下の年を跨ぐことを考慮したコードを追加して解決できました。
ありがとうございました。

javascript

1if(nowDate.getFullYear() < year ){ 2c += '<a href="" onClick="prev();return false;" class="cal_prev"></a>'; 3c += '<p>'+year+'年'+month+'月</p>'; 4}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

PHP

1if(nowDate.getFullYear() <= year && (nowDate.getMonth() + 1) < month ){ 2c += '<a href="" onClick="prev();return false;" class="cal_prev"></a>'; 3c += '<p>'+year+'年'+month+'月</p>'; 4} 5if(nowDate.getFullYear() >= year && (nowDate.getMonth() + 2) > month ){ 6c += '<p>'+year+'年'+month+'月</p>'; 7c += '<a href="" onClick="next();return false;" class="cal_next"></a>' 8}

year と month が表示しようとしているカレンダーの年月ですが、12月の時点で考えると、
nowDate.getFullYear() = 2021,
nowDate.getMonth = 12
ですから、
2021 <= 2022 && (12+1) < 1
で前の表示は不成立。
2021 >= 2022 && (12+2) > 1
で後ろの表示も不成立

ですね。
年を跨ぐ場合を考慮していないからです。

投稿2021/12/01 04:09

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/12/01 04:59

教えて頂き、誠にありがとうございます。 おかげさまで理解できました。 これから実装してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問