カレンダーで縦の週を出す方法について

Question

現在、こちらサイトにて、カレンダーの作り方の勉強をしているのですが、分からない箇所があり、質問させて頂きました。
カレンダーの縦の週の数を計算するの項目ですが、下記のように説明がありました。

計算は先ほど出したカレンダーの最初の日と最後の日の差を取り7で割ることで高さを決めます。moment.jsのdiffメソッドを使って差の日数を出し、出した数字をMath.ceilで切り上げを行っています。これでカレンダーの高さを求めることができます。上の図の例であれば最初の日が12月30日、最後の日が2月2日でその差の日数を出して7で割ります。

mounted(){
  const startDate = this.getStartDate();
  const endDate = this.getEndDate();
  const weekNumber = Math.ceil(endDate.diff(startDate, "days") / 7);
  console.log(weekNumber) //5と表示される
} 

疑問点ですが、何故、最初の日と最後の日の差を「7で割る」のでしょうか。また、その値に対して切り上げの処理を行うのは何故なのでしょうか。
どなたか、ご助言頂けましたら幸いです。

Answer 1

これ限定条件だから正しい、のですかね……
6週分必要な場合があるけど考慮できているのかな？

・1日が土曜日である、30日ある月
・1日が金曜日か土曜日である、31日ある月
は、すべて収めるなら6週分の高さが要ります。

Comments

[luuguas]

2023年4月(1日が土曜日、30日が日曜日)の場合も正しく計算できています。
↓試しに作ってみたもの
https://codepen.io/luuguas/pen/zYLXddx

Answer 2

7で割る理由は、1週間が7日だからです。例えば21日間が何週間か考えると、21÷7はちょうど3なので、21日は3週間だとわかります。

次に、22日間が何週間か考えてみます。
22÷7=3.142… ということは、3週間+数日ということですから、22日間をカレンダーに表示するには、3週間分に加えて余分にもう1週間分表示する必要があります。

したがって、切り上げを行うことで、3週間より1日でも多ければ4週間分を表示する、という処理を行えます。

---

で、肝心の日数を求める処理ですが、これはサイトのコードが間違っていますね。正しくは、「終了日 - 開始日 + 1」です。(例: 2月2日から2月5日までの日数は 5-2+1=4日間)

さらに、このコードでは開始日が日曜日、終了日が土曜日になるように計算しているのですから、日数は正しく計算すると必ずN週間ちょうどになります。よって、7で割った後に切り上げ処理をする必要はありません。

(サイトのコードでは誤って日数を1日少なく計算していますが、切り上げ処理によって結果的に正しい週数を求めています。)

追記: 簡単な確認ページを作ってみました。良ければどうぞ。
https://codepen.io/luuguas/pen/zYLXddx

Comments

[ruuuu]

ご丁寧にご回答頂き、ありがとうございます。
返信が遅れてしまい、すみません。
>「終了日 - 開始日 + 1」です。(例: 2月2日から2月5日までの日数は 5-2+1=4日間)
こちらの仕組みがいまいち分からないのですが、何故 + 1する必要があるのでしょうか...?期間的には３日に思える為、１プラスする理由がわからないです。
> 簡単な確認ページを作ってみました。良ければどうぞ。
ありがとうございます。確認させて頂きます。

[luuguas]

コメントありがとうございます。
日数については、実際に数えてみればすぐに分かります。2日, 3日, 4日, 5日 なので、4日間ですね。

+1する理由について。
普通、「2日から5日までの期間」と言われたら、思い浮かべるのは「2日の始まり(0:00:00)から5日の終わり(23:59:59)まで」ですよね。
1[2 3 4 5 ]6 ...

これに対し、5 - 2 の引き算は、「2日の始まり(0:00:00)から5日の始まり(0:00:00)まで」を表しています。
1 [2 3 4 ]5 6 ...

２つを比べてみると、後者は「5日の始まり(0:00:00)から5日の終わり(23:59:59)まで」のちょうど1日分が足りません。したがって、+1することで正しい日数がわかるという訳です。

(または、5日の終わり(23:59:59) = 6日の始まり(0:00:00)と置き換えて、6 - 2 を計算する、と考えても良いと思います)

[ruuuu]

大変わかりやすくご説明頂きありがとうございます
日付の計算はいまいち分かっていなかったのですが、ご説明頂き理解できました。