オープンソース JavaScript:SmartCalendarを公開

　トップページ　→　アンカーラボ　→　オープンソース - JavaScript:SmartCalendar

アンカーラボ（アンカー研究室）

(オープンソース) JavaScript: SmartCalendar

SmartCalendarはCGIを使わずにJavaScriptのみでカレンダーを表示します。
日付を指定して文字の色を変更したり、当日の背景を変更したりとCSSで自由にデザインが可能です。定休日カレンダーなどにどうぞ。

SmartCalendar設置例: ここにカレンダーを表示します

ロード設定
<body onload="new smartCalendar().display('Calendar');">
表示したい場所に<div id="Calendar"></div>を記述し、ロード時にidを指定します。display('Calendar')。

設置方法: 下記のコードを適切な部分に貼り付けてご利用ください。
※下記の例はJavaScriptファイルの場所がhtmlファイルと同階層の場合です。
※重要な部分は赤文字になっています。
下記のファイルを右クリックから保存でダウンロードしてください。
[ソースコード：smartcalendar-0.0.2.js]
[ソースコード：smartcalendar-config.js]
※これらのファイルは文字コードがUTF-8となっていますので、設置するページの文字コードに合わせてご利用ください。

<!-- <head>～に記述</head> -->
<style type="text/css">
table.Calendar_table {
}
table.Calendar_th_Year {
}

th.Calendar_th_Sunday {
}
th.Calendar_th_Monday {
}
th.Calendar_th_Tuesday {
}
th.Calendar_th_Wednesday {
}
th.Calendar_th_Thursday {
}
th.Calendar_th_Friday {
}
th.Calendar_th_Saturday {
}

td.Calendar_td_Sunday {
}
td.Calendar_td_Monday {
}
td.Calendar_td_Tuesday {
}
td.Calendar_td_Wednesday {
}
td.Calendar_td_Thursday {
}
td.Calendar_td_Friday {
}
td.Calendar_td_Saturday {
}

td#Calendar_td_Today {
}

td.Calendar_td_holiday {
}
</style>

<script type="text/javascript" src="smartcalendar.js"></script>
<script type="text/javascript" src="smartcalendar-config.js"></script>
<!-- <head>～に記述</head> -->

<body onload="new smartCalendar().display('Calendar');">

<!-- <body>～</body> -->
<div id="Calendar"></div>
<!-- <body>～</body> -->

改版履歴: Ver.0.0.2
[Mod] tableの表示がおかしかったバグを修正
松崎様からのご連絡によりバグが判明しました、ありがとうございました
--
Ver.0.0.1
お問い合せ: バグ・要望のご連絡はこちらへお願い致します。
email：labo@anchor-gr.jp
また、設置方法のアドバイスや設置代行作業(有料)も行っております。お気軽にお問い合せ下さい。

SmartCalendarスクリプト仕様

smartCalendar(year, month): 初期化メソッドです。newで生成してください。
例）var cal = new smartCalendar();
※year,monthを省略することで当月を表示します。

パラメータ値	デフォルト値	備考
year	当年	省略可。年をyyyyの形式で指定。例）2010
month	当月	省略可。月をyyの形式で指定。例）05

display(id): カレンダーを生成し、対応するidのinnerHTMLに代入し表示します

パラメータ値	デフォルト値	備考
id		省略不可。idを指定。例）Calendar

CSSクラス仕様: "Calendar_"部分はprefixプロパティで指定が可能です; table要素[class=Calendar_table]
年月th要素[class=Calendar_th_Year]; 日曜th要素[class=Calendar_th_Sunday]
月曜th要素[class=Calendar_th_Monday]
火曜th要素[class=Calendar_th_Tuesday]
水曜th要素[class=Calendar_th_Wednesday]
木曜th要素[class=Calendar_th_Thursday]
金曜th要素[class=Calendar_th_Friday]
土曜th要素[class=Calendar_th_Saturday]; 日曜td要素[class=Calendar_td_Sunday]
月曜td要素[class=Calendar_td_Monday]
火曜td要素[class=Calendar_td_Tuesday]
水曜td要素[class=Calendar_td_Wednesday]
木曜td要素[class=Calendar_td_Thursday]
金曜td要素[class=Calendar_td_Friday]
土曜td要素[class=Calendar_td_Saturday]; 当日td要素[id=Calendar_td_Today]
※当日のみid指定になります; 指定日td要素[class=Calendar_td_***]
※***はswapプロパティで指定したclass名

SmartCalendar-Configスクリプト仕様

プロパティ: smartcalendar-config.jsに記述します
※smartcalendar.jsの直後に読み込む必要があります。

プロパティ名	デフォルト値	備考
prefix	"Calendar_"	省略可。table要素・th要素・td要素にはそれぞれclass属性が生成されます。そのclass名が他コンテンツのものと重複しないようにする事が出来ます。例）CAL_
limit	2	省略可。表示する月数を指定。例）12
swap		省略可。"日付:class名:title文字列"の形式で指定。例）※配列での指定 "2009/01/01:holiday:元旦", "2009/01/12:holiday:成人式"

ご利用条件

アンカーラボで公開している全ては、通常、商用利用をお断りしておりますが、オープンソースの表示がある場合はこの限りではありません。どなたでも自由にご利用が可能です。
※ホームページ制作会社(ホームページ制作関連の業者・デザイン会社含む)が自社のページに設置する場合に限り商用ページに設置が可能です
弊社トップページへのリンクをして頂きます。設置箇所付近又は、設置ページのCopyright付近に目立たないよう小さくでも結構です。
<a href="http://www.anchor-gr.jp/" title="オープンソースアンカーラボ">Powered by アンカーグループ</a>
表示例）→ Powered by アンカーグループ
アクセス数があまりにも多い場合は、一時的に制限させて頂く場合がございます。
※常時負荷が大きい場合はご相談させて頂きます
電源メンテナンス・セキュリティアップデート等でサーバを再起動する場合、一時的にアクセスが出来なくなる事があります。
※通常3分以内で完了します。長時間のダウンタイムが発生する場合のみ当ホームページで告知致します。

ホームページ作成、WEB制作は
仙台市のアンカー！
ホームページ制作、開発
仙台市内|名取|岩沼|白石
亘理|大河原|角田|仙南|仙北
宮城県内お伺い致します。

営業カレンダー

※赤文字は定休日です

2024年4月
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30
2024年5月
日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

【 WEBシステム・SSLVPN 】
WEBシステム開発・構築

アンカー・グループ株式会社
〒980-0022 宮城県仙台市青葉区五橋1-1-58 ダイアパレス仙台中央617
電話番号：022-342-1556　ファックス：022-342-1557
(C) Anchor Group K.K.