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

Question

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

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

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

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

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

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

//カレンダー
var nowDate;
var year;
var month;
$(function(){
nowDate = new Date();
year = nowDate.getFullYear(); // 年
month = nowDate.getMonth() + 1; // 月
MakeCalendar();
});
function prev(){
if(month === 1){
month = 12;
year--;
}else{
month--;
}
MakeCalendar();
}
function next(){
if(month === 12){
month = 1;
year++;
}else{
month++;
}
MakeCalendar();
}
function MakeCalendar(){
$.ajax({
url: 'calendar.php?y='+year+'&m='+month,
dataType: 'json',
timeout: 10000,
success: function(json) {
var c = '<div class="cal"><div class="cal_header">';
if(nowDate.getFullYear() <= year && (nowDate.getMonth() + 1) < month ){
c += '<a href="" onClick="prev();return false;" class="cal_prev"></a>';
c += '<p>'+year+'年'+month+'月</p>';
}else{}
if(nowDate.getFullYear() >= year && (nowDate.getMonth() + 2) > month ){
c += '<p>'+year+'年'+month+'月</p>';
c += '<a href="" onClick="next();return false;" class="cal_next"></a>'
}else{}
c += '</div>';
c += '<div class="cal_body">';
c += '<table class="table_cal">';
c += '<thead><tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr></thead>';
jQuery.each(json, function(i, date) {
if(date.week === '0'){
c += '<tr>';
}else{}
if(date.holiday === true){
c += '<td class="closed">'+date.day+'</td>';
}else{
c += '<td>'+date.day+'</td>';
}
if(date.week === '6'){
c += '</tr>';
}else{}
});
c += '</tbody></table></div></div>';
$('#calendar').html(c);
},
error: function(xhr, textStatus, error) {
alert('ERR');
}
});
}

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

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

Answer 1

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

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

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

Comments

[退会済みユーザー]

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