PHP PR

【初心者向け】PHPでカレンダー機能を実装する方法をわかりやすく解説

  /
記事内に商品プロモーションを含む場合があります

この記事では、PHPでカレンダー機能を作成するコードとその解説を初心者向けにしています。

 

完成イメージは下記の画像です。

 

「最近、独学での学習に限界を感じてませんか？」

私もそうでしたが、正直、独学での学習は、非常に効率が悪いです・・・

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！

 

PHPでカレンダー機能を実装するコードの紹介

それでは、まずコードを紹介します。
少し長いので注意してください。

おすすめの学習法は、まず下記のコードをそのままコピーしてご自身のPCで挙動を確認してください。

その上で、次の章でコードを解説していますので、記事とコードを見比べながらコード１つ1つがどのような機能をしているか確認していってください。

PHPでカレンダー機能(index.php)

まずは、メインとなるindex.phpです。

<?php
$today = filter_input(INPUT_POST, 'today');
$monthNext = filter_input(INPUT_POST, 'monthNext');
$yearNext = filter_input(INPUT_POST, 'yearNext');
$monthPrev = filter_input(INPUT_POST, 'monthPrev');
$yearPrev = filter_input(INPUT_POST, 'yearPrev');


if($today==1){
    $month = date('n');
    $year = date('Y');
}
if($monthNext > 12){
    $monthNext = 1;
    $yearNext++;
}
if($monthPrev === "0"){
    $monthPrev = 12;
    $yearPrev--;
}
$month = $monthNext??$monthPrev??date('n');
$year =$yearNext??$yearPrev??date('Y');

$last_day = date('j', mktime(0, 0, 0, $month + 1, 0, $year));
$calendar = array();
$j = 0;



for ($i = 1; $i < $last_day + 1; $i++) {
    $week = date('w', mktime(0, 0, 0, $month, $i, $year));
    if ($i == 1) {
        for ($s = 1; $s <= $week; $s++) {
            $calendar[$j]['day'] = '';
            $j++;
        }
    }
    $calendar[$j]['day'] = $i;
    $j++;
    if ($i == $last_day) {
        for ($e = 1; $e <= 6 - $week; $e++) {
            $calendar[$j]['day'] = '';
            $j++;
        }
    }
}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>カレンダー</title>
  <link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>
  <table>
    <thead>
      <tr>
        <form action="" method="post">
          <th><button type="submit" id="prev">
              &laquo;
              <input type="hidden" name="monthPrev" value="<?php echo $month-1;?>">
              <input type="hidden" name="yearPrev" value="<?php echo $year;?>">
            </button></th>
        </form>
        <th id="title" colspan="5"><?php echo $year; ?>年<?php echo $month; ?>月
        </th>
        <form action="" method="post">
          <th><button type="submit" id="next">
              &raquo;
              <input type="hidden" name="monthNext" value="<?php echo $month+1;?>">
              <input type="hidden" name="yearNext" value="<?php echo $year;?>">
            </button></th>
        </form>
      </tr>
      <tr>
        <th class="red">日</th>
        <th>月</th>
        <th>火</th>
        <th>水</th>
        <th>木</th>
        <th>金</th>
        <th class="blue">土</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <?php $cnt = 0; ?>
        <?php foreach ($calendar as $key => $value): ?>
        <td>
          <p>
            <?php $cnt++; ?>
            <?php echo $value['day']; ?>
          </p>
        </td>
        <?php if ($cnt == 7): ?>
      </tr>
      <tr>
        <?php $cnt = 0; ?>
        <?php endif; ?>
        <?php endforeach; ?>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <form action="" method="post">
          <td colspan="7">
            <button type="submit" id="today"> 現在に戻る
              <input type="hidden" name="today" value="1">
            </button>
          </td>
        </form>
      </tr>
    </tfoot>
  </table>
</body>
</html>

 

PHPでカレンダー機能(stylesheet.css)

次はデザイン部分のstylesheet.cssです。

