営業日や定休日を表示するカレンダーの無料ダウンロード

公開日

2017年5月13日

最終更新日

2021年10月25日

著者

Motohiro Tani

営業日を表示するカレンダーのスクリプトを無料でダウンロードできます。
名称は「ビジネスカレンダー(Business Calendar)」ということにしました。
普通です。ありきたりです。ネーミングに捻りがありません。

現在の最新バージョンは2019年10月11日公開の5.0です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

主な機能や特長

HTMLページにも表示することができ、カレンダーのデザインはすべてCSSで変更できます。
特に、管理画面の使いやすさ・わかりやすさは素晴らしいのではないでしょうか？
PCに不慣れなご年配の方でも確実に使えるでしょう。

主な特徴は以下の通り。

1. レスポンシブでスマホ表示対応。(バージョン4.0以降)
2. 著作権表示不要。(バージョン3.0以降)
3. HTMLページに組み込める。
4. WordPressサイト内でも使える。
5. データベース不要。
6. Ajaxでカレンダーを表示させることにより、前月・次月への切り替えにはページの移動なし。(管理画面ではページ移動があります)
7. カレンダーのデザインはすべてCSSにて変更可能。
8. CSSによって1つのdiv要素の横幅を調整するだけで、既存サイトのサイドバー部分などに組み込むことが可能。
9. 管理画面の操作がわかりやすいので、教育コスト不要。
10. 管理画面で登録や削除をした後、ブラウザの「戻る」や「進む」ボタンでページを行き来しても、再送信されない仕様。
11. 美しいHTML。W3C準拠。HTML5・CSS3で文法エラーなし。
12. 次月以降を何ヶ月でも同時に表示するアドオンを追加可能。
13. 祝日を自動設定するアドオンを追加可能。
14. 半休日(別枠の定休日)を設定できるようになるアドオンを追加可能。

サンプルとダウンロード

ビジネスカレンダー表示ページのサンプル
このようなカレンダーを既存のサイト内に組み込む設計になっています。

管理画面のサンプル
ユーザ名はtani、パスワードは0000です。

ビジネスカレンダーのダウンロード

使い方の説明(基本設置方法)

1、ビジネスカレンダーをダウンロードし、解凍する。

2、フォルダごとアップロードする。

3、ブラウザでindex.htmlにアクセスしてみて、カレンダーが表示されるかどうかの確認をする。

4、config.phpを開き、管理画面にログインするためにユーザー名とパスワードを設定する。

//【必須】 管理者ユーザー名
$bc_admin_user = 'tani';

//【必須】 管理者ログインパスワード
$bc_admin_pass = '0000';

この管理者ログイン画面は、

business-calendar/php/admin.php
business-calendar/php/login.php (バージョン4.0以降に存在)

にブラウザでアクセスすればOKです。(上記どちらでもOK)
以上です。

「定休日」の文字列を変更したい場合

バージョン3.0からカレンダー下にある「定休日」の文字列を変更できるようになりました。

config.phpの8行目にある以下の部分で自由に変更してください。(以下は「休業日」に変更する例)

//【任意】 カレンダーの下に表示される「定休日」の文字設定
$bc_holiday_string = '休業日';

他にも「8:00～17:00」など、自由な文字列をここで設定できます。

既存サイトに組み込む方法

上記のサンプルのカレンダー表示ページ(index.html)のソースを見るとわかるように、HTMLファイル内の以下の部分にカレンダーをAjaxによって表示させております。

ですので、まずは以下のコードを既存サイトのページに貼り付けます。

<div id="business-calendar"></div>

次に、index.html内に記述されている以下のCSS・JavaScriptファイルの読み込みコードを既存サイトに貼り付けます。

<link rel="stylesheet" href="business-calendar/css/reset.css" />
<link rel="stylesheet" href="business-calendar/css/business-calendar.css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="business-calendar/js/business-calendar-js.php"></script>

ディレクトリ階層が変わる場合は、それぞれのパス部分を適宜変更してください。

iframeでの組み込みを採用していない理由

上記の解説の通り、このプログラムは既存のページにはAjaxで組み込みます。
iframe方式を採用していない理由については以下のページで解説していますので、気になる方はどうぞ。
プログラムをiframe、またはAjaxで組み込んだ際の違い

カレンダー表示のカスタマイズ方法

カレンダーの横幅を狭めたり広げたりする場合は、CSS(business-calendar.css)によって上記の<div id=”business-calendar”></div>のwidthを変更するだけでOKとなります。(以下のコードを参照)

