カレンダー

簡単シンプルなPHPカレンダーの作り方

Sara

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

作成するのは以下のようなカレンダーです。(年月の横にある < > をクリックすると、前月・次月のカレンダーも表示できます。)

デモ

新しいタブでデモを開く

カレンダー作成の流れ

ここでは

  1. HTMLでレイアウトを用意
  2. CSSでカレンダーを見やすくする
  3. PHPでカレンダーを出力

という手順で進めていきます。

CSS は使わなくても良いですが、せっかくなのでカレンダーらしい見た目にしていきましょう。

ゼロから CSS を書くのは手間がかかるので、今回は Bootstrap というフレームワークを使います。フレームワークを使えば綺麗なテーブルやフォームを簡単に用意することができるので CSS に時間を掛けたくない場合に役立ちます。

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

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

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

カレンダーの作り方

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

ファイル名.php のように php ファイルを作成してください。

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

2. HTML

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

class について

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

その他のクラス名 container, mt-5, mb-4, mx-3, table-borderd はBootstrap で指定されているクラス名です。このあと Bootstrap を読み込んだ時にレイアウトが変わります。


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

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

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

3. CSS

Bootstrap を読み込む

Bootstrap 5 の公式サイト https://getbootstrap.com/ を開いて、画面をスクロールすると Include via CDN という箇所があります。

1つ目のコードの アイコンをクリックしてコードをコピーします。

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

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

CSS を書く

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

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

7〜27行目を追加します。

21・24行目:nth-of-type(n)

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

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

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

4. PHP

1~82・124~128行目を追加して、113行目を変更します。

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');    // 出力例:2024-01

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

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

strtotime 関数の注意点

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

便利な関数ですが基準日によってズレがでる可能性があるので注意しましょう。

あわせて読みたい
【PHP】strtotime 関数を使うときの注意点
【PHP】strtotime 関数を使うときの注意点

完成

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

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

サンプルコード:https://gist.github.com/codeforfun-jp/76c…

あわせて読みたい
【PHP】カレンダーを月曜始まりにする方法
【PHP】カレンダーを月曜始まりにする方法

【応用編】カレンダーに予定を保存する方法

「カレンダーに予定を保存したい!PHPをもう少し学んでみたい!」という方には PHP・MySQL でつくるカレンダー開発講座がオススメです。

この講座では

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

を学ぶことができます。

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

Subscribe
Notify of
19 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
fu-na
4 years ago

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

sato
3 years ago

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

sato
3 years ago
Reply to  Sara

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

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

kaki
3 years ago

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

うめママ
3 years ago

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

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

masu
3 years ago

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

masu
3 years ago
Reply to  Sara

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

yui
2 years ago

お世話になっております。
カレンダーの作成が無事できました!

例えば、作成したカレンダーをクリックしたり、タッチしたりして、選択し、mysqlに格納したりするには、どのように実現できますでしょうか?

shu
8 months ago

開発環境Chrome book/Chrome/Linux/Visual Studio Code使用
<h3 class=”mb-4″><a href=”#”>&lt;</a><span class=”mx-3″>2023å¹´ 11月</span><a href=”#”>&gt;</a></h3>

現在作成中なのですが、ブラウザ更新した際に2023年11月の部分が2つ出てきてしまいます。
どの部分を修正すればよいでしょうか?
上記、コード部分?かわからずって感じです。

よろしくお願いいたします。。。

Last edited 8 months ago by shu
shu
8 months ago

すみません、解決いたしました!

ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

POINT 01

動くコード

プログラミングの文法を学んでも、そこからどのようにアプリ開発ができるのかイメージが湧きにくいものです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなどアプリとして機能するものを作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

受講期限もないので、いつでも前のレッスンに戻ることができるので安心です。

お申し込みしたその日からすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

19
0
この記事にコメントするx
記事URLをコピーしました