前提・実現したいこと
ドットインストールの「PHPのDateTimeクラスでカレンダーを作ろう」で作ったカレンダーを、
ページ遷移しないで月の切り替えをできるようにしたいです。
発生している問題
Ajax で現在表示されている年月をHTML要素として渡し、<table> タグを書き換えようと思っているのですが、うまくいきません。
PHP にパラメータが渡っていないようで、例外処理である今月のデータが返ってきます。
該当のソースコード
jQuery
1 2$(function() { 3 4 $('#today').click(function () { 5 $.post('change_month.php', { 6 now: $('#now').html(), 7 // jsday: '' 8 }, function (data) { 9 $('#table').html('<table><thead><tr><th><p id="prev">«</p></th><th colspan="5">' + data.yM + '</th><th><p id="next">»</p></th></tr></thead><tbody><tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>' + data.shoW + '</tbody><tfoot><tr><th colspan="7"><p id="today">Today</p></th></tr></tfoot></table>'); 10 }); 11 }); 12 13 $('#prev').click(function () { 14 $.get('change_month.php', { 15 now: $('#now').html(), 16 jsday: '-1 month' 17 }, function (data) { 18 $('#table').html('<table><thead><tr><th><p id="prev">«</p></th><th colspan="5">' + data.yM + '</th><th><p id="next">»</p></th></tr></thead><tbody><tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>' + data.shoW + '</tbody><tfoot><tr><th colspan="7"><p id="today">Today</p></th></tr></tfoot></table>'); 19 }); 20 }); 21 22 $('#next').click(function () { 23 $.get('change_month.php', { 24 now: $('#now').html(), 25 jsday: '+1 month' 26 }, function (data) { 27 $('#table').html('<table><thead><tr><th><p id="prev">«</p></th><th colspan="5">' + data.yM + '</th><th><p id="next">»</p></th></tr></thead><tbody><tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>' + data.shoW + '</tbody><tfoot><tr><th colspan="7"><p id="today">Today</p></th></tr></tfoot></table>'); 28 }); 29 }); 30 31}); 32 33
PHP
1<?php 2 3class Calender 4{ 5 public $yearMonth; 6 public $_thisMonth; 7 8 function __construct() 9 { 10 try { 11 if (!isset($_POST['now']) || !isset($_POST['jsday'])) { 12 throw new Exception(); 13 } 14 $this->_thisMonth = new DateTime($_POST['now'] . $_POST['jsday']); 15 } catch (Exception $e) { 16 $this->_thisMonth = new DateTime('first day of this month'); 17 } 18 $this->yearMonth = $this->_thisMonth->format('F Y'); 19 } 20 21 public function show() 22 { 23 $tail = $this->_getTail(); 24 $body = $this->_getBody(); 25 $head = $this->_getHead(); 26 $html = '<tr>' . $tail . $body . $head . '</tr>'; 27 return $html; 28 } 29 30 // 先月 31 private function _getTail() 32 { 33 $tail = ''; 34 $lastDayOfPrevMonth = new DateTime('last day of' . $this->yearMonth . '-1 month'); 35 while ($lastDayOfPrevMonth->format('w') < 6) { 36 $tail = sprintf('<td class="gray">%d</td>' ,$lastDayOfPrevMonth->format('d')) . $tail; 37 $lastDayOfPrevMonth->sub(new DateInterval('P1D')); 38 } 39 return $tail; 40 } 41 // 今月 42 private function _getBody() 43 { 44 $body = ''; 45 // DatePeriod() 特定の期間の日付オブジェクトを作るクラス 46 $period = new DatePeriod( 47 new DateTime('first day of' . $this->yearMonth), // 最初の日 48 new DateInterval('P1D'), // 間隔 49 new DateTime('first day of' . $this->yearMonth . '+1 month') // 期間の終わり 50 ); 51 $today = new DateTime('Today'); 52 // 行替えの処理 53 foreach ($period as $day) { 54 if ($day->format('w') === '0') { 55 $body .= '</tr><tr>'; 56 } 57 $todayClass = ($day->format('Y-m-d') === $today->format('Y-m-d')) ? 'today' : ''; 58 $body .= sprintf('<td class="youbi_%d %s">%d</td>', $day->format('w'), $todayClass, $day->format('d')); 59 } 60 return $body; 61 } 62 // 翌月 63 private function _getHead() 64 { 65 $head = ''; 66 $firstDayOfNextMonth = new DateTime('first day of' . $this->yearMonth . '+1 month'); 67 68 while ($firstDayOfNextMonth->format('w') > 0) { 69 $head .= sprintf('<td class="gray">%d</td>' ,$firstDayOfNextMonth->format('d')); 70 $firstDayOfNextMonth->add(new DateInterval('P1D')); 71 } 72 return $head; 73 } 74} 75 76function h($s) { 77 return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); 78} 79 80$cal = new Calender(); 81 82$table = array( 83 "yM" => h($cal->yearMonth), 84 "shoW" => $cal->show(), 85 ); 86 87header('Content-Type: application/json; charset=utf-8'); 88echo json_encode($table); 89
試したこと
$_POST['now'] $_POST['jsday'] を一度別の変数名を付けて DateTime() に入れてみたりしたのですが、変数名をつけた行でエラーが出てしまいました。
補足情報
ドットインストール「PHPのDateTimeクラスでカレンダーを作ろう」
リンク内容
index.php はこのように変更しました。
PHP
1<?php 2 3require 'Calender.php'; 4 5function h($s) { 6 return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); 7} 8 9$cal = new \MyCal\Calender(); 10 11?> 12 13<!DOCTYPE html> 14<html lang="ja" dir="ltr"> 15 <head> 16 <meta charset="utf-8"> 17 <title>Calender</title> 18 <link rel="stylesheet" href="styles.css"> 19 </head> 20 <body> 21 <div class="" id="table"> 22 <table> 23 <thead> 24 <tr> 25 <th><p id="prev">«</p></th> 26 <th colspan="5" id="now"><?= h($cal->yearMonth); ?></th> 27 <th><p id="next">»</p></th> 28 </tr> 29 </thead> 30 <tbody> 31 <tr> 32 <td>Sun</td> 33 <td>Mon</td> 34 <td>Tue</td> 35 <td>Wed</td> 36 <td>Thu</td> 37 <td>Fri</td> 38 <td>Sat</td> 39 </tr> 40 <?php $cal->show(); ?> 41 </tbody> 42 <tfoot> 43 <tr> 44 <th colspan="7"><p id="today">Today</p></th> 45 </tr> 46 </tfoot> 47 </table> 48 </div> 49 <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> 50 <script src="cal.js"></script> 51 </body> 52</html> 53
回答1件
あなたの回答
tips
プレビュー