div#business-calendar{
  width : 300px;  /* カレンダーの横幅はここで調整 */
  margin : 0 auto;  /* 既存のページに組み込む場合は、この中央寄せの設定は不要 */
  position : relative;  /* 前月・次月をクリックした際のローディング画像の位置調整のため必要 */
  line-height : 1.8;  /* 各セルの縦幅はここで調整 */
  font-size : 90%;
}

基本的には横幅を調整するだけで、既存サイトのサイドバー部分などに組み込むことができるでしょう。簡単だ！素晴らしい。自分で使いたいぐらいだ！
それ以外のデザインを変更したい場合はCSSファイル(business-calendar.css)で自由に変更してください。(各セルの縦幅など)

カレンダーの横幅や縦幅の変更など、具体的なデザインカスタマイズに関しては以下のページで解説しています。

• ビジネス・カレンダーのデザイン変更の解説

カレンダーのHTMLソースを確認する方法

Ajaxでカレンダーを表示させている関係上、上記の<div id=”business-calendar”></div>内に挿入されるカレンダーのソースはHTML上に表示されません。

そのため、カレンダーのソースを確認したい場合は、以下のファイル(index.php)にブラウザで直接アクセスすることで確認ができます。
このページのHTMLソースを確認してみてください。
https://www.1-firststep.com/samplephp/business-calendar-v5.0/business-calendar/php/index.php

このindex.phpのHTMLがindex.html内の<div id=”business-calendar”></div>の中に挿入されるとお考えください。

使用している外部ライブラリ

jQuery：jquery.min.js

https://jquery.com/

注意点

サポートに関して

設置代行サービスや独自カスタマイズについて

設置の代行は10,000円(1つにつき・税抜)でお引き受けしています。
これは購入時に申し込む必要はありません。
まずはご自身でチャレンジしてみて、どうしようもなくなった時に設置代行を依頼されてもオーケーです。

設置代行はダウンロードしたままの初期状態のものを設置する形になります。
お客様の手によってカスタマイズされたものを設置するサービスではありませんのでご了承ください。

サイトによってはページ内に組み込むまでをサービスできる場合もあります。ご相談ください。

追加アドオン(追加機能)について

ビジネスカレンダーには以下の追加機能(アドオン)を用意しております。
各アドオンは併用することが可能ですので、ご自身にとって必要な機能だけを追加して使用することができます。

【次月表示アドオン】

来月以降の月が何ヶ月でもまとめて表示されるようになります。

【祝日自動設定アドオン】

祝日が自動的に設定されます。(最初にGoogleカレンダーAPIの取得作業が必要になります)

【半休日追加アドオン】

半休日を追加設定できるようになります。(「半休日」ではなく「13:00~20:00まで営業」など表示させる文字列は自由。別枠の休日を設定できます)

ビジネスカレンダーのアドオン互換表

※ 上記表は横スクロールできます。
※ バージョンが少しズレていても正常に動作する場合もありますが、上記表の通りの組み合わせなら間違いがありません。

アップデート履歴

2012/10/05　バージョン1.0

• 公開。

2017/05/14　バージョン2.0

• 全面リニューアル。

2017/05/30　バージョン2.0.1

• Chromeで「前月」と「次月」の表示がずれる件を修正。

2017/07/13　バージョン2.0.2

• 「前月」と「次月」の文字の横にある矢印をクリックした際に反応がない点を修正。

2018/01/12　バージョン3.0

• 著作権表示を無くしました。
• 管理画面でのカレンダー表示を正方形に近い形にしました。
• 「定休日」の文字をconfig.phpで変更できるようになりました。
• 前月・次月をクリックした際に、ローディング画像が表示されるようになりました。
• 次の月を同時に表示するアドオンを追加。
• その他、細かなバグ修正など。

2018/01/22　バージョン3.0.1

• 軽微なバグ修正。
• バージョン3.0.1のダウンロード

2018/10/24　バージョン4.0

• 公開するカレンダーページ(index.html)・管理画面(login.php, admin.php)共にレスポンシブでスマホ対応。
• 既存サイトに組み込みやすいようにHTMLやCSSを調整。
• import.cssをなくしました。
• 公開するカレンダーページ(index.html)でのWebフォントの使用を廃止。(ページが重くなるため)
• PHPのファイル構成の最適化。
• 次月表示アドオンのバージョンアップに対応。

2019/10/11　バージョン5.0

• 半休日追加アドオンを追加。
• 既存サイトに組み込む際には必要のないCSSをindex.htmlのhead要素内にインライン化。
• 管理画面のWebアイコンを容量の軽いものに変更。