TiddlyWiki カレンダー表示
カレンダー表示のマクロを作ってみた。
使い方は、<
パラメータ | 備考 |
対象月の1日 | Date.parse可能な日付フォーマットで。日本語環境だと、YYYY/MM/DDかな。2007/05/01とか。"-"等不正にすると当月になります |
特別日 | 特別に背景色を設定したい日付。適当区切り(ジャーナルフォーマットに使ってない文字で区切ること)・1〜9日はゼロ補填。初期は""(なし)。"2007/05/03,2007/05/04"とか、ジャーナルフォーマット形式で指定 |
ジャーナルフォーマット | 日付のリンク先tiddlerのタイトルフォーマット。初期は"DD MMM YYYY"だけど、日本的には"YYYY/MM/DD"か? |
表示フォーマット | カレンダーに表示する日付のフォーマット。初期は"DD"。0をつけたい場合は"0DD" |
特別日表示色 | 特別日の背景色。初期は日曜表示色に同じ |
対象月以外の表示色 | 週の始まりが1日でない場合、前月も表示するがその時の背景色。初期は"#CCCCCC"。"gray"といった指定も可 |
土曜表示色 | 対象月の土曜の背景色。初期は"#CCCCFF" |
日曜表示色 | 対象月の日曜の背景色。初期は"#FFCCFF" |
開始曜日 | 週の始まりの曜日指定。日曜:0〜土曜:6。初期は「0」(日曜)。月曜「1」始まりにする場合は、ヘッダ表示文字列も直してください |
ヘッダ表示文字列 | 次のパラメータ、開始曜日にあわせて表示したい文字列を設定。初期は"SunMonTueWedThuFriSat"。月曜始まりで日本語表示なら"月火水木金土日"とか |
ヘッダ文字位置 | ヘッダのAlign属性。初期は"center"(中央寄せ) |
日付文字位置 | 日付のAlign属性。初期は"right"(右寄せ) |
例
- 今月を表示する
- <
>
- <
- 2007年5月を表示する
- <
> - 休日を考えると、<
>とかすると良いかもしれません。 - 月曜開始で色も変えるなら、<
>とか。
- <
config.macros.viewCalendar = {}; config.macros.viewCalendar.handler = function(place,macroName,params) { // read parameters // var targetDate = new Date(); targetDate.setDate(1); var targetDateStr = params[0] ? params[0] : targetDate.toString(); var special = params[1] ? params[1] : ""; var journalFormat = params[2] ? params[2] : "DD MMM YYYY"; var displayFormat = params[3] ? params[3] : "DD"; var diffeMon = params[5] ? params[5] : "#CCCCCC"; var satColor = params[6] ? params[6] : "#CCCCFF"; var sunColor = params[7] ? params[7] : "#FFCCFF"; var speColor = params[4] ? params[4] : sunColor; var startDay = params[8] ? params[8] : 0; var headerStr = params[9] ? params[9] : "SunMonTueWedThuFriSat"; var headerAlign = params[10] ? params[10] : "center"; var bodyAlign = params[11] ? params[11] : "right"; var weekNum = 7; // init // var nTime = Date.parse(targetDateStr); if(!isNaN(nTime)) targetDate.setTime(nTime); else if(!isNaN(targetDateStr)) targetDate.setTime(targetDateStr); var startDate = new Date(); nTime = targetDate.getTime(); var nTargetDay = targetDate.getDay(); if(nTargetDay < startDay) nTargetDay += weekNum; startDate.setTime(nTime - (nTargetDay - startDay) * 24 * 3600000); var nTargetYear = targetDate.getYear(); var nTargetMonth = targetDate.getMonth(); // make header // var theTable = createTiddlyElement(place, "table"); var theTableHead = createTiddlyElement(theTable, "thead"); theTableHead = createTiddlyElement(theTableHead, "tr"); var headerLen = headerStr.length / weekNum; for(i=0; i < headerStr.length; i+=headerLen) { var e = createTiddlyElement(theTableHead, "th", null, null, headerStr.substr(i,headerLen)); e.align = headerAlign; } // make body // var reSla = new RegExp("/","g"); var theTableBody = createTiddlyElement(theTable, "tbody"); while((startDate.getYear() == nTargetYear && startDate.getMonth() <= nTargetMonth) || startDate.getYear() < nTargetYear) { var theTableRecord = createTiddlyElement(theTableBody,"tr"); for(i=0; i < weekNum; i++) { var theElement = createTiddlyElement(theTableRecord,"td"); theElement.align = bodyAlign; var e = createTiddlyLink(theElement, startDate.formatString(journalFormat), false); createTiddlyText(e, startDate.formatString(displayFormat)); // paint backgroundColor // var re = new RegExp(startDate.formatString(journalFormat).replace(reSla,"\\/")); if(startDate.getMonth() != nTargetMonth) theElement.style.backgroundColor = diffeMon; else if(special.match(re)) theElement.style.backgroundColor = speColor; else if(startDate.getDay() == 6) theElement.style.backgroundColor = satColor; else if(startDate.getDay() == 0) theElement.style.backgroundColor = sunColor; startDate.setTime(startDate.getTime() + 24 * 3600000); } } }