Yahoo! UI Library: Calendarにリンク作成

Yahoo! UI Libraryで提供されているcalendar.js(カレンダー)の日付にリンクを作成します。 ブログ等で見られるカレンダーの日付に リンクが作成されたカレンダーです。

Yahoo! UI Library: Calendarのオーバーライド

日付にリンクを作成するには、renderCellDefaultをオーバーライドします。次の例では、配列の添え字と日付 を対応させているので実際には、使い道は無いと思いますが連想配列等にすることでブログっぽいカレンダー が作成できます。

var links = new Array();

links[1] = "http://www.1";
links[2] = "http://www.2";
links[3] = "http://www.3";

bn_calendar = function(id, containerId,  monthyear, selected) {
  if (arguments.length > 0){
    this.init(id, containerId, monthyear, selected);
  }
  bn_calendar.prototype.renderCellDefault = function(workingDate, cell){
    cell.innerHTML = "";
    if(links[workingDate.getDate()]){
      var link = document.createElement("a");

      link.href=links[workingDate.getDate()];
      link.name=this.id+"__"+workingDate.getFullYear()
               +"_"+(workingDate.getMonth()+1)
               +"_"+workingDate.getDate();

      link.appendChild(document.createTextNode(this.buildDayLabel(workingDate)));
      cell.appendChild(link);
    }
    else{
      cell.appendChild(document.createTextNode(this.buildDayLabel(workingDate)));
    }
  }
}
bn_calendar.prototype = new YAHOO.widget.Calendar();

var cal1;

function init() {
  cal1 = new bn_calendar("cal1","cal1Container","05/2006");
  cal1.render();
}