0

現在、Springbootを使用してカレンダーのWEBアプリを作成しています。
MainController内で作成したカレンダーの要素をWeekClassに渡しており、model.addAttributeweek.getWeekdays()を使用して、Weekクラスから要素を全て受け取っている状態です。
ここからHTML側に要素を一つずつ表示したいのですが、以下画像の通り全ての要素が入った状態で表示されます。

画像の説明をここに入力

現状、いい方法が思い浮かばないため
お手数ですが、現在記載しているソースコード以外に方法がありましたら、ご教示いただけますと幸いです。

MainController

package com.example.demo.controller;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import com.example.demo.entity.Week;

@Controller
public class MainController {
    
    @GetMapping("/")
    public String index(Model model) {
        // カレンダーのインスタンス
        Calendar calendar = Calendar.getInstance();
        
        int year = calendar.get(Calendar.YEAR);
        int month = calendar.get(Calendar.MONTH);
        int day = calendar.get(Calendar.DATE);
        
        // 今月の始まり
        calendar.set(year, month, 1);
        int startWeek = calendar.get(Calendar.DAY_OF_WEEK);
        
        // 先月分の日数
        calendar.set(year, month, 0);
        int beforeMonthlastDay = calendar.get(Calendar.DATE);
        
        // 今月分の日数
        calendar.set(year, month + 1, 0);
        int thisMonthlastDay = calendar.get(Calendar.DATE);
        
        Week week = new Week();
        int[] calday = new int[42]; // 最大で7日6週
        List<Integer> weeklist = new ArrayList<>();
        int count = 0;
        
        // 先月分の日付を格納
        for(int i = startWeek -2; i >= 0; i--) {
            calday[count++] = beforeMonthlastDay -i;
        }
        
        // 今月分の日付を格納
        for(int i = 1; i <= thisMonthlastDay; i++) {
            calday[count++] = i;
        }
        
        // 翌月分の日付を格納
        int nextMonthDay = 1;
        while(count % 7 != 0) {
            calday[count++] = nextMonthDay++;
        }
        
        int weekCount = count / 7;
        
        for(int i = 0; i < weekCount; i++) {
            for(int j = i * 7; j < i * 7 + 7; j++) {
                
                if(calday[j] < 10) {
//                  System.out.println(calday[j]);
                }else {
//                  System.out.println(calday[j]);
                }
                weeklist.add(calday[j]);
                week.setWeekdays(weeklist);
            }
        }
        
        
        model.addAttribute("weekday", week.getWeekdays());
        System.out.println(week.getWeekdays());
        
        return "index";
    }

}

Week Class

package com.example.demo.entity;

import java.util.ArrayList;
import java.util.List;


public class Week {
    private List<Integer> weekdays = new ArrayList<>();

    public List<Integer> getWeekdays() {
        return weekdays;
    }

    public void setWeekdays(List<Integer> weekdays) {
        this.weekdays = weekdays;
    }
}

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>カレンダー</title>
</head>
<body>
<h1>カレンダー</h1>
<h3>2021年 8月</h3>
<table border="1" th:object="${weekday}">
<tr>
<td>日</td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
<td>土</td>
</tr>
<tr th:each = "i : ${#numbers.sequence(1,6)}">
<td th:each = "j : ${#numbers.sequence(1,7)}"><span th:text="${weekday}"></span></td>
</tr>
</table>
</body>
</html>

1 件の回答 1

0

質問文中のコードの意図を汲むと、例えばこういった実装になるかと思います。

@Controller
public class MainController {

    @GetMapping("/")
    public String index(final Model model) {
        // カレンダーのインスタンス
        final Calendar calendar = Calendar.getInstance();

        final int year = calendar.get(Calendar.YEAR);
        final int month = calendar.get(Calendar.MONTH);

        // 今月1日
        calendar.clear();
        calendar.set(year, month, 1);

        // 今月1日を含む週の始まり(日曜日) = カレンダーの初日
        final Calendar firstDayOfCalendar = (Calendar) calendar.clone();
        firstDayOfCalendar.add(Calendar.DATE, Calendar.SUNDAY - firstDayOfCalendar.get(Calendar.DAY_OF_WEEK));

        System.out.print("今月1日を含む週の始まり(日曜日) = カレンダーの初日: ");
        System.out.printf("%d %d %d\n", firstDayOfCalendar.get(Calendar.YEAR), firstDayOfCalendar.get(Calendar.MONTH),
            firstDayOfCalendar.get(Calendar.DAY_OF_MONTH));

        // 今月末日を含む週の終わり(土曜日) = カレンダーの末日
        final Calendar lastDayOfCalendar = (Calendar) calendar.clone();
        lastDayOfCalendar.add(Calendar.MONTH, 1);
        lastDayOfCalendar.add(Calendar.DAY_OF_MONTH, -1);
        lastDayOfCalendar.set(Calendar.DAY_OF_WEEK, Calendar.SATURDAY);

        System.out.print("今月末日を含む週の終わり(土曜日) = カレンダーの末日: ");
        System.out.printf("%d %d %d\n", lastDayOfCalendar.get(Calendar.YEAR), lastDayOfCalendar.get(Calendar.MONTH),
            lastDayOfCalendar.get(Calendar.DAY_OF_MONTH));

        final List<List<Integer>> weeklist = new ArrayList<>();
        final Calendar day = (Calendar) firstDayOfCalendar.clone();
        while (day.compareTo(lastDayOfCalendar) <= 0) {

            final List<Integer> weekDays = new ArrayList<>();
            for (int i = 0; i < 7; i++) {
                weekDays.add(day.get(Calendar.DAY_OF_MONTH));
                day.add(Calendar.DATE, 1);

            }
            weeklist.add(weekDays);
        }

        System.out.println("カレンダー: " + weeklist);

        final Week week = new Week();
        week.setWeekList(weeklist);

        model.addAttribute("week", week);
        return "index";
    }

}
public class Week {
    // 1週(7日間)を管理するListを、 1月分Listで保持
    private List<List<Integer>> weekList = new ArrayList<>();

    public List<List<Integer>> getWeekList() {
        return weekList;
    }

    public void setWeekList(final List<List<Integer>> weekList) {
        this.weekList = weekList;
    }
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>カレンダー</title>
  </head>
  <body>
    <h1>カレンダー</h1>
    <h3>2021年 8月</h3>
    <table border="1" th:object="${week}">
      <tr>
        <td>日</td>
        <td>月</td>
        <td>火</td>
        <td>水</td>
        <td>木</td>
        <td>金</td>
        <td>土</td>
      </tr>
      <tr th:each="weekDays : *{weekList}">
        <td th:each="day : ${weekDays}"><span th:text="${day}"></span></td>
      </tr>
    </table>
  </body>
</html>

(実装サンプル)

2
  • 承認後の質問となりますが、実装したカレンダーで、今日の日付に対して色やマーク等を付けて強調したいと考えております。 その際に、today = calendar.get(Calendar.DATE)を入れたいのですが、week内の要素と今日の日付かどうかを比較する認識でしょうか? お手数ですが、アドバイスいただけますと幸いです。
    – soso
    2021年8月26日 2:47
  • 正解は1つではないので、書かれている方法でも可能かと思います。また、日付の情報として、今日かどうかを持たせる方法も有るかと思います。ここに、その方式での実装をサンプルとして追記しました。(また、今回のような日付の操作には Calendar よりも LocalDate を使うほうがわかりやすいと思いますので、LocalDateを用いて示しています) 2021年8月27日 15:27

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。