カレンダー

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

2021年6月16日 画像・コードを更新しました。

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

以下のようなカレンダーを作成します。

年月の横にある < > をクリックすると前月・次月のカレンダーも表示できます。

作成するカレンダー

 
 


 


 

カレンダー作成の流れ

最初に HTML と CSS でカレンダーのレイアウトを用意して、それをもとに PHP でカレンダーを出力していきます。

CSS は書かなくても良いですが、せっかくなので Bootstrap と Google Fonts を使ってカレンダーらしくしていきましょう。

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

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

カレンダー作成には、ループ・ GET ・ date 関数など PHP の基礎がたくさんつまっています。

特に date 関数など日付関連の処理はよく使用するものなので、カレンダーを作りながら慣れておくと良いと思います。

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

動画

動画では Bootstrap / Google Fonts が古い仕様になっています。解説では最新のものを使用しているので、そちらもお読みください。

Part1 : HTML & CSS

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

Part2 : PHP

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

 
 

解説

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

ファイル名は何でも良いので、ファイル名.php のように php ファイルを作成してください。

ここでは index.php として進めていきます。
 

2. HTML

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

 

class について

42行目の today クラスは「今日の日付」に色をつけるために用意します。
 

その他のクラス名

container, mb-5, table, table-bordered

は Bootstrap で指定されているクラス名です。

あとで Bootstrap を読み込んだ時にレイアウトが変わります。
 
 

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


 

カレンダーがブラウザーの端にあり、日付の間隔も狭くて分かりにくいですね。

これを CSS でカレンダーらしくしていきましょう。
 
 

3. CSS

Bootstrap を読み込む

Bootstrap 5 の公式サイトを開きます。
リンク:https://getbootstrap.com/

動画では Bootstrap3 を使用しているので、レイアウトが少し変わります。

 

Get Started をクリックします。


 
 

CSS の下にあるコードをコピーします。


 
 

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

 
 
 

Google Fonts を読み込む

検索、または以下のリンクから Google Fonts のサイトを表示します。
https://fonts.google.com/
 

好きなフォントを選んでクリックします。Language メニューから Japanese を選択することもできます。


 
 

今回は Noto Sans JP を使ってみます。


 
 

使いたいサイズの横にある + Select this style をクリックします。

複数使うこともできますが、今回は Regular 400 だけ使います。


 
 

画面右側に表示されるコードをコピーして使います。


 
 

コピーしたコードを、7~13行目のように追加します。

 
 

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


 
 
 

CSS を書く

次に「曜日の色・カレンダーのサイズ」を調整します。

今回は1つのファイルにまとめたいので head タグ内に直接書いていきます。

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

 

27・30行目:nth-of-type(n)

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

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

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


 
 

3-4: PHP

1~82・130~134行目を追加して、119行目を変更します。

 
 

3行目 タイムゾーン

date_default_timezone_set('Asia/Tokyo');

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

15行目 形式チェック

if ($timestamp === false) {

 

GET パラメータに

  • index.php?ym=2021-16
  • index.php?ym=0-1111
  • index.php?ym=2021-aaa

のように存在しない月や文字列が入っていた場合にエラーが起きないよう形式チェックを追加します。
 

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

67行目

if ($youbi % 7 == 6

ここでは「週終わりかどうか」つまり「$youbi が 土曜日かどうか」を判定しています。

土曜日の場合 $youbi は必ず 6, 13, 20, 27, 34 となるので、7で割った時の余りが 6 になります。

ですので $youbi % 7 == 6 と書いて判定しています。
 
 

date 関数

date($format, $timestamp)

タイムスタンプ($timestamp)から好きな形式($format)で日付を作成することができます。

タイムスタンプとは 1531454282 のように時刻を数値にしたもので、省略した場合は現在時刻が使われます。
 

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

date('Y-m'); // 出力例:2021-06

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

date('Y年n月j日', $timestamp); // 出力例:2021年6月1日

 

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

 
 
 

strtotime 関数を使う場合の注意点

前月・次月の年月を取得するには mktime 関数と strtotime 関数を使うことができます。

どちらを使っても問題ありませんが、stortotime 関数を使う場合に1つ注意点があります。
 

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

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

 

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

例① 7月1日の1ヶ月前の日付を取得する場合

echo date('Y-m-d', strtotime('2021-07-01 -1 month'));
出力結果:2021-06-01

例② 7月31日の1ヶ月前の日付を取得する場合

echo date('Y-m-d', strtotime('2021-07-31 -1 month'));
出力結果:2021-07-01 ←6月になりません!

 
 

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

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

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

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

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

 

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

さらに詳しくカレンダー開発を学びたい方へ


 

PHP・MySQL でつくるカレンダー開発講座では

  • より詳しいカレンダー作成コードの解説
  • 予定を MySQL データベースに保存・編集・削除・検索する方法
  • タブレット・スマートフォンに対応させる方法
  • Datetimepicker の使い方
  • 内閣府が配布している祝日 CSV ファイルの使い方

を学ぶことができます。

PHP と MySQL で何か開発してみたい方、より実用的なコードを学びたい方はぜひ挑戦してみてください!
 

 
 
 

完成

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

上手く動かない場合は下のサンプルコードをご利用ください。

サンプルコード

動画のサンプルコード:https://gist.github.com/codeforfun-jp/41c…
解説のサンプルコード:https://gist.github.com/codeforfun-jp/76c…
 
 
 

カスタマイズ

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

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

① 40行目あたり

$youbi = date('N', mktime(0, 0, 0, date('m', $timestamp), 1, date('Y', $timestamp)));

 

② 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
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
guest
14 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
fu-na
fu-na
1 year ago

有り難うございました。わかりやすい画面で楽しくコード入力でき、カレンダー作成できました。でも私の特徴であるlocalサーバーのインストールに問題があり、まだ完成していません後ほど質問していいでしょうか?fu-na

sato
sato
10 months ago

コメントさせて頂きます。
php初心者のものです。
6~10行目までのissetの部分を詳しく教えて頂く事は可能でしょうか?

sato
sato
10 months ago
Reply to  Sara

とても分かりやすかったです!ありがとうございます!

ちなみに、よくカレンダーのプログラムで、年月を入力するとその年月のカレンダーが表示されるプログラムがあると思うのですが、そう言ったコードはどういう風にできますか?
これも[’ym’]も使うのですか?

kaki
kaki
10 months ago

閏年の判定はどうやって行っていますか?
また、前月・翌月リンクのコードで、12の次は13ですがそこから1に戻る方法と、逆に、1から-1の場合は0ですけど12になります。そういった部分はどのコードで実装されているかお教えできますか?

うめママ
うめママ
8 months ago

phpでカレンダーを作成する方法を、
解りやすくサイトに公開して下さって、ありがとうございます。

phpを勉強しているのですが、「内閣府の祝祭日CSV」を使用して
カレンダーに組み込む方法を考えています。
アドバイスありましたら、よろしくお願い致します。

masu
masu
8 months ago

とてもわかりやすかったです!カレンダー作成できました。
もしよければ祝日の表示も記事にしていただけないでしょうか?
(内閣府が出しているCSVを利用して)
お忙しいところ申し訳ありませんがぜひご検討よろしくお願いします!

masu
masu
8 months ago
Reply to  Sara

お返事ありがとうございます!
4月楽しみに待っております。
これからもサイト楽しみにアップ待っております><!
私もプログラミング勉強頑張ります!!!

14
0
この記事にコメントするx