カレンダー

【動画・サンプルコード付き】PHPカレンダーの作り方

 

今回は「PHP でカレンダーを作る方法」を紹介していきます。

カレンダーデモ

 
 


 

カレンダー作成の流れ

まずは HTML と CSS でカレンダーのレイアウトを用意して、それをもとに PHP でカレンダーを出力していきます。CSS は書かなくても大丈夫ですが、せっかくなので Bootstrap と Google Fonts を使ってカレンダーらしくしていきましょう。

Bootstrap はフレームワークと言って、難しいコードを書かずに綺麗なテーブルやフォームを用意することができるものです。CSS が苦手という方やレイアウトの作成に時間を掛けたくない場合に役立ちます。今回は使用しませんが JavaScript でモーダルや切り替えタブなども簡単に作成することができます。

Google Fonts は、たった2行のコードをコピーするだけで800種類以上のフォントを使うことができるウェブフォントサービスです。ブラウザによってフォントがバラバラだったり、文字が読みづらくなってしまわないように、フォントを指定しておきましょう。

カレンダー作成には、ループ・ GET ・ date 関数など PHP の基礎がたくさんつまっています。
特に date 関数など日付関連の処理はよく使用するものなので、カレンダーを作りながら慣れておくと良いと思います。

ぜひ、オリジナルのカレンダーを作ってみてください
 
 

開発環境

ローカルホストXAMPP 7.0.26 / MAMP 5.2
PHPバージョン7.2.10
WebブラウザChrome

 
 

動画

Part1 : HTML & CSS

PHPカレンダーの作り方 #1 HTMLとCSS

Part2 : PHP

PHPカレンダーの作り方 #2 PHP

 
 

解説

1. php ファイルを作成する

ファイル名は何でも良いので、ファイル名.php のように php ファイルを作成してください。
ここでは index.php として進めていきます。
 

2. HTML

作成した index.php を開いて、以下のように HTML を書いてください。

 

class について

8行目    class="container"
10行目  class="table table-bordered"

この2行は Bootstrap で指定されているクラス名です。
あとで Bootstrap を読み込んだ時にレイアウトが変わります。
 

35行目 class="today"

この class 名は Bootstrap には関係ありません。今日の日付部分に色をつけるために用意します。
 
 

この時点では、以下のようなカレンダーになっていると思います。


 

カレンダーがブラウザーの端にあり、日付の間隔も狭くて分かりにくいですね。
これを CSS でカレンダーらしくしていきましょう。
 
 

3. CSS

Bootstrap を読み込む

検索、または以下のリンクから Bootstrap3 のサイトを表示します。
https://getbootstrap.com/docs/3.3/

メモ

Bootstrap4 がリリースされていますが、今回は動画に合わせて Bootstrap3 を使用します。Bootstrap4 を使うと文字やテーブルセルのサイズが少し大きくなりますが、どちらを使っても問題ありません。

 


 


 

コピーしたコードを6行目に追加します。

 
 

Google Fonts を読み込む

検索、または以下のリンクから Google Fonts のサイトを表示します。

https://fonts.google.com/
 

好きなフォントを選んで「+」ボタンを押します。*動画内では「Noto Sans JP」を使用しています。


 


 


 


 
 

7~12行目を追加します。

 

ブラウザを更新してみてください。
Bootstrap とフォントが適用されたでしょうか?
 
 

CSS を書く

次に、曜日の色・カレンダーのサイズを調整していきます。

今回は1つのファイルにまとめたいので、style.css を作成しないで head タグ内に直接書いていきます。

11~31行目を追加します。

 

26, 29行目 :nth-of-type(n)

n 番目の要素を指定できます。

th:nth-of-type(1) は日曜日の th、th:nth-of-type(7)は土曜日の th を指定して、それぞれ色を変更しています。
 
 

これでレイアウトは完成です。
次に カレンダー部分を PHP で出力していきましょう。



3-4: PHP

1~83行目、130~134行目を追加します。

 
 

タイムゾーン

3行目 date_default_timezone_set('Asia/Tokyo');

タイムゾーンを東京(日本)に設定しています。その他のタイムゾーンはこちら
 
 

形式チェック

15行目 if ($timestamp === false) {

GET パラメータが存在しない月だったり(index.php?ym=2019-1111
文字列が入っていたり(index.php?ym=2019-aaa
した場合に、エラーが起きないよう形式チェックを追加します。

false が返ってきた場合は、現在の年月・タイムスタンプを取得します。
 
 

date 関数

date($format, $timestamp)

タイムスタンプ($timestamp)から好きな形式($format)で日付を作成することができます。
タイムスタンプは 1531454282 のように時刻を数値にしたもので、省略した場合は現在時刻が使われます。
 

例① 今日の年月を取得する場合

date('Y-m');

 

例② タイムスタンプから年月日を取得する場合

date('Y年n月j日', $timestamp);

 

よく使うフォーマット
Y2018, 2020
m月(ゼロつき)01~12
n月(ゼロなし)1~12
d日付(ゼロつき)01~31
j日付(ゼロなし)1~31
w曜日0:日曜日 1:月曜日…
t月の日数(何日まであるか)28~31

 
 

strtotime を使う場合の注意点

前月・次月の年月を取得する方法は mktime と strtotime があり、どちらを使っても問題ありません。

strtotime の方が簡単に書くことができるので、個人的にも strtotime の方を使うことが多いですが、1つ注意点があります。
 

strtotime を使うと1ヶ月前・2日後などの日付を簡単に取得できます。

date('Y-m', strtotime('-1 month'));
date('Y-m', strtotime('+2 day'));
date('Y-m', strtotime('2018-07-01 -1 month'));

 

上の例では、現在日時と2018年7月1日を基準日にしているので問題ありませんが、31日を基準日にした場合にズレが出ます。
 

例)7月の前月を取得したい場合

echo date('Y-m-d', strtotime('2018-07-01 -1 month'));
// 2018-06-01

 

echo date('Y-m-d', strtotime('2018-07-31 -1 month'));
// 2018-07-01(6月にならない!)

 
 

このようなズレが生じないように、このカレンダーでは 1日(その月の最初の日)のタイムスタンプをもとに1ヶ月前の年月を取得しています。

14行目: 1日(その月の最初の日)のタイムスタンプを作成

$timestamp = strtotime($ym . '-01');

 
32行目: 1ヶ月前の年月を取得

$prev = date('Y-m', strtotime('-1 month', $timestamp));

 
 

strtotime を使う時は、基準となるタイプスタンプの日付にご注意ください!
 
 

完成

以上で PHP カレンダーは完成です!

うまく動かないという場合は、下のサンプルコードと比較してみてください

サンプルコード

サンプルコードをみる(Gistに移動します)
 
 
 

カスタマイズ

カレンダーを月曜はじまりにする方法

カレンダーの最初の曜日を月曜日にしたい場合は、以下の4箇所を変更します。

① 51行目あたり

$week .= str_repeat('<td></td>', $youbi-1);

 

② 67行目あたりから

if ($youbi % 7 == 0 || $day == $day_count) {
    if ($day == $day_count && $youbi % 7 != 0) {
        $week .= str_repeat('<td></td>', 7 - $youbi % 7);
    }

 

③ CSS

th:nth-of-type(6), td:nth-of-type(6) {
    color: blue;
}
th:nth-of-type(7), td:nth-of-type(7) {
    color: red;
}

 

④ HTML

<tr>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
    <th>土</th>
    <th>日</th>
</tr>

 

以上でカレンダーを月曜日始まりにすることができます。


 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA