カレンダー

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

 


 

 

はじめに & デモ

今回は、PHP でカレンダーを作る方法を紹介していきます。
画像のようなカレンダーを作っていきます。デモはこちら
 


 

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

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

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

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

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

 
 
 

開発環境

Google Chrome
XAMPP 7.0.26
 
 
 

動画

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行目を追加します。

 
 

ポイント
:nth-of-type(n)
n 番目の要素を指定できます。

th:nth-of-type(1) は、日(曜日) の th
th:nth-of-type(7)は、土(曜日) の th
を指定して、土曜日は青色、日曜日は赤色にしました。td も同じです。

 

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

3-4: PHP

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

 
 

タイムゾーン

3行目
タイムゾーンは東京(日本)にします。
その他のタイムゾーンはこちら
 
 

形式チェック

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

COMMENT

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