2014
4
29

PHP+DBでタイムテーブル型予約システムをつくる 第4回「カレンダー」

予約システムがごにょごにょのやつです。get_calendar()を改造して使ったりするので、違う用途へのヒントにでもなれば幸いです。


関連記事

ご注意

記事公開当初は「WordPressでタイムテーブル型予約システムをつくる」というタイトルだったのですが、WP4.0まで検証したのち、実装可能ではあるもののやはりWPには不向きだと判断したため記事タイトルを変更しました。

もはや自分でも稼働させていないため、機能追加やバージョンアップ、組み込みサポートのご依頼はお受けしておりませんので、悪しからずご理解ください。

スニペットだけでも何か作る際のお役にたてたら、という気持ちでコードを書き残しておきます。間違いや、お気づきの点がありましたらご指摘下さい。

カレンダーを実装

140429-1

前回の全体図のコードをちょっとずつ埋めていって、この部分を実装していきます。

読込前の設定

ハイライトした、この部分。ここへまずこれを書きます。

タイムゾーンを合わせて、まずは現在の日にちを$dateという変数に入れておきます。

日付の出力

タイムテーブルのところに日付を出力するコードを書いておきます。

とりあえず簡単に書いておいて、最初にページが開いた時は本日、カレンダーがクリックされたら、その日付がここに反映されるのを確認します。

カレンダーの出力

ここの部分を、

このように。このままではカレンダーは出なくて、get_rsv_calendar()という独自の関数を作って、指定した年と月のカレンダーを出力させます。

どんな構造のカレンダーが欲しいのか

関数を作る前に、htmlとしてどんな形のものを出力させたいのか考えてみます。

既存のものを見てみる

WordPressでカレンダーと言えば、get_calendar()というテンプレートタグがありますよね。当月の投稿リンク付きのカレンダーが出力されます。このテンプレートタグの実態はwp-includes/general-template.phpに書いてあって、出力されたhtmlは(わたしの環境では)このようになります。

ここまでのテンプレートがあるんですから、これを使わない手はないですよねー!でも投稿へのリンクが出したいわけではなくて、日付部分はsubmitボタンにして、どのボタンが押されたか特定しないといけないとなると…

こんな形で出力したい

日付の情報をhidden属性で持たせて、ボタンのvalueを日にして、こんな形にして出せばいいのか、な?これなら、

この部分を

こう書くことで、クリックされたボタンと同じform内のhidden属性、dateという名前の「YYYY-MM-DD」というvalueを取得できます。これを、冒頭で現在の日付を格納した$dateへ上書きすることによって、クリックした日付を表示できる、という流れになります。

もうちょっと省コードで

上記のコードでも良いと思うのですが、formとhidden属性と、同じことを書いてる部分が多すぎるような…。。もうちょっと軽くならないかなぁと調べてみたところ、

こんな書き方が!ありがとうございます!!

このようにボタン名の配列に日付情報を持たせれば、

こんな風に書けば良いんじゃないでしょうか。formの記述も1月分で1組にまとめられて、スッキリしました!

カレンダーの関数を作る

では、上記の形のhtmlを出力すべく、関数をつくります。

get_calendar()のカスタマイズ

wp-includes/general-template.phpにあるのをコピーしてきて、get_rsv_calendar(年, 月, YYYY-MM-DD)という関数で呼び出せるよう修正してみます。

functions.php

カスタマイズしたものがこちら。長くてすみません…!週の始まりをいつにするとかそういう一般設定からできるところも極力残しています。

呼び出すget_rsv_calendar(年, 月, YYYY-MM-DD)の3つめの引数の日付と一致するtdにはid=”current”を、本日のtdにはid=”today”を付加するので、CSSで色を調整できます。

WPじゃない場合

ちなみに、普通のPHP+MySQLで動かしたいとき用に、更に上記のコードからWP特有の部分を外したものがこちら。

同じphpファイルに入れて使っております。

ブラウザで見てみる

ちゃんと実装できてれば、現時点ではこのような形になるはず。(Twenty Twelveに組み込んだ例)

140429-2

ちゃんとカレンダーがボタンで出来てますね。クリックして動作を確かめてみましょう。日付が反映されればOKです!

CSSでテキストリンクっぽく

CSSをこんなふうに書いてみると、

140429-3

カレンダーっぽくなりました。クリックした日と本日に色がつきます。もちろん色はお好みで。

今月から3ヶ月分出力する

さて、だいたいこれでOKなのですが、3ヶ月分出したいからと言って

と、書くわけにはいかないですよね。ここも変数で書いてみます。

このように書くことで、本日の日付から計算してカレンダーを取得してくれます。8行目の数値を変えれば、何ヶ月分でも取得できます。

140429-4

キャプチャはこんな感じ。

長かったですね…。お次は登録フォームかな?と思ってます!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2014/04/29
更新日:2014/05/22


9件のコメント

  • こやま
    2014年7月15日 10:51 PM

    サイト見て試しています。
    カレンダーをクリックしても日付がかわりません。
    何故ですか??

    • *you
      2014年7月16日 9:35 AM

      こやまさん、こんにちは。

      PHPソースが分からないので推測でしか言えませんが…。$dateはちゃんと本日を取得しているようですが、カレンダー変数で$dateが上書きされていないような気がします。

      このハイライト部分は書かれていますか?カレンダーをクリックした際に変数を取得して$dateを上書きする部分です。

  • こやま
    2014年7月17日 1:47 PM

    ありがとうございます。
    動きました!
    このサイトを見ながら、この後も進めてみたいと思います。

  • がんじ
    2015年3月20日 2:49 PM

    こちらのサイト拝見しており、初心者ながら私も会議室予約をと思い奮闘しております。
    カレンダーを横並びに配置するにはどのようにおこなっておられるのでしょうか。
    第1回の概要で、タイムテーブルの横並び画像を見るとカレンダーも横並びになっていて綺麗にまとまっているなーと感じました。

    • *you
      2015年3月20日 3:49 PM

      がんじさん、コメントありがとうございます。横並びはCSSですね。

      と、書いてあるところを

      と書けば、横並びになるはずです。試してみてください!

  • やまき
    2016年6月30日 2:19 PM

    こんにちは。
    予約システムの作成に大変参考とさせていただいております。
    WordPressを使用しているのですが、カレンダーの日付をクリックしても「表示する投稿がありません」と表示されます。
    なぜそうなるかの原因がわかれば教えてください。
    また、カレンダーを1週間分だけ表示することはできますか?

    • *you
      2016年6月30日 9:23 PM

      やまきさん、コメントありがとうございます。

      提示しているコード以外の記述やプラグインがある場合は、申し訳ありませんが原因を推測するのは困難です。まっさらなテーマに第8回のソースを使ったほうがコピペミスとか少ないと思うので、まずはそれで動くか確認してからカスタマイズしていってください。1週間分のカレンダーは、この記事で提示しているコードから改変するのは骨が折れそうです。

  • やまき
    2016年7月7日 12:08 PM

    度々失礼します。
    特定の曜日だけ時間割を変更することはできるのでしょうか?

    • *you
      2016年7月7日 12:35 PM

      申し訳ありませんが、そこまでの機能は実装しておりません。

コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top