カレンダー (swasdCat - Calendar Around Today)
本日を起点とし、指定範囲の過去・未来を整形出力する
<!DOCTYPE html ··· > <html ··· ><head ··· > : <script src="swasd.cat/swa.cat.js" type="text/javascript"></script> <script charset="UTF-8" src="swasd.cat/specificStandardJa.js" type="text/javascript"></script> : </head> <body> : </body></html>
注)カレンダー展開位置、デザインが無指定であるとして、強制的に既定の位置、既定のデザインで表示する。
<!DOCTYPE html ··· > <html ··· ><head ··· > : <link href="swasd.cat/YourStyle.css" rel="stylesheet" type="text/css" /> : <script src="swasd.cat/swa.cat.js" type="text/javascript"></script> <script charset="UTF-8" src="swasd.cat/specificStandardJa.js" type="text/javascript"></script> <!-- <script charset="UTF-8" src="swasd.cat/specificStandardEn.js" type="text/javascript"></script> --> <!-- <script src="swasd.cat/withoutSpecific.js" type="text/javascript"></script> --> <!-- <script src="swasd.cat/testing.js" type="text/javascript"></script> --> <script type="text/javascript"><!--//--><![CDATA[//><!-- // - - - - - 「カレンダー作成メソッド」パラメタ - - - - - //_.timeValue=0; // 1970年1月1日0時0分0秒を起点としたミリ秒で当日指定 //_.iso8601Date='2010-01-11'; // ISO8601形式の文字列 //_.uaClock=true; // true: ブラウザー・クロック / false: サーバ・クロック //_._catWeeksBefore=2; // 当日を含む週(含まず)以前の表示週数 //_._catWeeksAfter=4; // 当日を含む週(含まず)以降の表示週数 //_._catCaption='Sample' // キャプションの文字列 //--><!]]></script> : </head> <body> : <!-- <div id="tm-panel"></div> --> : <div id="calendar-container" class="calendar-noscript"></div> : </body></html>
YourStyle.css | sample-*.cssを参考に新規ファイルとして設定 |
specificStandardJa.js, specificStandardEn.js, withoutSpecific.js | 日本語、英語、無指定のいずれかを指定 |
testing.js, tm-panel | テストモード利用以外は不要(実運用時は無指定を推奨) |
captionセル | ||||||||
年月見出しセル | 日曜セル | 月曜セル | 火曜セル | 水曜セル | 木曜セル | 金曜セル | 土曜セル | 年月見出しセル |
: | : | : | : | : | : | : | : | : |
年月見出しセル | 日曜セル | 月曜セル | 火曜セル | 水曜セル | 木曜セル | 金曜セル | 土曜セル | 年月見出しセル |
クラス名 | 摘要 |
---|---|
swasd-cat-table | カレンダー全体(tableエレメント)に設定 |
captionセルに設定 | |
swasd-cat-head | 曜日見出しセルに設定 |
swasd-cat-year-month | 年月見出しセルに設定 |
swasd-cat-sunday | 日曜日セルに設定 |
swasd-cat-saturday | 土曜日セルに設定 |
swasd-cat-weekday | 平日セルに設定 |
swasd-cat-past | 過去セルに設定 |
swasd-cat-today | 本日セルに設定 |
swasd-cat-bound-top | 第一週セルに設定 |
swasd-cat-bound-right | 月末と月初に接する接する月末(晦日)セルに設定 |
swasd-cat-bound-bottom | 月末から遡った一週間のセルに設定 |
swasd-cat-bound-left | 月末と月初に接する接する月初(一日)セルに設定 |
swasd-cat-comment | commentエレメントに設定 |
任意クラス名 | commentエレメントに付加 |
2010-01-11の実例
<table class="swasd-cat-table" cellspacing="0" summary="A calendar around today" ><tr ><td colspan="9" class=" ">Sample Calendar #1</td></tr ><tr ><td class="swasd-cat-year-month swasd-cat-head"> </td ><td class="swasd-cat-sunday swasd-cat-head">日</td ><td class="swasd-cat-weekday swasd-cat-head">月</td ><td class="swasd-cat-weekday swasd-cat-head">火</td ><td class="swasd-cat-weekday swasd-cat-head">水</td ><td class="swasd-cat-weekday swasd-cat-head">木</td ><td class="swasd-cat-weekday swasd-cat-head">金</td ><td class="swasd-cat-saturday swasd-cat-head">土</td ><td class="swasd-cat-year-month swasd-cat-head"> </td></tr ><tr ><td class="swasd-cat-bound-bottom swasd-cat-year-month">2009年12月</td ><td class="swasd-cat-past swasd-cat-bound-bottom swasd-cat-sunday ">27</td ><td class="swasd-cat-past swasd-cat-bound-bottom swasd-cat-weekday ">28</td ><td class="swasd-cat-past swasd-cat-bound-bottom swasd-cat-weekday ">29</td ><td class="swasd-cat-past swasd-cat-bound-bottom swasd-cat-weekday ">30</td ><td class="swasd-cat-past swasd-cat-bound-right swasd-cat-bound-bottom swasd-cat-weekday ">31</td ><td class="swasd-cat-past swasd-cat-bound-top swasd-cat-bound-left swasd-cat-weekday swasd-cat-holiday ">1<div class="swasd-cat-comment">元旦</div></td ><td class="swasd-cat-past swasd-cat-bound-top swasd-cat-saturday ">2</td ><td class="swasd-cat-bound-top swasd-cat-year-month">2010年1月</td></tr ><tr ><td class="swasd-cat-bound-top swasd-cat-year-month"> </td ><td class="swasd-cat-past swasd-cat-bound-top swasd-cat-sunday ">3</td ><td class="swasd-cat-past swasd-cat-bound-top swasd-cat-weekday ">4</td ><td class="swasd-cat-past swasd-cat-bound-top swasd-cat-weekday ">5<div class="swasd-cat-comment swasd-cat-scenery-24sekki">小寒</div></td ><td class="swasd-cat-past swasd-cat-bound-top swasd-cat-weekday ">6</td ><td class="swasd-cat-past swasd-cat-bound-top swasd-cat-weekday ">7</td ><td class="swasd-cat-past swasd-cat-weekday ">8</td ><td class="swasd-cat-past swasd-cat-saturday ">9</td ><td class="swasd-cat-year-month"> </td></tr ><tr ><td class="swasd-cat-year-month"> </td ><td class="swasd-cat-past swasd-cat-sunday ">10</td ><td class="swasd-cat-weekday swasd-cat-today swasd-cat-holiday ">11<div class="swasd-cat-comment">成人の日</div></td ><td class="swasd-cat-weekday ">12</td ><td class="swasd-cat-weekday ">13</td ><td class="swasd-cat-weekday ">14</td ><td class="swasd-cat-weekday ">15</td ><td class="swasd-cat-saturday ">16</td ><td class="swasd-cat-year-month"> </td></tr ><tr ><td class="swasd-cat-year-month"> </td ><td class="swasd-cat-sunday ">17<div class="swasd-cat-comment swasd-cat-scenery-zassetsu">土用</div></td ><td class="swasd-cat-weekday ">18</td ><td class="swasd-cat-weekday ">19</td ><td class="swasd-cat-weekday ">20<div class="swasd-cat-comment swasd-cat-scenery-24sekki">大寒</div></td ><td class="swasd-cat-weekday ">21</td ><td class="swasd-cat-weekday ">22</td ><td class="swasd-cat-saturday ">23</td ><td class="swasd-cat-year-month"> </td></tr ><tr ><td class="swasd-cat-year-month"> </td ><td class="swasd-cat-sunday ">24</td ><td class="swasd-cat-bound-bottom swasd-cat-weekday ">25</td ><td class="swasd-cat-bound-bottom swasd-cat-weekday ">26</td ><td class="swasd-cat-bound-bottom swasd-cat-weekday ">27</td ><td class="swasd-cat-bound-bottom swasd-cat-weekday ">28</td ><td class="swasd-cat-bound-bottom swasd-cat-weekday ">29</td ><td class="swasd-cat-bound-bottom swasd-cat-saturday ">30</td ><td class="swasd-cat-bound-bottom swasd-cat-year-month"> </td></tr ><tr ><td class="swasd-cat-bound-bottom swasd-cat-year-month"> </td ><td class="swasd-cat-bound-right swasd-cat-bound-bottom swasd-cat-sunday ">31</td ><td class="swasd-cat-bound-top swasd-cat-bound-left swasd-cat-weekday ">1</td ><td class="swasd-cat-bound-top swasd-cat-weekday ">2</td ><td class="swasd-cat-bound-top swasd-cat-weekday ">3<div class="swasd-cat-comment swasd-cat-scenery-zassetsu">節分</div></td ><td class="swasd-cat-bound-top swasd-cat-weekday ">4<div class="swasd-cat-comment swasd-cat-scenery-24sekki">立春</div></td ><td class="swasd-cat-bound-top swasd-cat-weekday ">5</td ><td class="swasd-cat-bound-top swasd-cat-saturday ">6</td ><td class="swasd-cat-bound-top swasd-cat-year-month">2010年2月</td></tr ><tr ><td class="swasd-cat-bound-top swasd-cat-year-month"> </td ><td class="swasd-cat-bound-top swasd-cat-sunday ">7</td ><td class="swasd-cat-weekday ">8</td ><td class="swasd-cat-weekday ">9</td ><td class="swasd-cat-weekday ">10</td ><td class="swasd-cat-weekday swasd-cat-holiday ">11<div class="swasd-cat-comment">建国記念の日</div></td ><td class="swasd-cat-weekday ">12</td ><td class="swasd-cat-saturday ">13</td ><td class="swasd-cat-year-month"> </td></tr></table>
new _._specificStandardJa(caltab,cap,dno,yml,tro,cls)
new _._specificStandardEn(caltab,cap,dno,yml,tro,cls)
当ソフトウェアは カレンダー作成メソッド の wrapper として実装したものである。
_.createCalendar(container, containerStyleInit, containerStyleStarted, specific)
container | カレンダー格納用エレメントのid |
containerStyleInit | 同エレメントの初期処理中スタイル(動的スタイル指定) |
containerStyleStarted | 同エレメントのカレンダー表示開始時スタイル(動的スタイル指定) |
specific | 個別指定オブジェクト |
名称 | 値 | 備考 | |
---|---|---|---|
timeValue | Number | 1970年1月1日0時0分0秒を起点としたミリ秒で当日指定。当該項目 undefined で下記有効。 | あらかじめ _.timeValue = 値 または、_.iso8601Date = 値 または、_.uaClock = [true|false] で与える |
iso8601Date | String | ISO8601形式の文字列(ex. 2010-01-11) | |
uaClock | Boolean | true: ブラウザー・クロック / false: サーバ・クロック | |
_catWeeksBefore | Number | 当日を含む週以前の表示週数 | |
_catWeeksAfter | Number | 当日を含む週以降の表示週数 |
名称 | 値 | 備考 |
---|---|---|
caltab | caltab(外部ファイル)を表すストリング | |
sum | tableエレメントのsummary属性に与えるストリング | |
cap | 同captionセルのストリング | |
dno | 曜日名オブジェクト(day name object)タイトル編集用オブジェクト | |
yml | 年月ラベル編集メソッド | |
tro | caltab comment 変換オブジェクト(translate object) | 多言語対応で実装(ひとつのcaltabのcommentを複数表現する為) |
cls | caltab スタイル指定配列を各要素とする配列 |
名称 | 値 | 備考 |
---|---|---|
sun | 日曜日に相当するストリング | exp.'日' or 'Sun' |
mon | 月曜日に相当するストリング | exp.'月' or 'Mon' |
tue | 火曜日に相当するストリング | exp.'火' or 'Tue' |
wed | 水曜日に相当するストリング | exp.'水' or 'Wed' |
thu | 木曜日に相当するストリング | exp.'木' or 'Thu' |
fri | 金曜日に相当するストリング | exp.'金' or 'Fri' |
sat | 土曜日に相当するストリング | exp.'土' or 'Sat' |
function (year,month) { return yearとmonthで編集; }
名称 | 値 | 備考 |
---|---|---|
caltabのcommentフィールド値 | 対応する変換値 |
No. | 値(type) | 備考 |
---|---|---|
1 | 主クラス(String) | 主クラス+副クラスでユニークとなるcaltabエントリへ下記を適用。注:ここでいうクラスとはcaltab内分類の意味でHTML表現上のクラスとは別 |
2 | 副クラス(String) | |
3 | セル・スタイル(String) | 日付セルに付与するクラス名(スタイルシートでスタイル定義) |
4 | コメント・スタイル(String) | 日付セル内コメント部に付与するクラス名(スタイルシートでスタイル定義) |
5 | title有無(Boolean) | 日付セルへのtitle属性付加の有/無 |
6 | comment不要・有無(Boolean) | 日付セル内へcomment挿入なしの有/無(注:false時は有となる) |
名称 | 値 | 備考 |
---|---|---|
build | 構築メソッド | |
_edit | 整形メソッド |
build(timeValue)
timeValue | 表示するカレンダーの本日を表す。1970年1月1日0時0分0秒を起点としたミリ秒。 |
_edit()