body {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}
table {
  border: 2px solid black;
  border-collapse: collapse;
  margin: 50px auto;
  width: 80%;
}
thead {
  background: #FFEEFF;
}
thead tr:first-child {
  width: 50px;
  height: 70px;
  text-align: center;
  line-height: 70px;
}
thead tr:nth-child(2) {
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
#prev,#next{
 background-color: #FFEEFF;
 border: 0px none;
 cursor: pointer;
 user-select: none;
 font-size: 30px;
}
tbody td {
  border: 2px solid black;
  position: relative;
  height: 80px;
  width: 80px;
}
tbody td:last-child,
.blue {
  color: blue;
}
tbody td:first-child,
.red {
  color: red;
}
tbody .schedules{
  margin-top: 25px;
}
tbody .schedule{
  margin: 0 auto 5px;
  text-align: center;
}
tbody button {
  border: none;
  background-color:transparent ;
  font-weight: bold;
  text-decoration: underline;
}
tbody button:hover {
  background-color: #EEFFFF;
}
tbody p {
  position: absolute;
  top: 3px;
  left: 3px;
}
tfoot {
  background: #FFEEFF;
  font-weight: bold;
  text-align: center;
}
tfoot tr {
  width: 50px;
  height: 70px;
  text-align: center;
  line-height: 70px;
}
td.today {
  background-color: #FFFFCC;
}
#today {
  cursor: pointer;
  user-select: none;
  font-size: 40px;
  background-color: #FFEEFF;
  border: 0px none;
}
#title {
  font-size: 30px;
}

 

PHPでカレンダー機能を実装するコードを詳しく解説

それでは、詳しくコードを解説していきます。

PHPでカレンダー機能を実装するコードの前半部分（演算部）

// 送信されたデータを取得
$today = filter_input(INPUT_POST, 'today');
$monthNext = filter_input(INPUT_POST, 'monthNext');
$yearNext = filter_input(INPUT_POST, 'yearNext');
$monthPrev = filter_input(INPUT_POST, 'monthPrev');
$yearPrev = filter_input(INPUT_POST, 'yearPrev');

一番最初の部分です。この部分は画面上で「 《 」や「 》 」や「現在に戻る」を押した際に、そのボタンから送信されたデータを取得して、変数に格納するコードです。

ボタンを押した際に、ここでデータを受け取り、そのデータによって、画面が変わっていきます。

 

例ですが、下記の<form>タグで囲われた<button>を押した際に、<input>タブで持っているvalue属性の「1」が送信されて、

name属性を頼りに「filter_input(INPUT_POST, ‘today’)」でデータを受け取り「１」が$todayに格納されます。

<?php
$today = filter_input(INPUT_POST, 'today');
?>

<form action="" method="post">
   <button type="submit" id="today"> 現在に戻る
     <input type="hidden" name="today" value="1">
   </button>
</form>

データの送信について詳しく確認したい場合は、下記の記事を参照してください。

【初心者向け】PHPでデータをPOST送信する方法をわかりやすく解説！この記事では、PHPを使ったデータのPOST送信の方法をわかりやすく解説します。 この記事を読むと下記の画像のようなことができます...

 

 

if($today==1){
  // 現在の年月を取得
    $month = date('n');
    $year = date('Y');
}
if($monthNext > 12){
  // 次のボタンを押した時、12月を超えた場合は月を1月にし、年に1を足す
    $monthNext = 1;
    $yearNext++;
}
if($monthPrev === "0"){
    // 前のボタンを押した時、月が0になった場合は月を12月にし、年から1を引く
    $monthPrev = 12;
    $yearPrev--;
}

ここでは、場合分けをしています。
一番上は、「現在に戻る」のボタンが押された場合に$todayに１が格納されているので、その場合に、現在の月と年をそれぞれ取得して$monthと$yearに格納しています。

※date(‘n’)で現在の月を、date(‘Y’)で現在の年を取得できます。

二つ目は、次のボタン「》」を押した際に、月が12を超えたしまった場合、月を1に戻して、年に1を足します。

三番目は、前のボタン「《」を押した際に、月が0になった場合、月を12に戻して、年から1を引きます。

//場合分け $monthNextにデータがあれば、$monthNextを
// $monthNextにデータがなければ、$monthPrevを
// $monthNextと$monthPrevにデータがなれけば、date('n')を入れる。
$month = $monthNext??$monthPrev??date('n');
$year =$yearNext??$yearPrev??date('Y');

