空気を読まずに月別カレンダーを生成するJavascriptを書いたのでご紹介です。
jQueryなどのライブラリは使ってないので好きなものと組み合わせて使えます。
sampleページにしてみました。

使い方は簡単

1.newしてやりつつコンストラクタに値を渡して

config.caption

キャプションの有無 (true | false),デフォルトはfalse

config.className

カレンダーのテーブルやセルに付くクラス名やIDの接頭値,デフォルトは’calender’

config.daynames

デフォルトは[‘日’,’月’,’火’,’水’,’木’,’金’,’土’]曜日ラベルを配列で

config.dayclass

デフォルトは[‘sun’,’mon’,’tue’,’wed’,’thu’,’fri’,’sat’]曜日のクラス名を配列で

2.メソッドを呼ぶ

• calenderClass.make_cal_today()：今日を基準に今月のカレンダー
• calenderClass.make_cal_today(-1,2)：今日を基準に引数1を年に、引数2を月に足したカレンダー（例:去年の再来月）
• calenderClass.make_cal_monthly(2009,12)：指定年,月のカレンダー

3.戻り値

戻り値はテーブルタグのHTMLオブジェクト形式です。なのでそのまま`innerHTMLはできません。appendChildとかでお願いします。

4.こんなんになる

• th、tdには曜日のクラス名とconfig.className+”Date”+${date}がIDにセットされる
• 当日のセルにはrel=”today”がセットされる

本当になんの特徴もない普通のカレンダー生成ですが意外といいのない気がするんですよねー探してないだけない気がしますが。
デザインはCSSでやるからデザイン要素入れないで！っていうこういうシンプルなライブラリが好きです。
ソースコードは続きから。ご自由にどうぞ。不具合はご報告いただけると勉強になります！
（ただし、このコードを利用して起こったいかなることにも責任は持ちません。）

var _calenderClass = function(config){
  //set default vlues
  if(!config) var config = {};
  this.iscaption  = (typeof config.caption   != "undefined") ? config.caption : false;
  this.className  = (typeof config.className != "undefined") ? config.className : 'calender';
  this.daynames   = (typeof config.daynames  != "undefined") ? config.daynames : ['日','月','火','水','木','金','土'];
  this.dayclass   = (typeof config.dayclass  != "undefined") ? config.dayclass : ['sun','mon','tue','wed','thu','fri','sat'];
  var DateObj = new Date();
  this.today = [DateObj.getDate(),DateObj.getMonth(),DateObj.getFullYear()];
  return this;

};
_calenderClass.prototype = {
  leap: function(year){
    return year % 4 ? 0 : year % 100 ? 1 : year % 400 ? 0 : 1;
  },
  make_cal_array: function(year,monthly){//1year days

    var months = [31, 28 + this.leap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var result = [];
    for (var month = 0; month < 12; month++){

      result[month] = [];
      var date1day = (new Date(year, month, 1, 0, 0, 0)).getDay();
      var dateLastDay = (new Date(year, month, months[month], 0, 0, 0)).getDay();
      for (var date = 1; date <= months[month]+(6-dateLastDay); date++){

        if(date <= months[month] && monthly) {
          result[month][date + date1day - 1] = date;
        }else if(date <= months[month]){

          result[month][date - 1] = date;
        }else if(monthly) {//to table cell remainder

          result[month][date + date1day - 1] = false;
        }
      }

    }
    return result;
  },
  make_cal_monthly: function(year, month){//make calender
    var monthLabel = month - 1;//to Array label

    var cal = this.make_cal_array(year,true);
    var table = document.createElement('table');
    // header

    var tr = document.createElement
('tr');
    for (var day = 0; day < 7; day++){//label of day

      var th = document.createElement('th');
      th.innerHTML = this.daynames[day];
      th.className = this.dayclass[day];
      tr.appendChild(th);
    }

    var thead = document.createElement('thead');
    thead.appendChild(tr);
    table.appendChild(thead);
    // body;
    var tbody = document.createElement('tbody');
    for (var date = 0, fullday = cal[monthLabel].length; date < fullday; date++){

      if (date % 7 == 0) tr = document.createElement('tr');
      var td = document.createElement('td');
      if(this.today[0] == date && this.today[1] == monthLabel &&  this.today[2] == year) {

        td.setAttribute("rel","today");//today attribute
      }
      td.id = (typeof cal[monthLabel][date] != "undefined") ? this.className + "Date" + cal[monthLabel][date] : "";//set id name for date

      if (cal[monthLabel][date]){
        td.innerHTML = cal[monthLabel][date];
        td.className = this.dayclass[date % 7];//add class

      }else {
        td.className = "nodate";//add class nodate
        td.innerHTML = "&nbsp;";
      }

      tr.appendChild(td);
      if (date % 7 == 6) tbody.appendChild(tr);
    }
    tbody.appendChild(tr);
    table.className = this.className;//add id for table
    table.id        = this.className + year + "-" + month;//add id for table

    table.setAttribute("rel",(year +"-"+ (month)));
    if(this.iscaption) {//is caption
      var caption = document.createElement('caption');
      caption.innerHTML = year + '-' + (month)+' JAPAN';
      table.appendChild(caption);
    }

    table.appendChild(tbody);
    
    return table;
  },
  make_cal_today: function(yearPlus,monthPlus){
    var monthPlus  = (typeof monthPlus   != "undefined") ? monthPlus : 0;
    var yearPlus   = (typeof  yearPlus   != "undefined") ? yearPlus  : 0;
    return this.make_cal_monthly(this.today[2] + yearPlus , this.today[1] + monthPlus);
  }

};

Share on Tumblr

Tweet