トップページ
プログラムのダウンロード
営業日や定休日を表示するカレンダーの無料ダウンロード

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

公開日 : 2017年5月13日
最終更新日 : 2017年9月13日

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

現在の最新バージョンは7月13日公開の2.0.2です。

機能やサンプル

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

HTMLページに組み込める。
データベース不要。
Ajaxでカレンダーを表示させることにより、前月・次月への切り替えにはページの移動なし。(管理画面ではページ移動があります)
カレンダーのデザインはすべてCSSにて変更可能。
CSSによって1つのdiv要素の横幅を調整するだけで、既存サイトのサイドバー部分などに組み込むことが可能。
管理画面の操作がわかりやすいので、教育コスト不要。
管理画面で登録や削除をした後、ブラウザの「戻る」や「進む」ボタンでページを行き来しても、再送信されない仕様。
美しいHTML。W3C準拠。HTML5文法エラーなし。
祝日を自動設定するアドオンを追加可能。

ビジネスカレンダー表示ページのサンプル: https://www.1-firststep.com/samplephp/business-calendar-v2.0.2/index.html
管理画面のサンプル: https://www.1-firststep.com/samplephp/business-calendar-v2.0.2/business-calendar/php/admin.php
ユーザ名はtani、パスワードは0000です。
ビジネスカレンダーのダウンロード: https://www.1-firststep.com/samplephp/download/php/download.php?file=business-calendar-v2.0.2.zip

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

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

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

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

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

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

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

以上です。

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

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

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

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

<link rel="stylesheet" type="text/css" href="business-calendar/css/import.css" />
<link rel="stylesheet" type="text/css" href="business-calendar/css/business-calendar.css" />

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

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

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

カレンダーの横幅を狭めたり広げたりする場合は、CSS(business-calendar.css)によって上記の<div id=”business-calendar”></div>のwidthを変更するだけでOKとなります。
簡単だ！素晴らしい。自分で使いたいぐらいだ！

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

また、Ajaxでカレンダーを表示させている関係上、上記の<div id=”business-calendar”></div>内に挿入されるカレンダーのソースは表示されません。
そのため、カレンダーのソースを確認したい場合は、以下のファイル(index.php)に直接アクセスすることで確認ができます。
https://www.1-firststep.com/samplephp/business-calendar-v2.0.1/business-calendar/php/index.php

このindex.phpをindex.html内の<div id=”business-calendar”></div>内に表示させているとお考えください。