カレンダーのレスポンシブ用の曜日を表示させたい

Question

実現したい事

PC版では良くみるカレンダーのように格子状にして、スマホでは以下の画像のような形にしたいと思っております。
画像のようにイベントも表示させたいです。

問題点

画像のようにスマホ版で曜日を横に置く方法が分からない点です。

試した事

（１）カレンダーをPC版とスマホ版の２種類のHTMLに分けて、スマホ版ではPC版のカレンダーを非表示にしています。
（２）とりあえず曜日を表示させましたが、画像のように一つの日付に一つの曜日を対応させる方法が分かりません。

<?php
require_once('data.php');
// タイムゾーンを設定
date_default_timezone_set('Asia/Tokyo');

//次月のリンクが押された場合
if(isset($_GET['ym'])){
	$ym = $_GET['ym'];
}else{
	$ym = date('Y-m');
}

//タイムスタンプを作成し、ありえない日付が出てエラーが表示されないよう、フォーマットをチェックする。
$timestamp = strtotime($ym . '-01');
if($timestamp === false){
	$ym = date('Y-m');
	//今日が2021年2月1日なら、2021-2-01というタイムスタンプができる。
	$timestamp = strtotime($ym . '-01');
}

$today = date('Y-m-j');
//今日の日付フォーマット

//カレンダーのタイトル
$html_title = date('Y年m月', $timestamp);

//前月・次月の年月を取得
//mktime()を使用。(hour,minute,second,month,day,year)
$prev = date('Y-m', mktime(0,0,0, date('m', $timestamp)-1, 1, date('Y', $timestamp)));
$next = date('Y-m', mktime(0,0,0, date('m', $timestamp)+1, 1, date('Y', $timestamp)));

//前月、次月を日本語にする。
$prev_ja = date('Y年m月', mktime(0,0,0, date('m', $timestamp)-1, 1, date('Y', $timestamp)));
$next_ja = date('Y年m月', mktime(0,0,0, date('m', $timestamp)+1, 1, date('Y', $timestamp)));

//該当月の日数を取得
$day_count = date('t', $timestamp);

//dateの引数「w」を使用する事で、曜日番号が代入される。
$youbi = date('w', mktime(0,0,0, date('m', $timestamp), 1, date('Y', $timestamp)));
$weeks = [];
$week = '';
$week .= str_repeat('<td></td>', $youbi);

for($day = 1; $day <= $day_count; $day++, $youbi++){

	//2017-07-3
	$date = $ym . '-' . $day;

	//日本語の日付表示用
	$week_ja_array = array('日','月','火','水','木','金','土');

	if($today == $date){
		//今日の日付の場合は、class="today"を付ける
		$week .= '<td class="today">' . '<span class="date">' . $day . '</span>';
	}elseif($event_data_1_a['event_month'] == $ym && $day == $event_data_1_a['event_day']){
		//イベント情報が指定されている日
		$week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_1_a . $event_contents_1_b . '</div>' . '</td>';
	}elseif($event_data_2['event_month'] == $ym && $day == $event_data_2['event_day']){
			$week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_2 . '</div>' . '</td>';
	}elseif($event_data_3['event_month'] == $ym && $day == $event_data_3['event_day']){
				$week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_3 . '</div>' . '</td>';
	}else{
		$week .= '<td> <span class="date">' . $day . '</span>';
		for($i=0;$i<7;$i++){
			if($i == 7){
				$i = 0;
			}
			$week_ja = $week_ja_array[$i];
			$week .= '<span>' . $week_ja . '</span>';
		}
}

	//週終わり、または、月終わりの場合（6は土曜日の曜日番号）。
	if($youbi % 7 == 6 || $day == $day_count){
		if($day == $day_count){
			//月の最終日の場合、空セルを追加
			$week .= str_repeat('<td></td>', 6 - ($youbi % 7));
		}

		//week配列にtrと$weekを追加する
		$weeks[] = '<tr>' . $week . '</tr>';

		//weekをリセット
		$week = '';
	}
}

?>

<!-----------中略 ----------------->

<!--/.PC版のカレンダー -->
<section class="calendar_wrapper">
    <div class="calendar_area pc_calendar_area">
        <p class="lead"><span>カレンダーの青くなっている日にイベントを開催しています。</span><span>カレンダーのリンクを押すと、予約フォームまで飛ぶ事ができます。</span></p>
        <div class="top_date_block">
            <p class="prev_btn"><a class="mark" href="?ym=<?php echo $prev; ?>"><?php echo $prev_ja ?></a></p>
            <p class="html_title"><?php echo $html_title ?></p>
            <p class="next_btn"><a class="mark" href="?ym=<?php echo $next; ?>"><?php echo $next_ja ?></a></p>
        </div><!--/.top_hd -->
         <table class="table" id="page">
             <tr>
                 <th class="sunday">日</th>
                 <th>月</th>
                 <th>火</th>
                 <th>水</th>
                 <th>木</th>
                 <th>金</th>
                 <th class="saturday">土</th>
             </tr>
                         <?php
                         foreach($weeks as $week){
                             echo $week;
                         }
                         ?>
         </table>
    </div><!--/.calendar_area -->

		<!--/.スマホ用のカレンダー -->
		<div class="calendar_area sp_calendar_area">
				<p class="lead"><span>カレンダーの青くなっている日にイベントを開催しています。</span><span>カレンダーのリンクを押すと、予約フォームまで飛ぶ事ができます。</span></p>
				<div class="top_date_block">
						<p class="prev_btn"><a class="mark" href="?ym=<?php echo $prev; ?>"><?php echo $prev_ja ?></a></p>
						<p class="html_title"><?php echo $html_title ?></p>
						<p class="next_btn"><a class="mark" href="?ym=<?php echo $next; ?>"><?php echo $next_ja ?></a></p>
				</div><!--/.top_hd -->
				 <table class="table" id="page">
												 <?php
												 foreach($weeks as $week){
														 echo $week;
												 }
												 ?>
				 </table>
		</div><!--/.calendar_area -->
</section><!--/.calendar_wrapper -->

ご教示頂けますと大変助かります。
よろしくお願いします。

Answer 1

珍回答　スマホ版のカレンダーは<li></li>形式にして曜日も一緒に出してしまえば良いのでは？

table系タグを使わずにul&liで出力すれば上から順番に並びますよ？
HTMLも分けて書いてるみたいですし、phpの出力も分けてしまえば難しく考える必要が無くなるかと。

以下蛇足です。

レスポンシブであれば下記のようにCSSで無理矢理たてにすることはできますが、
曜日要素をJSでDOM操作して整える必要が出てきます。

CSSのnth-childを使って::beforeで日付の左につける方法もありますね。
trの中のtdは7個ずつなので比較的簡単かもです。

tr {
    display: flex;
    flex-flow: column;
}

これを記述するとPC用のカレンダーが不格好な縦になります。

td {
    width: 100%;
}

tdの幅を100％に設定すると良い感じになるかもしれません。

Comments

[nanapon]

ご回答ありがとうございます。
途中までやってみましたが、nth-childにbeforeを付ける方法で実現できそうです！
大変助かりました！