Springとthymeleafを使ってHTML上にカレンダーを表示させたい

プログラミング未経験の初心者です。また、こちらのサイトでの質問が初めてなので至らぬ点ばかりかと思いますが、
どうかお知恵をお貸しいただければ幸いです。

前提・実現したいこと

該当のソースコード

java
1@Controller
2@RequestMapping(value = "topPage")
3public class TopPageController {
4
5	@Autowired
6	private ScheduleService scheduleService;
7
8	@Autowired
9	private User user;
10
11	@RequestMapping(value = "getPage", method = RequestMethod.GET)
12	public String getPage(LoginForm form, Model model) {
13
14		Calendar rightNow = Calendar.getInstance();
15		int day = rightNow.get(Calendar.DATE);
16		int year = rightNow.get(Calendar.YEAR);
17		int month = rightNow.get(Calendar.MONTH);
18
19　　　　　　　　　/* 今月のはじまり */
20		rightNow.set(year, month, 1);
21		int startWeek = rightNow.get(Calendar.DAY_OF_WEEK);
22
23　　　　　　　　　/* 先月分の日数 */
24		rightNow.set(year, month, 0);
25		int beforeMonthlastDay = rightNow.get(Calendar.DATE);
26
27		/* 今月分の日数 */
28		rightNow.set(year, month + 1, 0);
29		int thisMonthlastDay = rightNow.get(Calendar.DATE);
30
31		int[] calendarDay = new int[42];		/* 最大で7日×6週 */
32		int count = 0;
33
34		for (int i = startWeek - 2; i >= 0; i--) {
35			calendarDay[count++] = beforeMonthlastDay - i;
36		}
37
38		for (int i = 1; i <= thisMonthlastDay; i++) {
39			calendarDay[count++] = i;
40		}
41
42		int nextMonthDay = 1;
43		while (count % 7 != 0) {
44			calendarDay[count++] = nextMonthDay++;
45		}
46
47		int weekCount = count / 7;
48
49		for (int i = 0; i < weekCount; i++) {
50			for (int j = i * 7; j < i * 7 + 7; j++) {
51				if (calendarDay[j] < 10) {
52					System.out.print(" " + calendarDay[j] + " ");
53				} else {
54					System.out.print(calendarDay[j] + " ");
55
56				}
57			}
58			System.out.println();
59		}
60
61		
62		return "mypage";
63	}

HTML
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<meta http-equiv="Content-Style-Type" content="text/css" />
7<meta http-equiv="Content-Script-Type" content="text/javascript" />
8<meta http-equiv="Pragma" content="no-cache" />
9<meta http-equiv="Cache-Control" content="no-cache" />
10<meta http-equiv="Expires" content="0" />
11
12<meta http-equiv="imagetoolbar" content="no" />
13<title>スケジュール管理</title>
14
15</head>
16
17<body>
18	<h3>スケジュール管理</h3>
19<table>
20			<tr>
21				<td class="week">日</td>
22				<td class="week">月</td>
23				<td class="week">火</td>
24				<td class="week">水</td>
25				<td class="week">木</td>
26				<td class="week">金</td>
27				<td class="week">土</td>
28			</tr>
29！この部分にカレンダーを表示させたいです。！
30</table>
31</body>
32</html>

calendarDayに格納した値を、thymeleafのth:each処理で出すことができればと思うのですが、配列に格納している値を横に7、縦に6表示させる方法が調べてもなかなか思い当りません…。なにかアドバイスやご指示などいただけますと幸いです。

yukihisa

2018/07/26 01:03

昨日同じ質問をしていませんか？ https://teratail.com/questions/137787 まずはModelからきちんとデータを取得してHTMLに表示できるようにしてみましょう。

sibawajt

2018/07/26 01:11

すみません、諸事情でアカウントを作り直してしまいました。model.addAttribute("calendarDay", calendarDay)で送るのは安直すぎでしょうか…。こちらの方法ですと格納したデータは取得して遅れるのですが、縦並び1行の状態で出力されてしまいました。

退会済みユーザー

2018/07/26 01:24

アカウントの作り直しの必要性はないです。

yukihisa

2018/07/26 01:24

できれば、その縦並びまでできるソースが欲しいです。そこからあと少し手を加えれば実現できますよ。回答にModel側のヒントを書いておきますね。

sibawajt

2018/07/26 01:27

yukihisa様　ありがとうございます！いただいたヒントを参考にやってみます！

行動規範の内容に同意します

回答2件

ベストアンサー

カレンダーを作りたいのなら、カレンダーの形通りにModelに格納させてあげる必要があります。

   int[] calendarDay = new int[42];        /* 最大で7日×6週 */

ここまでできているようなので、
weekクラス(mon,tue,...,sunで一週間のデータを格納する)を作って

   List<week> calendarDay = new List<week>;        /* 一週間分データのリスト */

として一週間ごとにリストに格納していけばうまくいくと思いますよ。

追記

もう少し詳しく。
クラス

Java
1public class week {
2
3  private String[] weekday = new String[6];
4
5  public String getWeekday(int index) {
6    return getWeekday[index];
7  }
8
9  public void setWeekday(int index, String weekday) {
10    this.weekday[index]  = weekday;
11  }
12}
13

ソース

Java
1        /* 今月のはじまり(曜日) */
2        rightNow.set(year, month, 1);
3        int startWeek = rightNow.get(Calendar.DAY_OF_WEEK);
4        /* 今月末日 */
5        rightNow.set(year, month + 1, 0);
6        int thisMonthlastDay = rightNow.get(Calendar.DATE);
7        int lastWeek = rightNow.get(Calendar.DAY_OF_WEEK);
8
9        /* 先月末日 */
10        rightNow.set(year, month, 0);
11        int beforeMonthlastDay = rightNow.get(Calendar.DATE);
12
13        List<week> calendarDay = new List<week>();   /* 一週間分データのリスト */
14        int count = 0;
15
16        week week = new week();
17        String strWeekday = new String();
18        // 日曜日始まりでなければ前月の日付を格納する。
19        if (startWeek != 1) {
20            for (int i = startWeek - 2; i >= 0; i--) {
21                strWeekday = String.valueOf(beforeMonthlastDay - i); + " "
22                week.setWeekday(count, strWeekday)
23                count++;
24            }
25        }
26
27        // 当月分の日付を格納する。
28        for (int i = 1; i <= thisMonthlastDay; i++) {
29            if (calendarDay[j] < 10) {
30                strWeekday = " " + String.valueOf(beforeMonthlastDay - i); + " "
31            } else {
32                strWeekday = String.valueOf(beforeMonthlastDay - i); + " "
33            }
34            week.setWeekday(count, strWeekday)
35        if (count == 6) {
36                calendarDay.add(week);
37                count = 0;
38            } else {
39                count++;
40            }
41        }
42
43        // 翌月分の日付を格納する。
44        if (lastWeek != 7) {
45        for (int i = lastWeek; i < 7; i++) {
46                strWeekday = " " + String.valueOf(beforeMonthlastDay - i); + " "
47                week.setWeekday(count, strWeekday)
48            count++;
49        }
50
51        }
52
53        calendarDay.add(week);
54        model.addAttribute("calendarDay", calendarDay);
55
56

これでmodelに格納できると思います。

投稿2018/07/26 01:25

編集2018/07/26 05:24

yukihisa

総合スコア672

退会済みユーザー

2018/07/26 03:21

thymeleaf のかきかたがわからないんでは

yukihisa

2018/07/26 03:51

>asahina1979 様僕もそう思います。ただ、プログラミング未経験の初心者ということで、今のままの配列で渡してthymeleaf側で整形するのはもっと慣れてからじゃないと理解しづらく、受け渡すデータをどうするかについて考えることが先かな、と思いひとまずJava側の処理について助言しました。 th:eachでやるということはイメージできているようなので、その部分についてはまず自分でやってみてほしいと思った次第です。

sibawajt

2018/07/26 04:33

yukihisa様先ほどはヒントをいただきありがとうございました。恥ずかしながら、未だにリストへの格納が出来ていない状態にあります…。おそらく当方の理解が間違っているかと思いますので、ご確認いただくことは可能でしょうか…？ Weekクラス→月曜日～日曜日までの7日分を格納するためのクラス List<Week>→Weekクラスで格納した7日間1セットを6週間分格納する Weekクラスでsetterとgetterを作成し、Listで曜日と日付をセットし、modelに値を格納するこのような流れで処理を記述すればよいかと思っておりましたが、何か違うところがあればご指摘いただけますと幸いです。

yukihisa

2018/07/26 04:48

>sibarajt　様よく見たら日曜日始まりですね、すいません。。。 weekクラスに格納するので、 weekで日付を格納し、7日分溜まったらリストに追加する・・・を繰り返す形ですね。基本的には、 List<week>を作成する weekクラスを作成する日曜日始まりでない　⇒　前月末までをweekに格納する月末までweekに格納　⇒　7日分溜まる毎にリストに追加する月末が土曜日でない　⇒　翌月第一週の土曜日までweekに格納してリストに追加する完成したリストをmodelに格納するという流れかな、と思います。

sibawajt

2018/07/26 05:05

yukihisa様とんでもございません、お気になさらないでいただければと思います。また、詳しい処理の流れについてご教示いただきありがとうございます。非常に恐縮ではございますがもう一点ほどお尋ねしたいことがございます。最初に作成するList<Week>のことについてなのですが、こちらは先ほどご教示いただいたList<week> calendarDay = new List<week>;のソースコードを用いる形で作成すればよろしかったと思うのですが、そのままControllerに記述したところ「型 List<Week> のインスタンスを生成できません」といった旨のエラーが出てしまうため、こちらは元のものから記述を少し変える必要があるのでしょうか？重ね重ねで大変申し訳ございませんが、ご教示いただけますと幸いです。よろしくお願いいたします。

yukihisa

2018/07/26 05:31

「インスタンスを作成できません」のエラーは抽象クラスを生成しようとしたときに出るエラーです。 abstract が付いていませんか？

sibawajt

2018/07/26 05:55

ご返信ならびにご回答の追記ありがとうございました。abstractはつけていませんので何か別の理由があるみたいです…。上記に追記いただいたものと合わせて、自身でももう一度よく見直してみます。

退会済みユーザー

2018/07/26 06:41

※ interface は通常の方法では new できません。

行動規範の内容に同意します

ちょっとイメージだけ、動作確認なしなのでご自分で調整してください。

<tr th:each="i : ${#numbers.sequence(1, 6)}">
	<td th:each="j : ${#numbers.sequence(1, 7)}">*</td>
	<td th:remove="tag">*</td>
	<td th:remove="tag">*</td>
	<td th:remove="tag">*</td>
	<td th:remove="tag">*</td>
	<td th:remove="tag">*</td>
	<td th:remove="tag">*</td>
</tr>
<tr th:remove="tag">
	<td>*</td>
	<td>*</td>
	<td>*</td>
	<td>*</td>
	<td>*</td>
	<td>*</td>
	<td>*</td>
</tr>
:

投稿2018/07/26 03:32

編集2018/07/26 03:33

退会済みユーザー

総合スコア0