Javaとjspを使用してカレンダーを作成する

私の文章に続きます.

CalendarVO[][] contents_data_arr = new CalendarVO[32][4];
		if (contents_list.isEmpty() != true) {
			int j = 0;
			for (int i = 0; i < contents_list.size(); i++) {

				int date = Integer.parseInt(String.valueOf(contents_list.get(i).getCustom_date()).substring(
						String.valueOf(contents_list.get(i).getCustom_date()).length() - 2,
						String.valueOf(contents_list.get(i).getCustom_date()).length()));

				// 저장되어 있는 총 컨텐츠 갯수가 1개가 넘을 경우
				if (i > 0) {

					// i번째 컨텐츠 등록 날짜와 i-1번째 컨텐츠 등록 날짜를 비교
					int date_check = Integer.parseInt(String.valueOf(contents_list.get(i - 1).getCustom_date())
							.substring(String.valueOf(contents_list.get(i - 1).getCustom_date()).length() - 2,
									String.valueOf(contents_list.get(i - 1).getCustom_date()).length()));
					// i번째 컨텐츠 등록 날짜와 i-1번째 컨텐츠 등록 날짜가 같을 경우
					// 즉, 같은 날에 등록된 컨텐츠 갯수가 1개 이상일 경우
					if (date_check == date) {
						j = j + 1;
						contents_data_arr[date][j] = contents_list.get(i);
						// 같은 날에 등록된 컨텐츠 갯수가 1개일 경우
					} else {
						j = 0;
						contents_data_arr[date][j] = contents_list.get(i);
					}
					// // 저장되어 있는 총 컨텐츠 갯수가 1개일 경우
				} else {
					contents_data_arr[date][j] = contents_list.get(i);
				}
			}
		}

		// 실질적인 달력 데이터 리스트에 데이터 삽입 시작
		// 일단 시작 인덱스까지 아무것도 없는 데이터 삽입
		for (int i = 1; i < Integer.parseInt(String.valueOf(today_info.get("start"))); i++) {
			calendarData = new DateUtil(null, null, null, null, null);
			dateList.add(calendarData);
		}

		// 날짜 삽입
		for (int i = Integer.parseInt(String.valueOf(today_info.get("startDay"))); i <= Integer
				.parseInt(String.valueOf(today_info.get("endDay"))); i++) {
			CalendarVO[] contents_data_arr3 = new CalendarVO[4];
			contents_data_arr3 = contents_data_arr[i];

			// 특정 날짜가 오늘에 해당할 경우 value에 'today'라는 값을 넣어준다.
			if (i == Integer.parseInt(String.valueOf(today_info.get("today")))) {
				calendarData = new DateUtil(String.valueOf(dateData.getYear()), String.valueOf(dateData.getMonth()),
						String.valueOf(i), "today", contents_data_arr3);
			} else {
				calendarData = new DateUtil(String.valueOf(dateData.getYear()), String.valueOf(dateData.getMonth()),
						String.valueOf(i), "normal_date", contents_data_arr3);
			}
			dateList.add(calendarData);
		}

		// 달력 빈 곳 빈 데이터로 삽입
		int index = 7 - dateList.size() % 7;

		if (dateList.size() % 7 != 0) {

			for (int i = 0; i < index; i++) {
				calendarData = new DateUtil(null, null, null, null, null);
				dateList.add(calendarData);
			}
		}

適切に注釈を付けることは、それほど難しくないはずですが、[32][4]の2次元配列を生成する部分は驚くかもしれません.
実は何の意味もありません[32]は一ヶ月分の日(DATE)数を意味し、[4]は同じ日に登録できる最大のコンテンツ数です.(4でやっても意味ないし、コード原版の作者が最大登録数を4つ指定したので、私も修正していないだけです)
どうしてこんなことをするの?純粋にカレンダーを描く場合は、数日、曜日、TODAYなど様々な情報を含む純日付情報のカレンダー配列を輪の周りに作成します.また、後にコンテンツ情報を[32]長の固定配列に含めるのではなく、リストを用いたフロー長の配列に統合すると、大きなエラーが発生する.
日付に関係なく、配列の長さ、位置ともに1に相当し、これをカレンダー配列と組み合わせると、内容は1~4日以内に入らなければならない.
したがって、[32]に長さを固定し、1つのリングを回って日付(DATE)にコンテンツ情報を追加することができる.諸説あるので理解できるかどうかはわかりませんが….どうせそうだろう.
いずれにしても、上記の手順で毎日、日付情報と内容情報を含む並べ替えが完了します!
これをビュー(jsp)にこぼすだけで完成です.コード原版の著者はjspのコードを非常に親切に記述し,詳細な説明を省略し,コンテンツ情報出力の部分だけを言及した.

<div style="display: flex; justify-content: center;">
													<!-- 제일 처음 등록된 컨텐츠 하나만 보이도록 begin값과 end값 지정-->
    <c:forEach var="contents_list" items="${dateList.contents_data_arr}" varStatus="status" begin="0" end="0">
        <c:if test="${!empty contents_list.poster_path }">
            <a href="${pageContext.request.contextPath}/contents/detail.do?contents_type=${contents_list.contents_type }&contents_num=${contents_list.contents_num}">
                <div style="width: 100px; position: relative;">
                	<!-- 포스터가 출력되는 부분 -->
                    <img src="${contents_list.poster_path }" style="width: 100%; max-height: 140px;">
                </div>
            </a>
        </c:if>
    </c:forEach>
    <!-- + 아이콘을 만들기 위한 부분 -->
    			<!-- 등록되어 있는 컨텐츠가 2개 이상일 경우, 최초 한번만 + 아이콘이 생성될 수 있도록 begin값과 end값 지정 -->
    <c:forEach var="contents_list" items="${dateList.contents_data_arr}" varStatus="status" begin="1" end="1">
    <!-- 길이가 4로 고정되어있는 배열이기 때문에 등록되어 있는 컨텐츠가 없어도 반복문을 돌기 때문에 공란이 출력되지 않도록 컨텐츠가 있는 경우에만 보여지도록 조건 설정 -->
        <c:if test="${!empty contents_list.poster_path }">
        									<!-- 이미지 위에 +아이콘이 출력될 수 있도록 transform을 이용해 위치를 고정시켜준다 -->
            <div class="dropdown" data-hover="dropdown" style="position: absolute; transform: translate(125%, 370%);">
            	<!-- + 아이콘을 누르면 드롭다운 토글이 실행된다 -->
                <a class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false" style="border-radius: 100%; background: white; padding: 3px 8px; opacity: .7;">
                <span style="font-size: 14px; color: #74747b;">+</span></a>
        </c:if>
        <!-- + 아이콘 마우스 오버 및 클릭시 보여지게 되는 부분 -->
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <c:forEach var="contents_list" items="${dateList.contents_data_arr}" varStatus="status" begin="1" end="3">
                <c:if test="${!empty contents_list.poster_path }">
                    <li><a class="dropdown-item" href="${pageContext.request.contextPath}/contents/detail.do?contents_type=${contents_list.contents_type }&contents_num=${contents_list.contents_num}">
                            <div style="width: 100px; position: relative;">
                                <img src="${contents_list.poster_path }" style="width: 100%; max-height: 140px;">
                            </div>
                        </a></li>

                </c:if>
            </c:forEach>
    </c:forEach>
    </ul>
</div>

以上の過程でこつこつと完成する
適切にcssを修正し、hoverおよびclick効果を与えた
やはりフロントが一番難しい...休む.