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

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

ただいまの
回答率

90.32%

  • Java

    14437questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • HTML

    9594questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Spring

    737questions

    Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

  • Spring Boot

    575questions

    Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

  • Thymeleaf

    170questions

    Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 730

sibawajt

score 1

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

 前提・実現したいこと

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

 該当のソースコード

@Controller
@RequestMapping(value = "topPage")
public class TopPageController {

    @Autowired
    private ScheduleService scheduleService;

    @Autowired
    private User user;

    @RequestMapping(value = "getPage", method = RequestMethod.GET)
    public String getPage(LoginForm form, Model model) {

        Calendar rightNow = Calendar.getInstance();
        int day = rightNow.get(Calendar.DATE);
        int year = rightNow.get(Calendar.YEAR);
        int month = rightNow.get(Calendar.MONTH);

         /* 今月のはじまり */
        rightNow.set(year, month, 1);
        int startWeek = rightNow.get(Calendar.DAY_OF_WEEK);

         /* 先月分の日数 */
        rightNow.set(year, month, 0);
        int beforeMonthlastDay = rightNow.get(Calendar.DATE);

        /* 今月分の日数 */
        rightNow.set(year, month + 1, 0);
        int thisMonthlastDay = rightNow.get(Calendar.DATE);

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

        for (int i = startWeek - 2; i >= 0; i--) {
            calendarDay[count++] = beforeMonthlastDay - i;
        }

        for (int i = 1; i <= thisMonthlastDay; i++) {
            calendarDay[count++] = i;
        }

        int nextMonthDay = 1;
        while (count % 7 != 0) {
            calendarDay[count++] = nextMonthDay++;
        }

        int weekCount = count / 7;

        for (int i = 0; i < weekCount; i++) {
            for (int j = i * 7; j < i * 7 + 7; j++) {
                if (calendarDay[j] < 10) {
                    System.out.print(" " + calendarDay[j] + " ");
                } else {
                    System.out.print(calendarDay[j] + " ");

                }
            }
            System.out.println();
        }


        return "mypage";
    }
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<meta http-equiv="imagetoolbar" content="no" />
<title>スケジュール管理</title>

</head>

<body>
    <h3>スケジュール管理</h3>
<table>
            <tr>
                <td class="week"></td>
                <td class="week"></td>
                <td class="week"></td>
                <td class="week"></td>
                <td class="week"></td>
                <td class="week"></td>
                <td class="week"></td>
            </tr>
!この部分にカレンダーを表示させたいです。!
</table>
</body>
</html>

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2018/07/26 10:24

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

    キャンセル

  • yukihisa

    2018/07/26 10:24

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

    キャンセル

  • sibawajt

    2018/07/26 10:27

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

    キャンセル

回答 2

checkベストアンサー

+2

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

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

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

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

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

 追記

もう少し詳しく。
クラス

public class week {

  private String[] weekday = new String[6];

  public String getWeekday(int index) {
    return getWeekday[index];
  }

  public void setWeekday(int index, String weekday) {
    this.weekday[index]  = weekday;
  }
}


ソース

        /* 今月のはじまり(曜日) */
        rightNow.set(year, month, 1);
        int startWeek = rightNow.get(Calendar.DAY_OF_WEEK);
        /* 今月末日 */
        rightNow.set(year, month + 1, 0);
        int thisMonthlastDay = rightNow.get(Calendar.DATE);
        int lastWeek = rightNow.get(Calendar.DAY_OF_WEEK);

        /* 先月末日 */
        rightNow.set(year, month, 0);
        int beforeMonthlastDay = rightNow.get(Calendar.DATE);

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

        week week = new week();
        String strWeekday = new String();
        // 日曜日始まりでなければ前月の日付を格納する。
        if (startWeek != 1) {
            for (int i = startWeek - 2; i >= 0; i--) {
                strWeekday = String.valueOf(beforeMonthlastDay - i); + " "
                week.setWeekday(count, strWeekday)
                count++;
            }
        }

        // 当月分の日付を格納する。
        for (int i = 1; i <= thisMonthlastDay; i++) {
            if (calendarDay[j] < 10) {
                strWeekday = " " + String.valueOf(beforeMonthlastDay - i); + " "
            } else {
                strWeekday = String.valueOf(beforeMonthlastDay - i); + " "
            }
            week.setWeekday(count, strWeekday)
        if (count == 6) {
                calendarDay.add(week);
                count = 0;
            } else {
                count++;
            }
        }

        // 翌月分の日付を格納する。
        if (lastWeek != 7) {
        for (int i = lastWeek; i < 7; i++) {
                strWeekday = " " + String.valueOf(beforeMonthlastDay - i); + " "
                week.setWeekday(count, strWeekday)
            count++;
        }

        }

        calendarDay.add(week);
        model.addAttribute("calendarDay", calendarDay);

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/26 12:21

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

    キャンセル

  • 2018/07/26 12:51

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

    キャンセル

  • 2018/07/26 13:33

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

    キャンセル

  • 2018/07/26 13:48

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

    キャンセル

  • 2018/07/26 14:05

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

    キャンセル

  • 2018/07/26 14:31

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

    キャンセル

  • 2018/07/26 14:55

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

    キャンセル

  • 2018/07/26 15:41

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

    キャンセル

0

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

<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 12:38 編集

    [i * 7 + j] or [i][j]

    キャンセル

  • 2018/07/26 13:40

    asahina1979様
    ご回答ありがとうございます。まだHTMLの処理までたどり着けていないのですが、カレンダーを表示させるためのイメージが、こちらを拝見してつきやすくなりました。本当にありがとうございます。

    キャンセル

同じタグがついた質問を見る

  • Java

    14437questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • HTML

    9594questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Spring

    737questions

    Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

  • Spring Boot

    575questions

    Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

  • Thymeleaf

    170questions

    Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。