カレンダー

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

 
 

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

画像のようなカレンダーを作っていきます。デモはこちら


 

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

Bootstrap はフレームワークといい、難しいコードを書かくことなく、シンプルで綺麗なテーブルやフォームを作ることができます。今回は使いませんが JavaScript でモーダルや切り替えタブなども簡単に作成できます。

Google Fonts では、たった2行のコードをコピーするだけで800種類以上のフォントを使うことができます。カレンダーの数字の部分に使っていきます。

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

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

 


 

開発環境

XAMPP 7.0.26
Chrome
 
 

動画

Part1 : HTML & CSS

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

 

Part2 : PHP

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

 
 

解説

3-1. index.php を新規作成

index.php ファイルを作成してください。(ファイル名は何でも大丈夫です。)

3-2. HTML

以下のように HTML を作成します。

 

class について

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

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

35行目 class=”today”

今日の日付に色をつけるためのものです。
 
 

HTML だけだと、このようなカレンダーになります。

 

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

 

3-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’);
タイムゾーンを東京(日本)に設定します。
その他のタイムゾーンはこちら
 

形式チェック

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

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

date 関数

date($format, $timestamp)
$format: フォーマット(形式)
$timestamp: タイムスタンプ(1531454282のように現在時刻を数値にしたもの)

タイムスタンプを省略した場合は、現在時刻が使われます。

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

 

mktime と strtotime

どちらも使うことが出来ますが、1つ注意点があります。

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

date('Y-m', strtotime('-1 month'));
date('Y-m', strtotime(‘+2 day'));

 

このカレンダーでは、
$timestamp = strtotime($ym . ‘-01’);(14行目)
で取得した1日(その月の最初の日)のタイムスタンプをもとに、1ヶ月前の日付を取得
$prev = date(‘Y-m’, strtotime(‘-1 month’, $timestamp));
しているので問題ありませんが、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月にならない!)

 

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

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

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

サンプルコード

 
 

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

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

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

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

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

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

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

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

無料体験はこちら

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

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

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

3. Treehouse

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

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

COMMENT

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