Vue.js HTML カレンダー表示のコーディング

Question

PHP7.4 / HTML5

以下サイトのような、日付とイベントの縦並びカレンダーを作成したいです。
参考

ただ、参考サイトが週の配列を生成していますが、
1か月分のリストの中に日付ごとのデータのみを格納して同じことを再現したいです。

そこで下のように書きましたが、trタグの中に7日分tdタグを作る、ということができません。
(templateタグに入れた、v-if="new Date(key).getDay() === 0 →週の始めであればtrタグを付ける
===6であれば、週の終わりなのでtrタグを閉じる想定で書きました。)

上記のような書き方をする方法が分からず、方法ありましたらご教示お願いいたします。
週の配列を用意したくない理由は、カレンダーに作るイベントが週をまたぐ場合があるからです。
（1週から2週目まで旅行、など）

<table class="calendar">
    <tbody v-for="(event, key) in event_list">
        <template v-if="new Date(key).getDay() === 0">
            <tr>
        </template>
        <td class="">
            <p>%key%</p>
            <ul class="">
                <li>
                    <p>%event.name%</p>
                </li>
            </ul>
        </td>
        <template v-if="new Date(key).getDay() === 6">
            </tr>
        </template>
    </tbody>
</table>

Comments

[m.ts10806]

Vue.js
のタグは必要に思います

[seastar]

無知で大変申し訳ありません。Vue.jsのタグはテンプレート公文に出てくるtemplateタグと認識していますが、違いますか？
自分で作成し、質問文に書いたtemplateを自作のタグに置き換えるということでしょうか？

[m.ts10806]

いえコードではなく質問タグのことです。

Answer 1

Vueの場合（Reactでもそうですが）、普通はコンポーネント化して作る方が無難です。この場合だとこんな感じに組み立てていきます。繰り返しはv-forで対処します。

省略している部分にカレンダーを呼び出すための数値を制御します。そこまで難しくないので、割愛します。

親コンポーネント　v-forで週数（4～5）繰り返す

<template>
	<table>
		<thead>
			<tr>
				<th>Sun</th>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thi</th>
				<th>Fri</th>
				<th>Sat</th>
			</tr>
		</thead>
		<tbody>
			<CalTr v-for="(week,i) in weeks"
				:week = "week"
			></CalTr>
		</tbody>
	</table>
</template>
<script>
import CalTr from './CalTr.vue'
export default{
	name: 'Calender',
	components:{
		CalTr,
	},
	data(){
		return{
			weeks: [],
		}
	},
/*以下略*/

子コンポーネント(CalTr.vue) v-forで7回（日数）繰り返す

<template>
	<tr>
		<CalTd v-for="day in week"
			:day="day"
		></CalTd>
	</tr>
</template>
<script>
import CalTd from './CalTd.vue' 
export default{
	name: 'CalTr',
	components:{
		CalTd,
	},
	props:[
		"week",
	],
}
</script>

孫コンポーネント(CalTd.vue)　

<template>
	<td>{{ day }}</td>
</template>
<script>
export default{
	name: 'CalTd',
	props:[
		"day",
	]
}
</script>