営業日を表示するカレンダーのスクリプトを無料でダウンロードできます。
名称は「ビジネスカレンダー(Business Calendar)」ということにしました。
普通です。ありきたりです。ネーミングに捻りがありません。
現在の最新バージョンは2019年10月11日公開の5.0です。
参考ページ:プログラムをアップデートするの際の思想について
各バージョンのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。
HTMLページにも表示することができ、カレンダーのデザインはすべてCSSで変更できます。
特に、管理画面の使いやすさ・わかりやすさは素晴らしいのではないでしょうか?
PCに不慣れなご年配の方でも確実に使えるでしょう。
主な特徴は以下の通り。
ビジネスカレンダー表示ページのサンプル
このようなカレンダーを既存のサイト内に組み込む設計になっています。
管理画面のサンプル
ユーザ名は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>
ディレクトリ階層が変わる場合は、それぞれのパス部分を適宜変更してください。
上記の解説の通り、このプログラムは既存のページには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)で自由に変更してください。(各セルの縦幅など)
カレンダーの横幅や縦幅の変更など、具体的なデザインカスタマイズに関しては以下のページで解説しています。
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>の中に挿入されるとお考えください。
設置の代行は10,000円(1つにつき・税抜)でお引き受けしています。
これは購入時に申し込む必要はありません。
まずはご自身でチャレンジしてみて、どうしようもなくなった時に設置代行を依頼されてもオーケーです。
設置代行はダウンロードしたままの初期状態のものを設置する形になります。
お客様の手によってカスタマイズされたものを設置するサービスではありませんのでご了承ください。
サイトによってはページ内に組み込むまでをサービスできる場合もあります。ご相談ください。
ビジネスカレンダーには以下の追加機能(アドオン)を用意しております。
各アドオンは併用することが可能ですので、ご自身にとって必要な機能だけを追加して使用することができます。
ビジネスカレンダー 本体バージョン |
次月表示 アドオン |
祝日自動設定 アドオン |
半休日追加 アドオン |
---|---|---|---|
1.0 | × | × | × |
2.0 | × | 1.0~1.1 | × |
2.0.1 | × | 1.0~1.1 | × |
2.0.2 | × | 1.0~1.1 | × |
3.0 | 1.0~1.0.1 | 1.0~1.1 | × |
3.0.1 | 1.0~1.0.1 | 1.0~1.1 | × |
4.0 | 2.0 | 1.0~1.1 | × |
5.0 | 3.0 | 2.0 | 1.0 |
※ 上記表は横スクロールできます。
※ バージョンが少しズレていても正常に動作する場合もありますが、上記表の通りの組み合わせなら間違いがありません。