実現したい事
PC版では良くみるカレンダーのように格子状にして、スマホでは以下の画像のような形にしたいと思っております。
画像のようにイベントも表示させたいです。
問題点
画像のようにスマホ版で曜日を横に置く方法が分からない点です。
試した事
(1)カレンダーをPC版とスマホ版の2種類のHTMLに分けて、スマホ版ではPC版のカレンダーを非表示にしています。
(2)とりあえず曜日を表示させましたが、画像のように一つの日付に一つの曜日を対応させる方法が分かりません。
PHP
1<?php 2require_once('data.php'); 3// タイムゾーンを設定 4date_default_timezone_set('Asia/Tokyo'); 5 6//次月のリンクが押された場合 7if(isset($_GET['ym'])){ 8 $ym = $_GET['ym']; 9}else{ 10 $ym = date('Y-m'); 11} 12 13//タイムスタンプを作成し、ありえない日付が出てエラーが表示されないよう、フォーマットをチェックする。 14$timestamp = strtotime($ym . '-01'); 15if($timestamp === false){ 16 $ym = date('Y-m'); 17 //今日が2021年2月1日なら、2021-2-01というタイムスタンプができる。 18 $timestamp = strtotime($ym . '-01'); 19} 20 21$today = date('Y-m-j'); 22//今日の日付フォーマット 23 24//カレンダーのタイトル 25$html_title = date('Y年m月', $timestamp); 26 27//前月・次月の年月を取得 28//mktime()を使用。(hour,minute,second,month,day,year) 29$prev = date('Y-m', mktime(0,0,0, date('m', $timestamp)-1, 1, date('Y', $timestamp))); 30$next = date('Y-m', mktime(0,0,0, date('m', $timestamp)+1, 1, date('Y', $timestamp))); 31 32//前月、次月を日本語にする。 33$prev_ja = date('Y年m月', mktime(0,0,0, date('m', $timestamp)-1, 1, date('Y', $timestamp))); 34$next_ja = date('Y年m月', mktime(0,0,0, date('m', $timestamp)+1, 1, date('Y', $timestamp))); 35 36//該当月の日数を取得 37$day_count = date('t', $timestamp); 38 39//dateの引数「w」を使用する事で、曜日番号が代入される。 40$youbi = date('w', mktime(0,0,0, date('m', $timestamp), 1, date('Y', $timestamp))); 41$weeks = []; 42$week = ''; 43$week .= str_repeat('<td></td>', $youbi); 44 45for($day = 1; $day <= $day_count; $day++, $youbi++){ 46 47 //2017-07-3 48 $date = $ym . '-' . $day; 49 50 //日本語の日付表示用 51 $week_ja_array = array('日','月','火','水','木','金','土'); 52 53 if($today == $date){ 54 //今日の日付の場合は、class="today"を付ける 55 $week .= '<td class="today">' . '<span class="date">' . $day . '</span>'; 56 }elseif($event_data_1_a['event_month'] == $ym && $day == $event_data_1_a['event_day']){ 57 //イベント情報が指定されている日 58 $week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_1_a . $event_contents_1_b . '</div>' . '</td>'; 59 }elseif($event_data_2['event_month'] == $ym && $day == $event_data_2['event_day']){ 60 $week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_2 . '</div>' . '</td>'; 61 }elseif($event_data_3['event_month'] == $ym && $day == $event_data_3['event_day']){ 62 $week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_3 . '</div>' . '</td>'; 63 }else{ 64 $week .= '<td> <span class="date">' . $day . '</span>'; 65 for($i=0;$i<7;$i++){ 66 if($i == 7){ 67 $i = 0; 68 } 69 $week_ja = $week_ja_array[$i]; 70 $week .= '<span>' . $week_ja . '</span>'; 71 } 72} 73 74 //週終わり、または、月終わりの場合(6は土曜日の曜日番号)。 75 if($youbi % 7 == 6 || $day == $day_count){ 76 if($day == $day_count){ 77 //月の最終日の場合、空セルを追加 78 $week .= str_repeat('<td></td>', 6 - ($youbi % 7)); 79 } 80 81 //week配列にtrと$weekを追加する 82 $weeks[] = '<tr>' . $week . '</tr>'; 83 84 //weekをリセット 85 $week = ''; 86 } 87} 88 89?> 90 91<!-----------中略 -----------------> 92 93<!--/.PC版のカレンダー --> 94<section class="calendar_wrapper"> 95 <div class="calendar_area pc_calendar_area"> 96 <p class="lead"><span>カレンダーの青くなっている日にイベントを開催しています。</span><span>カレンダーのリンクを押すと、予約フォームまで飛ぶ事ができます。</span></p> 97 <div class="top_date_block"> 98 <p class="prev_btn"><a class="mark" href="?ym=<?php echo $prev; ?>"><?php echo $prev_ja ?></a></p> 99 <p class="html_title"><?php echo $html_title ?></p> 100 <p class="next_btn"><a class="mark" href="?ym=<?php echo $next; ?>"><?php echo $next_ja ?></a></p> 101 </div><!--/.top_hd --> 102 <table class="table" id="page"> 103 <tr> 104 <th class="sunday">日</th> 105 <th>月</th> 106 <th>火</th> 107 <th>水</th> 108 <th>木</th> 109 <th>金</th> 110 <th class="saturday">土</th> 111 </tr> 112 <?php 113 foreach($weeks as $week){ 114 echo $week; 115 } 116 ?> 117 </table> 118 </div><!--/.calendar_area --> 119 120 <!--/.スマホ用のカレンダー --> 121 <div class="calendar_area sp_calendar_area"> 122 <p class="lead"><span>カレンダーの青くなっている日にイベントを開催しています。</span><span>カレンダーのリンクを押すと、予約フォームまで飛ぶ事ができます。</span></p> 123 <div class="top_date_block"> 124 <p class="prev_btn"><a class="mark" href="?ym=<?php echo $prev; ?>"><?php echo $prev_ja ?></a></p> 125 <p class="html_title"><?php echo $html_title ?></p> 126 <p class="next_btn"><a class="mark" href="?ym=<?php echo $next; ?>"><?php echo $next_ja ?></a></p> 127 </div><!--/.top_hd --> 128 <table class="table" id="page"> 129 <?php 130 foreach($weeks as $week){ 131 echo $week; 132 } 133 ?> 134 </table> 135 </div><!--/.calendar_area --> 136</section><!--/.calendar_wrapper --> 137
ご教示頂けますと大変助かります。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/21 14:06