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);
  }
 }
}