このコードも場合分けになります。

PHPの構文で「？?」でつなぐ場合は、左から順番に見ていき、データが格納されているデータを取得するというもので、

この場合、まず、$monthNextにデータがあるか確認して、データがある場合は、$monthに$monthNextのデータを格納。

$monthNextにデータがない場合は、$monthPrevを確認して、データがある場合は、$monthに$monthPrevのデータを格納。

$monthNextにも$monthPrevデータがない場合は、date(‘n’)を$monthに格納します。

// 月末日を取得
$last_day = date('j', mktime(0, 0, 0, $month + 1, 0, $year));
$calendar = array();
$j = 0;

このコードでは、表示される月の月末日を取得して、$last_dayに格納しています。
また、$calendarに空の配列を用意します。

// 月末日までループして、日付を$calendarの配列に挿入する
for ($i = 1; $i < $last_day + 1; $i++) {
    // 曜日を取得
    $week = date('w', mktime(0, 0, 0, $month, $i, $year));
    // 1日の場合
    if ($i == 1) {
        // 1日目の曜日までをループ
        for ($s = 1; $s <= $week; $s++) {
            // 前半に空文字をセット
            $calendar[$j]['day'] = '';
            $j++;
        }
    }
    // 配列に日付をセット
    $calendar[$j]['day'] = $i;
    $j++;
    // 月末日の場合
    if ($i == $last_day) {
        // 月末日から残りをループ
        for ($e = 1; $e <= 6 - $week; $e++) {
            // 後半に空文字をセット
            $calendar[$j]['day'] = '';
            $j++;
        }
    }
}

ここのコードでは、繰り返し構文（for)で表示される年月の日付を上記で作った空の配列（$calendar）に$last_day（その月の末日の日付）まで順番に入れていきます。

ただし、下記の画像のようにカレンダーは、毎月始まる曜日が違うため、始まる曜日によっては1の前に空のデータを配列に入れる必要があります。

なので、下記の部分でまず、空の文字をセットします。

   // 曜日を取得
    $week = date('w', mktime(0, 0, 0, $month, $i, $year));
    // 1日の場合
    if ($i == 1) {
        // 1日目の曜日までをループ
        for ($s = 1; $s <= $week; $s++) {
            // 前半に空文字をセット
            $calendar[$j]['day'] = '';
            $j++;
        }

 

同様に下記の部分で月末日以降の部分に空の文字をセットしてます。

  // 月末日の場合
    if ($i == $last_day) {
        // 月末日から残りをループ
        for ($e = 1; $e <= 6 - $week; $e++) {
            // 後半に空文字をセット
            $calendar[$j]['day'] = '';
            $j++;
        }
    }

 

PHPでカレンダー機能を実装するコードの後半（表示部分）

ここからは実際に画面に表示される部分のコードになります。

<!-- テーブルを作成 -->
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
<table>

まず全体ですが、上記のようなテーブル構造になっています。

 

<!-- 前月に行くボタン「《」を押した時のフォームアクション-->
<form action="" method="post">
  <th><button type="submit" id="prev">
      &laquo;
      <!-- ボタンを押された時に送信されるデータを保持。inputタグのtype="hidden"は、画面に表示されない。 -->
      <input type="hidden" name="monthPrev" value="<?php echo $month-1;?>">
      <input type="hidden" name="yearPrev" value="<?php echo $year;?>">
    </button></th>
</form>

この部分は、前月に行くボタン「《」の部分です。
「《」については、そのまま表示されない為、「&laquo;」のように記載します。

ここでは、フォームアクションになっており、「《」を押すことで、inputタグのvalue属性の値が、name属性を頼りにこのコードの一番最初に説明した下記の部分に送信されます。

$monthPrev = filter_input(INPUT_POST, 'monthPrev');
$yearPrev = filter_input(INPUT_POST, 'yearPrev');

 

今回の場合、前月に戻るため、inputタグのname=”monthPrev”の値（Value）は、現在の月から1を引いた値（ $month-1）を送信しています。

なお、inputタグのtype属性を”hidden”とすることで画面上はinputタグを非表示とすることが可能です。

 

  <th id="title" colspan="5"><?php echo $year; ?>年<?php echo $month; ?>月</th>

ここは、現在表示されている年と月を表示するコードです。

 

<!-- 次月に行くボタン「》」を押した時のフォームアクション-->
<form action="" method="post">
  <th><button type="submit" id="next">
      &raquo;
      <input type="hidden" name="monthNext" value="<?php echo $month+1;?>">
      <input type="hidden" name="yearNext" value="<?php echo $year;?>">
    </button></th>
</form>

 

この部分は、次月に行くボタン「》」の部分です。

説明は、前月に戻るボタンと同じなので省略しますが、inputタグname=”monthNext”の値（Value）は、現在の月から1を足した値（$month+1）を送信しています。

<tbody>
  <tr>
    <!-- $calendarの配列で入っているデータをループで表示していく。-->
    <?php $cnt = 0; ?>
    <?php foreach ($calendar as $key => $value): ?>
    <td>
      <p>
        <?php $cnt++; ?>
        <?php echo $value['day']; ?>
      </p>
    </td>
    <!-- tdが7つになったら、次のtrを作成して次の行に移動 -->
    <?php if ($cnt == 7): ?>
  </tr>
  <tr>
    <?php $cnt = 0; ?>
    <?php endif; ?>
    <?php endforeach; ?>
  </tr>
</tbody>

ここで、カレンダーの日付部分を表示しています。

前半部分で$calendarに現在の月の日付の値が配列で格納してあるので、その値を繰り返し構文（foreach)により一つずつ取り出して表示していきます。

