カレンダー付箋ボード

カレンダーと付箋ボードのWindowsアプリ完成！

詳細はこちら

【初心者】ＰＨＰでシンプルカレンダーを作成してみる。

2024.01.25

PHPの勉強をはじめました。なかなか難しいですが、まだ挫折はしていないぞ。まずはシンプルなカレンダーを作成してみます。

この本で勉強

まずは本を買って勉強。
カラーで見やすいけど、実践例が少ないかな。
別の本をもう１冊買おうか？とも思いましたが、とりあえず簡単なものを作ってみます。

シンプルカレンダー

シンプルカレンダーがよさそうです。
基本的な文法も使うし、HTML、CSS、PHPを一通り使いながら作成できます。
Bootstrapなんて聞いたことない（本にも載ってない）のも使うようですが、できるかな？

コード

いろんなサイトをみて作ってみました。

  2. <?php
  3. //タイムゾーン設定
  4. date_default_timezone_set('Asia/Tokyo');
  6. //前月・次月選択されたGET年月を取得
  7. if(isset($_GET['ym'])){
  8.     $ym = $_GET['ym'];
  9. }else{
  10.     //今月の年月
  11.     $ym = date('Y-m');
  12. }
  14. //strtotime('Y-m-01')
  15. $timestamp = strtotime($ym . '-01');
  16. if($timestamp === false){//形式チェックを追加
  17.     //falseが返ってきた時は、現在の年月を取得
  18.     $ym = date('Y-m');
  19.     $timestamp = strtotime($ym . '-01');
  20. }
  22. //今月の日付　例）2020-10-2
  23. $today = date('Y-m-j');
  25. //カレンダーのタイトル作成　例）2020年10月
  26. $html_title = date('Y年n月', $timestamp);//date
  28. //前月・次月の年月を取得
  29. //strtotime(,基準)
  30. $prev = date('Y-m', strtotime('-1 month', $timestamp));
  31. $next = date('Y-m', strtotime('+1 month', $timestamp));
  33. //該当月の日数取得
  34. $day_count = date('t', $timestamp);
  36. //１日が何曜日か
  37. $youbi = date('w', $timestamp);
  39. //カレンダー作成準備
  40. $mouths = [];
  41. $week = '';
  43. //第１週目：空のセルを追加
  44. //str_repeat(文字列, 反復回数)
  45. $week .= str_repeat('<td></td>', $youbi);
  47. for($day = 1; $day <= $day_count; $day++, $youbi++){
  48.     
  49.     $date = $ym . '-' . $day;
  50.     
  51.     if($today == $date){
  52.         
  53.         $week .= '<td class="today">' . $day;//今日の場合はclassにtoday
  54.     } else {
  55.         $week .= '<td>' . $day;
  56.     }
  57.     $week .= '</td>';
  58.     
  59.     if($youbi % 7 == 6 || $day == $day_count){//週終わり、月終わりの場合
  60.         //%は余りを求める、||はまたは
  61.         //土曜日を取得
  62.         
  63.         if($day == $day_count){//月の最終日、空セルを追加
  64.             $week .= str_repeat('<td></td>', 6 - ($youbi % 7));
  65.         }
  66.         
  67.         $mouths[] = '<tr>' . $week . '</tr>'; //mouths配列にtrと$weekを追加
  68.         
  69.         $week = '';//weekをリセット
  70.     }
  71. }
  72.     
  73. ?>
  77. <!DOCTYPE html>
  78. <html lang="ja">
  79. <head>
  80.     <meta charset="utf-8">
  81.     <title>PHPカレンダー</title>
  82.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  83.     <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  84.     <style>
  85.       .container {
  86.         font-family: 'Noto Sans', sans-serif;　/*--GoogleFontsを使用--*/
  87.           margin-top: 80px;
  88.       }
  89.         h3 {
  90.             margin-bottom: 30px;
  91.         }
  92.         th {
  93.             height: 30px;
  94.             text-align: center;
  95.         }
  96.         td {
  97.             height: 100px;
  98.         }
  99.         .today {
  100.             background-color: #B7E8DF;/*日付が今日の場合は背景薄緑*/
  101.         }
  102.         th:nth-of-type(1), td:nth-of-type(1) {/*日曜日は赤*/
  103.             color: red;
  104.         }
  105.         th:nth-of-type(7), td:nth-of-type(7) {/*土曜日は青*/
  106.             color: blue;
  107.         }
  108.         h3 {
  109.             margin-top:30px;
  110.         }
  111.     </style>
  112. </head>
  113. <body>
  114.     <div class="container">
  115.         <h3><a href="?ym=<?php echo $prev; ?>">&lt;</a><?php echo $html_title; ?><a href="?ym=<?php echo $next; ?>">&gt;</a></h3>
  116.         <table class="table table-bordered">
  117.             <tr>
  118.                 <th>日</th>
  119.                 <th>月</th>
  120.                 <th>火</th>
  121.                 <th>水</th>
  122.                 <th>木</th>
  123.                 <th>金</th>
  124.                 <th>土</th>
  125.             </tr>
  126.              <?php
  127.                 foreach ($mouths as $week) {
  128.                     echo $week;
  129.                 }
  130.             ?>
  131.         </table>
  132.     </div>
  133. </body>
  134. </html>

こんな感じでHTML CSS PHPを１枚で書いています。
最初はこのほうがわかりやすいかも。

これを実行すると・・・

で、で、できましたー！
今日の日付のところはちゃんと色がついています。
「＜」で先月が表示されますよ。

いろんなサイトをみて、ほぼコピぺしただけなので出来て当たり前ですが、うれしい。

コードの理解

コードを理解しなきゃ勉強にならないので、コードを読み解きます。

45行目からが嫌～な感じです。

45行目：1日の曜日の前部分を空白で埋めます。
47行目から：ループしながら、今日の日付を探してclass=”today”
59行目から：土曜日（週終わり）または月末の判定をします。
63行目から：月末の場合は後部分を空白で埋めます。

82行目：Bootstrapを使用します。（カレンダーの枠）
83行目：Googleフォントを使用します。
84～111行目：スタイル設定
115行目：＜2024年1月＞の表示
127行目：foreachで$mouthsから$weekを取り出して表示

まとめ

理解するのに時間がかかりました。
まだまだ勉強の日々です。
このシンプルカレンダーから祝日設定、月曜はじまり、任意の休み設定、スケジュール入力などをやっていきたいと思います。