オープンソース 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:成人式"

ご利用条件

  1. アンカーラボで公開している全ては、通常、商用利用をお断りしておりますが、オープンソースの表示がある場合はこの限りではありません。どなたでも自由にご利用が可能です。
    ※ホームページ制作会社(ホームページ制作関連の業者・デザイン会社含む)が自社のページに設置する場合に限り商用ページに設置が可能です
  2. 弊社トップページへのリンクをして頂きます。設置箇所付近又は、設置ページのCopyright付近に目立たないよう小さくでも結構です。
    <a href="http://www.anchor-gr.jp/" title="オープンソース アンカーラボ">Powered by アンカーグループ</a>
    表示例)→ Powered by アンカーグループ
  3. アクセス数があまりにも多い場合は、一時的に制限させて頂く場合がございます。
    ※常時負荷が大きい場合はご相談させて頂きます
  4. 電源メンテナンス・セキュリティアップデート等でサーバを再起動する場合、一時的にアクセスが出来なくなる事があります。
    ※通常3分以内で完了します。長時間のダウンタイムが発生する場合のみ当ホームページで告知致します。
  • 仙台のホームページ制作・WEBシステム開発会社
  • 仙台でホームページ制作なら022-342-1556
  • ホームページ作成、WEB制作は
    仙台市のアンカー!
  • お問合せフォーム
  • EVSSL
  • 無料お見積フォーム
  • ホームページ制作、開発
  • 仙台市内|名取|岩沼|白石
    亘理|大河原|角田|仙南|仙北
    宮城県内お伺い致します。

営業カレンダー

※赤文字は定休日です

2024年12月
1234567
891011121314
15161718192021
22232425262728
293031
2025年1月
1234
567891011
12131415161718
19202122232425
262728293031