なお、$calendarには下記のとおり、連想配列によりデータが格納されています。

array ( 
 0 => array ( 'day' => '', ),
 1 => array ( 'day' => '', ), 
 2 => array ( 'day' => '', ), 
 3 => array ( 'day' => '', ),
 4 => array ( 'day' => '', ),
 5 => array ( 'day' => 1, ),
 6 => array ( 'day' => 2, ),
 7 => array ( 'day' => 3, ),
             ・
　　　　　　　 ・
　　　　　　　 ・
 34 => array ( 'day' => 30, ),
 35 => array ( 'day' => 31, ),
 36 => array ( 'day' => '', ),
 37 => array ( 'day' => '', ),
 38 => array ( 'day' => '', ),
 )

 

したがって連想配列から繰り返し値を取り出すため、 下記のように記載し、

<?php foreach ($calendar as $key => $value): ?>

 

1つずつ値を取り出して表示する部分には下記のように記載します。

<?php echo $value['day']; ?>

 

また、カレンダーは日～土曜日まで値を表示したら、次の行に折り返す必要があるため、$cnt変数に0を与え、配列から1つの値を取り出すたびに、$cntに１を足していき、

$cntが7になった時に、次の行に折り返すようになっています。

<tfoot>
  <tr>
    <!-- 現在に行くボタンを押した時のフォームアクション-->
    <form action="" method="post">
      <td colspan="7">
        <button type="submit" id="today"> 現在に戻る
          <!-- ボタンを押された時に送信されるデータを保持。inputタグのtype="hidden"は、画面に表示されない。Valueに１を保持して、現在ボタンを押したら1を送信 -->
          <input type="hidden" name="today" value="1">
        </button>
      </td>
    </form>
  </tr>
</tfoot>

最後に「現在の戻る」の部分です。

ここでは、フォームアクションになっており、「現在に戻る」を押すことで、inputタグのvalue属性の値が、name属性を頼りにこのコードの一番最初に説明した下記の部分（filter_input）に送信されます。

なお、ここでは、valueに１を与えており、下記のコードで$todayに1が代入されたら現在の日付を取得するようになっています。

$today = filter_input(INPUT_POST, 'today');

if($today==1){
  // 現在の年月を取得
    $month = date('n');
    $year = date('Y');
}

 

PHPでカレンダー機能を実装するコードのまとめ

いかがでしたか？？

初心者には少し難しいかもしれませんが、これくらいのコードを理解できると初心者を脱することができると思います。

また、プログラミングでは、時間や時を扱うことが多いので是非この記事のコードを参考に自信でカレンダー機能を実装してみましょう。

 

「最近、独学での学習に限界を感じてませんか？」

 

私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。

 

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！



関連記事